added quickshell and updated zsh
This commit is contained in:
638
home/hypr/quickshell/components/ControlCenter.qml
Normal file
638
home/hypr/quickshell/components/ControlCenter.qml
Normal file
@@ -0,0 +1,638 @@
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user