forked from Shinonome/dots-hyprland
taskbar: window previews
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import qs.modules.common
|
||||
import qs.modules.common.functions
|
||||
import qs.modules.waffle.looks
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
|
||||
property bool shiny: true // Top border
|
||||
property color borderColor: ColorUtils.transparentize(Looks.colors.bg1Border, shiny ? Looks.contentTransparency : 1)
|
||||
color: Looks.colors.bg1Hover
|
||||
radius: Looks.radius.medium
|
||||
Behavior on color {
|
||||
animation: Looks.transition.color.createObject(this)
|
||||
}
|
||||
Behavior on borderColor {
|
||||
animation: Looks.transition.color.createObject(this)
|
||||
}
|
||||
onBorderColorChanged: {
|
||||
borderCanvas.requestPaint();
|
||||
}
|
||||
|
||||
// Top 1px border with color
|
||||
Canvas {
|
||||
id: borderCanvas
|
||||
anchors.fill: parent
|
||||
onPaint: {
|
||||
var ctx = getContext("2d");
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
var borderColor = root.borderColor;
|
||||
|
||||
var r = root.radius;
|
||||
var fadeLength = Math.max(1, r);
|
||||
var fadeLengthPercent = fadeLength / width;
|
||||
|
||||
// Compute normalized stops
|
||||
var leftFadeStop = fadeLengthPercent;
|
||||
var rightFadeStop = 1 - fadeLengthPercent;
|
||||
|
||||
var grad = ctx.createLinearGradient(0, 0, width, 0);
|
||||
grad.addColorStop(0, Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0));
|
||||
grad.addColorStop(leftFadeStop, borderColor);
|
||||
grad.addColorStop(rightFadeStop, borderColor);
|
||||
grad.addColorStop(1, Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0));
|
||||
|
||||
ctx.strokeStyle = grad;
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(r, 0.5);
|
||||
ctx.lineTo(width - r, 0.5);
|
||||
// Top-right curve
|
||||
ctx.arcTo(width, 0.5, width, r + 0.5, r);
|
||||
// Top-left curve
|
||||
ctx.moveTo(width - r, 0.5);
|
||||
ctx.arcTo(0, 0.5, 0, r + 0.5, r);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,17 +15,24 @@ Singleton {
|
||||
property string iconsPath: `${Directories.assetsPath}/icons/fluent`
|
||||
property bool dark: Appearance.m3colors.darkmode
|
||||
|
||||
property real fluentBackgroundTransparency: 0.17
|
||||
property real fluentContentTransparency: 0.3
|
||||
property real backgroundTransparency: 0.17
|
||||
property real contentTransparency: 0.25
|
||||
colors: QtObject {
|
||||
id: colors
|
||||
property color bg0: root.dark ? "#1C1C1C" : "#EEEEEE"
|
||||
property color bg0Border: root.dark ? "#404040" : "#BEBEBE"
|
||||
property color bg1: root.dark ? "#2E2E2E" : "#F7F7F7"
|
||||
property color bg1: root.dark ? "#2C2C2C" : "#F7F7F7"
|
||||
property color bg1Hover: root.dark ? "#292929" : "#F7F7F7"
|
||||
property color bg1Active: root.dark ? "#252525" : "#F3F3F3"
|
||||
property color bg1Border: root.dark ? "#333333" : "#E9E9E9"
|
||||
property color bg2: root.dark ? "#313131" : "#FBFBFB"
|
||||
property color bg2Hover: root.dark ? "#383838" : "#FDFDFD"
|
||||
property color bg2Active: root.dark ? "#333333" : "#FDFDFD"
|
||||
property color bg2Border: root.dark ? "#464646" : "#EEEEEE"
|
||||
property color fg: root.dark ? "#FFFFFF" : "#000000"
|
||||
property color fg1: root.dark ? "#D1D1D1" : "#626262"
|
||||
property color danger: "#C42B1C"
|
||||
property color dangerActive: "#B62D1F"
|
||||
property color brand: Appearance.m3colors.m3primary
|
||||
}
|
||||
|
||||
@@ -44,12 +51,14 @@ Singleton {
|
||||
property string ui: "Noto Sans"
|
||||
}
|
||||
property QtObject weight: QtObject { // Noto is not Segoe, so we might use slightly different weights
|
||||
property int thin: Font.Normal
|
||||
property int regular: Font.Medium
|
||||
property int strong: Font.DemiBold
|
||||
property int stronger: Font.Bold
|
||||
}
|
||||
property QtObject pixelSize: QtObject {
|
||||
property real normal: 11
|
||||
property real large: 15
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,15 +66,15 @@ Singleton {
|
||||
id: transition
|
||||
property QtObject easing: QtObject {
|
||||
property QtObject bezierCurve: QtObject {
|
||||
readonly property list<real> easeInOut: [0.42,0.00,0.58,1.00]
|
||||
readonly property list<real> easeIn: [0,1,1,1]
|
||||
readonly property list<real> easeOut: [1,0,1,1]
|
||||
readonly property list<real> easeInOut: [0.42,0.00,0.58,1.00,1,1]
|
||||
readonly property list<real> easeIn: [0,1,1,1,1,1]
|
||||
readonly property list<real> easeOut: [1,0,1,1,1,1]
|
||||
}
|
||||
}
|
||||
|
||||
property Component color: Component {
|
||||
ColorAnimation {
|
||||
duration: 80
|
||||
duration: 120
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: transition.easing.bezierCurve.easeIn
|
||||
}
|
||||
@@ -73,7 +82,7 @@ Singleton {
|
||||
|
||||
property Component opacity: Component {
|
||||
NumberAnimation{
|
||||
duration: 80
|
||||
duration: 120
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: transition.easing.bezierCurve.easeIn
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user