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

Scaling: Replaced all Theme.uiScale by Theme.scale(Screen) so stuff scale accordingly to the Screen used by the Item/component

Browse source
This commit is contained in:
quadbyte 2025-08-07 14:09:18 -04:00
parent 3148dc62a0
commit cb74b6e5d5
50 changed files with 564 additions and 568 deletions
Download patch file Download diff file Expand all files Collapse all files

86
Widgets/SettingsWindow/SettingsWindow.qml
View file

@ -148,8 +148,8 @@ PanelWithOverlay {
Rectangle {
id: settingsWindowRect
implicitWidth: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].width * 2 / 3, 1200) * Theme.uiScale : 600 * Theme.uiScale
implicitHeight: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].height * 2 / 3, 800) * Theme.uiScale : 400 * Theme.uiScale
implicitWidth: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].width * 2 / 3, 1200) * Theme.scale(Screen) : 600 * Theme.scale(Screen)
implicitHeight: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].height * 2 / 3, 800) * Theme.scale(Screen) : 400 * Theme.scale(Screen)
visible: parent.visible
color: "transparent"
// Center the settings window on screen
@ -166,9 +166,9 @@ PanelWithOverlay {
color: Theme.backgroundPrimary
anchors.fill: parent
radius: 20 * Theme.uiScale
radius: 20 * Theme.scale(Screen)
border.color: Theme.outline
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
MultiEffect {
source: background
@ -188,8 +188,8 @@ PanelWithOverlay {
clip: true
color: Theme.backgroundPrimary
topRightRadius: 20 * Theme.uiScale
bottomRightRadius: 20 * Theme.uiScale
topRightRadius: 20 * Theme.scale(Screen)
bottomRightRadius: 20 * Theme.scale(Screen)
anchors {
left: tabs.right
@ -202,7 +202,7 @@ PanelWithOverlay {
Rectangle {
id: headerArea
height: 48 * Theme.uiScale
height: 48 * Theme.scale(Screen)
color: "transparent"
anchors {
@ -214,13 +214,13 @@ PanelWithOverlay {
RowLayout {
anchors.fill: parent
spacing: 12 * Theme.uiScale
spacing: 12 * Theme.scale(Screen)
Text {
id: tabName
text: wallpaperSelector.visible ? "Select Wallpaper" : (activeTabIndex === 0 ? "General" : activeTabIndex === 1 ? "Bar" : activeTabIndex === 2 ? "Time & Weather" : activeTabIndex === 3 ? "Screen Recorder" : activeTabIndex === 4 ? "Network" : activeTabIndex === 5 ? "Display" : activeTabIndex === 6 ? "Wallpaper" : activeTabIndex === 7 ? "Misc" : activeTabIndex === 8 ? "About" : "General")
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.fillWidth: true
@ -228,29 +228,29 @@ PanelWithOverlay {
// Wallpaper Selection Button (only visible on Wallpaper tab)
Rectangle {
width: 160 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
width: 160 * Theme.scale(Screen)
height: 32 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
visible: activeTabIndex === 6 // Wallpaper tab index
Row {
anchors.centerIn: parent
spacing: 6 * Theme.uiScale
spacing: 6 * Theme.scale(Screen)
Text {
text: "image"
font.family: wallpaperButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: "Select Wallpaper"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
anchors.verticalCenter: parent.verticalCenter
@ -273,18 +273,18 @@ PanelWithOverlay {
}
Rectangle {
width: 32 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
width: 32 * Theme.scale(Screen)
height: 32 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
color: closeButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
Text {
anchors.centerIn: parent
text: "close"
font.family: closeButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
}
@ -304,7 +304,7 @@ PanelWithOverlay {
}
Rectangle {
height: 1 * Theme.uiScale
height: 1 * Theme.scale(Screen)
color: Theme.outline
opacity: 0.3
@ -353,16 +353,16 @@ PanelWithOverlay {
color: Theme.surface
width: parent.width * 0.25
height: settingsWindowRect.height
topLeftRadius: 20 * Theme.uiScale
bottomLeftRadius: 20 * Theme.uiScale
topLeftRadius: 20 * Theme.scale(Screen)
bottomLeftRadius: 20 * Theme.scale(Screen)
border.color: Theme.outline
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
Column {
width: parent.width
spacing: 0 * Theme.uiScale
topPadding: 8 * Theme.uiScale
bottomPadding: 8 * Theme.uiScale
spacing: 0 * Theme.scale(Screen)
topPadding: 8 * Theme.scale(Screen)
bottomPadding: 8 * Theme.scale(Screen)
Repeater {
id: repeater
@ -398,21 +398,21 @@ PanelWithOverlay {
delegate: Rectangle {
width: tabs.width
height: 48 * Theme.uiScale
height: 48 * Theme.scale(Screen)
color: "transparent"
RowLayout {
anchors.fill: parent
spacing: 8 * Theme.uiScale
spacing: 8 * Theme.scale(Screen)
Rectangle {
id: activeIndicator
Layout.leftMargin: 8 * Theme.uiScale
Layout.preferredWidth: 3 * Theme.uiScale
Layout.preferredHeight: 24 * Theme.uiScale
Layout.leftMargin: 8 * Theme.scale(Screen)
Layout.preferredWidth: 3 * Theme.scale(Screen)
Layout.preferredHeight: 24 * Theme.scale(Screen)
Layout.alignment: Qt.AlignVCenter
radius: 2 * Theme.uiScale
radius: 2 * Theme.scale(Screen)
color: Theme.accentPrimary
opacity: index === activeTabIndex ? 1 : 0
@ -430,12 +430,12 @@ PanelWithOverlay {
text: modelData.icon
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * Theme.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
color: index === activeTabIndex ? Theme.accentPrimary : Theme.textPrimary
opacity: index === activeTabIndex ? 1 : 0.8
Layout.leftMargin: 20 * Theme.uiScale
Layout.preferredWidth: 24 * Theme.uiScale
Layout.preferredHeight: 24 * Theme.uiScale
Layout.leftMargin: 20 * Theme.scale(Screen)
Layout.preferredWidth: 24 * Theme.scale(Screen)
Layout.preferredHeight: 24 * Theme.scale(Screen)
Layout.alignment: Qt.AlignVCenter
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
@ -446,14 +446,14 @@ PanelWithOverlay {
id: label
text: modelData.text
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: index === activeTabIndex ? Theme.accentPrimary : (tabMouseArea.containsMouse ? Theme.accentPrimary : Theme.textSecondary)
font.weight: index === activeTabIndex ? Font.DemiBold : (tabMouseArea.containsMouse ? Font.DemiBold : Font.Normal)
Layout.fillWidth: true
Layout.preferredHeight: 24 * Theme.uiScale
Layout.preferredHeight: 24 * Theme.scale(Screen)
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.leftMargin: 4 * Theme.uiScale
Layout.rightMargin: 16 * Theme.uiScale
Layout.leftMargin: 4 * Theme.scale(Screen)
Layout.rightMargin: 16 * Theme.scale(Screen)
verticalAlignment: Text.AlignVCenter
}
@ -473,7 +473,7 @@ PanelWithOverlay {
Rectangle {
width: parent.width
height: 1 * Theme.uiScale
height: 1 * Theme.scale(Screen)
color: Theme.outline
opacity: 0.6
visible: index < (repeater.count - 1)

30
Widgets/SettingsWindow/Tabs/About.qml
View file

@ -168,19 +168,19 @@ ColumnLayout {
Text {
text: "Noctalia: quiet by design"
font.pixelSize: 24 * Theme.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.alignment: Qt.AlignCenter
Layout.bottomMargin: 8 * Theme.uiScale
Layout.bottomMargin: 8 * Theme.scale(Screen)
}
Text {
text: "It may just be another quickshell setup but it won't get in your way."
font.pixelSize: 14 * Theme.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.alignment: Qt.AlignCenter
Layout.bottomMargin: 16 * Theme.uiScale
Layout.bottomMargin: 16 * Theme.scale(Screen)
}
GridLayout {
@ -191,28 +191,28 @@ ColumnLayout {
Text {
text: "Latest Version:"
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.alignment: Qt.AlignRight
}
Text {
text: root.latestVersion
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: Theme.textPrimary
font.bold: true
}
Text {
text: "Installed Version:"
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.alignment: Qt.AlignRight
}
Text {
text: root.currentVersion
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: Theme.textPrimary
font.bold: true
}
@ -254,7 +254,7 @@ ColumnLayout {
Text {
text: "system_update"
font.family: "Material Symbols Outlined"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
}
@ -262,7 +262,7 @@ ColumnLayout {
id: updateText
text: "Download latest release"
font.pixelSize: 14 * Theme.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
}
@ -305,14 +305,14 @@ ColumnLayout {
Text {
text: "Contributors"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "(" + root.contributors.length + ")"
font.pixelSize: 14 * Theme.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: Theme.textSecondary
}
@ -385,7 +385,7 @@ ColumnLayout {
anchors.centerIn: parent
text: "person"
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * Theme.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary
visible: !avatarImage.source || avatarImage.status !== Image.Ready
}
@ -399,7 +399,7 @@ ColumnLayout {
Text {
text: modelData.login || "Unknown"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary
elide: Text.ElideRight
Layout.fillWidth: true
@ -407,7 +407,7 @@ ColumnLayout {
Text {
text: (modelData.contributions || 0) + " commits"
font.pixelSize: 11 * Theme.uiScale
font.pixelSize: 11 * Theme.scale(Screen)
color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textSecondary
}

4
Widgets/SettingsWindow/Tabs/Bar.qml
View file

@ -28,10 +28,10 @@ ColumnLayout {
Text {
text: "Elements"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 16 * Theme.uiScale
Layout.bottomMargin: 16 * Theme.scale(Screen)
}
ToggleOption {

18
Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml
View file

@ -7,20 +7,20 @@ import qs.Settings
Rectangle {
id: root
width: 64 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
width: 64 * Theme.scale(Screen)
height: 32 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
color: Theme.surfaceVariant
border.color: Theme.outline
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
property bool useFahrenheit: Settings.settings.useFahrenheit
Rectangle {
id: slider
width: parent.width / 2 - 4 * Theme.uiScale
height: parent.height - 4 * Theme.uiScale
radius: 14 * Theme.uiScale
width: parent.width / 2 - 4 * Theme.scale(Screen)
height: parent.height - 4 * Theme.scale(Screen)
radius: 14 * Theme.scale(Screen)
color: Theme.accentPrimary
x: 2 + (useFahrenheit ? parent.width / 2 : 0)
y: 2
@ -46,7 +46,7 @@ Rectangle {
Text {
anchors.centerIn: parent
text: "°C"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: !useFahrenheit
color: !useFahrenheit ? Theme.onAccent : Theme.textPrimary
@ -74,7 +74,7 @@ Rectangle {
Text {
anchors.centerIn: parent
text: "°F"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: useFahrenheit
color: useFahrenheit ? Theme.onAccent : Theme.textPrimary

16
Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml
View file

@ -57,7 +57,7 @@ Rectangle {
id: wallpaperGrid
anchors.fill: parent
cellWidth: Math.max(120 * Theme.uiScale, (parent.width / 3) - 12 * Theme.uiScale)
cellWidth: Math.max(120 * Theme.scale(Screen), (parent.width / 3) - 12 * Theme.scale(Screen))
cellHeight: cellWidth * 0.6
model: WallpaperManager.wallpaperList
cacheBuffer: 64
@ -67,8 +67,8 @@ Rectangle {
bottomMargin: 8
delegate: Item {
width: wallpaperGrid.cellWidth - 8 * Theme.uiScale
height: wallpaperGrid.cellHeight - 8 * Theme.uiScale
width: wallpaperGrid.cellWidth - 8 * Theme.scale(Screen)
height: wallpaperGrid.cellHeight - 8 * Theme.scale(Screen)
Rectangle {
id: wallpaperItem
@ -76,9 +76,9 @@ Rectangle {
anchors.fill: parent
anchors.margins: 3
color: Theme.surface
radius: 12 * Theme.uiScale
radius: 12 * Theme.scale(Screen)
border.color: Settings.settings.currentWallpaper === modelData ? Theme.accentPrimary : Theme.outline
border.width: 2 * Theme.uiScale
border.width: 2 * Theme.scale(Screen)
Image {
id: wallpaperImage
@ -91,8 +91,8 @@ Rectangle {
cache: true
smooth: true
mipmap: true
sourceSize.width: Math.min(width, 480 * Theme.uiScale)
sourceSize.height: Math.min(height, 270 * Theme.uiScale)
sourceSize.width: Math.min(width, 480 * Theme.scale(Screen))
sourceSize.height: Math.min(height, 270 * Theme.scale(Screen))
opacity: (wallpaperImage.status == Image.Ready) ? 1 : 0
// Apply circular mask for rounded corners
layer.enabled: true
@ -122,7 +122,7 @@ Rectangle {
Rectangle {
width: wallpaperImage.width
height: wallpaperImage.height
radius: 12 * Theme.uiScale
radius: 12 * Theme.scale(Screen)
}
}

28
Widgets/SettingsWindow/Tabs/Display.qml
View file

@ -43,10 +43,10 @@ ColumnLayout {
Text {
text: "Monitor Selection"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 16 * Theme.uiScale
Layout.bottomMargin: 16 * Theme.scale(Screen)
}
ColumnLayout {
@ -65,14 +65,14 @@ ColumnLayout {
Text {
text: "Bar Monitors"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Select which monitors to display the top panel/bar on"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
@ -112,14 +112,14 @@ ColumnLayout {
Text {
text: barCheckbox.isChecked ? "check" : ""
font.family: "Material Symbols Outlined"
font.pixelSize: 14 * Theme.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
visible: barCheckbox.isChecked
}
Text {
text: modelData.name || "Unknown"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
}
}
@ -169,14 +169,14 @@ ColumnLayout {
Text {
text: "Dock Monitors"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Select which monitors to display the application dock on"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
@ -216,14 +216,14 @@ ColumnLayout {
Text {
text: dockCheckbox.isChecked ? "check" : ""
font.family: "Material Symbols Outlined"
font.pixelSize: 14 * Theme.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
visible: dockCheckbox.isChecked
}
Text {
text: modelData.name || "Unknown"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
}
}
@ -276,14 +276,14 @@ ColumnLayout {
Text {
text: "Notification Monitors"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Select which monitors to display system notifications on"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
@ -323,14 +323,14 @@ ColumnLayout {
Text {
text: notificationCheckbox.isChecked ? "check" : ""
font.family: "Material Symbols Outlined"
font.pixelSize: 14 * Theme.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
visible: notificationCheckbox.isChecked
}
Text {
text: modelData.name || "Unknown"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
}
}

48
Widgets/SettingsWindow/Tabs/General.qml
View file

@ -28,23 +28,23 @@ ColumnLayout {
Text {
text: "Profile"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 16 * Theme.uiScale
Layout.bottomMargin: 16 * Theme.scale(Screen)
}
Text {
text: "Profile Image"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 4 * Theme.uiScale
Layout.bottomMargin: 4 * Theme.scale(Screen)
}
Text {
text: "Your profile picture displayed in various places throughout the shell"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
@ -52,20 +52,20 @@ ColumnLayout {
}
RowLayout {
spacing: 8 * Theme.uiScale
spacing: 8 * Theme.scale(Screen)
Layout.fillWidth: true
Rectangle {
width: 48 * Theme.uiScale
height: 48 * Theme.uiScale
radius: 24 * Theme.uiScale
width: 48 * Theme.scale(Screen)
height: 48 * Theme.scale(Screen)
radius: 24 * Theme.scale(Screen)
Rectangle {
anchors.fill: parent
color: "transparent"
radius: 24 * Theme.uiScale
radius: 24 * Theme.scale(Screen)
border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 2 * Theme.uiScale
border.width: 2 * Theme.scale(Screen)
z: 2
}
@ -76,22 +76,22 @@ ColumnLayout {
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 40 * Theme.uiScale
radius: 16 * Theme.uiScale
Layout.preferredHeight: 40 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
color: Theme.surfaceVariant
border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
TextInput {
id: profileImageInput
anchors.fill: parent
anchors.leftMargin: 12 * Theme.uiScale
anchors.rightMargin: 12 * Theme.uiScale
anchors.topMargin: 6 * Theme.uiScale
anchors.bottomMargin: 6 * Theme.uiScale
anchors.leftMargin: 12 * Theme.scale(Screen)
anchors.rightMargin: 12 * Theme.scale(Screen)
anchors.topMargin: 6 * Theme.scale(Screen)
anchors.bottomMargin: 6 * Theme.scale(Screen)
text: Settings.settings.profileImage
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: TextInput.AlignVCenter
clip: true
@ -117,19 +117,19 @@ ColumnLayout {
// Separator
Rectangle {
Layout.fillWidth: true
Layout.topMargin: 26 * Theme.uiScale
Layout.bottomMargin: 18 * Theme.uiScale
height: 1 * Theme.uiScale
Layout.topMargin: 26 * Theme.scale(Screen)
Layout.bottomMargin: 18 * Theme.scale(Screen)
height: 1 * Theme.scale(Screen)
color: Theme.outline
opacity: 0.3
}
Text {
text: "User Interface"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 16 * Theme.uiScale
Layout.bottomMargin: 16 * Theme.scale(Screen)
}
ToggleOption {

8
Widgets/SettingsWindow/Tabs/Misc.qml
View file

@ -28,10 +28,10 @@ ColumnLayout {
Text {
text: "Media"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 16 * Theme.uiScale
Layout.bottomMargin: 16 * Theme.scale(Screen)
}
ColumnLayout {
@ -40,14 +40,14 @@ ColumnLayout {
Text {
text: "Visualizer Type"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Choose the style of the audio visualizer"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true

8
Widgets/SettingsWindow/Tabs/Network.qml
View file

@ -30,10 +30,10 @@ ColumnLayout {
Text {
text: "Wi-Fi"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 16 * Theme.uiScale
Layout.bottomMargin: 16 * Theme.scale(Screen)
}
ToggleOption {
@ -58,10 +58,10 @@ ColumnLayout {
Text {
text: "Bluetooth"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 16 * Theme.uiScale
Layout.bottomMargin: 16 * Theme.scale(Screen)
}
ToggleOption {

68
Widgets/SettingsWindow/Tabs/ScreenRecorder.qml
View file

@ -34,7 +34,7 @@ ColumnLayout {
ColumnLayout {
// Text {
// text: "Screen Recording"
// font.pixelSize: 18 * Theme.uiScale
// font.pixelSize: 18 * Theme.scale(Screen)
// font.bold: true
// color: Theme.textPrimary
// Layout.bottomMargin: 8
@ -49,14 +49,14 @@ ColumnLayout {
Text {
text: "Output Directory"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Directory where screen recordings will be saved"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.bottomMargin: 4
}
@ -78,7 +78,7 @@ ColumnLayout {
anchors.topMargin: 6
anchors.bottomMargin: 6
text: Settings.settings.videoPath !== undefined ? Settings.settings.videoPath : ""
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: TextInput.AlignVCenter
clip: true
@ -108,14 +108,14 @@ ColumnLayout {
Text {
text: "Frame Rate"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Target frame rate for screen recordings (default: 60)"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.bottomMargin: 4
}
@ -144,7 +144,7 @@ ColumnLayout {
contentItem: TextInput {
text: frameRateSpinBox.textFromValue(frameRateSpinBox.value, frameRateSpinBox.locale)
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
selectionColor: Theme.accentPrimary
selectedTextColor: Theme.onAccent
@ -183,7 +183,7 @@ ColumnLayout {
Text {
text: "add"
font.family: "Material Symbols Outlined"
font.pixelSize: 20 * Theme.uiScale
font.pixelSize: 20 * Theme.scale(Screen)
color: Theme.textPrimary
anchors.centerIn: parent
}
@ -200,7 +200,7 @@ ColumnLayout {
Text {
text: "remove"
font.family: "Material Symbols Outlined"
font.pixelSize: 20 * Theme.uiScale
font.pixelSize: 20 * Theme.scale(Screen)
color: Theme.textPrimary
anchors.centerIn: parent
}
@ -218,14 +218,14 @@ ColumnLayout {
Text {
text: "Audio Source"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Audio source to capture during recording"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.bottomMargin: 4
}
@ -265,7 +265,7 @@ ColumnLayout {
return audioSourceComboBox.currentText;
}
}
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -276,7 +276,7 @@ ColumnLayout {
y: audioSourceComboBox.topPadding + (audioSourceComboBox.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * Theme.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
color: Theme.textPrimary
}
@ -323,7 +323,7 @@ ColumnLayout {
return modelData;
}
}
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -346,14 +346,14 @@ ColumnLayout {
Text {
text: "Video Quality"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Higher quality results in larger file sizes"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.bottomMargin: 4
}
@ -395,7 +395,7 @@ ColumnLayout {
return qualityComboBox.currentText;
}
}
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -406,7 +406,7 @@ ColumnLayout {
y: qualityComboBox.topPadding + (qualityComboBox.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * Theme.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
color: Theme.textPrimary
}
@ -455,7 +455,7 @@ ColumnLayout {
return modelData;
}
}
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -478,14 +478,14 @@ ColumnLayout {
Text {
text: "Video Codec"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Different codecs offer different compression and compatibility"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.bottomMargin: 4
}
@ -514,7 +514,7 @@ ColumnLayout {
leftPadding: 12
rightPadding: codecComboBox.indicator.width + codecComboBox.spacing
text: codecComboBox.currentText.toUpperCase()
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -525,7 +525,7 @@ ColumnLayout {
y: codecComboBox.topPadding + (codecComboBox.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * Theme.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
color: Theme.textPrimary
}
@ -561,7 +561,7 @@ ColumnLayout {
contentItem: Text {
text: modelData.toUpperCase()
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -584,14 +584,14 @@ ColumnLayout {
Text {
text: "Audio Codec"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Opus is recommended for best performance and smallest audio size"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.bottomMargin: 4
}
@ -620,7 +620,7 @@ ColumnLayout {
leftPadding: 12
rightPadding: audioCodecComboBox.indicator.width + audioCodecComboBox.spacing
text: audioCodecComboBox.currentText.toUpperCase()
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -631,7 +631,7 @@ ColumnLayout {
y: audioCodecComboBox.topPadding + (audioCodecComboBox.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * Theme.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
color: Theme.textPrimary
}
@ -667,7 +667,7 @@ ColumnLayout {
contentItem: Text {
text: modelData.toUpperCase()
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -691,14 +691,14 @@ ColumnLayout {
Text {
text: "Color Range"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Limited is recommended for better compatibility"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.bottomMargin: 4
}
@ -727,7 +727,7 @@ ColumnLayout {
leftPadding: 12
rightPadding: colorRangeComboBox.indicator.width + colorRangeComboBox.spacing
text: colorRangeComboBox.currentText.charAt(0).toUpperCase() + colorRangeComboBox.currentText.slice(1)
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -738,7 +738,7 @@ ColumnLayout {
y: colorRangeComboBox.topPadding + (colorRangeComboBox.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * Theme.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
color: Theme.textPrimary
}
@ -774,7 +774,7 @@ ColumnLayout {
contentItem: Text {
text: modelData.charAt(0).toUpperCase() + modelData.slice(1)
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight

20
Widgets/SettingsWindow/Tabs/TimeWeather.qml
View file

@ -29,10 +29,10 @@ ColumnLayout {
Text {
text: "Time"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 16 * Theme.uiScale
Layout.bottomMargin: 16 * Theme.scale(Screen)
}
ToggleOption {
@ -64,27 +64,27 @@ ColumnLayout {
Text {
text: "Weather"
font.pixelSize: 18 * Theme.uiScale
font.pixelSize: 18 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 16 * Theme.uiScale
Layout.bottomMargin: 16 * Theme.scale(Screen)
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.bottomMargin: 8 * Theme.uiScale
Layout.bottomMargin: 8 * Theme.scale(Screen)
Text {
text: "City"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Your city name for weather information"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
Layout.fillWidth: true
}
@ -106,7 +106,7 @@ ColumnLayout {
anchors.topMargin: 6
anchors.bottomMargin: 6
text: Settings.settings.weatherCity
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: TextInput.AlignVCenter
clip: true
@ -147,14 +147,14 @@ ColumnLayout {
Text {
text: "Temperature Unit"
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Choose between Celsius and Fahrenheit"
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true