diff --git a/Modules/AppLauncher/AppLauncher.qml b/Modules/AppLauncher/AppLauncher.qml index af3dd3c..3f90006 100644 --- a/Modules/AppLauncher/AppLauncher.qml +++ b/Modules/AppLauncher/AppLauncher.qml @@ -371,8 +371,7 @@ NLoader { property bool isSelected: index === selectedIndex color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Colors.mPrimary, 1.1) : Colors.mSurface - border.color: (appCardArea.containsMouse - || isSelected) ? Colors.mPrimary : "transparent" + border.color: (appCardArea.containsMouse || isSelected) ? Colors.mPrimary : "transparent" border.width: (appCardArea.containsMouse || isSelected) ? 2 : 0 Behavior on color { diff --git a/Modules/LockScreen/LockScreen.qml b/Modules/LockScreen/LockScreen.qml index 7bf4c35..04693c2 100644 --- a/Modules/LockScreen/LockScreen.qml +++ b/Modules/LockScreen/LockScreen.qml @@ -530,8 +530,7 @@ WlSessionLock { width: 120 * Scaling.scale(screen) height: 40 * Scaling.scale(screen) radius: 12 - color: executeButtonArea.containsMouse ? Colors.mPrimary : Colors.applyOpacity( - Colors.mPrimary, "33") + color: executeButtonArea.containsMouse ? Colors.mPrimary : Colors.applyOpacity(Colors.mPrimary, "33") border.color: Colors.mPrimary border.width: 1 enabled: !lock.authenticating @@ -631,8 +630,7 @@ WlSessionLock { width: 64 * Scaling.scale(screen) height: 64 * Scaling.scale(screen) radius: 32 - color: Qt.rgba(Colors.mError.r, Colors.mError.g, Colors.mError.b, - shutdownArea.containsMouse ? 0.9 : 0.2) + color: Qt.rgba(Colors.mError.r, Colors.mError.g, Colors.mError.b, shutdownArea.containsMouse ? 0.9 : 0.2) border.color: Colors.mError border.width: 2 * Scaling.scale(screen) @@ -689,8 +687,7 @@ WlSessionLock { width: 64 * Scaling.scale(screen) height: 64 * Scaling.scale(screen) radius: 32 - color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b, - rebootArea.containsMouse ? 0.9 : 0.2) + color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b, rebootArea.containsMouse ? 0.9 : 0.2) border.color: Colors.mPrimary border.width: 2 * Scaling.scale(screen) diff --git a/Modules/Settings/SettingsPanel.qml b/Modules/Settings/SettingsPanel.qml index 253ebf7..40bbac2 100644 --- a/Modules/Settings/SettingsPanel.qml +++ b/Modules/Settings/SettingsPanel.qml @@ -10,18 +10,18 @@ import qs.Widgets NLoader { id: root + // Enumerate all the tabs, ordering is NOT relevant enum Tab { - General, - Bar, - TimeWeather, - ScreenRecorder, - Network, + About, Audio, + Bar, Display, + General, + Network, + ScreenRecorder, + TimeWeather, Wallpaper, - WallpaperSelector, - //Misc, - About + WallpaperSelector } property int requestedTab: SettingsPanel.Tab.General @@ -33,6 +33,61 @@ NLoader { readonly property real scaling: Scaling.scale(screen) property int currentTabIndex: 0 + // List of all the tabs, ordering is relevant. + property var tabsModel: [{ + "id": SettingsPanel.Tab.General, + "label": "General", + "icon": "tune", + "source": "Tabs/General.qml" + }, { + "id": SettingsPanel.Tab.Bar, + "label": "Bar", + "icon": "web_asset", + "source": "Tabs/Bar.qml" + }, { + "id": SettingsPanel.Tab.Display, + "label": "Display", + "icon": "monitor", + "source": "Tabs/Display.qml" + }, { + "id": SettingsPanel.Tab.Audio, + "label": "Audio", + "icon": "volume_up", + "source": "Tabs/Audio.qml" + }, { + "id": SettingsPanel.Tab.Network, + "label": "Network", + "icon": "lan", + "source": "Tabs/Network.qml" + }, { + "id": SettingsPanel.Tab.TimeWeather, + "label": "Time & Weather", + "icon": "schedule", + "source": "Tabs/TimeWeather.qml" + }, { + "id": SettingsPanel.Tab.Wallpaper, + "label": "Wallpaper", + "icon": "image", + "source": "Tabs/Wallpaper.qml" + }, { + "id": SettingsPanel.Tab.WallpaperSelector, + "label": "Wallpaper Selector", + "icon": "wallpaper_slideshow", + "source": "Tabs/WallpaperSelector.qml" + }, { + "id": SettingsPanel.Tab.ScreenRecorder, + "label": "Screen Recorder", + "icon": "videocam", + "source": "Tabs/ScreenRecorder.qml" + }, { + "id": SettingsPanel.Tab.About, + "label": "About", + "icon": "info", + "source": "Tabs/About.qml" + }] + + WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand + // Override hide function to animate first function hide() { // Start hide animation @@ -43,6 +98,69 @@ NLoader { hideTimer.start() } + function getTab(tabId) { + switch (tabId) { + case SettingsPanel.Tab.About: + return tabAbount + case SettingsPanel.Tab.Audio: + return tabAudio + case SettingsPanel.Tab.Bar: + return tabBar + case SettingsPanel.Tab.General: + return tabGeneral + case SettingsPanel.Tab.Network: + return tabNetwork + case SettingsPanel.Tab.ScreenRecorder: + return tabScreenRecorder + case SettingsPanel.Tab.TimeWeather: + return tabTimeWeather + case SettingsPanel.Tab.Wallpaper: + return tabWallpaper + case SettingsPanel.Tab.WallpaperSelector: + return tabWallpaperSelector + default: + return tabGeneral + } + } + + // Wrap each tab in a Component so we can spawn them with flexibility + Component { + id: tabAbount + Tabs.About {} + } + Component { + id: tabAudio + Tabs.Audio {} + } + Component { + id: tabBar + Tabs.Bar {} + } + Component { + id: tabGeneral + Tabs.General {} + } + Component { + id: tabNetwork + Tabs.Network {} + } + Component { + id: tabScreenRecorder + Tabs.ScreenRecorder {} + } + Component { + id: tabTimeWeather + Tabs.TimeWeather {} + } + Component { + id: tabWallpaper + Tabs.Wallpaper {} + } + Component { + id: tabWallpaperSelector + Tabs.WallpaperSelector {} + } + // Connect to NPanel's dismissed signal to handle external close events Connections { target: panel @@ -67,66 +185,6 @@ NLoader { } } - WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand - - property var tabsModel: [{ - "id": SettingsPanel.Tab.General, - "label": "General", - "icon": "tune", - "source": "Tabs/General.qml" - }, { - "id": SettingsPanel.Tab.Bar, - "label": "Bar", - "icon": "web_asset", - "source": "Tabs/Bar.qml" - }, { - "id": SettingsPanel.Tab.TimeWeather, - "label": "Time & Weather", - "icon": "schedule", - "source": "Tabs/TimeWeather.qml" - }, { - "id": SettingsPanel.Tab.ScreenRecorder, - "label": "Screen Recorder", - "icon": "videocam", - "source": "Tabs/ScreenRecorder.qml" - }, { - "id": SettingsPanel.Tab.Network, - "label": "Network", - "icon": "lan", - "source": "Tabs/Network.qml" - }, { - "id": SettingsPanel.Tab.Audio, - "label": "Audio", - "icon": "volume_up", - "source": "Tabs/Audio.qml" - }, { - "id": SettingsPanel.Tab.Display, - "label": "Display", - "icon": "monitor", - "source": "Tabs/Display.qml" - }, { - "id": SettingsPanel.Tab.Wallpaper, - "label": "Wallpaper", - "icon": "image", - "source": "Tabs/Wallpaper.qml" - }, { - "id": SettingsPanel.Tab.WallpaperSelector, - "label": "Wallpaper Selector", - "icon": "wallpaper_slideshow", - "source": "Tabs/WallpaperSelector.qml" - }, // { - // "id": SettingsPanel.Tab.Misc, - // "label": "Misc", - // "icon": "more_horiz", - // "source": "Tabs/Misc.qml" - // }, - { - "id": SettingsPanel.Tab.About, - "label": "About", - "icon": "info", - "source": "Tabs/About.qml" - }] - Component.onCompleted: { show() } @@ -220,7 +278,6 @@ NLoader { spacing: Style.marginTiny * 1.5 * scaling // Minimal spacing between tabs Repeater { - id: sections model: panel.tabsModel delegate: Rectangle { @@ -328,17 +385,12 @@ NLoader { Layout.fillHeight: true currentIndex: currentTabIndex - Tabs.General {} - Tabs.Bar {} - Tabs.TimeWeather {} - Tabs.ScreenRecorder {} - Tabs.Network {} - Tabs.Audio {} - Tabs.Display {} - Tabs.Wallpaper {} - Tabs.WallpaperSelector {} - //Tabs.Misc {} - Tabs.About {} + Repeater { + model: panel.tabsModel + delegate: Loader { + sourceComponent: getTab(modelData.id) + } + } } } } diff --git a/Modules/Settings/Tabs/ColorScheme.qml b/Modules/Settings/Tabs/ColorScheme.qml new file mode 100644 index 0000000..cd49a77 --- /dev/null +++ b/Modules/Settings/Tabs/ColorScheme.qml @@ -0,0 +1,89 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import qs.Services +import qs.Widgets + +ColumnLayout { + id: root + + spacing: 0 + + ScrollView { + id: scrollView + + Layout.fillWidth: true + Layout.fillHeight: true + padding: Style.marginMedium * scaling + clip: true + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: ScrollBar.AsNeeded + + ColumnLayout { + width: scrollView.availableWidth + spacing: 0 + + Item { + Layout.fillWidth: true + Layout.preferredHeight: 0 + } + + ColumnLayout { + spacing: Style.marginLarge * scaling + Layout.fillWidth: true + + NText { + text: "Components" + font.pointSize: Style.fontSizeXL * scaling + font.weight: Style.fontWeightBold + color: Colors.mOnSurface + } + + NToggle { + label: "Show Active Window" + description: "Display the title of the currently focused window below the bar" + value: Settings.data.bar.showActiveWindow + onToggled: function (newValue) { + Settings.data.bar.showActiveWindow = newValue + } + } + + NToggle { + label: "Show Active Window Icon" + description: "Display the icon of the currently focused window" + value: Settings.data.bar.showActiveWindowIcon + onToggled: function (newValue) { + Settings.data.bar.showActiveWindowIcon = newValue + } + } + + NToggle { + label: "Show System Info" + description: "Display system information (CPU, RAM, Temperature)" + value: Settings.data.bar.showSystemInfo + onToggled: function (newValue) { + Settings.data.bar.showSystemInfo = newValue + } + } + + NToggle { + label: "Show Taskbar" + description: "Display a taskbar showing currently open windows" + value: Settings.data.bar.showTaskbar + onToggled: function (newValue) { + Settings.data.bar.showTaskbar = newValue + } + } + + NToggle { + label: "Show Media" + description: "Display media controls and information" + value: Settings.data.bar.showMedia + onToggled: function (newValue) { + Settings.data.bar.showMedia = newValue + } + } + } + } + } +} diff --git a/Modules/Settings/Tabs/Misc.qml b/Modules/Settings/Tabs/Misc.qml deleted file mode 100644 index 0b04700..0000000 --- a/Modules/Settings/Tabs/Misc.qml +++ /dev/null @@ -1,45 +0,0 @@ -import QtQuick -import QtQuick.Controls -import QtQuick.Layouts -import qs.Services -import qs.Widgets - -ColumnLayout { - id: root - - spacing: 0 - - ScrollView { - id: scrollView - - Layout.fillWidth: true - Layout.fillHeight: true - padding: Style.marginMedium * scaling - clip: true - ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - ScrollBar.vertical.policy: ScrollBar.AsNeeded - - ColumnLayout { - width: scrollView.availableWidth - spacing: 0 - - Item { - Layout.fillWidth: true - Layout.preferredHeight: 0 - } - - ColumnLayout { - spacing: Style.marginLarge * scaling - Layout.fillWidth: true - - NText { - text: "Miscellaneous Settings" - font.pointSize: Style.fontSizeXL * scaling - font.weight: Style.fontWeightBold - color: Colors.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling - } - } - } - } -} diff --git a/Services/Colors.qml b/Services/Colors.qml index 4d80001..df0cc39 100644 --- a/Services/Colors.qml +++ b/Services/Colors.qml @@ -6,10 +6,9 @@ import Quickshell.Io import qs.Services // -------------------------------- -// Noctalia Colors - Material Design 3 +// Noctalia Colors - Material Design 3 // We only use a very small subset of all available m3 colors to avoid complexity // All color names start with a 'm' to avoid QML assuming some of them are signals (ex: onPrimary) - Singleton { id: root @@ -58,7 +57,7 @@ Singleton { property color mError: "#eb6f92" property color mOnError: "#191724" - + property color mSurface: "#191724" property color mOnSurface: "#e0def4" property color mSurfaceVariant: "#26233a" @@ -66,7 +65,6 @@ Singleton { property color mOutline: "#44415a" property color mOutlineVariant: "#514e6c" property color mShadow: "#191724" - } // ---------------------------------------------------------------- diff --git a/Widgets/NIconButton.qml b/Widgets/NIconButton.qml index 3d7f858..d3ebf16 100644 --- a/Widgets/NIconButton.qml +++ b/Widgets/NIconButton.qml @@ -42,8 +42,7 @@ Rectangle { font.variableAxes: { "wght": (Font.Normal + Font.Bold) / 2.0 } - color: (root.hovering - || showFilled) ? Colors.mOnPrimary : showBorder ? Colors.mPrimary : Colors.mOnSurface + color: (root.hovering || showFilled) ? Colors.mOnPrimary : showBorder ? Colors.mPrimary : Colors.mOnSurface horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter opacity: root.enabled ? Style.opacityFull : Style.opacityMedium diff --git a/Widgets/NToggle.qml b/Widgets/NToggle.qml index eb61dd4..8974340 100644 --- a/Widgets/NToggle.qml +++ b/Widgets/NToggle.qml @@ -53,7 +53,7 @@ RowLayout { implicitWidth: (root.baseSize - 5) * scaling implicitHeight: (root.baseSize - 5) * scaling radius: height * 0.5 - color: value ? Colors.mOnPrimary: Colors.mPrimary + color: value ? Colors.mOnPrimary : Colors.mPrimary border.color: value ? Colors.mSurface : Colors.mSurface border.width: Math.max(1, Style.borderMedium * scaling) y: 2 * scaling