Using proper Style everywhere
This commit is contained in:
quadbyte
parent
d8debd2429
commit
33217e33ed
5 changed files with 66 additions and 61 deletions
|
|
@ -3,15 +3,17 @@ import Quickshell
|
|||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import qs.Widgets
|
||||
import qs.Services
|
||||
import qs.Theme
|
||||
|
||||
PanelWindow {
|
||||
id: root
|
||||
|
||||
readonly property real scaling: Scaling.scale(screen)
|
||||
property var modelData
|
||||
|
||||
screen: modelData
|
||||
implicitHeight: 36
|
||||
implicitHeight: Style.barHeight * scaling
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
|
|
@ -31,12 +33,12 @@ PanelWindow {
|
|||
|
||||
RowLayout {
|
||||
// Just testing
|
||||
NoctaliaToggle {
|
||||
NToggle {
|
||||
label: "Label"
|
||||
description: "Description"
|
||||
}
|
||||
|
||||
NoctaliaIconButton {
|
||||
NIconButton {
|
||||
icon: "refresh"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,35 +10,37 @@ Singleton {
|
|||
readonly property int designScreenHeight: 1440
|
||||
|
||||
// Automatic, orientation-agnostic scaling
|
||||
function scale(currentScreen) {
|
||||
function scale(aScreen) {
|
||||
if (typeof aScreen !== 'undefined' & aScreen) {
|
||||
|
||||
// // 1) Per-monitor override wins
|
||||
// try {
|
||||
// const overrides = Settings.settings.monitorScaleOverrides || {};
|
||||
// if (currentScreen && currentScreen.name && overrides[currentScreen.name] !== undefined) {
|
||||
// const overrideValue = overrides[currentScreen.name]
|
||||
// if (isFinite(overrideValue)) return overrideValue
|
||||
// }
|
||||
// } catch (e) {
|
||||
// // ignore
|
||||
// }
|
||||
|
||||
// // 2) Fallback: scale by diagonal pixel count relative to design resolution
|
||||
// try {
|
||||
// const w = Math.max(1, currentScreen ? (currentScreen.width || 0) : 0)
|
||||
// const h = Math.max(1, currentScreen ? (currentScreen.height || 0) : 0)
|
||||
// if (w > 1 && h > 1) {
|
||||
// const diag = Math.sqrt(w * w + h * h)
|
||||
// const baseDiag = Math.sqrt(designScreenWidth * designScreenWidth + designScreenHeight * designScreenHeight)
|
||||
// const ratio = diag / baseDiag
|
||||
// // Clamp to a reasonable range for UI legibility
|
||||
// return Math.max(0.9, Math.min(1.6, ratio))
|
||||
// }
|
||||
// } catch (e) {
|
||||
// // ignore and fall through
|
||||
// }
|
||||
}
|
||||
|
||||
// 3) Safe default
|
||||
return 1.0
|
||||
// // 1) Per-monitor override wins
|
||||
// try {
|
||||
// const overrides = Settings.settings.monitorScaleOverrides || {};
|
||||
// if (currentScreen && currentScreen.name && overrides[currentScreen.name] !== undefined) {
|
||||
// const overrideValue = overrides[currentScreen.name]
|
||||
// if (isFinite(overrideValue)) return overrideValue
|
||||
// }
|
||||
// } catch (e) {
|
||||
// // ignore
|
||||
// }
|
||||
|
||||
// // 2) Fallback: scale by diagonal pixel count relative to design resolution
|
||||
// try {
|
||||
// const w = Math.max(1, currentScreen ? (currentScreen.width || 0) : 0)
|
||||
// const h = Math.max(1, currentScreen ? (currentScreen.height || 0) : 0)
|
||||
// if (w > 1 && h > 1) {
|
||||
// const diag = Math.sqrt(w * w + h * h)
|
||||
// const baseDiag = Math.sqrt(designScreenWidth * designScreenWidth + designScreenHeight * designScreenHeight)
|
||||
// const ratio = diag / baseDiag
|
||||
// // Clamp to a reasonable range for UI legibility
|
||||
// return Math.max(0.9, Math.min(1.6, ratio))
|
||||
// }
|
||||
// } catch (e) {
|
||||
// // ignore and fall through
|
||||
// }
|
||||
|
||||
// // 3) Safe default
|
||||
// return 1.0
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ Singleton {
|
|||
*/
|
||||
|
||||
// Font
|
||||
property real fontExtraLarge: 32
|
||||
property real fontLarge: 16
|
||||
property real fontMedium: 14
|
||||
property real fontSmall: 12
|
||||
property real fontExtraLarge: 20
|
||||
property real fontLarge: 14
|
||||
property real fontMedium: 10
|
||||
property real fontSmall: 8
|
||||
|
||||
// Font weight
|
||||
property int fontWeightRegular: 400
|
||||
|
|
@ -43,4 +43,7 @@ Singleton {
|
|||
property int animationFast: 150
|
||||
property int animationNormal: 300
|
||||
property int animationSlow: 500
|
||||
|
||||
property int barHeight: 36
|
||||
property int baseWidgetHeight: 32
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue