taskbar: window previews

This commit is contained in:
end-4
2025-11-12 00:09:22 +01:00
parent a412688af2
commit 20e1f0e0bb
12 changed files with 390 additions and 78 deletions
@@ -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
}