From bf936cd0d706324967e94b70dc154d1b2c96a291 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Mon, 30 Jun 2025 21:32:06 +0200 Subject: [PATCH] sidebar: make ai and booru suggestion description clearer --- .../quickshell/modules/common/Appearance.qml | 4 +- .../modules/common/widgets/KeyboardKey.qml | 4 +- .../quickshell/modules/sidebarLeft/AiChat.qml | 31 +---------- .../quickshell/modules/sidebarLeft/Anime.qml | 38 ++----------- .../modules/sidebarLeft/ApiCommandButton.qml | 2 +- .../modules/sidebarLeft/DescriptionBox.qml | 55 +++++++++++++++++++ 6 files changed, 68 insertions(+), 66 deletions(-) create mode 100644 .config/quickshell/modules/sidebarLeft/DescriptionBox.qml diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml index 610639b15..70437e12a 100644 --- a/.config/quickshell/modules/common/Appearance.qml +++ b/.config/quickshell/modules/common/Appearance.qml @@ -131,7 +131,7 @@ Singleton { property color colSecondaryHover: ColorUtils.mix(m3colors.m3secondary, colLayer1Hover, 0.85) property color colSecondaryActive: ColorUtils.mix(m3colors.m3secondary, colLayer1Active, 0.4) property color colSecondaryContainer: m3colors.m3secondaryContainer - property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Hover, 0.6) + property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, m3colors.m3onSecondaryContainer, 0.90) property color colSecondaryContainerActive: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Active, 0.54) property color colOnSecondaryContainer: m3colors.m3onSecondaryContainer property color colSurfaceContainerLow: ColorUtils.transparentize(m3colors.m3surfaceContainerLow, root.contentTransparency) @@ -171,7 +171,7 @@ Singleton { } property QtObject pixelSize: QtObject { property int smallest: 10 - property int smaller: 13 + property int smaller: 12 property int small: 15 property int normal: 16 property int large: 17 diff --git a/.config/quickshell/modules/common/widgets/KeyboardKey.qml b/.config/quickshell/modules/common/widgets/KeyboardKey.qml index d6ba5ba08..1a5ab0025 100644 --- a/.config/quickshell/modules/common/widgets/KeyboardKey.qml +++ b/.config/quickshell/modules/common/widgets/KeyboardKey.qml @@ -9,8 +9,8 @@ Rectangle { id: root property string key - property real horizontalPadding: 7 - property real verticalPadding: 2 + property real horizontalPadding: 6 + property real verticalPadding: 1 property real borderWidth: 1 property real extraBottomBorderWidth: 2 property color borderColor: Appearance.colors.colOnLayer0 diff --git a/.config/quickshell/modules/sidebarLeft/AiChat.qml b/.config/quickshell/modules/sidebarLeft/AiChat.qml index 422dc41b8..1ba6f2ca2 100644 --- a/.config/quickshell/modules/sidebarLeft/AiChat.qml +++ b/.config/quickshell/modules/sidebarLeft/AiChat.qml @@ -250,33 +250,8 @@ Inline w/ backslash and round brackets \\(e^{i\\pi} + 1 = 0\\) } } - Item { // Suggestion description - visible: descriptionText.text.length > 0 - Layout.fillWidth: true - implicitHeight: descriptionBackground.implicitHeight - - Rectangle { - id: descriptionBackground - color: Appearance.colors.colTooltip - anchors.left: parent.left - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - implicitHeight: descriptionText.implicitHeight + 5 * 2 - radius: Appearance.rounding.verysmall - - StyledText { - id: descriptionText - anchors.left: parent.left - anchors.right: parent.right - anchors.leftMargin: 10 - anchors.rightMargin: 10 - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: Appearance.font.pixelSize.smaller - color: Appearance.colors.colOnTooltip - wrapMode: Text.Wrap - text: root.suggestionList[suggestions.selectedIndex]?.description ?? "" - } - } + DescriptionBox { + text: root.suggestionList[suggestions.selectedIndex]?.description ?? "" } FlowButtonGroup { // Suggestions @@ -294,7 +269,7 @@ Inline w/ backslash and round brackets \\(e^{i\\pi} + 1 = 0\\) } delegate: ApiCommandButton { id: commandButton - colBackground: suggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2 + colBackground: suggestions.selectedIndex === index ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer bounce: false contentItem: StyledText { font.pixelSize: Appearance.font.pixelSize.small diff --git a/.config/quickshell/modules/sidebarLeft/Anime.qml b/.config/quickshell/modules/sidebarLeft/Anime.qml index 675449ea6..6efaba742 100644 --- a/.config/quickshell/modules/sidebarLeft/Anime.qml +++ b/.config/quickshell/modules/sidebarLeft/Anime.qml @@ -6,14 +6,11 @@ import "root:/modules/common/functions/fuzzysort.js" as Fuzzy import "root:/modules/common/functions/string_utils.js" as StringUtils import "root:/modules/common/functions/file_utils.js" as FileUtils import "./anime/" -import Qt.labs.platform import QtQuick import QtQuick.Controls import QtQuick.Layouts import Qt5Compat.GraphicalEffects -import Quickshell.Io import Quickshell -import Quickshell.Hyprland Item { id: root @@ -251,33 +248,8 @@ Item { } } - Item { // Tag suggestion description - visible: tagDescriptionText.text.length > 0 - Layout.fillWidth: true - implicitHeight: tagDescriptionBackground.implicitHeight - - Rectangle { - id: tagDescriptionBackground - color: Appearance.colors.colTooltip - anchors.left: parent.left - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - implicitHeight: tagDescriptionText.implicitHeight + 5 * 2 - radius: Appearance.rounding.verysmall - - StyledText { - id: tagDescriptionText - anchors.left: parent.left - anchors.right: parent.right - anchors.leftMargin: 10 - anchors.rightMargin: 10 - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: Appearance.font.pixelSize.smaller - color: Appearance.colors.colOnTooltip - wrapMode: Text.Wrap - text: root.suggestionList[tagSuggestions.selectedIndex]?.description ?? "" - } - } + DescriptionBox { // Tag suggestion description + text: root.suggestionList[tagSuggestions.selectedIndex]?.description ?? "" } FlowButtonGroup { // Tag suggestions @@ -295,7 +267,7 @@ Item { } delegate: ApiCommandButton { id: tagButton - colBackground: tagSuggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2 + colBackground: tagSuggestions.selectedIndex === index ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer bounce: false contentItem: RowLayout { anchors.centerIn: parent @@ -303,7 +275,7 @@ Item { StyledText { Layout.fillWidth: false font.pixelSize: Appearance.font.pixelSize.small - color: Appearance.m3colors.m3onSurface + color: Appearance.colors.colOnSecondaryContainer horizontalAlignment: Text.AlignRight text: modelData.displayName ?? modelData.name } @@ -311,7 +283,7 @@ Item { Layout.fillWidth: false visible: modelData.count !== undefined font.pixelSize: Appearance.font.pixelSize.smaller - color: Appearance.m3colors.m3outline + color: Appearance.colors.colOnSecondaryContainer horizontalAlignment: Text.AlignLeft text: modelData.count ?? "" } diff --git a/.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml b/.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml index 8741cb6be..39e8d7428 100644 --- a/.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml +++ b/.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml @@ -16,7 +16,7 @@ GroupButton { baseWidth: contentItem.implicitWidth + horizontalPadding * 2 clickedWidth: baseWidth + 20 baseHeight: contentItem.implicitHeight + verticalPadding * 2 - buttonRadius: down ? Appearance.rounding.small : baseHeight / 2 + buttonRadius: down ? Appearance.rounding.verysmall : Appearance.rounding.small colBackground: Appearance.colors.colLayer2 colBackgroundHover: Appearance.colors.colLayer2Hover diff --git a/.config/quickshell/modules/sidebarLeft/DescriptionBox.qml b/.config/quickshell/modules/sidebarLeft/DescriptionBox.qml new file mode 100644 index 000000000..a3599b599 --- /dev/null +++ b/.config/quickshell/modules/sidebarLeft/DescriptionBox.qml @@ -0,0 +1,55 @@ +import "root:/services" +import "root:/modules/common" +import "root:/modules/common/widgets" +import QtQuick +import QtQuick.Layouts + +Item { // Tag suggestion description + id: root + property alias text: tagDescriptionText.text + + visible: tagDescriptionText.text.length > 0 + Layout.fillWidth: true + implicitHeight: tagDescriptionBackground.implicitHeight + + Rectangle { + id: tagDescriptionBackground + color: Appearance.colors.colLayer2 + anchors.fill: parent + radius: Appearance.rounding.verysmall + implicitHeight: descriptionRow.implicitHeight + 5 * 2 + + RowLayout { + id: descriptionRow + spacing: 4 + anchors { + fill: parent + leftMargin: 10 + rightMargin: 10 + } + + StyledText { + id: tagDescriptionText + Layout.fillWidth: true + font.pixelSize: Appearance.font.pixelSize.smaller + color: Appearance.colors.colOnLayer2 + wrapMode: Text.Wrap + } + KeyboardKey { + key: "↑" + } + KeyboardKey { + key: "↓" + } + StyledText { + text: qsTr("or") + font.pixelSize: Appearance.font.pixelSize.smaller + } + KeyboardKey { + id: tagDescriptionKey + key: "Tab" + Layout.alignment: Qt.AlignVCenter + } + } + } +} \ No newline at end of file