diff --git a/Modules/Bar/Bar.qml b/Modules/Bar/Bar.qml index e39d2cc..82aad01 100644 --- a/Modules/Bar/Bar.qml +++ b/Modules/Bar/Bar.qml @@ -123,7 +123,6 @@ Variants { // icon: "experiment" // tooltipText: "Open Demo Panel" // sizeMultiplier: 0.8 - // showBorder: false // anchors.verticalCenter: parent.verticalCenter // onClicked: { // demoPanel.isLoaded = !demoPanel.isLoaded diff --git a/Modules/DemoPanel/DemoPanel.qml b/Modules/DemoPanel/DemoPanel.qml index 7bfa7bb..db78737 100644 --- a/Modules/DemoPanel/DemoPanel.qml +++ b/Modules/DemoPanel/DemoPanel.qml @@ -14,6 +14,8 @@ NLoader { NPanel { id: demoPanel + property real sliderValue: 1.0 + // Override hide function to animate first function hide() { // Start hide animation @@ -128,38 +130,33 @@ NLoader { ColumnLayout { spacing: Style.marginL * scaling NText { - text: "Scaling" + text: "NSlider" color: Color.mSecondary font.weight: Style.fontWeightBold } NText { - text: `${Math.round(ScalingService.overrideScale * 100)}%` + text: `${Math.round(sliderValue * 100)}%` Layout.alignment: Qt.AlignVCenter } RowLayout { spacing: Style.marginS * scaling NSlider { id: scaleSlider - from: 0.6 - to: 1.8 + from: 1.0 + to: 2.0 stepSize: 0.01 - value: ScalingService.overrideScale - implicitWidth: bgRect.width * 0.75 - onMoved: { - - } + value: sliderValue onPressedChanged: { - ScalingService.overrideScale = value - ScalingService.overrideEnabled = true + sliderValue = value } + Layout.fillWidth: true } NIconButton { icon: "refresh" tooltipText: "Reset Scaling" fontPointSize: Style.fontSizeL * scaling onClicked: { - ScalingService.overrideEnabled = false - ScalingService.overrideScale = 1.0 + sliderValue = 1.0 } } } diff --git a/Modules/SettingsPanel/Tabs/AudioTab.qml b/Modules/SettingsPanel/Tabs/AudioTab.qml index 9d99011..a09613a 100644 --- a/Modules/SettingsPanel/Tabs/AudioTab.qml +++ b/Modules/SettingsPanel/Tabs/AudioTab.qml @@ -63,23 +63,11 @@ ColumnLayout { spacing: Style.marginS * scaling Layout.fillWidth: true - ColumnLayout { - spacing: Style.marginXXS * scaling - - NText { - text: "Master Volume" - font.weight: Style.fontWeightBold - color: Color.mOnSurface - } - - NText { - text: "System-wide volume level." - font.pointSize: Style.fontSizeXS * scaling - color: Color.mOnSurface - wrapMode: Text.WordWrap - Layout.fillWidth: true - } + NLabel { + label: "Master Volume" + description: "System-wide volume level." } + RowLayout { // Pipewire seems a bit finicky, if we spam too many volume changes it breaks easily // Probably because they have some quick fades in and out to avoid clipping @@ -160,23 +148,13 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginXXS * scaling + spacing: Style.marginXS * scaling Layout.fillWidth: true Layout.bottomMargin: Style.marginL * scaling - NText { - text: "Output Device" - font.pointSize: Style.fontSizeM * scaling - font.weight: Style.fontWeightBold - color: Color.mOnSurface - } - - NText { - text: "Select the desired audio output device." - font.pointSize: Style.fontSizeXS * scaling - color: Color.mOnSurface - wrapMode: Text.WordWrap - Layout.fillWidth: true + NLabel { + label: "Output Device" + description: "Select the desired audio output device." } Repeater { @@ -199,23 +177,13 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginXXS * scaling + spacing: Style.marginXS * scaling Layout.fillWidth: true Layout.bottomMargin: Style.marginL * scaling - NText { - text: "Input Device" - font.pointSize: Style.fontSizeM * scaling - font.weight: Style.fontWeightBold - color: Color.mOnSurface - } - - NText { - text: "Select desired audio input device." - font.pointSize: Style.fontSizeXS * scaling - color: Color.mOnSurface - wrapMode: Text.WordWrap - Layout.fillWidth: true + NLabel { + label: "Input Device" + description: "Select the desired audio input device." } Repeater { diff --git a/Modules/SettingsPanel/Tabs/DisplayTab.qml b/Modules/SettingsPanel/Tabs/DisplayTab.qml index 2a49a4f..335b79a 100644 --- a/Modules/SettingsPanel/Tabs/DisplayTab.qml +++ b/Modules/SettingsPanel/Tabs/DisplayTab.qml @@ -136,13 +136,13 @@ Item { spacing: Style.marginXXS * scaling Layout.fillWidth: true NText { - text: "Scaling" + text: "Scale" font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } NText { - text: `Controls the scaling on this monitor.` + text: "Scale the user interface on this monitor." font.pointSize: Style.fontSizeS * scaling color: Color.mOnSurfaceVariant wrapMode: Text.WordWrap diff --git a/Widgets/NComboBox.qml b/Widgets/NComboBox.qml index 7b881b6..29fa6e6 100644 --- a/Widgets/NComboBox.qml +++ b/Widgets/NComboBox.qml @@ -22,21 +22,9 @@ ColumnLayout { spacing: Style.marginS * scaling Layout.fillWidth: true - ColumnLayout { - spacing: Style.marginXXS * scaling - Layout.fillWidth: true - NText { - text: label - font.pointSize: Style.fontSizeM * scaling - font.weight: Style.fontWeightBold - color: Color.mOnSurface - } - NText { - text: description - font.pointSize: Style.fontSizeXS * scaling - color: Color.mOnSurface - wrapMode: Text.WordWrap - } + NLabel { + label: root.label + description: root.description } function findIndexByKey(key) { diff --git a/Widgets/NLabel.qml b/Widgets/NLabel.qml new file mode 100644 index 0000000..a94ade9 --- /dev/null +++ b/Widgets/NLabel.qml @@ -0,0 +1,25 @@ +import QtQuick +import QtQuick.Layouts +import qs.Commons + +ColumnLayout { + property string label: "" + property string description: "" + + spacing: Style.marginXXS * scaling + Layout.fillWidth: true + + NText { + text: label + font.pointSize: Style.fontSizeM * scaling + font.weight: Style.fontWeightBold + color: Color.mOnSurface + } + + NText { + text: description + font.pointSize: Style.fontSizeS * scaling + color: Color.mOnSurfaceVariant + wrapMode: Text.WordWrap + } +} diff --git a/Widgets/NTextInput.qml b/Widgets/NTextInput.qml index 90c1538..1d9a138 100644 --- a/Widgets/NTextInput.qml +++ b/Widgets/NTextInput.qml @@ -25,19 +25,9 @@ Item { spacing: Style.marginXXS * scaling Layout.fillWidth: true - NText { - text: label - font.pointSize: Style.fontSizeM * scaling - font.weight: Style.fontWeightBold - color: Color.mOnSurface - } - - NText { - text: description - font.pointSize: Style.fontSizeXS * scaling - color: Color.mOnSurface - wrapMode: Text.WordWrap - Layout.fillWidth: true + NLabel { + label: root.label + description: root.description } // Container