diff --git a/Bar/Modules/AudioDeviceSelector.qml b/Bar/Modules/AudioDeviceSelector.qml index 4c40ed9c..965acc9a 100644 --- a/Bar/Modules/AudioDeviceSelector.qml +++ b/Bar/Modules/AudioDeviceSelector.qml @@ -89,21 +89,25 @@ PanelWithOverlay { ColumnLayout { Layout.fillWidth: true spacing: 1 + Layout.maximumWidth: sinkList.width - 120 // Reserve space for the Set button Text { text: modelData.nickname || modelData.description || modelData.name font.bold: true font.pixelSize: 12 color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary elide: Text.ElideRight + maximumLineCount: 1 + Layout.fillWidth: true } Text { text: modelData.description !== modelData.nickname ? modelData.description : "" font.pixelSize: 10 color: Theme.textSecondary elide: Text.ElideRight + maximumLineCount: 1 + Layout.fillWidth: true } } - Item { Layout.fillWidth: true } Rectangle { visible: Pipewire.preferredDefaultAudioSink !== modelData width: 60; height: 20 @@ -173,21 +177,25 @@ PanelWithOverlay { ColumnLayout { Layout.fillWidth: true spacing: 1 + Layout.maximumWidth: sourceList.width - 120 // Reserve space for the Set button Text { text: modelData.nickname || modelData.description || modelData.name font.bold: true font.pixelSize: 12 color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary elide: Text.ElideRight + maximumLineCount: 1 + Layout.fillWidth: true } Text { text: modelData.description !== modelData.nickname ? modelData.description : "" font.pixelSize: 10 color: Theme.textSecondary elide: Text.ElideRight + maximumLineCount: 1 + Layout.fillWidth: true } } - Item { Layout.fillWidth: true } Rectangle { visible: Pipewire.preferredDefaultAudioSource !== modelData width: 60; height: 20 diff --git a/Bar/Modules/Taskbar.qml b/Bar/Modules/Taskbar.qml index ec87073c..1c4400b8 100644 --- a/Bar/Modules/Taskbar.qml +++ b/Bar/Modules/Taskbar.qml @@ -11,11 +11,15 @@ Item { width: runningAppsRow.width height: Settings.settings.taskbarIconSize + // Attach custom tooltip + StyledTooltip { + id: styledTooltip + } + function getAppIcon(toplevel: Toplevel): string { if (!toplevel) return ""; - // Try different icon resolution strategies let icon = Quickshell.iconPath(toplevel.appId?.toLowerCase(), true); if (!icon) { icon = Quickshell.iconPath(toplevel.appId, true); @@ -42,7 +46,6 @@ Item { model: ToplevelManager ? ToplevelManager.toplevels : null delegate: Rectangle { - id: appButton width: Settings.settings.taskbarIconSize height: Settings.settings.taskbarIconSize @@ -51,124 +54,76 @@ Item { border.color: isActive ? Qt.darker(Theme.accentPrimary, 1.2) : "transparent" border.width: 1 - - property bool isActive: ToplevelManager.activeToplevel && ToplevelManager.activeToplevel === modelData property bool hovered: mouseArea.containsMouse property string appId: modelData ? modelData.appId : "" property string appTitle: modelData ? modelData.title : "" Behavior on color { - ColorAnimation { - duration: 150 - } + ColorAnimation { duration: 150 } } Behavior on border.color { - ColorAnimation { - duration: 150 - } + ColorAnimation { duration: 150 } } - // App icon IconImage { id: appIcon - width: Math.max(12, Settings.settings.taskbarIconSize * 0.625) // 62.5% of button size (20/32 = 0.625) + width: Math.max(12, Settings.settings.taskbarIconSize * 0.625) height: Math.max(12, Settings.settings.taskbarIconSize * 0.625) anchors.centerIn: parent source: getAppIcon(modelData) smooth: true - - // Fallback to first letter if no icon visible: source.toString() !== "" } - // Fallback text if no icon available Text { anchors.centerIn: parent visible: !appIcon.visible text: appButton.appId ? appButton.appId.charAt(0).toUpperCase() : "?" font.family: Theme.fontFamily - font.pixelSize: Math.max(10, Settings.settings.taskbarIconSize * 0.4375) // 43.75% of button size (14/32 = 0.4375) + font.pixelSize: Math.max(10, Settings.settings.taskbarIconSize * 0.4375) font.bold: true color: appButton.isActive ? Theme.onAccent : Theme.textPrimary } - // Tooltip - ToolTip { - id: tooltip - visible: mouseArea.containsMouse && !mouseArea.pressed - delay: 800 - text: appTitle || appId - - background: Rectangle { - color: Theme.backgroundPrimary - border.color: Theme.outline - border.width: 1 - radius: 8 - } - - contentItem: Text { - text: tooltip.text - font.family: Theme.fontFamily - font.pixelSize: Theme.fontSizeCaption - color: Theme.textPrimary - } - } - MouseArea { id: mouseArea anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor + onEntered: { + styledTooltip.text = appTitle || appId; + styledTooltip.targetItem = appButton; + styledTooltip.tooltipVisible = true; + } + + onExited: { + styledTooltip.tooltipVisible = false; + } + onClicked: function(mouse) { - console.log("[Taskbar] Clicked on", appButton.appId, "- Active:", appButton.isActive); - if (mouse.button === Qt.MiddleButton) { - console.log("[Taskbar] Middle-clicked on", appButton.appId); - - // Example: Close the window with middle click if (modelData && modelData.close) { modelData.close(); - } else { - console.log("[Taskbar] No close method available for:", modelData); } } if (mouse.button === Qt.LeftButton) { - // Left click: Focus/activate the window if (modelData && modelData.activate) { modelData.activate(); - } else { - console.log("[Taskbar] No activate method available for:", modelData); } } } - // Right-click for additional actions onPressed: mouse => { if (mouse.button === Qt.RightButton) { - console.log("[Taskbar] Right-clicked on", appButton.appId); - - // Example actions you can add: - // 1. Close window - // if (modelData && modelData.close) { - // modelData.close(); - // } - - // 2. Minimize window - // if (modelData && modelData.minimize) { - // modelData.minimize(); - // } - - // 3. Show context menu (needs Menu component) - // contextMenu.popup(); + // context menu logic (optional) } } } - // Active indicator dot Rectangle { visible: isActive width: 4 diff --git a/Bar/Modules/Volume.qml b/Bar/Modules/Volume.qml index d17b49ec..19619973 100644 --- a/Bar/Modules/Volume.qml +++ b/Bar/Modules/Volume.qml @@ -24,7 +24,7 @@ Item { textColor: Theme.textPrimary StyledTooltip { id: volumeTooltip - text: "Volume: " + volume + "%\nScroll up/down to change volume" + text: "Volume: " + volume + "%\nScroll up/down to change volume.\nLeft click to open the input/output selection." tooltipVisible: !ioSelector.visible && volumeDisplay.containsMouse targetItem: pillIndicator delay: 200 diff --git a/Components/StyledTooltip.qml b/Components/StyledTooltip.qml index 49e6694b..3c63e937 100644 --- a/Components/StyledTooltip.qml +++ b/Components/StyledTooltip.qml @@ -56,7 +56,7 @@ Window { Rectangle { anchors.fill: parent - radius: 6 + radius: 20 color: Theme.backgroundTertiary || "#222" border.color: Theme.outline || "#444" border.width: 1 diff --git a/Programs/zigbrightness b/Programs/zigbrightness new file mode 100755 index 00000000..941653a1 Binary files /dev/null and b/Programs/zigbrightness differ diff --git a/Programs/zigstat b/Programs/zigstat new file mode 100755 index 00000000..397a01e9 Binary files /dev/null and b/Programs/zigstat differ diff --git a/Settings/Settings.qml b/Settings/Settings.qml index 541ce59e..879abd2a 100644 --- a/Settings/Settings.qml +++ b/Settings/Settings.qml @@ -48,6 +48,7 @@ Singleton { property bool showActiveWindowIcon: false property bool showSystemInfoInBar: false property bool showCorners: true + property bool showTaskbar: true property bool showMediaInBar: false property bool useSWWW: false property bool randomWallpaper: false diff --git a/Templates/templates/ghostty b/Templates/templates/ghostty deleted file mode 100644 index 3a92b28c..00000000 --- a/Templates/templates/ghostty +++ /dev/null @@ -1,29 +0,0 @@ -# Ghostty theme template for wallust -# Add to wallust config: ghostty = { src = "ghostty.conf", dst = "~/.config/ghostty/theme.conf" } -# And add to ghostty config: theme = "theme.conf" - -palette = 0={{ color0 }} -palette = 1={{ color1 }} -palette = 2={{ color2 }} -palette = 3={{ color3 }} -palette = 4={{ color4 }} -palette = 5={{ color5 }} -palette = 6={{ color6 }} -palette = 7={{ color7 }} -palette = 8={{ color8 }} -palette = 9={{ color9 }} -palette = 10={{ color10 }} -palette = 11={{ color11 }} -palette = 12={{ color12 }} -palette = 13={{ color13 }} -palette = 14={{ color14 }} -palette = 15={{ color15 }} - -background = {{ background }} -foreground = {{ foreground }} - -cursor-color = {{ cursor }} -cursor-text = {{ foreground }} - -selection-background = {{ color8 }} -selection-foreground = {{ foreground }} diff --git a/Widgets/Sidebar/Config/ProfileSettings.qml b/Widgets/Sidebar/Config/ProfileSettings.qml index 9f5fdb98..01716658 100644 --- a/Widgets/Sidebar/Config/ProfileSettings.qml +++ b/Widgets/Sidebar/Config/ProfileSettings.qml @@ -1,4 +1,4 @@ -import QtQuick +import QtQuick import QtQuick.Layouts import QtQuick.Controls import Qt5Compat.GraphicalEffects @@ -14,102 +14,607 @@ Rectangle { border.width: 0 Layout.bottomMargin: 16 - ColumnLayout { + ScrollView { + id: scrollView anchors.fill: parent - anchors.margins: 18 - spacing: 12 - - RowLayout { - Layout.fillWidth: true - spacing: 12 - - Text { - text: "settings" - font.family: "Material Symbols Outlined" - font.pixelSize: 20 - color: Theme.accentPrimary + clip: true + padding: 12 + + ScrollBar.vertical: ScrollBar { + id: scrollBar + policy: ScrollBar.AsNeeded + visible: size < 1.0 + opacity: (active || hovered) && size < 1.0 ? 1 : 0 + width: 8 + padding: 0 + + background: Rectangle { + color: "transparent" } - - Text { - text: "System Settings" - font.family: Theme.fontFamily - font.pixelSize: 16 - font.bold: true - color: Theme.textPrimary - Layout.fillWidth: true + + contentItem: Rectangle { + implicitWidth: 6 + radius: 3 + color: scrollBar.hovered ? Theme.accentPrimary : Qt.darker(Theme.surfaceVariant, 1.2) + + Behavior on opacity { + OpacityAnimator { duration: 200 } + } + } + + Behavior on opacity { + OpacityAnimator { duration: 300 } } } - // Profile Image Input Section ColumnLayout { - spacing: 8 - Layout.fillWidth: true - - Text { - text: "Profile Image" - font.family: Theme.fontFamily - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } + id: mainLayout + width: scrollView.availableWidth - (scrollBar.visible ? scrollBar.width + 4 : 0) + spacing: 12 + anchors.margins: 18 RowLayout { + Layout.fillWidth: true + spacing: 12 + + Text { + text: "settings" + font.family: "Material Symbols Outlined" + font.pixelSize: 20 + color: Theme.accentPrimary + } + + Text { + text: "System Settings" + font.family: Theme.fontFamily + font.pixelSize: 16 + font.bold: true + color: Theme.textPrimary + Layout.fillWidth: true + } + } + + // Profile Image Input Section + ColumnLayout { spacing: 8 Layout.fillWidth: true - Rectangle { - width: 40 - height: 40 - radius: 20 - color: Theme.surfaceVariant - border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 1 + Text { + text: "Profile Image" + font.family: Theme.fontFamily + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } - Image { - id: avatarImage - anchors.fill: parent - anchors.margins: 2 - source: Settings.settings.profileImage - fillMode: Image.PreserveAspectCrop - visible: false - asynchronous: true - cache: false - sourceSize.width: 64 - sourceSize.height: 64 - } - OpacityMask { - anchors.fill: avatarImage - source: avatarImage - maskSource: Rectangle { - width: avatarImage.width - height: avatarImage.height - radius: avatarImage.width / 2 + RowLayout { + spacing: 8 + Layout.fillWidth: true + + Rectangle { + width: 40 + height: 40 + radius: 20 + color: Theme.surfaceVariant + border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline + border.width: 1 + + Image { + id: avatarImage + anchors.fill: parent + anchors.margins: 2 + source: Settings.settings.profileImage + fillMode: Image.PreserveAspectCrop visible: false + asynchronous: true + cache: false + sourceSize.width: 64 + sourceSize.height: 64 + } + OpacityMask { + anchors.fill: avatarImage + source: avatarImage + maskSource: Rectangle { + width: avatarImage.width + height: avatarImage.height + radius: avatarImage.width / 2 + visible: false + } + visible: Settings.settings.profileImage !== "" + } + + Text { + anchors.centerIn: parent + text: "person" + font.family: "Material Symbols Outlined" + font.pixelSize: 20 + color: Theme.accentPrimary + visible: Settings.settings.profileImage === "" } - visible: Settings.settings.profileImage !== "" } - // Fallback icon - Text { - anchors.centerIn: parent - text: "person" - font.family: "Material Symbols Outlined" - font.pixelSize: 20 - color: Theme.accentPrimary - visible: Settings.settings.profileImage === "" + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 40 + radius: 8 + color: Theme.surfaceVariant + border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline + border.width: 1 + + TextInput { + id: profileImageInput + anchors.fill: parent + anchors.leftMargin: 12 + anchors.rightMargin: 12 + anchors.topMargin: 6 + anchors.bottomMargin: 6 + text: Settings.settings.profileImage + font.family: Theme.fontFamily + font.pixelSize: 13 + color: Theme.textPrimary + verticalAlignment: TextInput.AlignVCenter + clip: true + focus: true + selectByMouse: true + activeFocusOnTab: true + inputMethodHints: Qt.ImhNone + onTextChanged: { + Settings.settings.profileImage = text + } + MouseArea { + anchors.fill: parent + cursorShape: Qt.IBeamCursor + onClicked: { + profileImageInput.forceActiveFocus() + } + } + } } } + } + + // Show Active Window Icon Setting + RowLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + Text { + text: "Show Active Window Icon" + font.family: Theme.fontFamily + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + Item { + Layout.fillWidth: true + } + + Rectangle { + id: customSwitch + width: 52 + height: 32 + radius: 16 + color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.surfaceVariant + border.color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.outline + border.width: 2 + + Rectangle { + id: thumb + width: 28 + height: 28 + radius: 14 + color: Theme.surface + border.color: Theme.outline + border.width: 1 + y: 2 + x: Settings.settings.showActiveWindowIcon ? customSwitch.width - width - 2 : 2 + + Behavior on x { + NumberAnimation { duration: 200; easing.type: Easing.OutCubic } + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + Settings.settings.showActiveWindowIcon = !Settings.settings.showActiveWindowIcon + } + } + } + } + + // Show System Info In Bar Setting + RowLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + Text { + text: "Show System Info In Bar" + font.family: Theme.fontFamily + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + Layout.alignment: Qt.AlignVCenter + } + + Item { + Layout.fillWidth: true + } + + Rectangle { + id: customSwitch2 + width: 52 + height: 32 + radius: 16 + color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.surfaceVariant + border.color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.outline + border.width: 2 + + Rectangle { + id: thumb2 + width: 28 + height: 28 + radius: 14 + color: Theme.surface + border.color: Theme.outline + border.width: 1 + y: 2 + x: Settings.settings.showSystemInfoInBar ? customSwitch2.width - width - 2 : 2 + + Behavior on x { + NumberAnimation { duration: 200; easing.type: Easing.OutCubic } + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + Settings.settings.showSystemInfoInBar = !Settings.settings.showSystemInfoInBar + } + } + } + } + + // Show Corners In Bar Setting + RowLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + Text { + text: "Show Corners" + font.family: Theme.fontFamily + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + Layout.alignment: Qt.AlignVCenter + } + + Item { + Layout.fillWidth: true + } + + Rectangle { + id: customSwitch4 + width: 52 + height: 32 + radius: 16 + color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.surfaceVariant + border.color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.outline + border.width: 2 + + Rectangle { + id: thumb4 + width: 28 + height: 28 + radius: 14 + color: Theme.surface + border.color: Theme.outline + border.width: 1 + y: 2 + x: Settings.settings.showCorners ? customSwitch4.width - width - 2 : 2 + + Behavior on x { + NumberAnimation { duration: 200; easing.type: Easing.OutCubic } + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + Settings.settings.showCorners = !Settings.settings.showCorners + } + } + } + } + + // Show Taskbar in Bar Setting + RowLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + Text { + text: "Show Taskbar" + font.family: Theme.fontFamily + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + Layout.alignment: Qt.AlignVCenter + } + + Item { + Layout.fillWidth: true + } + + Rectangle { + id: customSwitch5 + width: 52 + height: 32 + radius: 16 + color: Settings.settings.showTaskbar ? Theme.accentPrimary : Theme.surfaceVariant + border.color: Settings.settings.showTaskbar ? Theme.accentPrimary : Theme.outline + border.width: 2 + + Rectangle { + id: thumb5 + width: 28 + height: 28 + radius: 14 + color: Theme.surface + border.color: Theme.outline + border.width: 1 + y: 2 + x: Settings.settings.showTaskbar ? customSwitch5.width - width - 2 : 2 + + Behavior on x { + NumberAnimation { duration: 200; easing.type: Easing.OutCubic } + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + Settings.settings.showTaskbar = !Settings.settings.showTaskbar + } + } + } + } + + // Show Media In Bar Setting + RowLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + Text { + text: "Show Media In Bar" + font.family: Theme.fontFamily + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + Layout.alignment: Qt.AlignVCenter + } + + Item { + Layout.fillWidth: true + } + + Rectangle { + id: customSwitch3 + width: 52 + height: 32 + radius: 16 + color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.surfaceVariant + border.color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.outline + border.width: 2 + + Rectangle { + id: thumb3 + width: 28 + height: 28 + radius: 14 + color: Theme.surface + border.color: Theme.outline + border.width: 1 + y: 2 + x: Settings.settings.showMediaInBar ? customSwitch3.width - width - 2 : 2 + + Behavior on x { + NumberAnimation { duration: 200; easing.type: Easing.OutCubic } + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + Settings.settings.showMediaInBar = !Settings.settings.showMediaInBar + } + } + } + } + + // Dim Windows Setting + RowLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + Text { + text: "Dim Desktop" + font.family: Theme.fontFamily + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + Item { + Layout.fillWidth: true + } + + Rectangle { + id: dimWindowsSwitch + width: 52 + height: 32 + radius: 16 + color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.surfaceVariant + border.color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.outline + border.width: 2 + + Rectangle { + id: dimWindowsThumb + width: 28 + height: 28 + radius: 14 + color: Theme.surface + border.color: Theme.outline + border.width: 1 + y: 2 + x: Settings.settings.dimPanels ? dimWindowsSwitch.width - width - 2 : 2 + + Behavior on x { + NumberAnimation { duration: 200; easing.type: Easing.OutCubic } + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + Settings.settings.dimPanels = !Settings.settings.dimPanels + } + } + } + } + + // Visualizer Type Selection + ColumnLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 16 + + Text { + text: "Visualizer Type" + font.family: Theme.fontFamily + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + ComboBox { + id: visualizerTypeComboBox + Layout.fillWidth: true + Layout.preferredHeight: 40 + model: ["radial", "fire", "diamond"] + currentIndex: model.indexOf(Settings.settings.visualizerType) + + background: Rectangle { + implicitWidth: 120 + implicitHeight: 40 + color: Theme.surfaceVariant + border.color: visualizerTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline + border.width: 1 + radius: 8 + } + + contentItem: Text { + leftPadding: 12 + rightPadding: visualizerTypeComboBox.indicator.width + visualizerTypeComboBox.spacing + text: visualizerTypeComboBox.displayText.charAt(0).toUpperCase() + visualizerTypeComboBox.displayText.slice(1) + font.family: Theme.fontFamily + font.pixelSize: 13 + color: Theme.textPrimary + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + indicator: Text { + x: visualizerTypeComboBox.width - width - 12 + y: visualizerTypeComboBox.topPadding + (visualizerTypeComboBox.availableHeight - height) / 2 + text: "arrow_drop_down" + font.family: "Material Symbols Outlined" + font.pixelSize: 24 + color: Theme.textPrimary + } + + popup: Popup { + y: visualizerTypeComboBox.height + width: visualizerTypeComboBox.width + implicitHeight: contentItem.implicitHeight + padding: 1 + + contentItem: ListView { + clip: true + implicitHeight: contentHeight + model: visualizerTypeComboBox.popup.visible ? visualizerTypeComboBox.delegateModel : null + currentIndex: visualizerTypeComboBox.highlightedIndex + + ScrollIndicator.vertical: ScrollIndicator {} + } + + background: Rectangle { + color: Theme.surfaceVariant + border.color: Theme.outline + border.width: 1 + radius: 8 + } + } + + delegate: ItemDelegate { + width: visualizerTypeComboBox.width + contentItem: Text { + text: modelData.charAt(0).toUpperCase() + modelData.slice(1) + font.family: Theme.fontFamily + font.pixelSize: 13 + color: Theme.textPrimary + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + highlighted: visualizerTypeComboBox.highlightedIndex === index + + background: Rectangle { + color: highlighted ? Theme.accentPrimary.toString().replace(/#/, "#1A") : "transparent" + } + } + + onActivated: { + Settings.settings.visualizerType = model[index]; + } + } + } + + // Video Path Input Section + ColumnLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + Text { + text: "Video Path" + font.family: Theme.fontFamily + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } Rectangle { Layout.fillWidth: true Layout.preferredHeight: 40 radius: 8 color: Theme.surfaceVariant - border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline + border.color: videoPathInput.activeFocus ? Theme.accentPrimary : Theme.outline border.width: 1 TextInput { - id: profileImageInput + id: videoPathInput anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top @@ -118,451 +623,32 @@ Rectangle { anchors.rightMargin: 12 anchors.topMargin: 6 anchors.bottomMargin: 6 - text: Settings.settings.profileImage + text: Settings.settings.videoPath !== undefined ? Settings.settings.videoPath : "" font.family: Theme.fontFamily font.pixelSize: 13 color: Theme.textPrimary verticalAlignment: TextInput.AlignVCenter clip: true - focus: true selectByMouse: true activeFocusOnTab: true - inputMethodHints: Qt.ImhNone + inputMethodHints: Qt.ImhUrlCharactersOnly onTextChanged: { - Settings.settings.profileImage = text + Settings.settings.videoPath = text } MouseArea { anchors.fill: parent cursorShape: Qt.IBeamCursor - onClicked: { - profileImageInput.forceActiveFocus() - } + onClicked: videoPathInput.forceActiveFocus() } } } } - } - - // Show Active Window Icon Setting - RowLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - Text { - text: "Show Active Window Icon" - font.family: Theme.fontFamily - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } + // Add an extra spacer at the bottom to ensure all content is reachable Item { - Layout.fillWidth: true - } - - // Custom Material 3 Switch - Rectangle { - id: customSwitch - width: 52 - height: 32 - radius: 16 - color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.outline - border.width: 2 - - Rectangle { - id: thumb - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.showActiveWindowIcon ? customSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { duration: 200; easing.type: Easing.OutCubic } - } - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.showActiveWindowIcon = !Settings.settings.showActiveWindowIcon - } - } - } - } - - // Show System Info In Bar Setting - RowLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - Text { - text: "Show System Info In Bar" - font.family: Theme.fontFamily - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - Layout.alignment: Qt.AlignVCenter - } - - Item { - Layout.fillWidth: true - } - - // Custom Material 3 Switch - Rectangle { - id: customSwitch2 - width: 52 - height: 32 - radius: 16 - color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.outline - border.width: 2 - - Rectangle { - id: thumb2 - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.showSystemInfoInBar ? customSwitch2.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { duration: 200; easing.type: Easing.OutCubic } - } - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.showSystemInfoInBar = !Settings.settings.showSystemInfoInBar - } - } - } - } - - // Show Corners In Bar Setting - RowLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - Text { - text: "Show Corners" - font.family: Theme.fontFamily - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - Layout.alignment: Qt.AlignVCenter - } - - Item { - Layout.fillWidth: true - } - - // Custom Material 3 Switch - Rectangle { - id: customSwitch4 - width: 52 - height: 32 - radius: 16 - color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.outline - border.width: 2 - - Rectangle { - id: thumb4 - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.showCorners ? customSwitch4.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { duration: 200; easing.type: Easing.OutCubic } - } - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.showCorners = !Settings.settings.showCorners - } - } - } - } - - // Show Media In Bar Setting - RowLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - Text { - text: "Show Media In Bar" - font.family: Theme.fontFamily - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - Layout.alignment: Qt.AlignVCenter - } - - Item { - Layout.fillWidth: true - } - - // Custom Material 3 Switch - Rectangle { - id: customSwitch3 - width: 52 - height: 32 - radius: 16 - color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.outline - border.width: 2 - - Rectangle { - id: thumb3 - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.showMediaInBar ? customSwitch3.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { duration: 200; easing.type: Easing.OutCubic } - } - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.showMediaInBar = !Settings.settings.showMediaInBar - } - } - } - } - - // Dim Windows Setting - RowLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - Text { - text: "Dim Desktop" - font.family: Theme.fontFamily - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - Item { - Layout.fillWidth: true - } - - // Custom Material 3 Switch - Rectangle { - id: dimWindowsSwitch - width: 52 - height: 32 - radius: 16 - color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.outline - border.width: 2 - - Rectangle { - id: dimWindowsThumb - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.dimPanels ? dimWindowsSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { duration: 200; easing.type: Easing.OutCubic } - } - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.dimPanels = !Settings.settings.dimPanels - } - } - } - } - - // Visualizer Type Selection - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 16 - - Text { - text: "Visualizer Type" - font.family: Theme.fontFamily - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - ComboBox { - id: visualizerTypeComboBox - Layout.fillWidth: true - Layout.preferredHeight: 40 - model: ["radial", "fire", "diamond"] - currentIndex: model.indexOf(Settings.settings.visualizerType) - - background: Rectangle { - implicitWidth: 120 - implicitHeight: 40 - color: Theme.surfaceVariant - border.color: visualizerTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 1 - radius: 8 - } - - contentItem: Text { - leftPadding: 12 - rightPadding: visualizerTypeComboBox.indicator.width + visualizerTypeComboBox.spacing - text: visualizerTypeComboBox.displayText.charAt(0).toUpperCase() + visualizerTypeComboBox.displayText.slice(1) - font.family: Theme.fontFamily - font.pixelSize: 13 - color: Theme.textPrimary - verticalAlignment: Text.AlignVCenter - elide: Text.ElideRight - } - - indicator: Text { - x: visualizerTypeComboBox.width - width - 12 - y: visualizerTypeComboBox.topPadding + (visualizerTypeComboBox.availableHeight - height) / 2 - text: "arrow_drop_down" - font.family: "Material Symbols Outlined" - font.pixelSize: 24 - color: Theme.textPrimary - } - - popup: Popup { - y: visualizerTypeComboBox.height - width: visualizerTypeComboBox.width - implicitHeight: contentItem.implicitHeight - padding: 1 - - contentItem: ListView { - clip: true - implicitHeight: contentHeight - model: visualizerTypeComboBox.popup.visible ? visualizerTypeComboBox.delegateModel : null - currentIndex: visualizerTypeComboBox.highlightedIndex - - ScrollIndicator.vertical: ScrollIndicator {} - } - - background: Rectangle { - color: Theme.surfaceVariant - border.color: Theme.outline - border.width: 1 - radius: 8 - } - } - - delegate: ItemDelegate { - width: visualizerTypeComboBox.width - contentItem: Text { - text: modelData.charAt(0).toUpperCase() + modelData.slice(1) - font.family: Theme.fontFamily - font.pixelSize: 13 - color: Theme.textPrimary - verticalAlignment: Text.AlignVCenter - elide: Text.ElideRight - } - highlighted: visualizerTypeComboBox.highlightedIndex === index - - background: Rectangle { - color: highlighted ? Theme.accentPrimary.toString().replace(/#/, "#1A") : "transparent" - } - } - - onActivated: { - Settings.settings.visualizerType = model[index]; - } - } - } - - // Video Path Input Section - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - Text { - text: "Video Path" - font.family: Theme.fontFamily - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - Rectangle { - Layout.fillWidth: true - Layout.preferredHeight: 40 - radius: 8 - color: Theme.surfaceVariant - border.color: videoPathInput.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 1 - - TextInput { - id: videoPathInput - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.leftMargin: 12 - anchors.rightMargin: 12 - anchors.topMargin: 6 - anchors.bottomMargin: 6 - text: Settings.settings.videoPath !== undefined ? Settings.settings.videoPath : "" - font.family: Theme.fontFamily - font.pixelSize: 13 - color: Theme.textPrimary - verticalAlignment: TextInput.AlignVCenter - clip: true - selectByMouse: true - activeFocusOnTab: true - inputMethodHints: Qt.ImhUrlCharactersOnly - onTextChanged: { - Settings.settings.videoPath = text - } - MouseArea { - anchors.fill: parent - cursorShape: Qt.IBeamCursor - onClicked: videoPathInput.forceActiveFocus() - } - } + Layout.fillHeight: true + Layout.minimumHeight: 20 } } } -} +} \ No newline at end of file