639 lines
26 KiB
QML
639 lines
26 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import Quickshell
|
|
import Quickshell.Wayland
|
|
import "../theme"
|
|
import ".."
|
|
|
|
PanelWindow {
|
|
id: ccWindow
|
|
visible: GlobalState.controlCenterVisible
|
|
|
|
anchors {
|
|
top: true
|
|
right: true
|
|
bottom: true
|
|
}
|
|
|
|
margins {
|
|
top: Theme.menuBarHeight
|
|
}
|
|
|
|
implicitWidth: 360
|
|
color: "transparent"
|
|
WlrLayershell.layer: WlrLayer.Overlay
|
|
WlrLayershell.namespace: "quickshell-controlcenter"
|
|
WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
|
|
|
|
property int activeTab: 0 // 0 = Today, 1 = Notifications
|
|
|
|
// Sidebar Container
|
|
Rectangle {
|
|
id: sidebarPanel
|
|
anchors.fill: parent
|
|
color: Theme.windowBg
|
|
border.color: Theme.windowBorder
|
|
border.width: 1
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 14
|
|
spacing: 12
|
|
|
|
// =================================================================
|
|
// TAB SWITCHER (Today | Notifications)
|
|
// =================================================================
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 30
|
|
radius: Theme.radiusMedium
|
|
color: Qt.rgba(0.0, 0.0, 0.0, 0.3)
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
spacing: 0
|
|
|
|
// Today Tab Button
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
radius: Theme.radiusMedium
|
|
color: ccWindow.activeTab === 0 ? Qt.rgba(1.0, 1.0, 1.0, 0.18) : "transparent"
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
text: "Today"
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeNormal
|
|
font.weight: ccWindow.activeTab === 0 ? Font.DemiBold : Font.Normal
|
|
color: ccWindow.activeTab === 0 ? "#FFFFFF" : Theme.textTertiary
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: ccWindow.activeTab = 0
|
|
}
|
|
}
|
|
|
|
// Notifications Tab Button
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
radius: Theme.radiusMedium
|
|
color: ccWindow.activeTab === 1 ? Qt.rgba(1.0, 1.0, 1.0, 0.18) : "transparent"
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
text: "Notifications"
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeNormal
|
|
font.weight: ccWindow.activeTab === 1 ? Font.DemiBold : Font.Normal
|
|
color: ccWindow.activeTab === 1 ? "#FFFFFF" : Theme.textTertiary
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: ccWindow.activeTab = 1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// =================================================================
|
|
// TAB 1: TODAY VIEW
|
|
// =================================================================
|
|
ScrollView {
|
|
visible: ccWindow.activeTab === 0
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
clip: true
|
|
|
|
ColumnLayout {
|
|
width: parent.width
|
|
spacing: 12
|
|
|
|
// 1. Large Date & Time Widget
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 70
|
|
radius: Theme.radiusLarge
|
|
color: Theme.cardBg
|
|
border.color: Theme.cardBorder
|
|
border.width: 1
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 12
|
|
spacing: 2
|
|
|
|
Text {
|
|
text: GlobalState.fullDateString
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
font.weight: Font.DemiBold
|
|
color: Theme.accentBlue
|
|
}
|
|
|
|
Text {
|
|
text: GlobalState.timeString
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: 26
|
|
font.weight: Font.Light
|
|
color: "#FFFFFF"
|
|
}
|
|
}
|
|
}
|
|
|
|
// 2. Control Toggles (Wi-Fi, Bluetooth, DND, Night Shift)
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 120
|
|
radius: Theme.radiusLarge
|
|
color: Theme.cardBg
|
|
border.color: Theme.cardBorder
|
|
border.width: 1
|
|
|
|
GridLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 10
|
|
columns: 2
|
|
rowSpacing: 8
|
|
columnSpacing: 8
|
|
|
|
// Wi-Fi Toggle
|
|
ToggleCard {
|
|
iconSource: "../assets/wifi.svg"
|
|
title: "Wi-Fi"
|
|
subtitle: GlobalState.wifiSsid
|
|
isActive: GlobalState.wifiConnected
|
|
onClicked: GlobalState.launchApp("nm-connection-editor || foot -e nmtui")
|
|
}
|
|
|
|
// Bluetooth Toggle
|
|
ToggleCard {
|
|
iconSource: "../assets/bluetooth.svg"
|
|
title: "Bluetooth"
|
|
subtitle: "Active"
|
|
isActive: true
|
|
onClicked: GlobalState.launchApp("foot -e bluetoothctl")
|
|
}
|
|
|
|
// Do Not Disturb Toggle
|
|
ToggleCard {
|
|
iconSource: "../assets/preferences.svg"
|
|
title: "Do Not Disturb"
|
|
subtitle: "Off"
|
|
isActive: false
|
|
onClicked: {}
|
|
}
|
|
|
|
// Sound Mute Toggle
|
|
ToggleCard {
|
|
iconSource: "../assets/volume.svg"
|
|
title: "Sound"
|
|
subtitle: GlobalState.volumeMuted ? "Muted" : `${GlobalState.volume}%`
|
|
isActive: !GlobalState.volumeMuted
|
|
onClicked: GlobalState.toggleVolumeMute()
|
|
}
|
|
}
|
|
}
|
|
|
|
// 3. Brightness & Volume Sliders
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 110
|
|
radius: Theme.radiusLarge
|
|
color: Theme.cardBg
|
|
border.color: Theme.cardBorder
|
|
border.width: 1
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 12
|
|
spacing: 10
|
|
|
|
// Display Brightness Slider
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 8
|
|
|
|
Image {
|
|
width: 16
|
|
height: 16
|
|
source: "../assets/brightness.svg"
|
|
sourceSize: Qt.size(16, 16)
|
|
}
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
height: 18
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
radius: 9
|
|
color: Qt.rgba(1,1,1,0.18)
|
|
|
|
Rectangle {
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.bottom: parent.bottom
|
|
width: parent.width * (GlobalState.brightness / 100.0)
|
|
radius: 9
|
|
color: "#FFFFFF"
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
function update(m) {
|
|
const frac = Math.max(0.01, Math.min(1.0, m.x / width));
|
|
GlobalState.setBrightness(Math.round(frac * 100));
|
|
}
|
|
onPressed: (m) => update(m)
|
|
onPositionChanged: (m) => { if (pressed) update(m); }
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sound Volume Slider
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 8
|
|
|
|
Image {
|
|
width: 16
|
|
height: 16
|
|
source: "../assets/volume.svg"
|
|
sourceSize: Qt.size(16, 16)
|
|
}
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
height: 18
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
radius: 9
|
|
color: Qt.rgba(1,1,1,0.18)
|
|
|
|
Rectangle {
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.bottom: parent.bottom
|
|
width: parent.width * (GlobalState.volume / 100.0)
|
|
radius: 9
|
|
color: Theme.accentBlue
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
function update(m) {
|
|
const frac = Math.max(0.0, Math.min(1.0, m.x / width));
|
|
GlobalState.setVolume(Math.round(frac * 100));
|
|
}
|
|
onPressed: (m) => update(m)
|
|
onPositionChanged: (m) => { if (pressed) update(m); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 4. System Resources Monitor Widget
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 90
|
|
radius: Theme.radiusLarge
|
|
color: Theme.cardBg
|
|
border.color: Theme.cardBorder
|
|
border.width: 1
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 12
|
|
spacing: 6
|
|
|
|
Text {
|
|
text: "System Performance"
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
font.weight: Font.DemiBold
|
|
color: Theme.textSecondary
|
|
}
|
|
|
|
// CPU Bar
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 8
|
|
Text {
|
|
text: "CPU"
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
color: Theme.textPrimary
|
|
Layout.preferredWidth: 32
|
|
}
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
height: 6
|
|
radius: 3
|
|
color: Qt.rgba(1,1,1,0.15)
|
|
Rectangle {
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.bottom: parent.bottom
|
|
width: parent.width * (GlobalState.cpuPercent / 100.0)
|
|
radius: 3
|
|
color: GlobalState.cpuPercent > 80 ? Theme.accentRed : Theme.accentGreen
|
|
}
|
|
}
|
|
Text {
|
|
text: `${GlobalState.cpuPercent}%`
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
color: Theme.textSecondary
|
|
Layout.preferredWidth: 36
|
|
horizontalAlignment: Text.AlignRight
|
|
}
|
|
}
|
|
|
|
// Memory Bar
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 8
|
|
Text {
|
|
text: "RAM"
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
color: Theme.textPrimary
|
|
Layout.preferredWidth: 32
|
|
}
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
height: 6
|
|
radius: 3
|
|
color: Qt.rgba(1,1,1,0.15)
|
|
Rectangle {
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.bottom: parent.bottom
|
|
width: parent.width * (GlobalState.memPercent / 100.0)
|
|
radius: 3
|
|
color: Theme.accentBlue
|
|
}
|
|
}
|
|
Text {
|
|
text: `${GlobalState.memUsedGb}G`
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
color: Theme.textSecondary
|
|
Layout.preferredWidth: 36
|
|
horizontalAlignment: Text.AlignRight
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 5. Now Playing Media Widget
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 80
|
|
radius: Theme.radiusLarge
|
|
color: Theme.cardBg
|
|
border.color: Theme.cardBorder
|
|
border.width: 1
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 12
|
|
spacing: 10
|
|
|
|
Image {
|
|
width: 36
|
|
height: 36
|
|
source: "../assets/music.svg"
|
|
sourceSize: Qt.size(36, 36)
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 2
|
|
|
|
Text {
|
|
text: GlobalState.mediaTitle || "No Media Playing"
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeNormal
|
|
font.weight: Font.Medium
|
|
color: "#FFFFFF"
|
|
elide: Text.ElideRight
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
Text {
|
|
text: GlobalState.mediaArtist || "Apple Music"
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
color: Theme.textTertiary
|
|
elide: Text.ElideRight
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
// Playback controls
|
|
RowLayout {
|
|
spacing: 4
|
|
|
|
Rectangle {
|
|
width: 24
|
|
height: 24
|
|
radius: 12
|
|
color: Qt.rgba(1,1,1,0.1)
|
|
Text { anchors.centerIn: parent; text: "⏮"; color: "#FFFFFF"; font.pixelSize: 10 }
|
|
MouseArea { anchors.fill: parent; cursorShape: Qt.PointingHandCursor; onClicked: GlobalState.mediaPrevious() }
|
|
}
|
|
|
|
Rectangle {
|
|
width: 28
|
|
height: 28
|
|
radius: 14
|
|
color: Theme.accentBlue
|
|
Text { anchors.centerIn: parent; text: GlobalState.mediaPlaying ? "⏸" : "▶"; color: "#FFFFFF"; font.pixelSize: 11 }
|
|
MouseArea { anchors.fill: parent; cursorShape: Qt.PointingHandCursor; onClicked: GlobalState.mediaPlayPause() }
|
|
}
|
|
|
|
Rectangle {
|
|
width: 24
|
|
height: 24
|
|
radius: 12
|
|
color: Qt.rgba(1,1,1,0.1)
|
|
Text { anchors.centerIn: parent; text: "⏭"; color: "#FFFFFF"; font.pixelSize: 10 }
|
|
MouseArea { anchors.fill: parent; cursorShape: Qt.PointingHandCursor; onClicked: GlobalState.mediaNext() }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// =================================================================
|
|
// TAB 2: NOTIFICATIONS VIEW
|
|
// =================================================================
|
|
ColumnLayout {
|
|
visible: ccWindow.activeTab === 1
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
spacing: 12
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Text {
|
|
text: "Notifications"
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeLarge
|
|
font.weight: Font.DemiBold
|
|
color: "#FFFFFF"
|
|
Layout.fillWidth: true
|
|
}
|
|
Rectangle {
|
|
implicitWidth: clearText.implicitWidth + 12
|
|
height: 22
|
|
radius: Theme.radiusSmall
|
|
color: Qt.rgba(1,1,1,0.12)
|
|
Text {
|
|
id: clearText
|
|
anchors.centerIn: parent
|
|
text: "Clear All"
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
color: Theme.textSecondary
|
|
}
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: {}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Placeholder / Active notifications card
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 70
|
|
radius: Theme.radiusLarge
|
|
color: Theme.cardBg
|
|
border.color: Theme.cardBorder
|
|
border.width: 1
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 12
|
|
spacing: 10
|
|
|
|
Image {
|
|
width: 28
|
|
height: 28
|
|
source: "../assets/apple.svg"
|
|
sourceSize: Qt.size(28, 28)
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 2
|
|
|
|
Text {
|
|
text: "macOS Catalina on Hyprland"
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeNormal
|
|
font.weight: Font.Medium
|
|
color: "#FFFFFF"
|
|
}
|
|
|
|
Text {
|
|
text: "Quickshell desktop loaded successfully."
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
color: Theme.textSecondary
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
Layout.fillHeight: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Toggle Card Component
|
|
component ToggleCard: Rectangle {
|
|
id: cardRoot
|
|
property string iconSource: ""
|
|
property string title: ""
|
|
property string subtitle: ""
|
|
property bool isActive: false
|
|
signal clicked()
|
|
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 46
|
|
radius: Theme.radiusMedium
|
|
color: cardMouse.containsMouse ? Qt.rgba(1.0, 1.0, 1.0, 0.22) : Qt.rgba(1.0, 1.0, 1.0, 0.12)
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 8
|
|
spacing: 8
|
|
|
|
Rectangle {
|
|
width: 28
|
|
height: 28
|
|
radius: 14
|
|
color: cardRoot.isActive ? Theme.accentBlue : Qt.rgba(1,1,1,0.2)
|
|
|
|
Image {
|
|
anchors.centerIn: parent
|
|
width: 14
|
|
height: 14
|
|
source: cardRoot.iconSource
|
|
sourceSize: Qt.size(14, 14)
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 1
|
|
|
|
Text {
|
|
text: cardRoot.title
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
font.weight: Font.Medium
|
|
color: "#FFFFFF"
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
Text {
|
|
text: cardRoot.subtitle
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: 10
|
|
color: Theme.textTertiary
|
|
elide: Text.ElideRight
|
|
}
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: cardMouse
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: cardRoot.clicked()
|
|
}
|
|
}
|
|
}
|