Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-05 21:15:38 -05:00
Code Packages Releases Activity

Re-style control center & sliders to be more android 16-y

Browse Source
This commit is contained in:
bbedward
2025-09-21 11:39:31 -04:00
parent 64c8e79bf2
commit babcc66765
20 changed files with 482 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Common/Theme.qml
View File

@@ -140,9 +140,17 @@ Singleton {
property color background: currentThemeData.background
property color backgroundText: currentThemeData.backgroundText
property color outline: currentThemeData.outline
property color outlineVariant: currentThemeData.outlineVariant || Qt.rgba(outline.r, outline.g, outline.b, 0.6)
property color surfaceContainer: currentThemeData.surfaceContainer
property color surfaceContainerHigh: currentThemeData.surfaceContainerHigh
property color onSurface: surfaceText
property color onSurfaceVariant: surfaceVariantText
property color onPrimary: primaryText
property color onSurface_12: Qt.rgba(onSurface.r, onSurface.g, onSurface.b, 0.12)
property color onSurface_38: Qt.rgba(onSurface.r, onSurface.g, onSurface.b, 0.38)
property color onSurfaceVariant_30: Qt.rgba(onSurfaceVariant.r, onSurfaceVariant.g, onSurfaceVariant.b, 0.30)
property color error: currentThemeData.error || "#F2B8B5"
property color warning: currentThemeData.warning || "#FF9800"
property color info: currentThemeData.info || "#2196F3"

133
Modules/ControlCenter/ControlCenterPopout.qml
View File

@@ -23,6 +23,8 @@ DankPopout {
property string triggerSection: "right"
property var triggerScreen: null
readonly property color _containerBg: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.60)
function setTriggerPosition(x, y, width, section, screen) {
triggerX = x
triggerY = y
@@ -240,20 +242,81 @@ DankPopout {
anchors.rightMargin: Theme.spacingL
spacing: Theme.spacingS
Battery {
widgetHeight: 40
popupTarget: controlCenterBatteryPopout
parentScreen: root.triggerScreen
section: "right"
barHeight: 123
batteryPopupVisible: controlCenterBatteryPopout.shouldBeVisible
Rectangle {
width: batteryContentRow.implicitWidth + Theme.spacingS * 2
height: 40
radius: 20
color: batteryMouseArea.containsMouse ? Qt.rgba(
Theme.primary.r,
Theme.primary.g,
Theme.primary.b,
0.12) : Qt.rgba(
Theme.surfaceVariant.r,
Theme.surfaceVariant.g,
Theme.surfaceVariant.b,
0.5)
visible: BatteryService.batteryAvailable
onToggleBatteryPopup: {
if (controlCenterBatteryPopout.shouldBeVisible) {
controlCenterBatteryPopout.close()
} else {
controlCenterBatteryPopout.open()
Row {
id: batteryContentRow
anchors.centerIn: parent
spacing: Theme.spacingXS
DankIcon {
name: Theme.getBatteryIcon(BatteryService.batteryLevel, BatteryService.isCharging, BatteryService.batteryAvailable)
size: Theme.iconSize - 2
color: {
if (batteryMouseArea.containsMouse) {
return Theme.primary
}
if (BatteryService.isLowBattery && !BatteryService.isCharging) {
return Theme.error
}
if (BatteryService.isCharging || BatteryService.isPluggedIn) {
return Theme.primary
}
return Theme.surfaceText
}
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
text: `${BatteryService.batteryLevel}%`
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
color: {
if (batteryMouseArea.containsMouse) {
return Theme.primary
}
if (BatteryService.isLowBattery && !BatteryService.isCharging) {
return Theme.error
}
if (BatteryService.isCharging) {
return Theme.primary
}
return Theme.surfaceText
}
anchors.verticalCenter: parent.verticalCenter
}
}
MouseArea {
id: batteryMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
const globalPos = mapToGlobal(0, 0)
const currentScreen = root.triggerScreen || Screen
const screenX = currentScreen.x || 0
const relativeX = globalPos.x - screenX
controlCenterBatteryPopout.setTriggerPosition(relativeX, 123 + Theme.spacingXS, width, "right", currentScreen)
if (controlCenterBatteryPopout.shouldBeVisible) {
controlCenterBatteryPopout.close()
} else {
controlCenterBatteryPopout.open()
}
}
}
}
@@ -548,7 +611,8 @@ DankPopout {
spacing: Theme.spacingM
AudioSliderRow {
width: SettingsData.hideBrightnessSlider ? parent.width - Theme.spacingM : (parent.width - Theme.spacingM) / 2
width: SettingsData.hideBrightnessSlider ? parent.width - Theme.spacingS : (parent.width - Theme.spacingM) / 2
property color sliderTrackColor: root._containerBg
}
Item {
@@ -572,45 +636,12 @@ DankPopout {
NetworkPill {
width: (parent.width - Theme.spacingM) / 2
expanded: root.expandedSection === "network"
onClicked: {
if (NetworkService.wifiToggling) {
return
}
if (NetworkService.networkStatus === "ethernet") {
if (NetworkService.ethernetConnected && !NetworkService.wifiEnabled) {
NetworkService.toggleWifiRadio()
return
}
root.toggleSection("network")
return
}
if (NetworkService.networkStatus === "wifi") {
if (NetworkService.ethernetConnected) {
NetworkService.toggleWifiRadio()
return
}
NetworkService.disconnectWifi()
return
}
if (!NetworkService.wifiEnabled) {
NetworkService.toggleWifiRadio()
return
}
if (NetworkService.wifiEnabled && NetworkService.networkStatus === "disconnected") {
root.toggleSection("network")
}
}
onExpandClicked: root.toggleSection("network")
}
BluetoothPill {
width: (parent.width - Theme.spacingM) / 2
expanded: root.expandedSection === "bluetooth"
onClicked: {
if (!BluetoothService.available) return
if (BluetoothService.adapter)
BluetoothService.adapter.enabled = !BluetoothService.adapter.enabled
}
onExpandClicked: {
if (!BluetoothService.available) return
root.toggleSection("bluetooth")
@@ -650,22 +681,12 @@ DankPopout {
AudioOutputPill {
width: (parent.width - Theme.spacingM) / 2
expanded: root.expandedSection === "audio_output"
onClicked: {
if (AudioService.sink) {
AudioService.sink.audio.muted = !AudioService.sink.audio.muted
}
}
onExpandClicked: root.toggleSection("audio_output")
}
AudioInputPill {
width: (parent.width - Theme.spacingM) / 2
expanded: root.expandedSection === "audio_input"
onClicked: {
if (AudioService.source) {
AudioService.source.audio.muted = !AudioService.source.audio.muted
}
}
onExpandClicked: root.toggleSection("audio_input")
}
}

1
Modules/ControlCenter/Details/AudioInputDetail.qml
View File

@@ -59,6 +59,7 @@ Rectangle {
showValue: true
valueOverride: actualVolumePercent
visible: AudioService.source && AudioService.source.audio
thumbOutlineColor: Theme.surfaceContainer
onSliderValueChanged: function(newValue) {
if (AudioService.source && AudioService.source.audio) {

12
Modules/ControlCenter/Widgets/AudioInputPill.qml
View File

@@ -7,17 +7,17 @@ import qs.Services
import qs.Widgets
import qs.Modules.ControlCenter.Widgets
BasePill {
CompoundPill {
id: root
property var defaultSource: AudioService.source
iconName: {
if (!defaultSource) return "mic_off"
let volume = defaultSource.audio.volume
let muted = defaultSource.audio.muted
if (muted || volume === 0.0) return "mic_off"
return "mic"
}
@@ -41,6 +41,12 @@ BasePill {
return Math.round(defaultSource.audio.volume * 100) + "%"
}
onToggled: {
if (defaultSource && defaultSource.audio) {
defaultSource.audio.muted = !defaultSource.audio.muted
}
}
onWheelEvent: function (wheelEvent) {
if (!defaultSource || !defaultSource.audio) return
let delta = wheelEvent.angleDelta.y

12
Modules/ControlCenter/Widgets/AudioOutputPill.qml
View File

@@ -7,17 +7,17 @@ import qs.Services
import qs.Widgets
import qs.Modules.ControlCenter.Widgets
BasePill {
CompoundPill {
id: root
property var defaultSink: AudioService.sink
iconName: {
if (!defaultSink) return "volume_off"
let volume = defaultSink.audio.volume
let muted = defaultSink.audio.muted
if (muted || volume === 0.0) return "volume_off"
if (volume <= 0.33) return "volume_down"
if (volume <= 0.66) return "volume_up"
@@ -43,6 +43,12 @@ BasePill {
return Math.round(defaultSink.audio.volume * 100) + "%"
}
onToggled: {
if (defaultSink && defaultSink.audio) {
defaultSink.audio.muted = !defaultSink.audio.muted
}
}
onWheelEvent: function (wheelEvent) {
if (!defaultSink || !defaultSink.audio) return
let delta = wheelEvent.angleDelta.y

50
Modules/ControlCenter/Widgets/AudioSlider.qml
View File

@@ -1,50 +0,0 @@
import QtQuick
import QtQuick.Controls
import Quickshell
import Quickshell.Services.Pipewire
import qs.Common
import qs.Services
import qs.Widgets
import qs.Modules.ControlCenter.Widgets
SimpleSlider {
id: root
property var defaultSink: AudioService.sink
iconName: {
if (!defaultSink) return "volume_off"
let volume = defaultSink.audio.volume
let muted = defaultSink.audio.muted
if (muted || volume === 0.0) return "volume_off"
if (volume <= 0.33) return "volume_down"
if (volume <= 0.66) return "volume_up"
return "volume_up"
}
iconColor: defaultSink && !defaultSink.audio.muted && defaultSink.audio.volume > 0 ? Theme.primary : Theme.surfaceText
enabled: defaultSink !== null
allowIconClick: defaultSink !== null
value: defaultSink ? defaultSink.audio.volume : 0.0
maximumValue: 1.0
minimumValue: 0.0
onSliderValueChanged: function(newValue) {
if (defaultSink) {
defaultSink.audio.volume = newValue
if (newValue > 0 && defaultSink.audio.muted) {
defaultSink.audio.muted = false
}
}
}
onIconClicked: function() {
if (defaultSink) {
defaultSink.audio.muted = !defaultSink.audio.muted
}
}
}

15
Modules/ControlCenter/Widgets/AudioSliderRow.qml
View File

@@ -10,17 +10,18 @@ Row {
id: root
property var defaultSink: AudioService.sink
property color sliderTrackColor: "transparent"
height: 40
spacing: Theme.spacingS
spacing: 0
Rectangle {
width: Theme.iconSize + Theme.spacingS * 2
height: Theme.iconSize + Theme.spacingS * 2
anchors.verticalCenter: parent.verticalCenter
radius: (Theme.iconSize + Theme.spacingS * 2) / 2 // Make it circular
radius: (Theme.iconSize + Theme.spacingS * 2) / 2
color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
Behavior on color {
ColorAnimation { duration: Theme.shortDuration }
}
@@ -42,10 +43,10 @@ Row {
anchors.centerIn: parent
name: {
if (!defaultSink) return "volume_off"
let volume = defaultSink.audio.volume
let muted = defaultSink.audio.muted
if (muted || volume === 0.0) return "volume_off"
if (volume <= 0.33) return "volume_down"
if (volume <= 0.66) return "volume_up"
@@ -60,7 +61,7 @@ Row {
readonly property real actualVolumePercent: defaultSink ? Math.round(defaultSink.audio.volume * 100) : 0
anchors.verticalCenter: parent.verticalCenter
width: parent.width - (Theme.iconSize + Theme.spacingS * 2) - Theme.spacingM
width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
enabled: defaultSink !== null
minimum: 0
maximum: 100
@@ -68,6 +69,8 @@ Row {
showValue: true
unit: "%"
valueOverride: actualVolumePercent
thumbOutlineColor: Theme.surfaceContainer
trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.60)
onSliderValueChanged: function(newValue) {
if (defaultSink) {
defaultSink.audio.volume = newValue / 100.0

152
Modules/ControlCenter/Widgets/BasePill.qml
View File

@@ -1,152 +0,0 @@
import QtQuick
import QtQuick.Controls
import Quickshell
import qs.Common
import qs.Widgets
Rectangle {
id: root
property string iconName: ""
property color iconColor: Theme.surfaceText
property string primaryText: ""
property string secondaryText: ""
property bool expanded: false
property bool isActive: false
property bool showExpandArea: true
signal clicked()
signal expandClicked()
signal wheelEvent(var wheelEvent)
width: parent ? parent.width : 200
height: 60
radius: Theme.cornerRadius
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: 1
Rectangle {
id: mainArea
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width - (root.showExpandArea ? expandArea.width : 0)
topLeftRadius: Theme.cornerRadius
bottomLeftRadius: Theme.cornerRadius
topRightRadius: root.showExpandArea ? 0 : Theme.cornerRadius
bottomRightRadius: root.showExpandArea ? 0 : Theme.cornerRadius
color: showExpandArea && mainAreaMouse.containsMouse ?
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) :
"transparent"
Behavior on color {
ColorAnimation { duration: Theme.shortDuration }
}
Row {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingS
spacing: Theme.spacingS
DankIcon {
name: root.iconName
size: Theme.iconSize
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
}
Column {
anchors.verticalCenter: parent.verticalCenter
width: parent.width - Theme.iconSize - Theme.spacingS
spacing: 2
StyledText {
width: parent.width
text: root.primaryText
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
StyledText {
width: parent.width
text: root.secondaryText
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
visible: text.length > 0
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
}
}
MouseArea {
id: mainAreaMouse
visible: root.showExpandArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: root.clicked()
onWheel: function (wheelEvent) {
root.wheelEvent(wheelEvent)
}
}
}
Rectangle {
id: expandArea
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
width: Theme.iconSize + Theme.spacingM * 2
visible: root.showExpandArea
topLeftRadius: 0
bottomLeftRadius: 0
topRightRadius: Theme.cornerRadius
bottomRightRadius: Theme.cornerRadius
color: expandAreaMouse.containsMouse ?
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) :
"transparent"
Behavior on color {
ColorAnimation { duration: Theme.shortDuration }
}
Rectangle {
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 1
color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
}
DankIcon {
id: expandIcon
anchors.centerIn: parent
name: expanded ? "expand_less" : "expand_more"
size: Theme.iconSize - 2
color: Theme.surfaceVariantText
}
MouseArea {
id: expandAreaMouse
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: root.expandClicked()
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}

10
Modules/ControlCenter/Widgets/BluetoothPill.qml
View File

@@ -6,14 +6,14 @@ import qs.Services
import qs.Widgets
import qs.Modules.ControlCenter.Widgets
BasePill {
CompoundPill {
id: root
property var primaryDevice: {
if (!BluetoothService.adapter || !BluetoothService.adapter.devices) {
return null
}
let devices = [...BluetoothService.adapter.devices.values.filter(dev => dev && (dev.paired || dev.trusted))]
for (let device of devices) {
if (device && device.connected) {
@@ -64,4 +64,10 @@ BasePill {
}
return "No devices"
}
onToggled: {
if (BluetoothService.available && BluetoothService.adapter) {
BluetoothService.adapter.enabled = !BluetoothService.adapter.enabled
}
}
}

34
Modules/ControlCenter/Widgets/BrightnessSlider.qml
View File

@@ -1,34 +0,0 @@
import QtQuick
import QtQuick.Controls
import Quickshell
import qs.Common
import qs.Services
import qs.Widgets
import qs.Modules.ControlCenter.Widgets
SimpleSlider {
id: root
iconName: {
if (!DisplayService.brightnessAvailable) return "brightness_low"
let brightness = DisplayService.brightnessLevel
if (brightness <= 33) return "brightness_low"
if (brightness <= 66) return "brightness_medium"
return "brightness_high"
}
iconColor: DisplayService.brightnessAvailable && DisplayService.brightnessLevel > 0 ? Theme.primary : Theme.surfaceText
enabled: DisplayService.brightnessAvailable
value: DisplayService.brightnessLevel
maximumValue: 100.0
minimumValue: 0.0
onSliderValueChanged: function(newValue) {
if (DisplayService.brightnessAvailable) {
DisplayService.brightnessLevel = newValue
}
}
}

36
Modules/ControlCenter/Widgets/BrightnessSliderRow.qml
View File

@@ -9,7 +9,7 @@ Row {
id: root
height: 40
spacing: Theme.spacingS
spacing: 0
Rectangle {
width: Theme.iconSize + Theme.spacingS * 2
@@ -17,9 +17,9 @@ Row {
anchors.verticalCenter: parent.verticalCenter
radius: (Theme.iconSize + Theme.spacingS * 2) / 2
color: iconArea.containsMouse
? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
: "transparent"
Behavior on color {
ColorAnimation { duration: Theme.shortDuration }
}
@@ -29,7 +29,7 @@ Row {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: function(event) {
if (DisplayService.devices.length > 1) {
if (deviceMenu.visible) {
@@ -40,26 +40,26 @@ Row {
event.accepted = true
}
}
}
DankIcon {
anchors.centerIn: parent
name: {
if (!DisplayService.brightnessAvailable) return "brightness_low"
let brightness = DisplayService.brightnessLevel
if (brightness <= 33) return "brightness_low"
if (brightness <= 66) return "brightness_medium"
return "brightness_high"
DankIcon {
anchors.centerIn: parent
name: {
if (!DisplayService.brightnessAvailable) return "brightness_low"
let brightness = DisplayService.brightnessLevel
if (brightness <= 33) return "brightness_low"
if (brightness <= 66) return "brightness_medium"
return "brightness_high"
}
size: Theme.iconSize
color: DisplayService.brightnessAvailable && DisplayService.brightnessLevel > 0 ? Theme.primary : Theme.surfaceText
}
size: Theme.iconSize
color: DisplayService.brightnessAvailable && DisplayService.brightnessLevel > 0 ? Theme.primary : Theme.surfaceText
}
}
DankSlider {
anchors.verticalCenter: parent.verticalCenter
width: parent.width - (Theme.iconSize + Theme.spacingS * 2) - Theme.spacingM
width: parent.width - (Theme.iconSize + Theme.spacingS * 2)
enabled: DisplayService.brightnessAvailable
minimum: 1
maximum: 100
@@ -79,6 +79,8 @@ Row {
DisplayService.setBrightness(newValue)
}
}
thumbOutlineColor: Theme.surfaceContainer
trackColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.60)
}
Menu {

165
Modules/ControlCenter/Widgets/CompoundPill.qml Normal file
View File

@@ -0,0 +1,165 @@
import QtQuick
import QtQuick.Controls
import Quickshell
import qs.Common
import qs.Widgets
Rectangle {
id: root
property string iconName: ""
property color iconColor: Theme.surfaceText
property string primaryText: ""
property string secondaryText: ""
property bool expanded: false
property bool isActive: false
property bool showExpandArea: true
signal toggled()
signal expandClicked()
signal wheelEvent(var wheelEvent)
width: parent ? parent.width : 220
height: 60
radius: Theme.cornerRadius
function hoverTint(base) {
const factor = 1.2
return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
}
readonly property color _containerBg:
Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b,
Theme.getContentBackgroundAlpha() * 0.60)
color: _containerBg
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.10)
border.width: 1
layer.enabled: true
layer.samples: 8
readonly property color _labelPrimary: Theme.surfaceText
readonly property color _labelSecondary: Theme.surfaceVariantText
readonly property color _tileBgActive: Theme.primary
readonly property color _tileBgInactive:
Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, 0.85)
readonly property color _tileRingActive:
Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
readonly property color _tileRingInactive:
Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.18)
readonly property color _tileIconActive: Theme.primaryContainer
readonly property color _tileIconInactive: Theme.primary
property int _padH: Theme.spacingS
property int _tileSize: 48
property int _tileRadius: 14
Rectangle {
id: rightHoverOverlay
anchors.fill: parent
radius: root.radius
z: 0
visible: false
color: hoverTint(_containerBg)
opacity: 0.08
Behavior on opacity { NumberAnimation { duration: Theme.shortDuration } }
}
Row {
id: row
anchors.fill: parent
anchors.leftMargin: _padH
anchors.rightMargin: Theme.spacingM
spacing: Theme.spacingM
Rectangle {
id: iconTile
z: 1
width: _tileSize
height: _tileSize
anchors.verticalCenter: parent.verticalCenter
radius: _tileRadius
color: isActive ? _tileBgActive : _tileBgInactive
border.color: isActive ? _tileRingActive : "transparent"
border.width: isActive ? 1 : 0
Rectangle {
anchors.fill: parent
radius: _tileRadius
color: hoverTint(iconTile.color)
opacity: tileMouse.pressed ? 0.3 : (tileMouse.containsMouse ? 0.2 : 0.0)
visible: opacity > 0
Behavior on opacity { NumberAnimation { duration: Theme.shortDuration } }
}
DankIcon {
anchors.centerIn: parent
name: iconName
size: Theme.iconSize
color: isActive ? _tileIconActive : _tileIconInactive
}
MouseArea {
id: tileMouse
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: root.toggled()
}
}
Item {
id: body
width: row.width - iconTile.width - row.spacing
height: row.height
Column {
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
spacing: 2
StyledText {
width: parent.width
text: root.primaryText
color: _labelPrimary
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
StyledText {
width: parent.width
text: root.secondaryText
color: _labelSecondary
font.pixelSize: Theme.fontSizeSmall
visible: text.length > 0
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
}
MouseArea {
id: bodyMouse
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onEntered: { rightHoverOverlay.visible = true; rightHoverOverlay.opacity = 0.08 }
onExited: { rightHoverOverlay.opacity = 0.0; rightHoverOverlay.visible = false }
onPressed: rightHoverOverlay.opacity = 0.16
onReleased: rightHoverOverlay.opacity = containsMouse ? 0.08 : 0.0
onClicked: root.expandClicked()
onWheel: function (ev) {
root.wheelEvent(ev)
}
}
}
}
focus: true
Keys.onPressed: function (ev) {
if (ev.key === Qt.Key_Space || ev.key === Qt.Key_Return) { root.toggled(); ev.accepted = true }
else if (ev.key === Qt.Key_Right) { root.expandClicked(); ev.accepted = true }
}
}

12
Modules/ControlCenter/Widgets/NetworkPill.qml
View File

@@ -6,7 +6,7 @@ import qs.Services
import qs.Widgets
import qs.Modules.ControlCenter.Widgets
BasePill {
CompoundPill {
id: root
isActive: {
@@ -21,7 +21,7 @@ BasePill {
}
return NetworkService.wifiEnabled
}
iconName: {
if (NetworkService.wifiToggling) {
return "sync"
@@ -67,6 +67,12 @@ BasePill {
if (NetworkService.wifiEnabled) {
return "Select network"
}
return "Tap to enable"
return ""
}
onToggled: {
if (NetworkService.networkStatus !== "ethernet" && !NetworkService.wifiToggling) {
NetworkService.toggleWifiRadio()
}
}
}

50
Modules/ControlCenter/Widgets/SimpleSlider.qml
View File

@@ -1,50 +0,0 @@
import QtQuick
import QtQuick.Controls
import Quickshell
import qs.Common
import qs.Widgets
Row {
id: root
property string iconName: ""
property color iconColor: Theme.surfaceText
property real value: 0.0
property real maximumValue: 1.0
property real minimumValue: 0.0
property bool enabled: true
property bool allowIconClick: false
signal sliderValueChanged(real value)
signal iconClicked()
height: 60
spacing: Theme.spacingM
DankIcon {
name: root.iconName
size: Theme.iconSize
color: root.iconColor
anchors.verticalCenter: parent.verticalCenter
MouseArea {
anchors.fill: parent
visible: root.allowIconClick
cursorShape: Qt.PointingHandCursor
onClicked: root.iconClicked()
}
}
DankSlider {
anchors.verticalCenter: parent.verticalCenter
width: {
if (parent.width <= 0) return 80
return Math.max(80, Math.min(400, parent.width - Theme.iconSize - Theme.spacingM))
}
enabled: root.enabled
minimum: Math.round(root.minimumValue * 100)
maximum: Math.round(root.maximumValue * 100)
value: Math.round(root.value * 100)
onSliderValueChanged: function(newValue) { root.sliderValueChanged(newValue / 100.0) }
}
}

76
Modules/ControlCenter/Widgets/ToggleButton.qml
View File

@@ -23,25 +23,31 @@ Rectangle {
border.width: 1
opacity: enabled ? 1.0 : 0.6
function hoverTint(base) {
const factor = 1.2
return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
}
readonly property color _containerBg:
Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b,
Theme.getContentBackgroundAlpha() * 0.60)
Rectangle {
anchors.fill: parent
radius: Theme.cornerRadius
color: mouseArea.containsMouse ?
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) :
"transparent"
Behavior on color {
ColorAnimation { duration: Theme.shortDuration }
color: mouseArea.containsMouse ? hoverTint(_containerBg) : "transparent"
opacity: mouseArea.containsMouse ? 0.08 : 0.0
Behavior on opacity {
NumberAnimation { duration: Theme.shortDuration }
}
}
Row {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.leftMargin: Theme.spacingM
anchors.fill: parent
anchors.leftMargin: Theme.spacingL + 2
anchors.rightMargin: Theme.spacingM
spacing: Theme.spacingS
spacing: Theme.spacingM
DankIcon {
name: root.iconName
@@ -50,29 +56,35 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
}
Column {
anchors.verticalCenter: parent.verticalCenter
width: parent.width - Theme.iconSize - Theme.spacingS
spacing: 2
Item {
width: parent.width - Theme.iconSize - parent.spacing
height: parent.height
StyledText {
width: parent.width
text: root.text
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
Column {
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
spacing: 2
StyledText {
width: parent.width
text: root.secondaryText
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
visible: text.length > 0
elide: Text.ElideRight
wrapMode: Text.NoWrap
StyledText {
width: parent.width
text: root.text
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
StyledText {
width: parent.width
text: root.secondaryText
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
visible: text.length > 0
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
}
}
}

1
Modules/OSD/BrightnessOSD.qml
View File

@@ -78,6 +78,7 @@ DankOSD {
enabled: DisplayService.brightnessAvailable
showValue: true
unit: "%"
thumbOutlineColor: Theme.surfaceContainer
Component.onCompleted: {
if (DisplayService.brightnessAvailable) {

1
Modules/OSD/VolumeOSD.qml
View File

@@ -80,6 +80,7 @@ DankOSD {
enabled: AudioService.sink && AudioService.sink.audio
showValue: true
unit: "%"
thumbOutlineColor: Theme.surfaceContainer
valueOverride: displayPercent
Component.onCompleted: {

4
Modules/Settings/TopBarTab.qml
View File

@@ -757,6 +757,7 @@ Item {
unit: ""
showValue: true
wheelEnabled: false
thumbOutlineColor: Theme.surfaceContainer
onSliderValueChanged: newValue => {
SettingsData.setTopBarSpacing(
newValue)
@@ -784,6 +785,7 @@ Item {
unit: ""
showValue: true
wheelEnabled: false
thumbOutlineColor: Theme.surfaceContainer
onSliderValueChanged: newValue => {
SettingsData.setTopBarBottomGap(
newValue)
@@ -811,6 +813,7 @@ Item {
unit: ""
showValue: true
wheelEnabled: false
thumbOutlineColor: Theme.surfaceContainer
onSliderValueChanged: newValue => {
SettingsData.setTopBarInnerPadding(
newValue)
@@ -838,6 +841,7 @@ Item {
unit: ""
showValue: true
wheelEnabled: false
thumbOutlineColor: Theme.surfaceContainer
onSliderValueChanged: newValue => {
SettingsData.setCornerRadius(
newValue)

7
Modules/TopBar/ControlCenterButton.qml
View File

@@ -63,13 +63,6 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
visible: root.showNetworkIcon
RotationAnimation on rotation {
running: NetworkService.wifiToggling
loops: Animation.Infinite
from: 0
to: 360
duration: 1000
}
}

172
Widgets/DankSlider.qml
View File

@@ -1,4 +1,5 @@
import QtQuick
import QtQuick.Effects
import qs.Common
import qs.Widgets
@@ -18,10 +19,14 @@ Item {
property real valueOverride: -1
readonly property bool containsMouse: sliderMouseArea.containsMouse
property color thumbOutlineColor: Theme.surfaceContainer
property color trackColor: enabled ? Theme.outline : Theme.outline
function withAlpha(c, a) { return Qt.rgba(c.r, c.g, c.b, a) }
signal sliderValueChanged(int newValue)
signal sliderDragFinished(int finalValue)
height: 40
height: 48
function updateValueFromPosition(x) {
let ratio = Math.max(0, Math.min(1, (x - sliderHandle.width / 2) / (sliderTrack.width - sliderHandle.width)))
@@ -40,7 +45,7 @@ Item {
DankIcon {
name: slider.leftIcon
size: Theme.iconSize
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
color: slider.enabled ? Theme.onSurface : Theme.onSurface_38
anchors.verticalCenter: parent.verticalCenter
visible: slider.leftIcon.length > 0
}
@@ -52,85 +57,110 @@ Item {
property int rightIconWidth: slider.rightIcon.length > 0 ? Theme.iconSize : 0
width: parent.width - (leftIconWidth + rightIconWidth + (slider.leftIcon.length > 0 ? Theme.spacingM : 0) + (slider.rightIcon.length > 0 ? Theme.spacingM : 0))
height: 6
radius: 3
color: slider.enabled ? Theme.surfaceVariantAlpha : Theme.surfaceLight
height: 12
radius: height / 2
color: slider.trackColor
anchors.verticalCenter: parent.verticalCenter
clip: false
StyledRect {
id: sliderFill
width: (parent.width - sliderHandle.width) * ((slider.value - slider.minimum) / (slider.maximum - slider.minimum)) + sliderHandle.width
height: parent.height
radius: parent.radius
color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
Behavior on width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
width: {
const ratio = (slider.value - slider.minimum) / (slider.maximum - slider.minimum)
const travel = sliderTrack.width - sliderHandle.width
const center = (travel * ratio) + sliderHandle.width / 2
return Math.max(0, Math.min(sliderTrack.width, center))
}
color: slider.enabled ? Theme.primary : withAlpha(Theme.onSurface, 0.12)
}
StyledRect {
id: sliderHandle
width: 18
height: 18
radius: 9
color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
border.color: slider.enabled ? Qt.lighter(Theme.primary, 1.3) : Qt.lighter(Theme.surfaceVariantText, 1.3)
border.width: 2
x: sliderFill.width - width
property bool active: sliderMouseArea.containsMouse || sliderMouseArea.pressed || slider.isDragging
width: 8
height: 24
radius: 4
x: {
const ratio = (slider.value - slider.minimum) / (slider.maximum - slider.minimum)
const travel = sliderTrack.width - width
return Math.max(0, Math.min(travel, travel * ratio))
}
anchors.verticalCenter: parent.verticalCenter
scale: sliderMouseArea.containsMouse || sliderMouseArea.pressed ? 1.2 : 1
color: slider.enabled ? Theme.primary : withAlpha(Theme.onSurface, 0.12)
border.width: 3
border.color: slider.thumbOutlineColor
StyledRect {
anchors.fill: parent
radius: parent.radius
color: Theme.onPrimary
opacity: slider.enabled ? (sliderMouseArea.pressed ? 0.16 : (sliderMouseArea.containsMouse ? 0.08 : 0)) : 0
visible: opacity > 0
}
StyledRect {
anchors.centerIn: parent
width: parent.width + 4
height: parent.height + 4
width: parent.width + 20
height: parent.height + 20
radius: width / 2
color: "transparent"
border.color: Theme.primarySelected
border.width: 2
visible: sliderMouseArea.containsMouse && slider.enabled
border.color: Theme.primary
opacity: slider.enabled && slider.focus ? 0.3 : 0
visible: opacity > 0
}
StyledRect {
id: valueTooltip
Rectangle {
id: ripple
anchors.centerIn: parent
width: 0
height: 0
radius: width / 2
color: Theme.onPrimary
opacity: 0
width: tooltipText.contentWidth + Theme.spacingS * 2
height: tooltipText.contentHeight + Theme.spacingXS * 2
radius: Theme.cornerRadius
color: Theme.surfaceContainer
border.color: Theme.outline
border.width: 1
anchors.bottom: parent.top
anchors.bottomMargin: Theme.spacingS
anchors.horizontalCenter: parent.horizontalCenter
visible: (sliderMouseArea.containsMouse && slider.showValue) || (slider.isDragging && slider.showValue)
opacity: visible ? 1 : 0
StyledText {
id: tooltipText
text: (slider.valueOverride >= 0 ? Math.round(slider.valueOverride) : slider.value) + slider.unit
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
anchors.centerIn: parent
font.hintingPreference: Font.PreferFullHinting
function start() {
opacity = 0.16
width = 0
height = 0
rippleAnimation.start()
}
Behavior on opacity {
SequentialAnimation {
id: rippleAnimation
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
target: ripple
properties: "width,height"
to: 28
duration: 180
}
NumberAnimation {
target: ripple
property: "opacity"
to: 0
duration: 150
}
}
}
TapHandler {
acceptedButtons: Qt.LeftButton
onPressedChanged: {
if (pressed && slider.enabled) {
ripple.start()
}
}
}
scale: active ? 1.05 : 1.0
Behavior on scale {
NumberAnimation {
duration: Theme.shortDuration
@@ -162,7 +192,7 @@ Item {
wheelEvent.accepted = false
return
}
let step = Math.max(1, (maximum - minimum) / 20)
let step = Math.max(0.5, (maximum - minimum) / 100)
let newValue = wheelEvent.angleDelta.y > 0 ? Math.min(maximum, value + step) : Math.max(minimum, value - step)
newValue = Math.round(newValue)
if (newValue !== value) {
@@ -197,12 +227,46 @@ Item {
}
}
}
StyledRect {
id: valueTooltip
width: tooltipText.contentWidth + Theme.spacingS * 2
height: tooltipText.contentHeight + Theme.spacingXS * 2
radius: Theme.cornerRadius
color: Theme.surfaceContainer
border.color: Theme.outline
border.width: 1
anchors.bottom: parent.top
anchors.bottomMargin: Theme.spacingM
x: Math.max(0, Math.min(parent.width - width, sliderHandle.x + sliderHandle.width/2 - width/2))
visible: (sliderMouseArea.containsMouse && slider.showValue) || (slider.isDragging && slider.showValue)
opacity: visible ? 1 : 0
StyledText {
id: tooltipText
text: (slider.valueOverride >= 0 ? Math.round(slider.valueOverride) : slider.value) + slider.unit
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
anchors.centerIn: parent
font.hintingPreference: Font.PreferFullHinting
}
Behavior on opacity {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
DankIcon {
name: slider.rightIcon
size: Theme.iconSize
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
color: slider.enabled ? Theme.onSurface : Theme.onSurface_38
anchors.verticalCenter: parent.verticalCenter
visible: slider.rightIcon.length > 0
}