sidebar calendar thingie: navrail

This commit is contained in:
end-4
2025-04-15 22:46:18 +02:00
parent 62ef2fc421
commit 7c217dc25c
17 changed files with 204 additions and 54 deletions
@@ -23,7 +23,7 @@ Item {
spacing: -4
StyledText {
font.pointSize: Appearance.font.pointSize.smaller
font.pixelSize: Appearance.font.pixelSize.smaller
color: Appearance.colors.colSubtext
Layout.preferredWidth: preferredWidth
elide: Text.ElideRight
@@ -31,7 +31,7 @@ Item {
}
StyledText {
font.pointSize: Appearance.font.pointSize.small
font.pixelSize: Appearance.font.pixelSize.small
color: Appearance.colors.colOnLayer0
Layout.preferredWidth: preferredWidth
elide: Text.ElideRight
+42 -25
View File
@@ -13,12 +13,12 @@ Scope {
readonly property int barCenterSideModuleWidth: Appearance.sizes.barCenterSideModuleWidth
Process {
id: toggleSidebarRight
command: ["qs", "ipc", "call", "sidebarRight", "toggle"]
id: openSidebarRight
command: ["qs", "ipc", "call", "sidebarRight", "open"]
}
Process {
id: toggleSidebarLeft
command: ["qs", "ipc", "call", "sidebarLeft", "toggle"]
id: openSidebarLeft
command: ["qs", "ipc", "call", "sidebarLeft", "open"]
}
Variants {
@@ -135,27 +135,35 @@ Scope {
width: Appearance.sizes.barPreferredSideSectionWidth
spacing: 20
layoutDirection: Qt.RightToLeft
RowLayout { // TODO make this wifi & bluetooth
Rectangle {
Layout.margins: 4
Layout.rightMargin: Appearance.rounding.screenRounding
Layout.fillWidth: false
spacing: 15
MaterialSymbol {
text: (Network.networkName.length > 0 && Network.networkName != "lo") ? (
Network.networkStrength > 80 ? "signal_wifi_4_bar" :
Network.networkStrength > 60 ? "network_wifi_3_bar" :
Network.networkStrength > 40 ? "network_wifi_2_bar" :
Network.networkStrength > 20 ? "network_wifi_1_bar" :
"signal_wifi_0_bar"
) : "signal_wifi_off"
font.pointSize: Appearance.font.pointSize.larger
color: Appearance.colors.colOnLayer0
}
MaterialSymbol {
text: Bluetooth.bluetoothConnected ? "bluetooth_connected" : Bluetooth.bluetoothEnabled ? "bluetooth" : "bluetooth_disabled"
font.pointSize: Appearance.font.pointSize.larger
color: Appearance.colors.colOnLayer0
Layout.fillHeight: true
implicitWidth: rowLayout.implicitWidth + 10*2
radius: Appearance.rounding.full
color: barRightSideMouseArea.pressed ? Appearance.colors.colLayer1Active : barRightSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : "transparent"
RowLayout {
id: rowLayout
anchors.centerIn: parent
spacing: 15
MaterialSymbol {
text: (Network.networkName.length > 0 && Network.networkName != "lo") ? (
Network.networkStrength > 80 ? "signal_wifi_4_bar" :
Network.networkStrength > 60 ? "network_wifi_3_bar" :
Network.networkStrength > 40 ? "network_wifi_2_bar" :
Network.networkStrength > 20 ? "network_wifi_1_bar" :
"signal_wifi_0_bar"
) : "signal_wifi_off"
font.pixelSize: Appearance.font.pixelSize.larger
color: Appearance.colors.colOnLayer0
}
MaterialSymbol {
text: Bluetooth.bluetoothConnected ? "bluetooth_connected" : Bluetooth.bluetoothEnabled ? "bluetooth" : "bluetooth_disabled"
font.pixelSize: Appearance.font.pixelSize.larger
color: Appearance.colors.colOnLayer0
}
}
}
@@ -171,12 +179,21 @@ Scope {
}
MouseArea {
id: barRightSideMouseArea
property bool hovered: false
anchors.fill: rightSection
acceptedButtons: Qt.LeftButton
hoverEnabled: true
propagateComposedEvents: true
onEntered: (event) => {
barRightSideMouseArea.hovered = true
}
onExited: (event) => {
barRightSideMouseArea.hovered = false
}
onPressed: (event) => {
if (event.button === Qt.LeftButton) {
toggleSidebarRight.running = true
openSidebarRight.running = true
}
}
// Scroll to change volume
+2 -2
View File
@@ -57,7 +57,7 @@ Rectangle {
MaterialSymbol {
anchors.centerIn: parent
text: "battery_full"
font.pointSize: Appearance.font.pointSize.normal
font.pixelSize: Appearance.font.pixelSize.normal
color: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
}
@@ -71,7 +71,7 @@ Rectangle {
anchors.left: rowLayout.left
anchors.verticalCenter: rowLayout.verticalCenter
text: "bolt"
font.pointSize: Appearance.font.pointSize.large
font.pixelSize: Appearance.font.pixelSize.large
color: Appearance.m3colors.m3onSecondaryContainer
visible: opacity !== 0 // Only show when charging
opacity: isCharging ? 1 : 0 // Keep opacity for visibility
@@ -16,19 +16,19 @@ Rectangle {
anchors.centerIn: parent
StyledText {
font.pointSize: Appearance.font.pointSize.large
font.pixelSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnLayer1
text: DateTime.time
}
StyledText {
font.pointSize: Appearance.font.pointSize.small
font.pixelSize: Appearance.font.pixelSize.small
color: Appearance.colors.colOnLayer1
text: "•"
}
StyledText {
font.pointSize: Appearance.font.pointSize.small
font.pixelSize: Appearance.font.pixelSize.small
color: Appearance.colors.colOnLayer1
text: DateTime.date
}
+1 -1
View File
@@ -62,7 +62,7 @@ Item {
MaterialSymbol {
anchors.centerIn: parent
text: activePlayer?.isPlaying ? "pause" : "play_arrow"
font.pointSize: Appearance.font.pointSize.normal
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.m3colors.m3onSecondaryContainer
}
+1 -1
View File
@@ -29,7 +29,7 @@ Item {
MaterialSymbol {
anchors.centerIn: parent
text: iconName
font.pointSize: Appearance.font.pointSize.normal
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.m3colors.m3onSecondaryContainer
}
+1 -2
View File
@@ -37,11 +37,10 @@ Item {
StyledText {
Layout.alignment: Qt.AlignVCenter
font.pointSize: Appearance.font.pointSize.larger
font.pixelSize: Appearance.font.pixelSize.larger
color: Appearance.colors.colSubtext
text: "•"
visible: {
console.log("SystemTray.values.length", SystemTray.items.values.length)
SystemTray.items.values.length > 0
}
}
@@ -37,7 +37,7 @@ Rectangle {
MaterialSymbol {
anchors.centerIn: parent
text: "screenshot_region"
font.pointSize: Appearance.font.pointSize.normal
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colOnLayer2
}
@@ -50,7 +50,7 @@ Rectangle {
MaterialSymbol {
anchors.centerIn: parent
text: "colorize"
font.pointSize: Appearance.font.pointSize.normal
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colOnLayer2
}
@@ -171,7 +171,7 @@ Item {
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pointSize: Appearance.font.pointSize.small
font.pixelSize: Appearance.font.pixelSize.small
text: `${workspaceValue}`
elide: Text.ElideRight
color: (monitor.activeWorkspace?.id == workspaceValue) ? Appearance.m3colors.m3onPrimary : (workspaceOccupied[index] ? Appearance.colors.colOnLayer1 : Appearance.colors.colOnLayer1Inactive)
@@ -122,6 +122,10 @@ Singleton {
property color colLayer3Active: mix(colLayer3, colOnLayer3, 0.80);
property color colPrimaryHover: mix(m3colors.m3primary, colLayer1Hover, 0.7)
property color colPrimaryActive: mix(m3colors.m3primary, colLayer1Active, 0.4)
property color colSecondaryHover: mix(m3colors.m3secondary, colLayer1Hover, 0.7)
property color colSecondaryActive: mix(m3colors.m3secondary, colLayer1Active, 0.4)
property color colSecondaryContainerHover: mix(m3colors.m3secondaryContainer, colLayer1Hover, 0.8)
property color colSecondaryContainerActive: mix(m3colors.m3secondaryContainer, colLayer1Active, 0.6)
property color colTooltip: m3colors.m3inverseSurface
property color colOnTooltip: m3colors.m3inverseOnSurface
}
@@ -145,13 +149,14 @@ Singleton {
property string monospace: "JetBrains Mono NF"
property string reading: "Readex Pro"
}
property QtObject pointSize: QtObject {
property int smaller: 10
property int small: 11
property int normal: 12
property int large: 13
property int larger: 14
property int huge: 16
property QtObject pixelSize: QtObject {
property int smaller: 13
property int small: 15
property int normal: 16
property int large: 17
property int larger: 19
property int huge: 22
property int hugeass: 23
}
}
@@ -1,5 +1,4 @@
import QtQuick
import Qt.labs.platform
import Quickshell
import Quickshell.Widgets
@@ -7,7 +6,7 @@ Item {
id: root
property string source: ""
property string iconFolder: StandardPaths.standardLocations(StandardPaths.ConfigLocation)[0] + "/quickshell/assets/icons" // The folder to check first
property string iconFolder: "root:/assets/icons" // The folder to check first
width: 30
height: 30
@@ -6,6 +6,6 @@ Text {
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
font.family: Appearance.font.family.iconMaterial
font.pointSize: Appearance.font.pointSize.small
font.pixelSize: Appearance.font.pixelSize.small
color: Appearance.colors.colOnBackground
}
@@ -0,0 +1,64 @@
import "root:/modules/common"
import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell.Io
Button {
id: button
property bool toggled
property string buttonIcon
property string buttonText
Layout.alignment: Qt.AlignHCenter
implicitHeight: columnLayout.implicitHeight
implicitWidth: columnLayout.implicitWidth
background: Item{} // No ugly bg
// Real stuff
ColumnLayout {
id: columnLayout
spacing: 5
Rectangle {
width: 62
implicitHeight: navRailButtonIcon.height + 2*2
Layout.alignment: Qt.AlignHCenter
radius: Appearance.rounding.full
color: toggled ?
(button.down ? Appearance.colors.colSecondaryContainerActive : button.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.m3colors.m3secondaryContainer) :
(button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : Appearance.transparentize(Appearance.colors.colLayer1Hover, 1))
Behavior on color {
ColorAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
MaterialSymbol {
id: navRailButtonIcon
anchors.centerIn: parent
font.pixelSize: Appearance.font.pixelSize.hugeass
text: buttonIcon
color: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer1
Behavior on color {
ColorAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
}
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: buttonText
color: Appearance.colors.colOnLayer1
}
}
}
@@ -6,6 +6,6 @@ Text {
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
font.family: Appearance.font.family.main
font.pointSize: Appearance.font.pointSize.small
font.pixelSize: Appearance.font.pixelSize.small
color: Appearance.colors.colOnBackground
}
@@ -30,7 +30,7 @@ Button {
MaterialSymbol {
anchors.centerIn: parent
font.pointSize: Appearance.font.pointSize.larger
font.pixelSize: Appearance.font.pixelSize.larger
text: buttonIcon
color: toggled ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer1
@@ -0,0 +1,50 @@
import "root:/modules/common"
import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
Rectangle {
Layout.alignment: Qt.AlignHCenter
Layout.fillHeight: false
Layout.fillWidth: true
radius: Appearance.rounding.normal
color: Appearance.colors.colLayer1
height: 300
RowLayout {
id: calendarRow
anchors.centerIn: parent
width: parent.width - 10 * 2
height: parent.height - 10 * 2
spacing: 10
property int selectedTab: 0
ColumnLayout {
id: tabBar
Layout.fillHeight: true
Layout.leftMargin: 10
spacing: 10
Repeater {
model: [
{"name": "Calendar", "icon": "calendar_month"},
{"name": "To Do", "icon": "done_outline"}
]
NavRailButton {
toggled: calendarRow.selectedTab == index
buttonText: modelData.name
buttonIcon: modelData.icon
onClicked: {
calendarRow.selectedTab = index
console.log("Selected tab:", calendarRow.selectedTab)
}
}
}
}
Item { // Todo the real content goes here!
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
@@ -44,7 +44,6 @@ Scope {
windows: [ sidebarRoot ]
active: false
onCleared: () => {
// sidebarRoot.visible = false
if (!active) sidebarRoot.visible = false
}
}
@@ -102,9 +101,10 @@ Scope {
}
StyledText {
font.pointSize: Appearance.font.pointSize.normal
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colOnLayer0
text: `Uptime: ${DateTime.uptime}`
textFormat: Text.MarkdownText
}
Item {
@@ -138,9 +138,16 @@ Scope {
}
}
Item {
Rectangle {
Layout.alignment: Qt.AlignHCenter
Layout.fillHeight: true
Layout.fillWidth: true
radius: Appearance.rounding.normal
color: Appearance.colors.colLayer1
}
// Calendar
SidebarCalendar {}
}
}
@@ -179,6 +186,15 @@ Scope {
}
}
}
function open(): void {
for (let i = 0; i < sidebarVariants.instances.length; i++) {
let panelWindow = sidebarVariants.instances[i];
if (panelWindow.modelData.name == Hyprland.focusedMonitor.name) {
panelWindow.visible = true;
}
}
}
}
}