diff options
Diffstat (limited to 'appearance/IconsTab.qml')
| -rw-r--r-- | appearance/IconsTab.qml | 177 |
1 files changed, 105 insertions, 72 deletions
diff --git a/appearance/IconsTab.qml b/appearance/IconsTab.qml index 92c3f74..b2c7ee4 100644 --- a/appearance/IconsTab.qml +++ b/appearance/IconsTab.qml @@ -13,32 +13,33 @@ import Quickshell import Quickshell.Widgets import QtQuick -Column { - spacing: 12 +Flickable { + contentHeight: col.implicitHeight + clip: true - Text { - text: Icons.scanning ? "scanning…" : `${Icons.iconThemes.length} icon themes · ${Icons.cursorThemes.length} cursor themes` - color: Theme.overlay - font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 } - } - - Text { - text: "Icon theme" - color: Theme.subtext - font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2; bold: true } - } + property string liveCursorCursor: "" - Flickable { - id: iconList + Column { + id: col width: parent.width - height: 150 - contentWidth: iconRow.implicitWidth - contentHeight: height - clip: true - flickableDirection: Flickable.HorizontalFlick + spacing: 12 - Row { - id: iconRow + Text { + text: Icons.scanning ? "scanning…" : `${Icons.iconThemes.length} icon themes · ${Icons.cursorThemes.length} cursor themes` + color: Theme.overlay + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 } + } + + Text { + text: "Icon theme" + color: Theme.subtext + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2; bold: true } + } + + // Flow, not a horizontal strip: the cards wrap onto further rows rather + // than running off the right edge, and the tab scrolls vertically. + Flow { + width: parent.width spacing: 10 Repeater { model: Icons.iconThemes @@ -46,7 +47,7 @@ Column { id: iconCard required property string modelData readonly property bool current: Icons.currentIcon === modelData - width: 150; height: 120; radius: 10 + width: 230; height: 150; radius: 10 color: current ? Qt.alpha(Theme.accent, 0.2) : Qt.alpha(Theme.surface, 0.35) border.width: current ? 2 : 1 border.color: current ? Theme.accent : "transparent" @@ -58,10 +59,12 @@ Column { } Column { + width: parent.width - 16 anchors.centerIn: parent - spacing: 6 + spacing: 10 Row { - spacing: 6 + anchors.horizontalCenter: parent.horizontalCenter + spacing: 8 Repeater { model: ["folder", "text-x-generic", "image-x-generic", "network-wireless"] IconImage { @@ -73,45 +76,62 @@ Column { // /org/gtk gresource paths Qt cannot open. source: glyph.indexOf("/") === 0 && glyph.indexOf("/org/gtk/") !== 0 ? "file://" + glyph : "" - implicitSize: 26 + implicitSize: 44 } } } Text { - anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + horizontalAlignment: Text.AlignHCenter text: iconCard.current ? modelData + " current" : modelData color: Theme.text - font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 } + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 } + wrapMode: Text.WrapAnywhere + maximumLineCount: 2 + elide: Text.ElideRight } } } } } - } - - Text { - text: "Cursor theme" - color: Theme.subtext - font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2; bold: true } - } - - Flickable { - width: parent.width - height: 150 - contentWidth: cursorRow.implicitWidth - contentHeight: height - clip: true - flickableDirection: Flickable.HorizontalFlick Row { - id: cursorRow + spacing: 10 + Text { + anchors.verticalCenter: parent.verticalCenter + text: "Cursor theme" + color: Theme.subtext + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2; bold: true } + } + Item { width: 12; height: 1 } + Text { + anchors.verticalCenter: parent.verticalCenter + text: "Size" + color: Theme.subtext + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 } + } + Repeater { + model: [16, 24, 32, 48, 64] + Tab { + required property var modelData + anchors.verticalCenter: parent.verticalCenter + text: String(modelData) + selected: Icons.cursorSize === modelData + onClicked: Icons.setCursorSize(modelData) + } + } + } + + Flow { + width: parent.width spacing: 10 Repeater { model: Icons.cursorThemes Rectangle { + id: cursorCard required property string modelData readonly property bool current: Icons.currentCursor === modelData - width: 120; height: 120; radius: 10 + width: 230; height: 150; radius: 10 color: current ? Qt.alpha(Theme.accent, 0.2) : Qt.alpha(Theme.surface, 0.35) border.width: current ? 2 : 1 border.color: current ? Theme.accent : "transparent" @@ -119,13 +139,15 @@ Column { HoverHandler { onHoveredChanged: { if (hovered) { - Icons.previewCursor(modelData); - // Live preview: the real cursor, reverted on leave. + // Previews are already batched on open; hovering + // only switches the real cursor and reverts it. liveCursorCursor = modelData; - Quickshell.execDetached(["hyprctl", "setcursor", modelData, "24"]); + Quickshell.execDetached(["hyprctl", "setcursor", modelData, + String(Icons.cursorSize)]); } else if (liveCursorCursor === modelData) { liveCursorCursor = ""; - Quickshell.execDetached(["hyprctl", "setcursor", Icons.currentCursor, "24"]); + Quickshell.execDetached(["hyprctl", "setcursor", Icons.currentCursor, + String(Icons.cursorSize)]); } } } @@ -136,49 +158,60 @@ Column { } Column { + width: parent.width - 16 anchors.centerIn: parent - spacing: 6 - Image { + spacing: 10 + Row { anchors.horizontalCenter: parent.horizontalCenter - width: 40; height: 40 - asynchronous: true - source: Icons.cursorPreview[modelData] ? "file://" + Icons.cursorPreview[modelData] : "" - fillMode: Image.PreserveAspectFit + spacing: 8 + Repeater { + // The cases that tell themes apart: arrow, hand, + // text and horizontal resize. + model: ["left_ptr", "hand2", "xterm", "resize"] + Image { + required property string modelData + readonly property string p: (Icons.cursorPreview[cursorCard.modelData] ?? {})[modelData] ?? "" + width: 44; height: 44 + asynchronous: true + source: p !== "" ? "file://" + p : "" + fillMode: Image.PreserveAspectFit + } + } } Text { - anchors.horizontalCenter: parent.horizontalCenter - text: parent.parent.current ? modelData + " current" : modelData - color: Theme.text - font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 } - width: 110 - elide: Text.ElideMiddle + width: parent.width horizontalAlignment: Text.AlignHCenter + text: cursorCard.current ? modelData + " current" : modelData + color: Theme.text + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 } + wrapMode: Text.WrapAnywhere + maximumLineCount: 2 + elide: Text.ElideRight } } } } } - } - Text { - width: parent.width - wrapMode: Text.Wrap - visible: Icons.notice !== "" - text: Icons.notice - color: Theme.green - font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 } + Text { + width: parent.width + wrapMode: Text.Wrap + visible: Icons.notice !== "" + text: Icons.notice + color: Theme.green + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 } + } } - property string liveCursorCursor: "" onVisibleChanged: if (!visible && liveCursorCursor !== "") { - Quickshell.execDetached(["hyprctl", "setcursor", Icons.currentCursor, "24"]); + Quickshell.execDetached(["hyprctl", "setcursor", Icons.currentCursor, String(Icons.cursorSize)]); liveCursorCursor = ""; } // A Loader destroys this item on tab switch or drawer close, and visible // does not necessarily change first, so revert the real cursor here too. Component.onDestruction: if (liveCursorCursor !== "") { - Quickshell.execDetached(["hyprctl", "setcursor", Icons.currentCursor, "24"]); + Quickshell.execDetached(["hyprctl", "setcursor", Icons.currentCursor, String(Icons.cursorSize)]); liveCursorCursor = ""; } } |