diff --git a/Modules/DemoPanel/DemoPanel.qml b/Modules/DemoPanel/DemoPanel.qml index 877cb4c..6710202 100644 --- a/Modules/DemoPanel/DemoPanel.qml +++ b/Modules/DemoPanel/DemoPanel.qml @@ -146,6 +146,8 @@ NLoader { } NComboBox { + label: "Animal" + description: "What's your favorite" optionsKeys: ["cat", "dog", "bird", "monkey", "fish", "turtle", "elephant", "tiger"] optionsLabels: ["Cat", "Dog", "Bird", "Monkey", "Fish", "Turtle", "Elephant", "Tiger"] currentKey: "cat" @@ -169,14 +171,16 @@ NLoader { } NTextInput { + label: "Input label" + description: "A cool description" text: "Type anything" Layout.fillWidth: true onEditingFinished: { } - NDivider { - Layout.fillWidth: true - } + } + NDivider { + Layout.fillWidth: true } } diff --git a/Modules/Settings/Tabs/General.qml b/Modules/Settings/Tabs/General.qml index 343e4ef..2718914 100644 --- a/Modules/Settings/Tabs/General.qml +++ b/Modules/Settings/Tabs/General.qml @@ -58,26 +58,15 @@ ColumnLayout { borderColor: Colors.accentPrimary borderWidth: Math.max(1, Style.borderMedium) } - ColumnLayout { + + NTextInput { + label: "Profile Picture" + description: "Your profile picture displayed in various places throughout the shell" + text: Settings.data.general.avatarImage + placeholderText: "/home/user/.face" Layout.fillWidth: true - spacing: Style.marginTiny * scaling - NText { - text: "Profile Picture" - color: Colors.textPrimary - font.weight: Style.fontWeightBold - } - NText { - text: "Your profile picture displayed in various places throughout the shell" - color: Colors.textSecondary - font.pointSize: Style.fontSizeSmall * scaling - } - NTextInput { - text: Settings.data.general.avatarImage - placeholderText: "/home/user/.face" - Layout.fillWidth: true - onEditingFinished: { - Settings.data.general.avatarImage = text - } + onEditingFinished: { + Settings.data.general.avatarImage = text } } } diff --git a/Modules/Settings/Tabs/Network.qml b/Modules/Settings/Tabs/Network.qml index 3c31d74..9229fa8 100644 --- a/Modules/Settings/Tabs/Network.qml +++ b/Modules/Settings/Tabs/Network.qml @@ -16,8 +16,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: 16 - rightPadding: 12 + padding: Style.marginMedium * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -32,46 +31,31 @@ ColumnLayout { } ColumnLayout { - spacing: 4 + spacing: Style.marginLarge * scaling Layout.fillWidth: true NText { text: "Network Settings" - font.pointSize: 18 + font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold color: Colors.textPrimary - Layout.bottomMargin: 8 } - // Network interfaces section - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - NText { - text: "Network Interfaces" - font.pointSize: 13 - font.weight: Style.fontWeightBold - color: Colors.textPrimary + NToggle { + label: "WiFi Enabled" + description: "Enable WiFi connectivity" + value: Settings.data.network.wifiEnabled + onToggled: function (newValue) { + Settings.data.network.wifiEnabled = newValue } + } - NToggle { - label: "WiFi Enabled" - description: "Enable WiFi connectivity" - value: Settings.data.network.wifiEnabled - onToggled: function (newValue) { - Settings.data.network.wifiEnabled = newValue - } - } - - NToggle { - label: "Bluetooth Enabled" - description: "Enable Bluetooth connectivity" - value: Settings.data.network.bluetoothEnabled - onToggled: function (newValue) { - Settings.data.network.bluetoothEnabled = newValue - } + NToggle { + label: "Bluetooth Enabled" + description: "Enable Bluetooth connectivity" + value: Settings.data.network.bluetoothEnabled + onToggled: function (newValue) { + Settings.data.network.bluetoothEnabled = newValue } } } diff --git a/Modules/Settings/Tabs/ScreenRecorder.qml b/Modules/Settings/Tabs/ScreenRecorder.qml index 68dc670..b18d2ed 100644 --- a/Modules/Settings/Tabs/ScreenRecorder.qml +++ b/Modules/Settings/Tabs/ScreenRecorder.qml @@ -33,7 +33,7 @@ ColumnLayout { Layout.fillWidth: true NText { - text: "Screen Recording" + text: "Recording" font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold color: Colors.textPrimary @@ -46,24 +46,10 @@ ColumnLayout { Layout.fillWidth: true Layout.topMargin: Style.marginSmall * scaling - ColumnLayout { - spacing: Style.marginTiny * scaling - - NText { - text: "Output Directory" - font.weight: Style.fontWeightBold - color: Colors.textPrimary - } - - NText { - text: "Directory where screen recordings will be saved" - font.pointSize: Style.fontSizeSmall * scaling - color: Colors.textSecondary - wrapMode: Text.WordWrap - } - } - NTextInput { + label: "Output Directory" + description: "Directory where screen recordings will be saved" + placeholderText: "/home/xxx/Videos" text: Settings.data.screenRecorder.directory onEditingFinished: { Settings.data.screenRecorder.directory = text diff --git a/Modules/Settings/Tabs/TimeWeather.qml b/Modules/Settings/Tabs/TimeWeather.qml index e4e228c..5f511a0 100644 --- a/Modules/Settings/Tabs/TimeWeather.qml +++ b/Modules/Settings/Tabs/TimeWeather.qml @@ -47,8 +47,10 @@ ColumnLayout { Layout.topMargin: Style.marginSmall * scaling NTextInput { + label: "Location name" + description: "Choose a known location near you" text: Settings.data.location.name - placeholderText: "Enter city name" + placeholderText: "Enter the location name" Layout.fillWidth: true onEditingFinished: { Settings.data.location.name = text @@ -64,7 +66,7 @@ ColumnLayout { // Time section ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginLarge * scaling Layout.fillWidth: true NText { diff --git a/Modules/Settings/Tabs/Wallpaper.qml b/Modules/Settings/Tabs/Wallpaper.qml index c9bf5ae..36c4816 100644 --- a/Modules/Settings/Tabs/Wallpaper.qml +++ b/Modules/Settings/Tabs/Wallpaper.qml @@ -14,8 +14,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: 16 - rightPadding: 12 + padding: Style.marginMedium * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded diff --git a/Widgets/NComboBox.qml b/Widgets/NComboBox.qml index 3be8183..55a63f4 100644 --- a/Widgets/NComboBox.qml +++ b/Widgets/NComboBox.qml @@ -59,7 +59,7 @@ ColumnLayout { implicitWidth: 120 * scaling implicitHeight: preferredHeight color: Colors.surfaceVariant - border.color: root.activeFocus ? Colors.hover : Colors.outline + border.color: combo.activeFocus ? Colors.hover : Colors.outline border.width: Math.max(1, Style.borderThin * scaling) radius: Style.radiusMedium * scaling } @@ -69,7 +69,6 @@ ColumnLayout { leftPadding: Style.marginLarge * scaling rightPadding: combo.indicator.width + Style.marginLarge * scaling font.pointSize: Style.fontSizeMedium * scaling - font.weight: Style.fontWeightBold verticalAlignment: Text.AlignVCenter elide: Text.ElideRight text: { @@ -79,16 +78,16 @@ ColumnLayout { // Drop down indicator indicator: NText { - x: root.width - width - Style.marginMedium * scaling - y: root.topPadding + (root.availableHeight - height) / 2 + x: combo.width - width - Style.marginMedium * scaling + y: combo.topPadding + (combo.availableHeight - height) / 2 text: "arrow_drop_down" font.family: "Material Symbols Outlined" font.pointSize: Style.fontSizeXL * scaling } popup: Popup { - y: root.height - width: root.width + y: combo.height + width: combo.width implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling * 2) padding: Style.marginMedium * scaling @@ -109,8 +108,8 @@ ColumnLayout { } delegate: ItemDelegate { - width: root.width - highlighted: root.highlightedIndex === index + width: combo.width + highlighted: combo.highlightedIndex === index contentItem: NText { text: { @@ -123,7 +122,7 @@ ColumnLayout { } background: Rectangle { - width: root.width - Style.marginMedium * scaling * 3 + width: combo.width - Style.marginMedium * scaling * 3 color: highlighted ? Colors.hover : "transparent" radius: Style.radiusSmall * scaling } diff --git a/Widgets/NTextInput.qml b/Widgets/NTextInput.qml index 2787b90..8a7de1a 100644 --- a/Widgets/NTextInput.qml +++ b/Widgets/NTextInput.qml @@ -7,58 +7,81 @@ Item { id: root readonly property real scaling: Scaling.scale(screen) - - // API - property alias text: input.text - property alias placeholderText: input.placeholderText + property string label: "" + property string description: "" property bool readOnly: false property bool enabled: true + property alias text: input.text + property alias placeholderText: input.placeholderText + signal editingFinished // Sizing implicitWidth: 320 * scaling - implicitHeight: Style.baseWidgetSize * 1.25 * scaling + implicitHeight: Style.baseWidgetSize * 2.75 * scaling - // Container - Rectangle { - id: frame - anchors.fill: parent - radius: Style.radiusMedium * scaling - color: Colors.surfaceVariant - border.color: Colors.outline - border.width: Math.max(1, Style.borderThin * scaling) + ColumnLayout { + spacing: Style.marginTiniest * scaling + Layout.fillWidth: true - // Focus ring - Rectangle { - anchors.fill: parent - radius: frame.radius - color: "transparent" - border.color: input.activeFocus ? Colors.hover : "transparent" - border.width: input.activeFocus ? Math.max(1, Style.borderThin * scaling) : 0 + NText { + text: label + font.pointSize: Style.fontSizeMedium * scaling + font.weight: Style.fontWeightBold + color: Colors.textPrimary } - RowLayout { - anchors.fill: parent - anchors.leftMargin: Style.marginMedium * scaling - anchors.rightMargin: Style.marginMedium * scaling - spacing: Style.marginSmall * scaling + NText { + text: description + font.pointSize: Style.fontSizeSmall * scaling + color: Colors.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } - // Optional leading icon slot in the future - // Item { Layout.preferredWidth: 0 } - TextField { - id: input - Layout.fillWidth: true - echoMode: TextInput.Normal - readOnly: root.readOnly - enabled: root.enabled - color: Colors.textPrimary - placeholderTextColor: Colors.textSecondary - background: null - font.pointSize: Style.fontSizeSmall * scaling - onEditingFinished: root.editingFinished() - // Text changes are observable via the aliased 'text' property (root.text) and its 'textChanged' signal. - // No additional callback is invoked here to avoid conflicts with QML's onTextChanged handler semantics. + // Container + Rectangle { + id: frame + Layout.topMargin: Style.marginTiny * scaling + implicitWidth: root.width + implicitHeight: Style.baseWidgetSize * 1.35 * scaling + radius: Style.radiusMedium * scaling + color: Colors.surfaceVariant + border.color: Colors.outline + border.width: Math.max(1, Style.borderThin * scaling) + + // Focus ring + Rectangle { + anchors.fill: parent + radius: frame.radius + color: "transparent" + border.color: input.activeFocus ? Colors.hover : "transparent" + border.width: input.activeFocus ? Math.max(1, Style.borderThin * scaling) : 0 + } + + RowLayout { + anchors.fill: parent + anchors.leftMargin: Style.marginMedium * scaling + anchors.rightMargin: Style.marginMedium * scaling + spacing: Style.marginSmall * scaling + + // Optional leading icon slot in the future + // Item { Layout.preferredWidth: 0 } + TextField { + id: input + Layout.fillWidth: true + echoMode: TextInput.Normal + readOnly: root.readOnly + enabled: root.enabled + color: Colors.textPrimary + placeholderTextColor: Colors.textSecondary + background: null + font.pointSize: Style.fontSizeSmall * scaling + onEditingFinished: root.editingFinished() + // Text changes are observable via the aliased 'text' property (root.text) and its 'textChanged' signal. + // No additional callback is invoked here to avoid conflicts with QML's onTextChanged handler semantics. + } } } }