wbar: add widgets, taskview, light theme

This commit is contained in:
end-4
2025-11-10 23:41:15 +01:00
parent 694eaccfbf
commit fdcb95b8a4
10 changed files with 279 additions and 16 deletions
@@ -0,0 +1,79 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="63.999989"
height="61.62962"
viewBox="0 0 26.999999 26"
fill="none"
version="1.1"
id="svg3"
sodipodi:docname="Group 6.svg"
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview3"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="4.7640336"
inkscape:cx="36.628625"
inkscape:cy="33.794892"
inkscape:window-width="1340"
inkscape:window-height="968"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg3" />
<g
id="g3"
transform="translate(0.03879728,0.03736111)">
<rect
opacity="0.9"
x="7.8752632"
width="17.187504"
height="14.609377"
rx="0.85937512"
fill="#ffffff"
id="rect1"
y="1.7907622"
style="stroke-width:0.859375" />
<g
style="mix-blend-mode:exclusion"
id="g2"
transform="matrix(0.85937512,0,0,0.85937512,1.8596377,1.7907622)">
<rect
y="9"
width="20"
height="17"
rx="1"
fill="url(#paint0_linear_505_17)"
id="rect2"
x="0"
style="fill:url(#paint0_linear_505_17)" />
</g>
</g>
<defs
id="defs3">
<linearGradient
id="paint0_linear_505_17"
x1="-2.75374e-08"
y1="9.2399397"
x2="18.808399"
y2="26.838499"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#717171"
id="stop2" />
<stop
offset="1"
stop-color="#4F4F4F"
id="stop3" />
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

@@ -0,0 +1,92 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="64"
height="64"
viewBox="0 0 27.927269 27.927269"
fill="none"
version="1.1"
id="svg6"
sodipodi:docname="widgets.svg"
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview6"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="4.6704546"
inkscape:cx="40.681265"
inkscape:cy="19.912409"
inkscape:window-width="1311"
inkscape:window-height="1020"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg6" />
<g
id="g6"
transform="translate(1.9636345,2.9636345)">
<rect
width="24"
height="22"
rx="1"
fill="url(#paint0_radial_110_367)"
id="rect1"
x="0"
y="0"
style="fill:url(#paint0_radial_110_367);stroke-width:1.00015;stroke-dasharray:none" />
<rect
x="2"
y="2"
width="9"
height="18"
fill="#f6f6f6"
id="rect2" />
<rect
x="13"
y="2"
width="9"
height="10"
fill="#67d7fd"
id="rect3" />
<rect
x="13"
y="12"
width="9"
height="4"
fill="#1ba9ff"
id="rect4" />
<rect
x="13"
y="16"
width="9"
height="4"
fill="#0086ed"
id="rect5" />
</g>
<defs
id="defs6">
<radialGradient
id="paint0_radial_110_367"
cx="0"
cy="0"
r="1"
gradientTransform="matrix(24,22,-24,22,0,0)"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#0077D0"
id="stop5" />
<stop
offset="1"
stop-color="#16458B"
id="stop6" />
</radialGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

@@ -9,6 +9,7 @@ BarButton {
id: root
required property string iconName
property bool separateLightDark: false
implicitWidth: height - topInset - bottomInset + leftInset + rightInset
contentItem: Item {
@@ -27,14 +28,10 @@ BarButton {
}
}
Kirigami.Icon {
AppIcon {
id: iconWidget
anchors.centerIn: parent
implicitWidth: 26
implicitHeight: 26
roundToIconSize: false
source: `${Looks.iconsPath}/${root.iconName}-${Looks.dark ? "dark" : "light"}.svg`
fallback: root.iconName
iconName: root.iconName
}
}
}
@@ -0,0 +1,16 @@
import QtQuick
import org.kde.kirigami as Kirigami
import qs.services
import qs.modules.common
import qs.modules.waffle.looks
Kirigami.Icon {
id: iconWidget
required property string iconName
implicitWidth: 26
implicitHeight: 26
roundToIconSize: false
source: `${Looks.iconsPath}/${root.iconName}${!root.separateLightDark ? "" : Looks.dark ? "-dark" : "-light"}.svg`
fallback: root.iconName
}
@@ -9,4 +9,5 @@ AppButton {
id: root
iconName: "system-search"
separateLightDark: true
}
@@ -8,6 +8,6 @@ import qs.modules.waffle.looks
AppButton {
id: root
leftInset: 12
leftInset: Config.options.waffles.bar.leftAlignApps ? 12 : 0
iconName: "start-here"
}
@@ -0,0 +1,12 @@
import QtQuick
import QtQuick.Layouts
import org.kde.kirigami as Kirigami
import qs.services
import qs.modules.common
import qs.modules.waffle.looks
AppButton {
id: root
iconName: "task-view"
}
@@ -1,6 +1,7 @@
import QtQuick
import QtQuick.Layouts
import qs.modules.common
import qs.modules.common.widgets
import qs.modules.waffle.looks
Rectangle {
@@ -21,6 +22,18 @@ Rectangle {
implicitHeight: 1
}
BarGroupRow {
id: bloatRow
anchors.left: parent.left
opacity: Config.options.waffles.bar.leftAlignApps ? 0 : 1
visible: opacity > 0
Behavior on opacity {
animation: Looks.transition.opacity.createObject(this)
}
WidgetsButton {}
}
BarGroupRow {
id: appsRow
spacing: 4
@@ -43,11 +56,17 @@ Rectangle {
StartButton {}
SearchButton {}
TaskViewButton {}
}
BarGroupRow {
id: systemRow
anchors.right: parent.right
FadeLoader {
Layout.fillHeight: true
shown: Config.options.waffles.bar.leftAlignApps
sourceComponent: WidgetsButton {}
}
SystemButton {}
TimeButton {}
}
@@ -0,0 +1,39 @@
import QtQuick
import QtQuick.Layouts
import org.kde.kirigami as Kirigami
import qs.services
import qs.modules.common
import qs.modules.waffle.looks
AppButton {
id: root
readonly property bool expandedForm: Config.options.waffles.bar.leftAlignApps
leftInset: Config.options.waffles.bar.leftAlignApps ? 0 : 12
implicitWidth: expandedForm ? 148 : (height - topInset - bottomInset + leftInset + rightInset)
iconName: "widgets"
contentItem: Item {
anchors {
verticalCenter: parent.verticalCenter
left: root.expandedForm ? parent.left : undefined
horizontalCenter: root.expandedForm ? undefined : background.horizontalCenter
}
implicitHeight: row.implicitHeight
implicitWidth: row.implicitWidth
Row {
id: row
anchors {
verticalCenter: parent.verticalCenter
left: root.expandedForm ? parent.left : undefined
horizontalCenter: root.expandedForm ? undefined : parent.horizontalCenter
margins: 8
}
AppIcon {
id: iconWidget
iconName: root.iconName
}
}
}
}
@@ -19,13 +19,13 @@ Singleton {
property real fluentContentTransparency: 0.3
colors: QtObject {
id: colors
property color bg0: "#1C1C1C"
property color bg0Border: "#404040"
property color bg1: "#2E2E2E"
property color bg1Hover: "#292929"
property color bg1Active: "#252525"
property color bg1Border: "#333333"
property color fg: "#FFFFFF"
property color bg0: root.dark ? "#1C1C1C" : "#EEEEEE"
property color bg0Border: root.dark ? "#404040" : "#BEBEBE"
property color bg1: root.dark ? "#2E2E2E" : "#F7F7F7"
property color bg1Hover: root.dark ? "#292929" : "#F7F7F7"
property color bg1Active: root.dark ? "#252525" : "#F3F3F3"
property color bg1Border: root.dark ? "#333333" : "#E9E9E9"
property color fg: root.dark ? "#FFFFFF" : "#000000"
property color brand: Appearance.m3colors.m3primary
}
@@ -71,6 +71,14 @@ Singleton {
}
}
property Component opacity: Component {
NumberAnimation{
duration: 80
easing.type: Easing.BezierSpline
easing.bezierCurve: transition.easing.bezierCurve.easeIn
}
}
property Component enter: Component {
NumberAnimation {
duration: 250
@@ -97,9 +105,9 @@ Singleton {
property Component anchor: Component {
AnchorAnimation {
duration: 250
duration: 160
easing.type: Easing.BezierSpline
easing.bezierCurve: transition.easing.bezierCurve.easeInOut
easing.bezierCurve: transition.easing.bezierCurve.easeIn
}
}
}