mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-25 05:52:50 -05:00
redesign control center
This commit is contained in:
bbedward
57
Modules/ControlCenter/Widgets/AudioInputPill.qml
Normal file
57
Modules/ControlCenter/Widgets/AudioInputPill.qml
Normal file
@@ -0,0 +1,57 @@
|
||||
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
|
||||
|
||||
BasePill {
|
||||
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"
|
||||
}
|
||||
|
||||
isActive: defaultSource && !defaultSource.audio.muted
|
||||
|
||||
primaryText: {
|
||||
if (!defaultSource) {
|
||||
return "No input device"
|
||||
}
|
||||
return defaultSource.description || "Audio Input"
|
||||
}
|
||||
|
||||
secondaryText: {
|
||||
if (!defaultSource) {
|
||||
return "Select device"
|
||||
}
|
||||
if (defaultSource.audio.muted) {
|
||||
return "Muted"
|
||||
}
|
||||
return Math.round(defaultSource.audio.volume * 100) + "%"
|
||||
}
|
||||
|
||||
onWheelEvent: function (wheelEvent) {
|
||||
if (!defaultSource || !defaultSource.audio) return
|
||||
let delta = wheelEvent.angleDelta.y
|
||||
let currentVolume = defaultSource.audio.volume * 100
|
||||
let newVolume
|
||||
if (delta > 0)
|
||||
newVolume = Math.min(100, currentVolume + 5)
|
||||
else
|
||||
newVolume = Math.max(0, currentVolume - 5)
|
||||
defaultSource.audio.muted = false
|
||||
defaultSource.audio.volume = newVolume / 100
|
||||
wheelEvent.accepted = true
|
||||
}
|
||||
}
|
||||
60
Modules/ControlCenter/Widgets/AudioOutputPill.qml
Normal file
60
Modules/ControlCenter/Widgets/AudioOutputPill.qml
Normal file
@@ -0,0 +1,60 @@
|
||||
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
|
||||
|
||||
BasePill {
|
||||
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"
|
||||
}
|
||||
|
||||
isActive: defaultSink && !defaultSink.audio.muted
|
||||
|
||||
primaryText: {
|
||||
if (!defaultSink) {
|
||||
return "No output device"
|
||||
}
|
||||
return defaultSink.description || "Audio Output"
|
||||
}
|
||||
|
||||
secondaryText: {
|
||||
if (!defaultSink) {
|
||||
return "Select device"
|
||||
}
|
||||
if (defaultSink.audio.muted) {
|
||||
return "Muted"
|
||||
}
|
||||
return Math.round(defaultSink.audio.volume * 100) + "%"
|
||||
}
|
||||
|
||||
onWheelEvent: function (wheelEvent) {
|
||||
if (!defaultSink || !defaultSink.audio) return
|
||||
let delta = wheelEvent.angleDelta.y
|
||||
let currentVolume = defaultSink.audio.volume * 100
|
||||
let newVolume
|
||||
if (delta > 0)
|
||||
newVolume = Math.min(100, currentVolume + 5)
|
||||
else
|
||||
newVolume = Math.max(0, currentVolume - 5)
|
||||
defaultSink.audio.muted = false
|
||||
defaultSink.audio.volume = newVolume / 100
|
||||
AudioService.volumeChanged()
|
||||
wheelEvent.accepted = true
|
||||
}
|
||||
}
|
||||
50
Modules/ControlCenter/Widgets/AudioSlider.qml
Normal file
50
Modules/ControlCenter/Widgets/AudioSlider.qml
Normal file
@@ -0,0 +1,50 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
78
Modules/ControlCenter/Widgets/AudioSliderRow.qml
Normal file
78
Modules/ControlCenter/Widgets/AudioSliderRow.qml
Normal file
@@ -0,0 +1,78 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import Quickshell.Services.Pipewire
|
||||
import qs.Common
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
|
||||
Row {
|
||||
id: root
|
||||
|
||||
property var defaultSink: AudioService.sink
|
||||
|
||||
height: 60
|
||||
spacing: Theme.spacingM
|
||||
|
||||
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
|
||||
color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation { duration: Theme.shortDuration }
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: iconArea
|
||||
anchors.fill: parent
|
||||
visible: defaultSink !== null
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
if (defaultSink) {
|
||||
defaultSink.audio.muted = !defaultSink.audio.muted
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DankIcon {
|
||||
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"
|
||||
return "volume_up"
|
||||
}
|
||||
size: Theme.iconSize
|
||||
color: defaultSink && !defaultSink.audio.muted && defaultSink.audio.volume > 0 ? Theme.primary : Theme.surfaceText
|
||||
}
|
||||
}
|
||||
|
||||
DankSlider {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: {
|
||||
if (parent.width <= 0) return 80
|
||||
return Math.max(80, Math.min(400, parent.width - (Theme.iconSize + Theme.spacingS * 2) - Theme.spacingM))
|
||||
}
|
||||
enabled: defaultSink !== null
|
||||
minimum: 0
|
||||
maximum: 100
|
||||
value: defaultSink ? Math.round(defaultSink.audio.volume * 100) : 0
|
||||
onSliderValueChanged: function(newValue) {
|
||||
if (defaultSink) {
|
||||
defaultSink.audio.volume = newValue / 100.0
|
||||
if (newValue > 0 && defaultSink.audio.muted) {
|
||||
defaultSink.audio.muted = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
149
Modules/ControlCenter/Widgets/BasePill.qml
Normal file
149
Modules/ControlCenter/Widgets/BasePill.qml
Normal file
@@ -0,0 +1,149 @@
|
||||
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
|
||||
|
||||
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 - expandArea.width
|
||||
topLeftRadius: Theme.cornerRadius
|
||||
bottomLeftRadius: Theme.cornerRadius
|
||||
topRightRadius: 0
|
||||
bottomRightRadius: 0
|
||||
color: 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: root.isActive ? Theme.primary : root.iconColor
|
||||
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
|
||||
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
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
66
Modules/ControlCenter/Widgets/BluetoothPill.qml
Normal file
66
Modules/ControlCenter/Widgets/BluetoothPill.qml
Normal file
@@ -0,0 +1,66 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import qs.Common
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
import qs.Modules.ControlCenter.Widgets
|
||||
|
||||
BasePill {
|
||||
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) {
|
||||
return device
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
iconName: {
|
||||
if (!BluetoothService.available) {
|
||||
return "bluetooth_disabled"
|
||||
}
|
||||
if (!BluetoothService.adapter || !BluetoothService.adapter.enabled) {
|
||||
return "bluetooth_disabled"
|
||||
}
|
||||
if (primaryDevice) {
|
||||
return BluetoothService.getDeviceIcon(primaryDevice)
|
||||
}
|
||||
return "bluetooth"
|
||||
}
|
||||
|
||||
isActive: !!(BluetoothService.available && BluetoothService.adapter && BluetoothService.adapter.enabled)
|
||||
|
||||
primaryText: {
|
||||
if (!BluetoothService.available) {
|
||||
return "Bluetooth unavailable"
|
||||
}
|
||||
if (!BluetoothService.adapter) {
|
||||
return "No adapter"
|
||||
}
|
||||
if (!BluetoothService.adapter.enabled) {
|
||||
return "Disabled"
|
||||
}
|
||||
return "Enabled"
|
||||
}
|
||||
|
||||
secondaryText: {
|
||||
if (!BluetoothService.available) {
|
||||
return "Hardware not found"
|
||||
}
|
||||
if (!BluetoothService.adapter || !BluetoothService.adapter.enabled) {
|
||||
return "Off"
|
||||
}
|
||||
if (primaryDevice) {
|
||||
return primaryDevice.name || primaryDevice.alias || primaryDevice.deviceName || "Connected Device"
|
||||
}
|
||||
return "No devices"
|
||||
}
|
||||
}
|
||||
34
Modules/ControlCenter/Widgets/BrightnessSlider.qml
Normal file
34
Modules/ControlCenter/Widgets/BrightnessSlider.qml
Normal file
@@ -0,0 +1,34 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
170
Modules/ControlCenter/Widgets/BrightnessSliderRow.qml
Normal file
170
Modules/ControlCenter/Widgets/BrightnessSliderRow.qml
Normal file
@@ -0,0 +1,170 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import qs.Common
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
|
||||
Row {
|
||||
id: root
|
||||
|
||||
height: 60
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Rectangle {
|
||||
width: Theme.iconSize + Theme.spacingS * 2
|
||||
height: Theme.iconSize + Theme.spacingS * 2
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
radius: (Theme.iconSize + Theme.spacingS * 2) / 2
|
||||
color: iconArea.containsMouse && DisplayService.devices.length > 1
|
||||
? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
|
||||
: "transparent"
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation { duration: Theme.shortDuration }
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: iconArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: DisplayService.devices.length > 1
|
||||
cursorShape: DisplayService.devices.length > 1 ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
|
||||
onClicked: function(event) {
|
||||
if (DisplayService.devices.length > 1) {
|
||||
if (deviceMenu.visible) {
|
||||
deviceMenu.close()
|
||||
} else {
|
||||
deviceMenu.popup(iconArea, 0, iconArea.height + Theme.spacingXS)
|
||||
}
|
||||
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"
|
||||
}
|
||||
size: Theme.iconSize
|
||||
color: DisplayService.brightnessAvailable && DisplayService.brightnessLevel > 0 ? Theme.primary : Theme.surfaceText
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: parent.width - (Theme.iconSize + Theme.spacingS * 2) - Theme.spacingM
|
||||
spacing: 0
|
||||
|
||||
DankSlider {
|
||||
width: parent.width
|
||||
enabled: DisplayService.brightnessAvailable
|
||||
minimum: 1
|
||||
maximum: 100
|
||||
value: {
|
||||
let level = DisplayService.brightnessLevel
|
||||
if (level > 100) {
|
||||
let deviceInfo = DisplayService.getCurrentDeviceInfo()
|
||||
if (deviceInfo && deviceInfo.max > 0) {
|
||||
return Math.round((level / deviceInfo.max) * 100)
|
||||
}
|
||||
return 50
|
||||
}
|
||||
return level
|
||||
}
|
||||
onSliderValueChanged: function(newValue) {
|
||||
if (DisplayService.brightnessAvailable) {
|
||||
DisplayService.setBrightness(newValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
visible: {
|
||||
if (DisplayService.devices.length <= 1) return false
|
||||
if (!DisplayService.currentDevice) return false
|
||||
|
||||
let currentIndex = -1
|
||||
for (let i = 0; i < DisplayService.devices.length; i++) {
|
||||
if (DisplayService.devices[i].name === DisplayService.currentDevice) {
|
||||
currentIndex = i
|
||||
break
|
||||
}
|
||||
}
|
||||
return currentIndex !== 0
|
||||
}
|
||||
width: parent.width
|
||||
text: DisplayService.currentDevice || ""
|
||||
font.pixelSize: Theme.fontSizeSmall - 2
|
||||
color: Theme.surfaceVariantText
|
||||
elide: Text.ElideRight
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
topPadding: 2
|
||||
}
|
||||
}
|
||||
|
||||
Menu {
|
||||
id: deviceMenu
|
||||
width: 200
|
||||
closePolicy: Popup.CloseOnEscape
|
||||
|
||||
background: Rectangle {
|
||||
color: Theme.popupBackground()
|
||||
radius: Theme.cornerRadius
|
||||
border.width: 1
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
|
||||
}
|
||||
|
||||
Instantiator {
|
||||
model: DisplayService.devices
|
||||
delegate: MenuItem {
|
||||
required property var modelData
|
||||
required property int index
|
||||
|
||||
property string deviceName: modelData.name || ""
|
||||
property string deviceClass: modelData.class || ""
|
||||
|
||||
text: deviceName
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
height: 40
|
||||
|
||||
indicator: Rectangle {
|
||||
visible: DisplayService.currentDevice === parent.deviceName
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: Theme.spacingS
|
||||
width: 4
|
||||
height: parent.height - Theme.spacingS * 2
|
||||
radius: 2
|
||||
color: Theme.primary
|
||||
}
|
||||
|
||||
contentItem: StyledText {
|
||||
text: parent.text
|
||||
font: parent.font
|
||||
color: DisplayService.currentDevice === parent.deviceName ? Theme.primary : Theme.surfaceText
|
||||
leftPadding: Theme.spacingL
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
|
||||
radius: Theme.cornerRadius / 2
|
||||
}
|
||||
|
||||
onTriggered: {
|
||||
DisplayService.setCurrentDevice(deviceName, true)
|
||||
deviceMenu.close()
|
||||
}
|
||||
}
|
||||
onObjectAdded: (index, object) => deviceMenu.insertItem(index, object)
|
||||
onObjectRemoved: (index, object) => deviceMenu.removeItem(object)
|
||||
}
|
||||
}
|
||||
}
|
||||
70
Modules/ControlCenter/Widgets/CompactSlider.qml
Normal file
70
Modules/ControlCenter/Widgets/CompactSlider.qml
Normal file
@@ -0,0 +1,70 @@
|
||||
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 labelText: ""
|
||||
property real value: 0.0
|
||||
property real maximumValue: 1.0
|
||||
property real minimumValue: 0.0
|
||||
property bool enabled: true
|
||||
|
||||
signal sliderValueChanged(real value)
|
||||
|
||||
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
|
||||
opacity: enabled ? 1.0 : 0.6
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.right: sliderContainer.left
|
||||
anchors.rightMargin: Theme.spacingS
|
||||
spacing: Theme.spacingS
|
||||
|
||||
DankIcon {
|
||||
name: root.iconName
|
||||
size: Theme.iconSize
|
||||
color: root.iconColor
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.labelText
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: sliderContainer
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
width: 120
|
||||
height: parent.height - Theme.spacingS * 2
|
||||
|
||||
DankSlider {
|
||||
anchors.centerIn: parent
|
||||
width: parent.width
|
||||
enabled: root.enabled
|
||||
minimum: Math.round(root.minimumValue * 100)
|
||||
maximum: Math.round(root.maximumValue * 100)
|
||||
value: Math.round(root.value * 100)
|
||||
onSliderValueChanged: root.sliderValueChanged(newValue / 100.0)
|
||||
}
|
||||
}
|
||||
}
|
||||
29
Modules/ControlCenter/Widgets/DetailView.qml
Normal file
29
Modules/ControlCenter/Widgets/DetailView.qml
Normal file
@@ -0,0 +1,29 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import qs.Common
|
||||
import qs.Widgets
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
|
||||
property string title: ""
|
||||
property Component content: null
|
||||
property bool isVisible: true
|
||||
property int contentHeight: 300
|
||||
|
||||
width: parent ? parent.width : 400
|
||||
implicitHeight: isVisible ? contentHeight : 0
|
||||
height: implicitHeight
|
||||
color: "transparent"
|
||||
clip: true
|
||||
|
||||
Loader {
|
||||
id: contentLoader
|
||||
anchors.fill: parent
|
||||
sourceComponent: root.content
|
||||
asynchronous: true
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
52
Modules/ControlCenter/Widgets/NetworkPill.qml
Normal file
52
Modules/ControlCenter/Widgets/NetworkPill.qml
Normal file
@@ -0,0 +1,52 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import qs.Common
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
import qs.Modules.ControlCenter.Widgets
|
||||
|
||||
BasePill {
|
||||
id: root
|
||||
|
||||
isActive: NetworkService.networkStatus !== "disconnected"
|
||||
|
||||
iconName: {
|
||||
if (NetworkService.networkStatus === "ethernet") {
|
||||
return "settings_ethernet"
|
||||
}
|
||||
if (NetworkService.networkStatus === "wifi") {
|
||||
return NetworkService.wifiSignalIcon
|
||||
}
|
||||
if (NetworkService.wifiEnabled) {
|
||||
return "signal_wifi_off"
|
||||
}
|
||||
return "wifi_off"
|
||||
}
|
||||
|
||||
primaryText: {
|
||||
if (NetworkService.networkStatus === "ethernet") {
|
||||
return "Ethernet"
|
||||
}
|
||||
if (NetworkService.networkStatus === "wifi" && NetworkService.currentWifiSSID) {
|
||||
return NetworkService.currentWifiSSID
|
||||
}
|
||||
if (NetworkService.wifiEnabled) {
|
||||
return "Not connected"
|
||||
}
|
||||
return "WiFi off"
|
||||
}
|
||||
|
||||
secondaryText: {
|
||||
if (NetworkService.networkStatus === "ethernet") {
|
||||
return "Connected"
|
||||
}
|
||||
if (NetworkService.networkStatus === "wifi") {
|
||||
return NetworkService.wifiSignalStrength > 0 ? NetworkService.wifiSignalStrength + "%" : "Connected"
|
||||
}
|
||||
if (NetworkService.wifiEnabled) {
|
||||
return "Select network"
|
||||
}
|
||||
return "Tap to enable"
|
||||
}
|
||||
}
|
||||
50
Modules/ControlCenter/Widgets/SimpleSlider.qml
Normal file
50
Modules/ControlCenter/Widgets/SimpleSlider.qml
Normal file
@@ -0,0 +1,50 @@
|
||||
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) }
|
||||
}
|
||||
}
|
||||
95
Modules/ControlCenter/Widgets/ToggleButton.qml
Normal file
95
Modules/ControlCenter/Widgets/ToggleButton.qml
Normal file
@@ -0,0 +1,95 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import qs.Common
|
||||
import qs.Widgets
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
|
||||
property string iconName: ""
|
||||
property string text: ""
|
||||
property bool isActive: false
|
||||
property bool enabled: true
|
||||
property string secondaryText: ""
|
||||
|
||||
signal clicked()
|
||||
|
||||
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
|
||||
opacity: enabled ? 1.0 : 0.6
|
||||
|
||||
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 }
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: parent.right
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
spacing: Theme.spacingS
|
||||
|
||||
DankIcon {
|
||||
name: root.iconName
|
||||
size: Theme.iconSize
|
||||
color: root.isActive ? Theme.primary : Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: parent.width - Theme.iconSize - Theme.spacingS
|
||||
spacing: 2
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
enabled: root.enabled
|
||||
onClicked: root.clicked()
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user