Merge branch 'modular-bar'
This commit is contained in:
commit
111959e66c
35 changed files with 808 additions and 196 deletions
|
|
@ -47,7 +47,7 @@ Variants {
|
|||
layer.enabled: true
|
||||
}
|
||||
|
||||
// Left
|
||||
// Left Section - Dynamic Widgets
|
||||
Row {
|
||||
id: leftSection
|
||||
|
||||
|
|
@ -57,14 +57,25 @@ Variants {
|
|||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Style.marginS * scaling
|
||||
|
||||
SystemMonitor {}
|
||||
|
||||
ActiveWindow {}
|
||||
|
||||
MediaMini {}
|
||||
Repeater {
|
||||
model: Settings.data.bar.widgets.left
|
||||
delegate: Loader {
|
||||
id: leftWidgetLoader
|
||||
sourceComponent: widgetLoader.getWidgetComponent(modelData)
|
||||
active: true
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
onStatusChanged: {
|
||||
if (status === Loader.Error) {
|
||||
widgetLoader.onWidgetFailed(modelData, "Loader error")
|
||||
} else if (status === Loader.Ready) {
|
||||
widgetLoader.onWidgetLoaded(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Center
|
||||
// Center Section - Dynamic Widgets
|
||||
Row {
|
||||
id: centerSection
|
||||
|
||||
|
|
@ -73,10 +84,25 @@ Variants {
|
|||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Style.marginS * scaling
|
||||
|
||||
Workspace {}
|
||||
Repeater {
|
||||
model: Settings.data.bar.widgets.center
|
||||
delegate: Loader {
|
||||
id: centerWidgetLoader
|
||||
sourceComponent: widgetLoader.getWidgetComponent(modelData)
|
||||
active: true
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
onStatusChanged: {
|
||||
if (status === Loader.Error) {
|
||||
widgetLoader.onWidgetFailed(modelData, "Loader error")
|
||||
} else if (status === Loader.Ready) {
|
||||
widgetLoader.onWidgetLoaded(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
// Right Section - Dynamic Widgets
|
||||
Row {
|
||||
id: rightSection
|
||||
|
||||
|
|
@ -86,44 +112,38 @@ Variants {
|
|||
anchors.verticalCenter: bar.verticalCenter
|
||||
spacing: Style.marginS * scaling
|
||||
|
||||
ScreenRecorderIndicator {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
Repeater {
|
||||
model: Settings.data.bar.widgets.right
|
||||
delegate: Loader {
|
||||
id: rightWidgetLoader
|
||||
sourceComponent: widgetLoader.getWidgetComponent(modelData)
|
||||
active: true
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
onStatusChanged: {
|
||||
if (status === Loader.Error) {
|
||||
widgetLoader.onWidgetFailed(modelData, "Loader error")
|
||||
} else if (status === Loader.Ready) {
|
||||
widgetLoader.onWidgetLoaded(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Tray {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
NotificationHistory {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
WiFi {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Bluetooth {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Battery {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Volume {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Brightness {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Clock {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
SidePanelToggle {}
|
||||
}
|
||||
}
|
||||
|
||||
// Widget loader instance
|
||||
WidgetLoader {
|
||||
id: widgetLoader
|
||||
|
||||
onWidgetFailed: function (widgetName, error) {
|
||||
Logger.error("Bar", `Widget failed: ${widgetName} - ${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize widget loading tracking
|
||||
Component.onCompleted: {
|
||||
const allWidgets = [...Settings.data.bar.widgets.left, ...Settings.data.bar.widgets.center, ...Settings.data.bar.widgets.right]
|
||||
widgetLoader.initializeLoading(allWidgets)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import Quickshell.Wayland
|
||||
import qs.Commons
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
|
||||
NIconButton {
|
||||
id: root
|
||||
|
||||
readonly property bool wifiEnabled: Settings.data.network.wifiEnabled
|
||||
|
||||
sizeMultiplier: 0.8
|
||||
visible: wifiEnabled
|
||||
|
||||
colorBg: Color.mSurfaceVariant
|
||||
colorFg: Color.mOnSurface
|
||||
colorBorder: Color.transparent
|
||||
colorBorderHover: Color.transparent
|
||||
|
||||
icon: {
|
||||
let connected = false
|
||||
let signalStrength = 0
|
||||
for (const net in NetworkService.networks) {
|
||||
if (NetworkService.networks[net].connected) {
|
||||
connected = true
|
||||
signalStrength = NetworkService.networks[net].signal
|
||||
break
|
||||
}
|
||||
}
|
||||
return connected ? NetworkService.signalIcon(signalStrength) : "wifi"
|
||||
}
|
||||
tooltipText: "WiFi Networks"
|
||||
onClicked: {
|
||||
wifiPanel.toggle(screen)
|
||||
}
|
||||
|
||||
WiFiPanel {
|
||||
id: wifiPanel
|
||||
}
|
||||
}
|
||||
|
|
@ -22,8 +22,6 @@ NPill {
|
|||
|
||||
// Choose icon based on charge and charging state
|
||||
function batteryIcon() {
|
||||
if (!show)
|
||||
return ""
|
||||
|
||||
if (charging)
|
||||
return "battery_android_bolt"
|
||||
|
|
@ -10,9 +10,7 @@ import qs.Widgets
|
|||
NIconButton {
|
||||
id: root
|
||||
|
||||
readonly property bool bluetoothEnabled: Settings.data.network.bluetoothEnabled
|
||||
sizeMultiplier: 0.8
|
||||
visible: bluetoothEnabled
|
||||
|
||||
colorBg: Color.mSurfaceVariant
|
||||
colorFg: Color.mOnSurface
|
||||
|
|
@ -33,8 +31,4 @@ NIconButton {
|
|||
onClicked: {
|
||||
bluetoothPanel.toggle(screen)
|
||||
}
|
||||
|
||||
BluetoothPanel {
|
||||
id: bluetoothPanel
|
||||
}
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ Item {
|
|||
|
||||
width: pill.width
|
||||
height: pill.height
|
||||
visible: Settings.data.bar.showBrightness && firstBrightnessReceived && getMonitor() !== null
|
||||
visible: getMonitor() !== null
|
||||
|
||||
// Used to avoid opening the pill on Quickshell startup
|
||||
property bool firstBrightnessReceived: false
|
||||
|
|
@ -11,7 +11,8 @@ Row {
|
|||
id: root
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Style.marginS * scaling
|
||||
visible: Settings.data.bar.showMedia && (MediaService.canPlay || MediaService.canPause)
|
||||
visible: MediaService.currentPlayer !== null
|
||||
width: MediaService.currentPlayer !== null ? implicitWidth : 0
|
||||
|
||||
function getTitle() {
|
||||
return MediaService.trackTitle + (MediaService.trackArtist !== "" ? ` - ${MediaService.trackArtist}` : "")
|
||||
|
|
@ -13,6 +13,7 @@ Rectangle {
|
|||
readonly property real itemSize: 24 * scaling
|
||||
|
||||
visible: Settings.data.bar.showTray && (SystemTray.items.values.length > 0)
|
||||
|
||||
width: tray.width + Style.marginM * scaling * 2
|
||||
|
||||
height: Math.round(Style.capsuleHeight * scaling)
|
||||
|
|
@ -95,14 +96,14 @@ Rectangle {
|
|||
return
|
||||
}
|
||||
|
||||
if (modelData.hasMenu && modelData.menu && trayMenu) {
|
||||
if (modelData.hasMenu && modelData.menu && trayMenu.item) {
|
||||
trayPanel.open()
|
||||
|
||||
// Anchor the menu to the tray icon item (parent) and position it below the icon
|
||||
const menuX = (width / 2) - (trayMenu.width / 2)
|
||||
const menuX = (width / 2) - (trayMenu.item.width / 2)
|
||||
const menuY = (Style.barHeight * scaling)
|
||||
trayMenu.menu = modelData.menu
|
||||
trayMenu.showAt(parent, menuX, menuY)
|
||||
trayMenu.item.menu = modelData.menu
|
||||
trayMenu.item.showAt(parent, menuX, menuY)
|
||||
} else {
|
||||
Logger.log("Tray", "No menu available for", modelData.id, "or trayMenu not set")
|
||||
}
|
||||
|
|
@ -142,7 +143,7 @@ Rectangle {
|
|||
|
||||
function close() {
|
||||
visible = false
|
||||
trayMenu.hideMenu()
|
||||
trayMenu.item.hideMenu()
|
||||
}
|
||||
|
||||
// Clicking outside of the rectangle to close
|
||||
|
|
@ -151,8 +152,9 @@ Rectangle {
|
|||
onClicked: trayPanel.close()
|
||||
}
|
||||
|
||||
TrayMenu {
|
||||
Loader {
|
||||
id: trayMenu
|
||||
source: "TrayMenu.qml"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -134,7 +134,7 @@ PopupWindow {
|
|||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: mouseArea.containsMouse ? Color.mSecondary : Color.transparent
|
||||
color: mouseArea.containsMouse ? Color.mTertiary : Color.transparent
|
||||
radius: Style.radiusS * scaling
|
||||
visible: !(modelData?.isSeparator ?? false)
|
||||
|
||||
54
Modules/Bar/Widgets/WiFi.qml
Normal file
54
Modules/Bar/Widgets/WiFi.qml
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import Quickshell.Wayland
|
||||
import qs.Commons
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
|
||||
NIconButton {
|
||||
id: root
|
||||
|
||||
sizeMultiplier: 0.8
|
||||
|
||||
Component.onCompleted: {
|
||||
Logger.log("WiFi", "Widget component completed")
|
||||
Logger.log("WiFi", "NetworkService available:", !!NetworkService)
|
||||
if (NetworkService) {
|
||||
Logger.log("WiFi", "NetworkService.networks available:", !!NetworkService.networks)
|
||||
}
|
||||
}
|
||||
|
||||
colorBg: Color.mSurfaceVariant
|
||||
colorFg: Color.mOnSurface
|
||||
colorBorder: Color.transparent
|
||||
colorBorderHover: Color.transparent
|
||||
|
||||
icon: {
|
||||
try {
|
||||
let connected = false
|
||||
let signalStrength = 0
|
||||
for (const net in NetworkService.networks) {
|
||||
if (NetworkService.networks[net].connected) {
|
||||
connected = true
|
||||
signalStrength = NetworkService.networks[net].signal
|
||||
break
|
||||
}
|
||||
}
|
||||
return connected ? NetworkService.signalIcon(signalStrength) : "wifi"
|
||||
} catch (error) {
|
||||
Logger.error("WiFi", "Error getting icon:", error)
|
||||
return "wifi"
|
||||
}
|
||||
}
|
||||
tooltipText: "WiFi Networks"
|
||||
onClicked: {
|
||||
try {
|
||||
Logger.log("WiFi", "Button clicked, toggling panel")
|
||||
wifiPanel.toggle(screen)
|
||||
} catch (error) {
|
||||
Logger.error("WiFi", "Error toggling panel:", error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -118,7 +118,7 @@ NPanel {
|
|||
radius: Style.radiusM * scaling
|
||||
color: {
|
||||
if (availableDeviceArea.containsMouse && !isBusy)
|
||||
return Color.mSecondary
|
||||
return Color.mTertiary
|
||||
|
||||
if (modelData.pairing || modelData.state === BluetoothDeviceState.Connecting)
|
||||
return Color.mPrimary
|
||||
|
|
@ -47,6 +47,7 @@ NPanel {
|
|||
id: barTab
|
||||
Tabs.BarTab {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: audioTab
|
||||
Tabs.AudioTab {}
|
||||
|
|
@ -202,7 +203,7 @@ NPanel {
|
|||
width: parent.width
|
||||
height: 32 * scaling
|
||||
radius: Style.radiusS * scaling
|
||||
color: selected ? Color.mPrimary : (tabItem.hovering ? Color.mSecondary : Color.transparent)
|
||||
color: selected ? Color.mPrimary : (tabItem.hovering ? Color.mTertiary : Color.transparent)
|
||||
readonly property bool selected: index === currentTabIndex
|
||||
property bool hovering: false
|
||||
property color tabTextColor: selected ? Color.mOnPrimary : (tabItem.hovering ? Color.mOnTertiary : Color.mOnSurface)
|
||||
|
|
@ -265,7 +266,7 @@ NPanel {
|
|||
// Tab label on the main right side
|
||||
NText {
|
||||
text: root.tabsModel[currentTabIndex].label
|
||||
font.pointSize: Style.fontSizeXL * scaling
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mPrimary
|
||||
Layout.fillWidth: true
|
||||
|
|
|
|||
|
|
@ -33,6 +33,13 @@ ColumnLayout {
|
|||
spacing: Style.marginL * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Bar & Widgets"
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: Style.marginXXS * scaling
|
||||
Layout.fillWidth: true
|
||||
|
|
@ -71,15 +78,6 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Show Active Window"
|
||||
description: "Display the title of the currently focused window."
|
||||
checked: Settings.data.bar.showActiveWindow
|
||||
onToggled: checked => {
|
||||
Settings.data.bar.showActiveWindow = checked
|
||||
}
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Show Active Window's Icon"
|
||||
description: "Display the app icon next to the title of the currently focused window."
|
||||
|
|
@ -89,42 +87,6 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Show System Info"
|
||||
description: "Display system statistics (CPU, RAM, Temperature)."
|
||||
checked: Settings.data.bar.showSystemInfo
|
||||
onToggled: checked => {
|
||||
Settings.data.bar.showSystemInfo = checked
|
||||
}
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Show Media"
|
||||
description: "Display media controls and information."
|
||||
checked: Settings.data.bar.showMedia
|
||||
onToggled: checked => {
|
||||
Settings.data.bar.showMedia = checked
|
||||
}
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Show Notifications History"
|
||||
description: "Display a shortcut to the notifications history."
|
||||
checked: Settings.data.bar.showNotificationsHistory
|
||||
onToggled: checked => {
|
||||
Settings.data.bar.showNotificationsHistory = checked
|
||||
}
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Show Applications Tray"
|
||||
description: "Display the applications tray."
|
||||
checked: Settings.data.bar.showTray
|
||||
onToggled: checked => {
|
||||
Settings.data.bar.showTray = checked
|
||||
}
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Show Battery Percentage"
|
||||
description: "Show battery percentage at all times."
|
||||
|
|
@ -172,7 +134,491 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Widget Management Section
|
||||
ColumnLayout {
|
||||
spacing: Style.marginXXS * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Widget Management"
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
NText {
|
||||
text: "Configure which widgets appear in each section of the bar. Use the arrow buttons to reorder widgets, or the add/remove buttons to manage them."
|
||||
font.pointSize: Style.fontSizeXS * scaling
|
||||
color: Color.mOnSurfaceVariant
|
||||
wrapMode: Text.WordWrap
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
// Bar Sections
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
spacing: Style.marginM * scaling
|
||||
|
||||
// Left Section
|
||||
NCard {
|
||||
Layout.fillWidth: true
|
||||
Layout.minimumHeight: {
|
||||
var widgetCount = Settings.data.bar.widgets.left.length
|
||||
if (widgetCount === 0)
|
||||
return 140 * scaling
|
||||
|
||||
var availableWidth = scrollView.availableWidth - (Style.marginM * scaling * 2) // Card margins
|
||||
var avgWidgetWidth = 150 * scaling // Estimated widget width including spacing
|
||||
var widgetsPerRow = Math.max(1, Math.floor(availableWidth / avgWidgetWidth))
|
||||
var rows = Math.ceil(widgetCount / widgetsPerRow)
|
||||
|
||||
// Header (50) + spacing (20) + (rows * widget height) + (rows-1 * spacing) + bottom margin (20)
|
||||
return (50 + 20 + (rows * 48) + ((rows - 1) * Style.marginS) + 20) * scaling
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.marginM * scaling
|
||||
spacing: Style.marginM * scaling
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Left Section"
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
NComboBox {
|
||||
id: leftComboBox
|
||||
width: 120 * scaling
|
||||
model: availableWidgets
|
||||
label: ""
|
||||
description: ""
|
||||
placeholder: "Add widget to left section"
|
||||
onSelected: key => {
|
||||
addWidgetToSection(key, "left")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Flow {
|
||||
id: leftWidgetsFlow
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.minimumHeight: 65 * scaling
|
||||
spacing: Style.marginS * scaling
|
||||
flow: Flow.LeftToRight
|
||||
|
||||
Repeater {
|
||||
model: Settings.data.bar.widgets.left
|
||||
delegate: Rectangle {
|
||||
width: widgetContent.implicitWidth + 16 * scaling
|
||||
height: 48 * scaling
|
||||
radius: Style.radiusS * scaling
|
||||
color: Color.mPrimary
|
||||
border.color: Color.mOutline
|
||||
border.width: Math.max(1, Style.borderS * scaling)
|
||||
|
||||
RowLayout {
|
||||
id: widgetContent
|
||||
anchors.centerIn: parent
|
||||
spacing: Style.marginXS * scaling
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_left"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index > 0
|
||||
onClicked: {
|
||||
if (index > 0) {
|
||||
reorderWidgetInSection("left", index, index - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NText {
|
||||
text: modelData
|
||||
font.pointSize: Style.fontSizeS * scaling
|
||||
color: Color.mOnPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_right"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index < Settings.data.bar.widgets.left.length - 1
|
||||
onClicked: {
|
||||
if (index < Settings.data.bar.widgets.left.length - 1) {
|
||||
reorderWidgetInSection("left", index, index + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "close"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
onClicked: {
|
||||
removeWidgetFromSection("left", index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Center Section
|
||||
NCard {
|
||||
Layout.fillWidth: true
|
||||
Layout.minimumHeight: {
|
||||
var widgetCount = Settings.data.bar.widgets.center.length
|
||||
if (widgetCount === 0)
|
||||
return 140 * scaling
|
||||
|
||||
var availableWidth = scrollView.availableWidth - (Style.marginM * scaling * 2) // Card margins
|
||||
var avgWidgetWidth = 150 * scaling // Estimated widget width including spacing
|
||||
var widgetsPerRow = Math.max(1, Math.floor(availableWidth / avgWidgetWidth))
|
||||
var rows = Math.ceil(widgetCount / widgetsPerRow)
|
||||
|
||||
// Header (50) + spacing (20) + (rows * widget height) + (rows-1 * spacing) + bottom margin (20)
|
||||
return (50 + 20 + (rows * 48) + ((rows - 1) * Style.marginS) + 20) * scaling
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.marginM * scaling
|
||||
spacing: Style.marginM * scaling
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Center Section"
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
NComboBox {
|
||||
id: centerComboBox
|
||||
width: 120 * scaling
|
||||
model: availableWidgets
|
||||
label: ""
|
||||
description: ""
|
||||
placeholder: "Add widget to center section"
|
||||
onSelected: key => {
|
||||
addWidgetToSection(key, "center")
|
||||
reset() // Reset selection
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Flow {
|
||||
id: centerWidgetsFlow
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.minimumHeight: 65 * scaling
|
||||
spacing: Style.marginS * scaling
|
||||
flow: Flow.LeftToRight
|
||||
|
||||
Repeater {
|
||||
model: Settings.data.bar.widgets.center
|
||||
delegate: Rectangle {
|
||||
width: widgetContent.implicitWidth + 16 * scaling
|
||||
height: 48 * scaling
|
||||
radius: Style.radiusS * scaling
|
||||
color: Color.mPrimary
|
||||
border.color: Color.mOutline
|
||||
border.width: Math.max(1, Style.borderS * scaling)
|
||||
|
||||
RowLayout {
|
||||
id: widgetContent
|
||||
anchors.centerIn: parent
|
||||
spacing: Style.marginXS * scaling
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_left"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index > 0
|
||||
onClicked: {
|
||||
if (index > 0) {
|
||||
reorderWidgetInSection("center", index, index - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NText {
|
||||
text: modelData
|
||||
font.pointSize: Style.fontSizeS * scaling
|
||||
color: Color.mOnPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_right"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index < Settings.data.bar.widgets.center.length - 1
|
||||
onClicked: {
|
||||
if (index < Settings.data.bar.widgets.center.length - 1) {
|
||||
reorderWidgetInSection("center", index, index + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "close"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
onClicked: {
|
||||
removeWidgetFromSection("center", index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right Section
|
||||
NCard {
|
||||
Layout.fillWidth: true
|
||||
Layout.minimumHeight: {
|
||||
var widgetCount = Settings.data.bar.widgets.right.length
|
||||
if (widgetCount === 0)
|
||||
return 140 * scaling
|
||||
|
||||
var availableWidth = scrollView.availableWidth - (Style.marginM * scaling * 2) // Card margins
|
||||
var avgWidgetWidth = 150 * scaling // Estimated widget width including spacing
|
||||
var widgetsPerRow = Math.max(1, Math.floor(availableWidth / avgWidgetWidth))
|
||||
var rows = Math.ceil(widgetCount / widgetsPerRow)
|
||||
|
||||
// Header (50) + spacing (20) + (rows * widget height) + (rows-1 * spacing) + bottom margin (20)
|
||||
return (50 + 20 + (rows * 48) + ((rows - 1) * Style.marginS) + 20) * scaling
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.marginM * scaling
|
||||
spacing: Style.marginM * scaling
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Right Section"
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
NComboBox {
|
||||
id: rightComboBox
|
||||
width: 120 * scaling
|
||||
model: availableWidgets
|
||||
label: ""
|
||||
description: ""
|
||||
placeholder: "Add widget to right section"
|
||||
onSelected: key => {
|
||||
addWidgetToSection(key, "right")
|
||||
reset() // Reset selection
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Flow {
|
||||
id: rightWidgetsFlow
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.minimumHeight: 65 * scaling
|
||||
spacing: Style.marginS * scaling
|
||||
flow: Flow.LeftToRight
|
||||
|
||||
Repeater {
|
||||
model: Settings.data.bar.widgets.right
|
||||
delegate: Rectangle {
|
||||
width: widgetContent.implicitWidth + 16 * scaling
|
||||
height: 48 * scaling
|
||||
radius: Style.radiusS * scaling
|
||||
color: Color.mPrimary
|
||||
border.color: Color.mOutline
|
||||
border.width: Math.max(1, Style.borderS * scaling)
|
||||
|
||||
RowLayout {
|
||||
id: widgetContent
|
||||
anchors.centerIn: parent
|
||||
spacing: Style.marginXS * scaling
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_left"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index > 0
|
||||
onClicked: {
|
||||
if (index > 0) {
|
||||
reorderWidgetInSection("right", index, index - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NText {
|
||||
text: modelData
|
||||
font.pointSize: Style.fontSizeS * scaling
|
||||
color: Color.mOnPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "chevron_right"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
enabled: index < Settings.data.bar.widgets.right.length - 1
|
||||
onClicked: {
|
||||
if (index < Settings.data.bar.widgets.right.length - 1) {
|
||||
reorderWidgetInSection("right", index, index + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
icon: "close"
|
||||
size: 20 * scaling
|
||||
colorBg: Color.applyOpacity(Color.mOnPrimary, "20")
|
||||
colorFg: Color.mOnPrimary
|
||||
colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
|
||||
colorFgHover: Color.mOnPrimary
|
||||
onClicked: {
|
||||
removeWidgetFromSection("right", index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper functions
|
||||
function addWidgetToSection(widgetName, section) {
|
||||
console.log("Adding widget", widgetName, "to section", section)
|
||||
var sectionArray = Settings.data.bar.widgets[section]
|
||||
if (sectionArray) {
|
||||
// Create a new array to avoid modifying the original
|
||||
var newArray = sectionArray.slice()
|
||||
newArray.push(widgetName)
|
||||
console.log("Widget added. New array:", JSON.stringify(newArray))
|
||||
|
||||
// Assign the new array
|
||||
Settings.data.bar.widgets[section] = newArray
|
||||
}
|
||||
}
|
||||
|
||||
function removeWidgetFromSection(section, index) {
|
||||
console.log("Removing widget from section", section, "at index", index)
|
||||
var sectionArray = Settings.data.bar.widgets[section]
|
||||
if (sectionArray && index >= 0 && index < sectionArray.length) {
|
||||
// Create a new array to avoid modifying the original
|
||||
var newArray = sectionArray.slice()
|
||||
newArray.splice(index, 1)
|
||||
console.log("Widget removed. New array:", JSON.stringify(newArray))
|
||||
|
||||
// Assign the new array
|
||||
Settings.data.bar.widgets[section] = newArray
|
||||
}
|
||||
}
|
||||
|
||||
function reorderWidgetInSection(section, fromIndex, toIndex) {
|
||||
console.log("Reordering widget in section", section, "from", fromIndex, "to", toIndex)
|
||||
var sectionArray = Settings.data.bar.widgets[section]
|
||||
if (sectionArray && fromIndex >= 0 && fromIndex < sectionArray.length && toIndex >= 0
|
||||
&& toIndex < sectionArray.length) {
|
||||
|
||||
// Create a new array to avoid modifying the original
|
||||
var newArray = sectionArray.slice()
|
||||
var item = newArray[fromIndex]
|
||||
newArray.splice(fromIndex, 1)
|
||||
newArray.splice(toIndex, 0, item)
|
||||
console.log("Widget reordered. New array:", JSON.stringify(newArray))
|
||||
|
||||
// Assign the new array
|
||||
Settings.data.bar.widgets[section] = newArray
|
||||
}
|
||||
}
|
||||
|
||||
// Widget loader for discovering available widgets
|
||||
WidgetLoader {
|
||||
id: widgetLoader
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: availableWidgets
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
discoverWidgets()
|
||||
}
|
||||
|
||||
// Automatically discover available widgets using WidgetLoader
|
||||
function discoverWidgets() {
|
||||
availableWidgets.clear()
|
||||
|
||||
// Use WidgetLoader to discover available widgets
|
||||
const discoveredWidgets = widgetLoader.discoverAvailableWidgets()
|
||||
|
||||
// Add discovered widgets to the ListModel
|
||||
discoveredWidgets.forEach(widget => {
|
||||
availableWidgets.append(widget)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,33 +6,34 @@ import qs.Commons
|
|||
import qs.Services
|
||||
import qs.Widgets
|
||||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
spacing: 0
|
||||
|
||||
Item {
|
||||
property real scaling: 1
|
||||
readonly property string tabIcon: "brightness_6"
|
||||
readonly property string tabLabel: "Brightness"
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
ScrollView {
|
||||
id: scrollView
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
padding: Style.marginM * scaling
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
ScrollBar.vertical.policy: ScrollBar.AsNeeded
|
||||
ScrollBar.horizontal.policy: ScrollBar.AsNeeded
|
||||
contentWidth: parent.width
|
||||
|
||||
ColumnLayout {
|
||||
width: scrollView.availableWidth
|
||||
spacing: 0
|
||||
|
||||
width: parent.width
|
||||
ColumnLayout {
|
||||
|
||||
width: scrollView.availableWidth
|
||||
spacing: Style.marginL * scaling
|
||||
Layout.margins: Style.marginL * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Brightness Settings"
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
// Bar Visibility Section
|
||||
NToggle {
|
||||
label: "Show Bar Icon"
|
||||
|
|
|
|||
|
|
@ -163,28 +163,22 @@ ColumnLayout {
|
|||
Layout.bottomMargin: Style.marginL * scaling
|
||||
}
|
||||
|
||||
NText {
|
||||
text: "Predefined Color Schemes"
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: Style.marginXXS * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
// NText {
|
||||
// text: "Predefined Color Schemes"
|
||||
// font.pointSize: Style.fontSizeL * scaling
|
||||
// font.weight: Style.fontWeightBold
|
||||
// color: Color.mOnSurface
|
||||
// Layout.fillWidth: true
|
||||
// }
|
||||
NText {
|
||||
text: "Predefined Color Schemes"
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
NText {
|
||||
text: "These color schemes only apply when 'Use Matugen' is disabled. When enabled, Matugen will generate colors based on your wallpaper instead. You can toggle between light and dark themes when using Matugen."
|
||||
font.pointSize: Style.fontSizeXS * scaling
|
||||
color: Color.mOnSurfaceVariant
|
||||
color: Color.mOnSurface
|
||||
Layout.fillWidth: true
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,13 @@ ColumnLayout {
|
|||
spacing: Style.marginL * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "General Settings"
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
// Profile section
|
||||
ColumnLayout {
|
||||
spacing: Style.marginS * scaling
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ ColumnLayout {
|
|||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Launcer Options"
|
||||
text: "Launcher"
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
|
|
@ -56,7 +56,7 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
NText {
|
||||
text: "Launcer Anchoring"
|
||||
text: "Launcher Position"
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
|
|
|
|||
|
|
@ -34,6 +34,13 @@ ColumnLayout {
|
|||
spacing: Style.marginL * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Interfaces"
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "WiFi Enabled"
|
||||
description: "Enable WiFi connectivity."
|
||||
|
|
|
|||
|
|
@ -33,6 +33,14 @@ ColumnLayout {
|
|||
spacing: Style.marginXS * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Recordings"
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
Layout.bottomMargin: Style.marginS * scaling
|
||||
}
|
||||
|
||||
// Output Directory
|
||||
ColumnLayout {
|
||||
spacing: Style.marginS * scaling
|
||||
|
|
|
|||
|
|
@ -33,6 +33,14 @@ ColumnLayout {
|
|||
spacing: Style.marginXS * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Location"
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
Layout.bottomMargin: Style.marginS * scaling
|
||||
}
|
||||
|
||||
// Location section
|
||||
ColumnLayout {
|
||||
spacing: Style.marginM * scaling
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ Item {
|
|||
// Current wallpaper display
|
||||
NText {
|
||||
text: "Current Wallpaper"
|
||||
font.pointSize: Style.fontSizeL * scaling
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,14 @@ ColumnLayout {
|
|||
spacing: Style.marginL * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
text: "Directory"
|
||||
font.pointSize: Style.fontSizeXXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnSurface
|
||||
Layout.bottomMargin: Style.marginS * scaling
|
||||
}
|
||||
|
||||
// Wallpaper Settings Category
|
||||
ColumnLayout {
|
||||
spacing: Style.marginS * scaling
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ NPanel {
|
|||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: Style.baseWidgetSize * 1.5 * scaling
|
||||
radius: Style.radiusS * scaling
|
||||
color: modelData.connected ? Color.mPrimary : (networkMouseArea.containsMouse ? Color.mSecondary : Color.transparent)
|
||||
color: modelData.connected ? Color.mPrimary : (networkMouseArea.containsMouse ? Color.mTertiary : Color.transparent)
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
Loading…
Add table
Add a link
Reference in a new issue