Scaling: many improvements and fixes
- radius are not pixels, they should not be scaled - use "screen" instead of "Screen" which helps a lot in some places
This commit is contained in:
quadbyte
parent
eda65a9948
commit
d3be5b760b
43 changed files with 532 additions and 538 deletions
|
|
@ -44,7 +44,7 @@ Item {
|
|||
id: iconText
|
||||
text: "dashboard"
|
||||
font.family: isActive ? "Material Symbols Rounded" : "Material Symbols Outlined"
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
color: sidebarPopup.visible ? Theme.accentPrimary : Theme.textPrimary
|
||||
anchors.centerIn: parent
|
||||
z: 1
|
||||
|
|
|
|||
|
|
@ -8,15 +8,13 @@ import qs.Services
|
|||
|
||||
Rectangle {
|
||||
id: musicCard
|
||||
width: 360 * Theme.scale(Screen)
|
||||
height: 250 * Theme.scale(Screen)
|
||||
color: "transparent"
|
||||
|
||||
Rectangle {
|
||||
id: card
|
||||
anchors.fill: parent
|
||||
color: Theme.surface
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
radius: 18
|
||||
|
||||
// Show fallback UI if no player is available
|
||||
Item {
|
||||
|
|
@ -26,12 +24,12 @@ Rectangle {
|
|||
|
||||
ColumnLayout {
|
||||
anchors.centerIn: parent
|
||||
spacing: 16 * Theme.scale(Screen)
|
||||
spacing: 16 * Theme.scale(screen)
|
||||
|
||||
Text {
|
||||
text: "music_note"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: Theme.fontSizeHeader * Theme.scale(Screen)
|
||||
font.pixelSize: Theme.fontSizeHeader * Theme.scale(screen)
|
||||
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
|
@ -40,7 +38,7 @@ Rectangle {
|
|||
text: MusicManager.hasPlayer ? "No controllable player selected" : "No music player detected"
|
||||
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.6)
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen)
|
||||
font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
}
|
||||
|
|
@ -49,45 +47,45 @@ Rectangle {
|
|||
// Main player UI
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 18 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
anchors.margins: 18 * Theme.scale(screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
visible: !!MusicManager.currentPlayer
|
||||
|
||||
// Player selector
|
||||
ComboBox {
|
||||
id: playerSelector
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 40 * Theme.scale(Screen)
|
||||
Layout.preferredHeight: 40 * Theme.scale(screen)
|
||||
visible: MusicManager.getAvailablePlayers().length > 1
|
||||
model: MusicManager.getAvailablePlayers()
|
||||
textRole: "identity"
|
||||
currentIndex: MusicManager.selectedPlayerIndex
|
||||
|
||||
background: Rectangle {
|
||||
implicitWidth: 120 * Theme.scale(Screen)
|
||||
implicitHeight: 40 * Theme.scale(Screen)
|
||||
implicitWidth: 120 * Theme.scale(screen)
|
||||
implicitHeight: 40 * Theme.scale(screen)
|
||||
color: Theme.surfaceVariant
|
||||
border.color: playerSelector.activeFocus ? Theme.accentPrimary : Theme.outline
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
radius: 16 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
radius: 16
|
||||
}
|
||||
|
||||
contentItem: Text {
|
||||
leftPadding: 12 * Theme.scale(Screen)
|
||||
leftPadding: 12 * Theme.scale(screen)
|
||||
rightPadding: playerSelector.indicator.width + playerSelector.spacing
|
||||
text: playerSelector.displayText
|
||||
font.pixelSize: 13 * Theme.scale(Screen)
|
||||
font.pixelSize: 13 * Theme.scale(screen)
|
||||
color: Theme.textPrimary
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
indicator: Text {
|
||||
x: playerSelector.width - width - 12 * Theme.scale(Screen)
|
||||
x: playerSelector.width - width - 12 * Theme.scale(screen)
|
||||
y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2
|
||||
text: "arrow_drop_down"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 24 * Theme.scale(Screen)
|
||||
font.pixelSize: 24 * Theme.scale(screen)
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +93,7 @@ Rectangle {
|
|||
y: playerSelector.height
|
||||
width: playerSelector.width
|
||||
implicitHeight: contentItem.implicitHeight
|
||||
padding: 1 * Theme.scale(Screen)
|
||||
padding: 1 * Theme.scale(screen)
|
||||
|
||||
contentItem: ListView {
|
||||
clip: true
|
||||
|
|
@ -109,8 +107,8 @@ Rectangle {
|
|||
background: Rectangle {
|
||||
color: Theme.surfaceVariant
|
||||
border.color: Theme.outline
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
radius: 16 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
radius: 16
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -118,7 +116,7 @@ Rectangle {
|
|||
width: playerSelector.width
|
||||
contentItem: Text {
|
||||
text: modelData.identity
|
||||
font.pixelSize: 13 * Theme.scale(Screen)
|
||||
font.pixelSize: 13 * Theme.scale(screen)
|
||||
color: Theme.textPrimary
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
elide: Text.ElideRight
|
||||
|
|
@ -138,14 +136,14 @@ Rectangle {
|
|||
|
||||
// Album art with spectrum visualizer
|
||||
RowLayout {
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
Layout.fillWidth: true
|
||||
|
||||
// Album art container with circular spectrum overlay
|
||||
Item {
|
||||
id: albumArtContainer
|
||||
width: 96 * Theme.scale(Screen)
|
||||
height: 96 * Theme.scale(Screen) // enough for spectrum and art (will adjust if needed)
|
||||
width: 96 * Theme.scale(screen)
|
||||
height: 96 * Theme.scale(screen) // enough for spectrum and art (will adjust if needed)
|
||||
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
|
||||
|
||||
// Circular spectrum visualizer around album art
|
||||
|
|
@ -153,36 +151,36 @@ Rectangle {
|
|||
id: spectrum
|
||||
values: MusicManager.cavaValues
|
||||
anchors.centerIn: parent
|
||||
innerRadius: 30 * Theme.scale(Screen) // Position just outside 60x60 album art
|
||||
outerRadius: 48 * Theme.scale(Screen) // Extend bars outward from album art
|
||||
innerRadius: 30 * Theme.scale(screen) // Position just outside 60x60 album art
|
||||
outerRadius: 48 * Theme.scale(screen) // Extend bars outward from album art
|
||||
fillColor: Theme.accentPrimary
|
||||
strokeColor: Theme.accentPrimary
|
||||
strokeWidth: 0 * Theme.scale(Screen)
|
||||
strokeWidth: 0 * Theme.scale(screen)
|
||||
z: 0
|
||||
}
|
||||
|
||||
// Album art image
|
||||
Rectangle {
|
||||
id: albumArtwork
|
||||
width: 60 * Theme.scale(Screen)
|
||||
height: 60 * Theme.scale(Screen)
|
||||
width: 60 * Theme.scale(screen)
|
||||
height: 60 * Theme.scale(screen)
|
||||
anchors.centerIn: parent
|
||||
radius: 30 * Theme.scale(Screen) // circle
|
||||
radius: 30 // circle
|
||||
color: Qt.darker(Theme.surface, 1.1)
|
||||
border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
|
||||
Image {
|
||||
id: albumArt
|
||||
anchors.fill: parent
|
||||
anchors.margins: 2 * Theme.scale(Screen)
|
||||
anchors.margins: 2 * Theme.scale(screen)
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
smooth: true
|
||||
mipmap: true
|
||||
cache: false
|
||||
asynchronous: true
|
||||
sourceSize.width: 60 * Theme.scale(Screen)
|
||||
sourceSize.height: 60 * Theme.scale(Screen)
|
||||
sourceSize.width: 60 * Theme.scale(screen)
|
||||
sourceSize.height: 60 * Theme.scale(screen)
|
||||
source: MusicManager.trackArtUrl
|
||||
visible: source.toString() !== ""
|
||||
|
||||
|
|
@ -213,7 +211,7 @@ Rectangle {
|
|||
anchors.centerIn: parent
|
||||
text: "album"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: Theme.fontSizeBody * Theme.scale(Screen)
|
||||
font.pixelSize: Theme.fontSizeBody * Theme.scale(screen)
|
||||
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.4)
|
||||
visible: !albumArt.visible
|
||||
}
|
||||
|
|
@ -223,13 +221,13 @@ Rectangle {
|
|||
// Track metadata
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 4 * Theme.scale(Screen)
|
||||
spacing: 4 * Theme.scale(screen)
|
||||
|
||||
Text {
|
||||
text: MusicManager.trackTitle
|
||||
color: Theme.textPrimary
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen)
|
||||
font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen)
|
||||
font.bold: true
|
||||
elide: Text.ElideRight
|
||||
wrapMode: Text.Wrap
|
||||
|
|
@ -241,7 +239,7 @@ Rectangle {
|
|||
text: MusicManager.trackArtist
|
||||
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.8)
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen)
|
||||
font.pixelSize: Theme.fontSizeCaption * Theme.scale(screen)
|
||||
elide: Text.ElideRight
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
|
@ -250,7 +248,7 @@ Rectangle {
|
|||
text: MusicManager.trackAlbum
|
||||
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.6)
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen)
|
||||
font.pixelSize: Theme.fontSizeCaption * Theme.scale(screen)
|
||||
elide: Text.ElideRight
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
|
@ -261,8 +259,8 @@ Rectangle {
|
|||
Rectangle {
|
||||
id: progressBarBackground
|
||||
width: parent.width
|
||||
height: 6 * Theme.scale(Screen)
|
||||
radius: 3 * Theme.scale(Screen)
|
||||
height: 6 * Theme.scale(screen)
|
||||
radius: 3
|
||||
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.15)
|
||||
Layout.fillWidth: true
|
||||
|
||||
|
|
@ -290,12 +288,12 @@ Rectangle {
|
|||
// Interactive progress handle
|
||||
Rectangle {
|
||||
id: progressHandle
|
||||
width: 12 * Theme.scale(Screen)
|
||||
height: 12 * Theme.scale(Screen)
|
||||
radius: 6 * Theme.scale(Screen)
|
||||
width: 12 * Theme.scale(screen)
|
||||
height: 12 * Theme.scale(screen)
|
||||
radius: 6
|
||||
color: Theme.accentPrimary
|
||||
border.color: Qt.lighter(Theme.accentPrimary, 1.3)
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
|
||||
x: Math.max(0, Math.min(parent.width - width, progressFill.width - width / 2))
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
|
@ -334,18 +332,18 @@ Rectangle {
|
|||
|
||||
// Media controls
|
||||
RowLayout {
|
||||
spacing: 4 * Theme.scale(Screen)
|
||||
spacing: 4 * Theme.scale(screen)
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
||||
// Previous button
|
||||
Rectangle {
|
||||
width: 28 * Theme.scale(Screen)
|
||||
height: 28 * Theme.scale(Screen)
|
||||
radius: 14 * Theme.scale(Screen)
|
||||
width: 28 * Theme.scale(screen)
|
||||
height: 28 * Theme.scale(screen)
|
||||
radius: 14
|
||||
color: previousButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1)
|
||||
border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
|
||||
MouseArea {
|
||||
id: previousButton
|
||||
|
|
@ -360,19 +358,19 @@ Rectangle {
|
|||
anchors.centerIn: parent
|
||||
text: "skip_previous"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen)
|
||||
font.pixelSize: Theme.fontSizeCaption * Theme.scale(screen)
|
||||
color: previousButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
|
||||
}
|
||||
}
|
||||
|
||||
// Play/Pause button
|
||||
Rectangle {
|
||||
width: 36 * Theme.scale(Screen)
|
||||
height: 36 * Theme.scale(Screen)
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
width: 36 * Theme.scale(screen)
|
||||
height: 36 * Theme.scale(screen)
|
||||
radius: 18
|
||||
color: playButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1)
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 2 * Theme.scale(Screen)
|
||||
border.width: 2 * Theme.scale(screen)
|
||||
|
||||
MouseArea {
|
||||
id: playButton
|
||||
|
|
@ -387,19 +385,19 @@ Rectangle {
|
|||
anchors.centerIn: parent
|
||||
text: MusicManager.isPlaying ? "pause" : "play_arrow"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: Theme.fontSizeBody * Theme.scale(Screen)
|
||||
font.pixelSize: Theme.fontSizeBody * Theme.scale(screen)
|
||||
color: playButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
|
||||
}
|
||||
}
|
||||
|
||||
// Next button
|
||||
Rectangle {
|
||||
width: 28 * Theme.scale(Screen)
|
||||
height: 28 * Theme.scale(Screen)
|
||||
radius: 14 * Theme.scale(Screen)
|
||||
width: 28 * Theme.scale(screen)
|
||||
height: 28 * Theme.scale(screen)
|
||||
radius: 14
|
||||
color: nextButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1)
|
||||
border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
|
||||
MouseArea {
|
||||
id: nextButton
|
||||
|
|
@ -414,7 +412,7 @@ Rectangle {
|
|||
anchors.centerIn: parent
|
||||
text: "skip_next"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen)
|
||||
font.pixelSize: Theme.fontSizeCaption * Theme.scale(screen)
|
||||
color: nextButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,8 +44,8 @@ PanelWithOverlay {
|
|||
|
||||
property real slideOffset: width
|
||||
property bool isAnimating: false
|
||||
property int leftPadding: 20 * Theme.scale(Screen)
|
||||
property int bottomPadding: 20 * Theme.scale(Screen)
|
||||
property int leftPadding: 20 * Theme.scale(screen)
|
||||
property int bottomPadding: 20 * Theme.scale(screen)
|
||||
// Recording properties
|
||||
property bool isRecording: false
|
||||
|
||||
|
|
@ -113,10 +113,8 @@ PanelWithOverlay {
|
|||
isRecording = false;
|
||||
}
|
||||
|
||||
// Necessary for the scaling to work on smaller screens
|
||||
width: 526
|
||||
implicitWidth: 500 * Theme.scale(Screen)
|
||||
implicitHeight: 700 * Theme.scale(Screen)
|
||||
width: 480 * Theme.scale(screen)
|
||||
height: 660 * Theme.scale(screen)
|
||||
visible: parent.visible
|
||||
color: "transparent"
|
||||
anchors.top: parent.top
|
||||
|
|
@ -172,15 +170,13 @@ PanelWithOverlay {
|
|||
Rectangle {
|
||||
id: mainRectangle
|
||||
|
||||
anchors.top: sidebarPopupRect.top
|
||||
// anchors.top: sidebarPopupRect.top
|
||||
width: sidebarPopupRect.width - sidebarPopupRect.leftPadding
|
||||
height: sidebarPopupRect.height - sidebarPopupRect.bottomPadding
|
||||
x: sidebarPopupRect.leftPadding + sidebarPopupRect.slideOffset
|
||||
y: 0
|
||||
z: 0
|
||||
color: Theme.backgroundPrimary
|
||||
anchors.fill: parent
|
||||
bottomLeftRadius: 20 * Theme.scale(Screen)
|
||||
// anchors.fill: parent
|
||||
bottomLeftRadius: 20
|
||||
|
||||
Behavior on x {
|
||||
enabled: !sidebarPopupRect.isAnimating
|
||||
|
|
@ -212,83 +208,84 @@ PanelWithOverlay {
|
|||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 20 * Theme.scale(Screen)
|
||||
spacing: 8 * Theme.scale(Screen)
|
||||
spacing: 8 * Theme.scale(screen)
|
||||
|
||||
System {
|
||||
id: systemWidget
|
||||
|
||||
width: 420 * Theme.scale(screen)
|
||||
height: 80 * Theme.scale(screen)
|
||||
settingsModal: settingsModal
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
z: 3
|
||||
}
|
||||
|
||||
Weather {
|
||||
id: weather
|
||||
|
||||
width: 420 * Theme.scale(screen)
|
||||
height: 180 * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
z: 2
|
||||
}
|
||||
|
||||
// Music and System Monitor row
|
||||
RowLayout {
|
||||
spacing: 8 * Theme.scale(Screen)
|
||||
spacing: 8 * Theme.scale(screen)
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
||||
Music {
|
||||
z: 2
|
||||
width: 332 * Theme.scale(screen)
|
||||
height: 250 * Theme.scale(screen)
|
||||
}
|
||||
|
||||
SystemMonitor {
|
||||
id: systemMonitor
|
||||
|
||||
z: 2
|
||||
width: 80 * Theme.scale(screen)
|
||||
height: 250 * Theme.scale(screen)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Power profile, Record and Wallpaper row
|
||||
RowLayout {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
spacing: 10 * Theme.scale(Screen)
|
||||
Layout.preferredHeight: 80 * Theme.scale(Screen)
|
||||
z: 3
|
||||
spacing: 8 * Theme.scale(screen)
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
||||
PowerProfile {
|
||||
width: 206 * Theme.scale(screen)
|
||||
height: 70 * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.preferredHeight: 80 * Theme.scale(Screen)
|
||||
}
|
||||
|
||||
// Record and Wallpaper card
|
||||
Rectangle {
|
||||
Layout.preferredHeight: 80 * Theme.scale(Screen)
|
||||
Layout.preferredWidth: 140 * Theme.scale(Screen)
|
||||
Layout.fillWidth: false
|
||||
width: 206 * Theme.scale(screen)
|
||||
height: 70 * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
||||
color: Theme.surface
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
radius: 16
|
||||
|
||||
Row {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 20 * Theme.scale(Screen)
|
||||
spacing: 20 * Theme.scale(screen)
|
||||
|
||||
// Record button
|
||||
Rectangle {
|
||||
id: recordButton
|
||||
|
||||
width: 36 * Theme.scale(Screen)
|
||||
height: 36 * Theme.scale(Screen)
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
width: 36 * Theme.scale(screen)
|
||||
height: 36 * Theme.scale(screen)
|
||||
radius: 18
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
color: sidebarPopupRect.isRecording ? Theme.accentPrimary : (recordButtonArea.containsMouse ? Theme.accentPrimary : "transparent")
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "photo_camera"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 22 * Theme.scale(Screen)
|
||||
font.pixelSize: 22 * Theme.scale(screen)
|
||||
color: sidebarPopupRect.isRecording || recordButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
|
@ -323,18 +320,18 @@ PanelWithOverlay {
|
|||
Rectangle {
|
||||
id: wallpaperButton
|
||||
|
||||
width: 36 * Theme.scale(Screen)
|
||||
height: 36 * Theme.scale(Screen)
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
width: 36 * Theme.scale(screen)
|
||||
height: 36 * Theme.scale(screen)
|
||||
radius: 18
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "image"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 22 * Theme.scale(Screen)
|
||||
font.pixelSize: 22 * Theme.scale(screen)
|
||||
color: wallpaperButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
|
@ -368,6 +365,11 @@ PanelWithOverlay {
|
|||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 8 * Theme.scale(screen)
|
||||
color: "transparent"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Behavior on x {
|
||||
|
|
|
|||
|
|
@ -7,22 +7,20 @@ import qs.Components
|
|||
|
||||
Rectangle {
|
||||
id: card
|
||||
width: 200 * Theme.scale(Screen)
|
||||
height: 70 * Theme.scale(Screen)
|
||||
color: Theme.surface
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
radius: 16
|
||||
|
||||
Row {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 20 * Theme.scale(Screen)
|
||||
spacing: 20 * Theme.scale(screen)
|
||||
|
||||
|
||||
Rectangle {
|
||||
width: 36 * Theme.scale(Screen); height: 36 * Theme.scale(Screen)
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen)
|
||||
radius: 16
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance)
|
||||
? Theme.accentPrimary
|
||||
: (perfMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
|
||||
|
|
@ -33,7 +31,7 @@ Rectangle {
|
|||
anchors.centerIn: parent
|
||||
text: "speed"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 22 * Theme.scale(Screen)
|
||||
font.pixelSize: 22 * Theme.scale(screen)
|
||||
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance) || perfMouseArea.containsMouse
|
||||
? Theme.backgroundPrimary
|
||||
: Theme.accentPrimary
|
||||
|
|
@ -65,10 +63,10 @@ Rectangle {
|
|||
|
||||
|
||||
Rectangle {
|
||||
width: 36 * Theme.scale(Screen); height: 36 * Theme.scale(Screen)
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen)
|
||||
radius: 18
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced)
|
||||
? Theme.accentPrimary
|
||||
: (balMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
|
||||
|
|
@ -79,7 +77,7 @@ Rectangle {
|
|||
anchors.centerIn: parent
|
||||
text: "balance"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 22 * Theme.scale(Screen)
|
||||
font.pixelSize: 22 * Theme.scale(screen)
|
||||
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced) || balMouseArea.containsMouse
|
||||
? Theme.backgroundPrimary
|
||||
: Theme.accentPrimary
|
||||
|
|
@ -111,10 +109,10 @@ Rectangle {
|
|||
|
||||
|
||||
Rectangle {
|
||||
width: 36 * Theme.scale(Screen); height: 36 * Theme.scale(Screen)
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen)
|
||||
radius: 18
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver)
|
||||
? Theme.accentPrimary
|
||||
: (saveMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
|
||||
|
|
@ -125,7 +123,7 @@ Rectangle {
|
|||
anchors.centerIn: parent
|
||||
text: "eco"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 22 * Theme.scale(Screen)
|
||||
font.pixelSize: 22 * Theme.scale(screen)
|
||||
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver) || saveMouseArea.containsMouse
|
||||
? Theme.backgroundPrimary
|
||||
: Theme.accentPrimary
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import qs.Components
|
|||
|
||||
PanelWindow {
|
||||
id: settingsModal
|
||||
implicitWidth: 480 * Theme.scale(Screen)
|
||||
implicitHeight: 780 * Theme.scale(Screen)
|
||||
implicitWidth: 480 * Theme.scale(screen)
|
||||
implicitHeight: 780 * Theme.scale(screen)
|
||||
visible: false
|
||||
color: "transparent"
|
||||
anchors.top: true
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import qs.Components
|
|||
|
||||
PanelWindow {
|
||||
id: settingsModal
|
||||
implicitWidth: 480 * Theme.scale(Screen)
|
||||
implicitHeight: 780 * Theme.scale(Screen)
|
||||
implicitWidth: 480 * Theme.scale(screen)
|
||||
implicitHeight: 780 * Theme.scale(screen)
|
||||
visible: false
|
||||
color: "transparent"
|
||||
anchors.top: true
|
||||
|
|
|
|||
|
|
@ -44,10 +44,8 @@ Rectangle {
|
|||
uptimeProcess.running = true;
|
||||
}
|
||||
|
||||
width: 440 * Theme.scale(Screen)
|
||||
height: 80 * Theme.scale(Screen)
|
||||
color: "transparent"
|
||||
anchors.horizontalCenterOffset: -2
|
||||
// anchors.horizontalCenterOffset: -2
|
||||
onPanelVisibleChanged: {
|
||||
if (panelVisible)
|
||||
updateSystemInfo();
|
||||
|
|
@ -62,29 +60,29 @@ Rectangle {
|
|||
|
||||
anchors.fill: parent
|
||||
color: Theme.surface
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
radius: 18
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 18 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
anchors.margins: 18 * Theme.scale(screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
|
||||
Rectangle {
|
||||
width: 48 * Theme.scale(Screen)
|
||||
height: 48 * Theme.scale(Screen)
|
||||
radius: 24 * Theme.scale(Screen)
|
||||
width: 48 * Theme.scale(screen)
|
||||
height: 48 * Theme.scale(screen)
|
||||
radius: 24
|
||||
color: Theme.accentPrimary
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "transparent"
|
||||
radius: 24 * Theme.scale(Screen)
|
||||
radius: 24
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 2 * Theme.scale(Screen)
|
||||
border.width: 2 * Theme.scale(screen)
|
||||
z: 2
|
||||
}
|
||||
|
||||
|
|
@ -94,13 +92,13 @@ Rectangle {
|
|||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 4 * Theme.scale(Screen)
|
||||
spacing: 4 * Theme.scale(screen)
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: Quickshell.env("USER")
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
|
@ -108,7 +106,7 @@ Rectangle {
|
|||
Text {
|
||||
text: "System Uptime: " + uptimeText
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 12 * Theme.scale(Screen)
|
||||
font.pixelSize: 12 * Theme.scale(screen)
|
||||
color: Theme.textSecondary
|
||||
}
|
||||
|
||||
|
|
@ -121,21 +119,23 @@ Rectangle {
|
|||
Rectangle {
|
||||
id: settingsButton
|
||||
|
||||
width: 32 * Theme.scale(Screen)
|
||||
height: 32 * Theme.scale(Screen)
|
||||
radius: 16 * Theme.scale(Screen)
|
||||
width: 32 * Theme.scale(screen)
|
||||
height: 32 * Theme.scale(screen)
|
||||
radius: 16
|
||||
color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.accentPrimary : "transparent"
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
anchors.horizontalCenterOffset: -0.5 * Theme.scale(Screen)
|
||||
anchors.horizontalCenterOffset: -0.5 * Theme.scale(screen)
|
||||
text: "settings"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary
|
||||
font.variableAxes: { "wght": (Font.Normal + Font.Bold) / 2.0 }
|
||||
font.variableAxes: {
|
||||
"wght": (Font.Normal + Font.Bold) / 2
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
|
@ -164,21 +164,23 @@ Rectangle {
|
|||
Rectangle {
|
||||
id: systemButton
|
||||
|
||||
width: 32 * Theme.scale(Screen)
|
||||
height: 32 * Theme.scale(Screen)
|
||||
radius: 16 * Theme.scale(Screen)
|
||||
width: 32 * Theme.scale(screen)
|
||||
height: 32 * Theme.scale(screen)
|
||||
radius: 16
|
||||
color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent"
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
anchors.horizontalCenterOffset: -0.5 * Theme.scale(Screen)
|
||||
anchors.horizontalCenterOffset: -0.5 * Theme.scale(screen)
|
||||
text: "power_settings_new"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary
|
||||
font.variableAxes: { "wght": (Font.Normal + Font.Bold) / 2.0 }
|
||||
font.variableAxes: {
|
||||
"wght": (Font.Normal + Font.Bold) / 2
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
|
@ -215,18 +217,18 @@ Rectangle {
|
|||
anchors.right: systemButton.right
|
||||
|
||||
Rectangle {
|
||||
width: 160 * Theme.scale(Screen)
|
||||
height: 220 * Theme.scale(Screen)
|
||||
width: 160 * Theme.scale(screen)
|
||||
height: 220 * Theme.scale(screen)
|
||||
color: Theme.surface
|
||||
radius: 8 * Theme.scale(Screen)
|
||||
radius: 8
|
||||
border.color: Theme.outline
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
visible: true
|
||||
z: 9999
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 32 * Theme.scale(Screen)
|
||||
anchors.topMargin: systemButton.y + systemButton.height + 48 * Theme.scale(Screen)
|
||||
anchors.rightMargin: 32 * Theme.scale(screen)
|
||||
anchors.topMargin: systemButton.y + systemButton.height + 48 * Theme.scale(screen)
|
||||
|
||||
// Prevent closing when clicking in the panel bg
|
||||
MouseArea {
|
||||
|
|
@ -235,31 +237,31 @@ Rectangle {
|
|||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 8 * Theme.scale(Screen)
|
||||
spacing: 4 * Theme.scale(Screen)
|
||||
anchors.margins: 8 * Theme.scale(screen)
|
||||
spacing: 4 * Theme.scale(screen)
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 36 * Theme.scale(Screen)
|
||||
radius: 6 * Theme.scale(Screen)
|
||||
Layout.preferredHeight: 36 * Theme.scale(screen)
|
||||
radius: 6
|
||||
color: lockButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 12 * Theme.scale(Screen)
|
||||
spacing: 8 * Theme.scale(Screen)
|
||||
anchors.margins: 12 * Theme.scale(screen)
|
||||
spacing: 8 * Theme.scale(screen)
|
||||
|
||||
Text {
|
||||
text: "lock_outline"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Lock Screen"
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 14 * Theme.scale(Screen)
|
||||
font.pixelSize: 14 * Theme.scale(screen)
|
||||
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
|
@ -282,25 +284,25 @@ Rectangle {
|
|||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 36 * Theme.scale(Screen)
|
||||
radius: 6 * Theme.scale(Screen)
|
||||
Layout.preferredHeight: 36 * Theme.scale(screen)
|
||||
radius: 6
|
||||
color: suspendButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 12 * Theme.scale(Screen)
|
||||
spacing: 8 * Theme.scale(Screen)
|
||||
anchors.margins: 12 * Theme.scale(screen)
|
||||
spacing: 8 * Theme.scale(screen)
|
||||
|
||||
Text {
|
||||
text: "bedtime"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Suspend"
|
||||
font.pixelSize: 14 * Theme.scale(Screen)
|
||||
font.pixelSize: 14 * Theme.scale(screen)
|
||||
color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
|
@ -323,26 +325,26 @@ Rectangle {
|
|||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 36 * Theme.scale(Screen)
|
||||
radius: 6 * Theme.scale(Screen)
|
||||
Layout.preferredHeight: 36 * Theme.scale(screen)
|
||||
radius: 6
|
||||
color: rebootButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 12 * Theme.scale(Screen)
|
||||
spacing: 8 * Theme.scale(Screen)
|
||||
anchors.margins: 12 * Theme.scale(screen)
|
||||
spacing: 8 * Theme.scale(screen)
|
||||
|
||||
Text {
|
||||
text: "refresh"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Reboot"
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 14 * Theme.scale(Screen)
|
||||
font.pixelSize: 14 * Theme.scale(screen)
|
||||
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
|
@ -365,25 +367,25 @@ Rectangle {
|
|||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 36 * Theme.scale(Screen)
|
||||
radius: 6 * Theme.scale(Screen)
|
||||
Layout.preferredHeight: 36 * Theme.scale(screen)
|
||||
radius: 6
|
||||
color: logoutButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 12 * Theme.scale(Screen)
|
||||
spacing: 8 * Theme.scale(Screen)
|
||||
anchors.margins: 12 * Theme.scale(screen)
|
||||
spacing: 8 * Theme.scale(screen)
|
||||
|
||||
Text {
|
||||
text: "exit_to_app"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Logout"
|
||||
font.pixelSize: 14 * Theme.scale(Screen)
|
||||
font.pixelSize: 14 * Theme.scale(screen)
|
||||
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
|
@ -406,25 +408,25 @@ Rectangle {
|
|||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 36 * Theme.scale(Screen)
|
||||
radius: 6 * Theme.scale(Screen)
|
||||
Layout.preferredHeight: 36 * Theme.scale(screen)
|
||||
radius: 6
|
||||
color: shutdownButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 12 * Theme.scale(Screen)
|
||||
spacing: 8 * Theme.scale(Screen)
|
||||
anchors.margins: 12 * Theme.scale(screen)
|
||||
spacing: 8 * Theme.scale(screen)
|
||||
|
||||
Text {
|
||||
text: "power_settings_new"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Shutdown"
|
||||
font.pixelSize: 14 * Theme.scale(Screen)
|
||||
font.pixelSize: 14 * Theme.scale(screen)
|
||||
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
|
@ -514,4 +516,5 @@ Rectangle {
|
|||
running: panelVisible
|
||||
onTriggered: updateSystemInfo()
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@ import qs.Settings
|
|||
|
||||
Rectangle {
|
||||
id: systemMonitor
|
||||
width: 70 * Theme.scale(Screen)
|
||||
height: 250 * Theme.scale(Screen)
|
||||
color: "transparent"
|
||||
|
||||
// Track visibility state for panel integration
|
||||
|
|
@ -19,26 +17,26 @@ Rectangle {
|
|||
id: card
|
||||
anchors.fill: parent
|
||||
color: Theme.surface
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
radius: 18
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 8 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
anchors.margins: 8 * Theme.scale(screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
||||
|
||||
// CPU usage indicator with circular progress bar
|
||||
Item {
|
||||
width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen)
|
||||
width: 50 * Theme.scale(screen); height: 50 * Theme.scale(screen)
|
||||
CircularProgressBar {
|
||||
id: cpuBar
|
||||
progress: Sysinfo.cpuUsage / 100
|
||||
size: 50 * Theme.scale(Screen)
|
||||
strokeWidth: 4 * Theme.scale(Screen)
|
||||
size: 50 * Theme.scale(screen)
|
||||
strokeWidth: 4 * Theme.scale(screen)
|
||||
hasNotch: true
|
||||
notchIcon: "speed"
|
||||
notchIconSize: 14 * Theme.scale(Screen)
|
||||
notchIconSize: 14 * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
MouseArea {
|
||||
|
|
@ -60,16 +58,16 @@ Rectangle {
|
|||
|
||||
// CPU temperature indicator with circular progress bar
|
||||
Item {
|
||||
width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen)
|
||||
width: 50 * Theme.scale(screen); height: 50 * Theme.scale(screen)
|
||||
CircularProgressBar {
|
||||
id: tempBar
|
||||
progress: Sysinfo.cpuTemp / 100
|
||||
size: 50 * Theme.scale(Screen)
|
||||
strokeWidth: 4 * Theme.scale(Screen)
|
||||
size: 50 * Theme.scale(screen)
|
||||
strokeWidth: 4 * Theme.scale(screen)
|
||||
hasNotch: true
|
||||
units: "°C"
|
||||
notchIcon: "thermometer"
|
||||
notchIconSize: 14 * Theme.scale(Screen)
|
||||
notchIconSize: 14 * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
MouseArea {
|
||||
|
|
@ -91,15 +89,15 @@ Rectangle {
|
|||
|
||||
// Memory usage indicator with circular progress bar
|
||||
Item {
|
||||
width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen)
|
||||
width: 50 * Theme.scale(screen); height: 50 * Theme.scale(screen)
|
||||
CircularProgressBar {
|
||||
id: memBar
|
||||
progress: Sysinfo.memoryUsagePer / 100
|
||||
size: 50 * Theme.scale(Screen)
|
||||
strokeWidth: 4 * Theme.scale(Screen)
|
||||
size: 50 * Theme.scale(screen)
|
||||
strokeWidth: 4 * Theme.scale(screen)
|
||||
hasNotch: true
|
||||
notchIcon: "memory"
|
||||
notchIconSize: 14 * Theme.scale(Screen)
|
||||
notchIconSize: 14 * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
MouseArea {
|
||||
|
|
@ -121,15 +119,15 @@ Rectangle {
|
|||
|
||||
// Disk usage indicator with circular progress bar
|
||||
Item {
|
||||
width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen)
|
||||
width: 50 * Theme.scale(screen); height: 50 * Theme.scale(screen)
|
||||
CircularProgressBar {
|
||||
id: diskBar
|
||||
progress: Sysinfo.diskUsage / 100
|
||||
size: 50 * Theme.scale(Screen)
|
||||
strokeWidth: 4 * Theme.scale(Screen)
|
||||
size: 50 * Theme.scale(screen)
|
||||
strokeWidth: 4 * Theme.scale(screen)
|
||||
hasNotch: true
|
||||
notchIcon: "storage"
|
||||
notchIconSize: 14 * Theme.scale(Screen)
|
||||
notchIconSize: 14 * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
MouseArea {
|
||||
|
|
|
|||
|
|
@ -6,10 +6,7 @@ import "../../Helpers/Weather.js" as WeatherHelper
|
|||
|
||||
Rectangle {
|
||||
id: weatherRoot
|
||||
width: 440 * Theme.scale(Screen)
|
||||
height: 180 * Theme.scale(Screen)
|
||||
color: "transparent"
|
||||
anchors.horizontalCenterOffset: -2
|
||||
|
||||
property string city: Settings.settings.weatherCity !== undefined ? Settings.settings.weatherCity : ""
|
||||
property var weatherData: null
|
||||
|
|
@ -83,29 +80,29 @@ Rectangle {
|
|||
id: card
|
||||
anchors.fill: parent
|
||||
color: Theme.surface
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
radius: 18
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 18 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
anchors.margins: 18 * Theme.scale(screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
|
||||
|
||||
RowLayout {
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
Layout.fillWidth: true
|
||||
|
||||
|
||||
RowLayout {
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
Layout.preferredWidth: 140 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
Layout.preferredWidth: 140 * Theme.scale(screen)
|
||||
|
||||
|
||||
Text {
|
||||
id: weatherIcon
|
||||
text: isLoading ? "sync" : (weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud")
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 28 * Theme.scale(Screen)
|
||||
font.pixelSize: 28 * Theme.scale(screen)
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
color: isLoading ? Theme.accentPrimary : Theme.accentPrimary
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
|
@ -121,28 +118,28 @@ Rectangle {
|
|||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 2 * Theme.scale(Screen)
|
||||
spacing: 2 * Theme.scale(screen)
|
||||
RowLayout {
|
||||
spacing: 4 * Theme.scale(Screen)
|
||||
spacing: 4 * Theme.scale(screen)
|
||||
Text {
|
||||
text: city
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 14 * Theme.scale(Screen)
|
||||
font.pixelSize: 14 * Theme.scale(screen)
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
Text {
|
||||
text: weatherData && weatherData.timezone_abbreviation ? `(${weatherData.timezone_abbreviation})` : ""
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 10 * Theme.scale(Screen)
|
||||
font.pixelSize: 10 * Theme.scale(screen)
|
||||
color: Theme.textSecondary
|
||||
leftPadding: 2 * Theme.scale(Screen)
|
||||
leftPadding: 2 * Theme.scale(screen)
|
||||
}
|
||||
}
|
||||
Text {
|
||||
text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9/5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C")
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 24 * Theme.scale(Screen)
|
||||
font.pixelSize: 24 * Theme.scale(screen)
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
|
@ -157,16 +154,16 @@ Rectangle {
|
|||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 1 * Theme.scale(Screen)
|
||||
height: 1 * Theme.scale(screen)
|
||||
color: Qt.rgba(Theme.textSecondary.g, Theme.textSecondary.g, Theme.textSecondary.b, 0.12)
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 2 * Theme.scale(Screen)
|
||||
Layout.bottomMargin: 2 * Theme.scale(Screen)
|
||||
Layout.topMargin: 2 * Theme.scale(screen)
|
||||
Layout.bottomMargin: 2 * Theme.scale(screen)
|
||||
}
|
||||
|
||||
|
||||
RowLayout {
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
visible: weatherData && weatherData.daily && weatherData.daily.time
|
||||
|
|
@ -174,13 +171,13 @@ Rectangle {
|
|||
Repeater {
|
||||
model: weatherData && weatherData.daily && weatherData.daily.time ? 5 : 0
|
||||
delegate: ColumnLayout {
|
||||
spacing: 2 * Theme.scale(Screen)
|
||||
spacing: 2 * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Text {
|
||||
|
||||
text: Qt.formatDateTime(new Date(weatherData.daily.time[index]), "ddd")
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 12 * Theme.scale(Screen)
|
||||
font.pixelSize: 12 * Theme.scale(screen)
|
||||
color: Theme.textSecondary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
|
@ -189,7 +186,7 @@ Rectangle {
|
|||
|
||||
text: materialSymbolForCode(weatherData.daily.weathercode[index])
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 22 * Theme.scale(Screen)
|
||||
font.pixelSize: 22 * Theme.scale(screen)
|
||||
color: Theme.accentPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
|
@ -198,7 +195,7 @@ Rectangle {
|
|||
|
||||
text: weatherData && weatherData.daily ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.daily.temperature_2m_max[index] * 9/5 + 32)}° / ${Math.round(weatherData.daily.temperature_2m_min[index] * 9/5 + 32)}°` : `${Math.round(weatherData.daily.temperature_2m_max[index])}° / ${Math.round(weatherData.daily.temperature_2m_min[index])}°`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--° / --°" : "--° / --°")
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 12 * Theme.scale(Screen)
|
||||
font.pixelSize: 12 * Theme.scale(screen)
|
||||
color: Theme.textPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
|
@ -213,7 +210,7 @@ Rectangle {
|
|||
color: Theme.error
|
||||
visible: errorString !== ""
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 10 * Theme.scale(Screen)
|
||||
font.pixelSize: 10 * Theme.scale(screen)
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue