From 6abefecedff6c8017acad2b293b4aa38192902a7 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Thu, 19 Jun 2025 08:13:08 +0200 Subject: [PATCH] refractor button with icon and lightdark pref button to new file --- .../widgets/LightDarkPreferenceButton.qml | 124 ++++++++++++ .../common/widgets/RippleButtonWithIcon.qml | 55 ++++++ .config/quickshell/welcome.qml | 183 +----------------- 3 files changed, 188 insertions(+), 174 deletions(-) create mode 100644 .config/quickshell/modules/common/widgets/LightDarkPreferenceButton.qml create mode 100644 .config/quickshell/modules/common/widgets/RippleButtonWithIcon.qml diff --git a/.config/quickshell/modules/common/widgets/LightDarkPreferenceButton.qml b/.config/quickshell/modules/common/widgets/LightDarkPreferenceButton.qml new file mode 100644 index 000000000..e1900c9fe --- /dev/null +++ b/.config/quickshell/modules/common/widgets/LightDarkPreferenceButton.qml @@ -0,0 +1,124 @@ +import "root:/modules/common" +import "root:/modules/common/widgets" +import "root:/modules/common/functions/color_utils.js" as ColorUtils +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import Quickshell.Io +import Quickshell.Io +import Quickshell.Hyprland + +GroupButton { + id: lightDarkButtonRoot + required property bool dark + property color previewBg: dark ? ColorUtils.colorWithHueOf("#3f3838", Appearance.m3colors.m3primary) : + ColorUtils.colorWithHueOf("#F7F9FF", Appearance.m3colors.m3primary) + property color previewFg: dark ? Qt.lighter(previewBg, 2.2) : ColorUtils.mix(previewBg, "#292929", 0.85) + padding: 5 + Layout.fillWidth: true + colBackground: Appearance.colors.colLayer2 + toggled: Appearance.m3colors.darkmode === dark + onClicked: { + Hyprland.dispatch(`exec ${Directories.wallpaperSwitchScriptPath} --mode ${dark ? "dark" : "light"} --noswitch`) + } + contentItem: Item { + anchors.centerIn: parent + implicitWidth: buttonContentLayout.implicitWidth + implicitHeight: buttonContentLayout.implicitHeight + ColumnLayout { + id: buttonContentLayout + anchors.centerIn: parent + Rectangle { + Layout.alignment: Qt.AlignHCenter + implicitWidth: 250 + implicitHeight: skeletonColumnLayout.implicitHeight + 10 * 2 + radius: lightDarkButtonRoot.buttonRadius - lightDarkButtonRoot.padding + color: lightDarkButtonRoot.previewBg + border { + width: 1 + color: Appearance.m3colors.m3outlineVariant + } + + // Some skeleton items + ColumnLayout { + id: skeletonColumnLayout + anchors.fill: parent + anchors.margins: 10 + spacing: 10 + RowLayout { + Rectangle { + radius: Appearance.rounding.full + color: lightDarkButtonRoot.previewFg + implicitWidth: 50 + implicitHeight: 50 + } + ColumnLayout { + spacing: 4 + Rectangle { + radius: Appearance.rounding.unsharpenmore + color: lightDarkButtonRoot.previewFg + Layout.fillWidth: true + implicitHeight: 22 + } + Rectangle { + radius: Appearance.rounding.unsharpenmore + color: lightDarkButtonRoot.previewFg + Layout.fillWidth: true + Layout.rightMargin: 45 + implicitHeight: 18 + } + } + } + StyledProgressBar { + Layout.topMargin: 5 + Layout.bottomMargin: 5 + Layout.fillWidth: true + value: 0.7 + sperm: true + animateSperm: lightDarkButtonRoot.toggled + highlightColor: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3primary : lightDarkButtonRoot.previewFg + trackColor: ColorUtils.mix(lightDarkButtonRoot.previewBg, lightDarkButtonRoot.previewFg, 0.5) + } + RowLayout { + spacing: 2 + Rectangle { + radius: Appearance.rounding.full + color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3primary : lightDarkButtonRoot.previewFg + Layout.fillWidth: true + implicitHeight: 30 + MaterialSymbol { + visible: lightDarkButtonRoot.toggled + anchors.centerIn: parent + horizontalAlignment: Text.AlignHCenter + text: "check" + iconSize: 20 + color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3onPrimary : lightDarkButtonRoot.previewBg + } + } + Rectangle { + radius: Appearance.rounding.unsharpenmore + color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3secondaryContainer : lightDarkButtonRoot.previewFg + Layout.fillWidth: true + implicitHeight: 30 + } + Rectangle { + topLeftRadius: Appearance.rounding.unsharpenmore + bottomLeftRadius: Appearance.rounding.unsharpenmore + topRightRadius: Appearance.rounding.full + bottomRightRadius: Appearance.rounding.full + color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3secondaryContainer : lightDarkButtonRoot.previewFg + Layout.fillWidth: true + implicitHeight: 30 + } + } + } + } + StyledText { + Layout.fillWidth: true + text: dark ? "Dark" : "Light" + color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer2 + horizontalAlignment: Text.AlignHCenter + } + } + } +} diff --git a/.config/quickshell/modules/common/widgets/RippleButtonWithIcon.qml b/.config/quickshell/modules/common/widgets/RippleButtonWithIcon.qml new file mode 100644 index 000000000..60d75cd6f --- /dev/null +++ b/.config/quickshell/modules/common/widgets/RippleButtonWithIcon.qml @@ -0,0 +1,55 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import "root:/modules/common/" +import "root:/modules/common/widgets/" + +RippleButton { + id: buttonWithIconRoot + property string nerdIcon + property string iconText + property string mainText: "Button text" + property Component mainContentComponent: Component { + StyledText { + text: buttonWithIconRoot.mainText + font.pixelSize: Appearance.font.pixelSize.small + color: Appearance.colors.colOnSecondaryContainer + } + } + implicitHeight: 35 + horizontalPadding: 15 + buttonRadius: Appearance.rounding.small + colBackground: Appearance.colors.colLayer2 + + contentItem: RowLayout { + Item { + implicitWidth: Math.max(materialIconLoader.implicitWidth, nerdIconLoader.implicitWidth) + Loader { + id: materialIconLoader + anchors.centerIn: parent + active: !nerdIcon + sourceComponent: MaterialSymbol { + text: buttonWithIconRoot.iconText + iconSize: Appearance.font.pixelSize.larger + color: Appearance.colors.colOnSecondaryContainer + fill: 1 + } + } + Loader { + id: nerdIconLoader + anchors.centerIn: parent + active: nerdIcon + sourceComponent: StyledText { + text: buttonWithIconRoot.nerdIcon + font.pixelSize: Appearance.font.pixelSize.larger + font.family: Appearance.font.family.iconNerd + color: Appearance.colors.colOnSecondaryContainer + } + } + } + Loader { + sourceComponent: buttonWithIconRoot.mainContentComponent + Layout.alignment: Qt.AlignVCenter + } + } +} diff --git a/.config/quickshell/welcome.qml b/.config/quickshell/welcome.qml index c7b8c409f..65f620891 100644 --- a/.config/quickshell/welcome.qml +++ b/.config/quickshell/welcome.qml @@ -53,171 +53,6 @@ ApplicationWindow { } } - component ButtonWithIcon: RippleButton { - id: buttonWithIconRoot - property string nerdIcon - property string iconText - property string mainText: "Button text" - property Component mainContentComponent: Component { - StyledText { - text: buttonWithIconRoot.mainText - font.pixelSize: Appearance.font.pixelSize.small - color: Appearance.colors.colOnSecondaryContainer - } - } - implicitHeight: 35 - horizontalPadding: 15 - buttonRadius: Appearance.rounding.small - colBackground: Appearance.colors.colLayer2 - - contentItem: RowLayout { - Item { - implicitWidth: Math.max(materialIconLoader.implicitWidth, nerdIconLoader.implicitWidth) - Loader { - id: materialIconLoader - anchors.centerIn: parent - active: !nerdIcon - sourceComponent: MaterialSymbol { - text: buttonWithIconRoot.iconText - iconSize: Appearance.font.pixelSize.larger - color: Appearance.colors.colOnSecondaryContainer - fill: 1 - } - } - Loader { - id: nerdIconLoader - anchors.centerIn: parent - active: nerdIcon - sourceComponent: StyledText { - text: buttonWithIconRoot.nerdIcon - font.pixelSize: Appearance.font.pixelSize.larger - font.family: Appearance.font.family.iconNerd - color: Appearance.colors.colOnSecondaryContainer - } - } - } - Loader { - sourceComponent: buttonWithIconRoot.mainContentComponent - Layout.alignment: Qt.AlignVCenter - } - } - } - - component LightDarkPrefButton: GroupButton { - id: lightDarkButtonRoot - required property bool dark - property color previewBg: dark ? ColorUtils.colorWithHueOf("#3f3838", Appearance.m3colors.m3primary) : - ColorUtils.colorWithHueOf("#F7F9FF", Appearance.m3colors.m3primary) - property color previewFg: dark ? Qt.lighter(previewBg, 2.2) : ColorUtils.mix(previewBg, "#292929", 0.85) - padding: 5 - Layout.fillWidth: true - colBackground: Appearance.colors.colLayer2 - toggled: Appearance.m3colors.darkmode === dark - onClicked: { - Hyprland.dispatch(`exec ${Directories.wallpaperSwitchScriptPath} --mode ${dark ? "dark" : "light"} --noswitch`) - } - contentItem: Item { - anchors.centerIn: parent - implicitWidth: buttonContentLayout.implicitWidth - implicitHeight: buttonContentLayout.implicitHeight - ColumnLayout { - id: buttonContentLayout - anchors.centerIn: parent - Rectangle { - Layout.alignment: Qt.AlignHCenter - implicitWidth: 250 - implicitHeight: skeletonColumnLayout.implicitHeight + 10 * 2 - radius: lightDarkButtonRoot.buttonRadius - lightDarkButtonRoot.padding - color: lightDarkButtonRoot.previewBg - border { - width: 1 - color: Appearance.m3colors.m3outlineVariant - } - - // Some skeleton items - ColumnLayout { - id: skeletonColumnLayout - anchors.fill: parent - anchors.margins: 10 - spacing: 10 - RowLayout { - Rectangle { - radius: Appearance.rounding.full - color: lightDarkButtonRoot.previewFg - implicitWidth: 50 - implicitHeight: 50 - } - ColumnLayout { - spacing: 4 - Rectangle { - radius: Appearance.rounding.unsharpenmore - color: lightDarkButtonRoot.previewFg - Layout.fillWidth: true - implicitHeight: 22 - } - Rectangle { - radius: Appearance.rounding.unsharpenmore - color: lightDarkButtonRoot.previewFg - Layout.fillWidth: true - Layout.rightMargin: 45 - implicitHeight: 18 - } - } - } - StyledProgressBar { - Layout.topMargin: 5 - Layout.bottomMargin: 5 - Layout.fillWidth: true - value: 0.7 - sperm: true - animateSperm: lightDarkButtonRoot.toggled - highlightColor: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3primary : lightDarkButtonRoot.previewFg - trackColor: ColorUtils.mix(lightDarkButtonRoot.previewBg, lightDarkButtonRoot.previewFg, 0.5) - } - RowLayout { - spacing: 2 - Rectangle { - radius: Appearance.rounding.full - color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3primary : lightDarkButtonRoot.previewFg - Layout.fillWidth: true - implicitHeight: 30 - MaterialSymbol { - visible: lightDarkButtonRoot.toggled - anchors.centerIn: parent - horizontalAlignment: Text.AlignHCenter - text: "check" - iconSize: 20 - color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3onPrimary : lightDarkButtonRoot.previewBg - } - } - Rectangle { - radius: Appearance.rounding.unsharpenmore - color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3secondaryContainer : lightDarkButtonRoot.previewFg - Layout.fillWidth: true - implicitHeight: 30 - } - Rectangle { - topLeftRadius: Appearance.rounding.unsharpenmore - bottomLeftRadius: Appearance.rounding.unsharpenmore - topRightRadius: Appearance.rounding.full - bottomRightRadius: Appearance.rounding.full - color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3secondaryContainer : lightDarkButtonRoot.previewFg - Layout.fillWidth: true - implicitHeight: 30 - } - } - } - } - StyledText { - Layout.fillWidth: true - text: dark ? "Dark" : "Light" - color: lightDarkButtonRoot.toggled ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer2 - horizontalAlignment: Text.AlignHCenter - } - } - } - } - ColumnLayout { anchors { fill: parent @@ -289,17 +124,17 @@ ApplicationWindow { ButtonGroup { Layout.fillWidth: true - LightDarkPrefButton { + LightDarkPreferenceButton { dark: false } - LightDarkPrefButton { + LightDarkPreferenceButton { dark: true } } RowLayout { Layout.alignment: Qt.AlignHCenter - ButtonWithIcon { + RippleButtonWithIcon { id: rndWallBtn Layout.alignment: Qt.AlignHCenter buttonRadius: Appearance.rounding.small @@ -313,7 +148,7 @@ ApplicationWindow { content: "Random SFW Anime wallpaper from Konachan\nImage is saved to ~/Pictures/Wallpapers" } } - ButtonWithIcon { + RippleButtonWithIcon { iconText: "wallpaper" StyledToolTip { content: "Pick wallpaper image on your system" @@ -451,7 +286,7 @@ ApplicationWindow { Layout.fillWidth: true spacing: 10 - ButtonWithIcon { + RippleButtonWithIcon { iconText: "keyboard_alt" onClicked: { Hyprland.dispatch("global quickshell:cheatsheetOpen") @@ -481,14 +316,14 @@ ApplicationWindow { } } - ButtonWithIcon { + RippleButtonWithIcon { iconText: "help" mainText: "Usage" onClicked: { Qt.openUrlExternally("https://end-4.github.io/dots-hyprland-wiki/en/ii-qs/02usage/") } } - ButtonWithIcon { + RippleButtonWithIcon { iconText: "construction" mainText: "Configuration" onClicked: { @@ -505,14 +340,14 @@ ApplicationWindow { Layout.fillWidth: true spacing: 10 - ButtonWithIcon { + RippleButtonWithIcon { nerdIcon: "󰊤" mainText: "GitHub" onClicked: { Qt.openUrlExternally("https://github.com/end-4/dots-hyprland") } } - ButtonWithIcon { + RippleButtonWithIcon { iconText: "favorite" mainText: "Funny number" onClicked: {