never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Using proper Style everywhere

Browse source
This commit is contained in:
quadbyte 2025-08-09 14:28:39 -04:00
parent d8debd2429
commit 33217e33ed
5 changed files with 66 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Widgets/NIconButton.qml
View file

@ -7,11 +7,8 @@ import qs.Theme
Rectangle {
id: root
// Local scale convenience with safe fallback
readonly property real scale: (typeof screen !== 'undefined'
&& screen) ? Scaling.scale(screen) : 1.0
property real size: 32 * scale
readonly property real scaling: Scaling.scale(screen)
property real size: Style.baseWidgetHeight * scaling
property string icon
property bool enabled: true
property bool hovering: false
@ -27,7 +24,7 @@ Rectangle {
anchors.centerIn: parent
text: root.icon
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * scale
font.pointSize: Style.fontExtraLarge * scaling
color: root.hovering ? Theme.onAccent : Theme.textPrimary
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter

39
Widgets/NToggle.qml
View file

@ -8,31 +8,29 @@ import qs.Theme
RowLayout {
id: root
// Local scale convenience with safe fallback
readonly property real scale: (typeof screen !== 'undefined'
&& screen) ? Scaling.scale(screen) : 1.0
readonly property real scaling: Scaling.scale(screen)
property string label: ""
property string description: ""
property bool value: false
property bool hovering: false
property var onToggled: function (value: bool) {}
Layout.fillWidth: true
ColumnLayout {
spacing: 4 * scale
spacing: 2 * scaling
Layout.fillWidth: true
Text {
text: label
font.pixelSize: 13 * scale
font.pointSize: Style.fontMedium * scaling
font.bold: true
color: Theme.textPrimary
}
Text {
text: description
font.pixelSize: 12 * scale
font.pointSize: Style.fontSmall * scaling
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
@ -42,22 +40,22 @@ RowLayout {
Rectangle {
id: switcher
width: 52 * scale
height: 32 * scale
radius: height / 2
color: value ? Theme.accentPrimary : Theme.surfaceVariant
width: Style.baseWidgetHeight * 1.625 * scaling
height: Style.baseWidgetHeight * scaling
radius: height * 0.5
color: value ? Theme.accentPrimary :Theme.surfaceVariant
border.color: value ? Theme.accentPrimary : Theme.outline
border.width: 2 * scale
border.width: Math.max(1, 1.5 * scale)
Rectangle {
width: 28 * scale
height: 28 * scale
radius: height / 2
width: (Style.baseWidgetHeight- 4) * scaling
height: (Style.baseWidgetHeight - 4) * scaling
radius: height * 0.5
color: Theme.surface
border.color: Theme.outline
border.width: 1 * scale
y: 2 * scale
x: value ? switcher.width - width - 2 * scale : 2 * scale
border.color: hovering ? Theme.textDisabled : Theme.outline
border.width: Math.max(1, 1.5 * scale)
y: 2 * scaling
x: value ? switcher.width - width - 2 * scale : 2 * scaling
Behavior on x {
NumberAnimation {
@ -70,6 +68,9 @@ RowLayout {
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: hovering = true
onExited: hovering = false
onClicked: {
value = !value;
root.onToggled(value);