diff --git a/quickshell/assets/bar/MutedMic.svg b/quickshell/assets/bar/MutedMic.svg
new file mode 100644
index 0000000..1f54754
--- /dev/null
+++ b/quickshell/assets/bar/MutedMic.svg
@@ -0,0 +1 @@
+
diff --git a/quickshell/assets/bar/MutedSpeaker.svg b/quickshell/assets/bar/MutedSpeaker.svg
new file mode 100644
index 0000000..0a5c295
--- /dev/null
+++ b/quickshell/assets/bar/MutedSpeaker.svg
@@ -0,0 +1 @@
+
diff --git a/quickshell/bar/Bar.qml b/quickshell/bar/Bar.qml
index 7dccb3d..9243c39 100644
--- a/quickshell/bar/Bar.qml
+++ b/quickshell/bar/Bar.qml
@@ -8,6 +8,7 @@ import Quickshell.Widgets
import "widgets" as Widgets
import "widgets/player" as Player
import "widgets/common" as Common
+import "widgets/clock" as Clock
// Tako kindly threatened you to sort the naming schema and to put all the svg's in an asset folder, so please do that
@@ -22,15 +23,20 @@ import "widgets/common" as Common
right: true
}
- implicitHeight: 30
+ implicitHeight: 32
RowLayout {
+ height: 28
anchors {
- fill: parent
+ top: parent.top
+ left: parent.left
+ right: parent.right
+ // bottomMargin: 2
leftMargin: 10
rightMargin: 10
}
RowLayout { // Left
Layout.alignment: Qt.AlignLeft
+ Clock.Date {}
}
RowLayout { // Center
// TODO: add icons of the active window per workspace in the workspace tab
@@ -50,13 +56,7 @@ import "widgets/common" as Common
}
}
Common.VerticalSeprator {}
- WrapperItem {
- Text { // Date & Time
- text: Widgets.Time.time
- color: '#FFFFFF'
- font.pointSize: 10.75
- }
- }
+ Clock.Clock {}
Widgets.SystemTray {
id: systemTray
}
@@ -68,7 +68,7 @@ import "widgets/common" as Common
left: parent.left
right: parent.right
}
- height: 2
+ height: 1
color: "#8d8d8d"
}
}
diff --git a/quickshell/bar/widgets/Audio.qml b/quickshell/bar/widgets/Audio.qml
index 6bba82d..aed1b02 100644
--- a/quickshell/bar/widgets/Audio.qml
+++ b/quickshell/bar/widgets/Audio.qml
@@ -18,30 +18,26 @@ Item {
RowLayout {
id: row
-
- IconImage {
- // anchors.centerIn: parent
- implicitSize: 27
- source: "root:/assets/bar/Speaker.svg"
- }
-
-
- Text {
- id: text
- text: root.speakerNode.audio.muted ? "0%" : root.speakerNode.audio.volume * 100 + "%"
- font.pointSize: 10.75
- color: root.speakerNode.audio.muted ? "red" : "#FFFFFF"
+ Item {
+ implicitWidth: 28
+ implicitHeight: 28
+ Rectangle {
+ width: parent.width
+ height: parent.height
+ radius: 7
+ color: "black"
+ }
+ IconImage {
+ anchors.centerIn: parent
+ implicitSize: 25
+ source: root.speakerNode.audio.muted ? "root:/assets/bar/MutedSpeaker.svg" : "root:/assets/bar/Speaker.svg"
+ // source: "root:/assets/bar/Speaker.svg"
}
-
- IconImage {
- implicitSize: 26
- source: "root:/assets/bar/Mic.svg"
}
-
- Text {
- text: parseInt(root.microphoneNode.audio.muted ? "0" : root.microphoneNode.audio.volume * 100) + "%"
- font.pointSize: 10.75
- color: root.microphoneNode.audio.muted ? "red" : "#FFFFFF"
+ IconImage {
+ implicitSize: 25
+ source: root.microphoneNode.audio.muted ? "root:/assets/bar/MutedMic.svg" : "root:/assets/bar/Mic.svg"
+ // source: "root:/assets/bar/Mic.svg"
}
}
}
diff --git a/quickshell/bar/widgets/Time.qml b/quickshell/bar/widgets/Time.qml
deleted file mode 100644
index 0492ac7..0000000
--- a/quickshell/bar/widgets/Time.qml
+++ /dev/null
@@ -1,18 +0,0 @@
-pragma Singleton
-
-import Quickshell
-import Quickshell.Io
-import QtQuick
-
-Singleton {
- id: root
- readonly property string time: {
- Qt.formatDateTime(clock.date, "ddd d MMM [hh:mm]")
- }
-
-
- SystemClock {
- id: clock
- precision: SystemClock.Minutes
- }
-}
diff --git a/quickshell/bar/widgets/clock/Clock.qml b/quickshell/bar/widgets/clock/Clock.qml
new file mode 100644
index 0000000..ec96137
--- /dev/null
+++ b/quickshell/bar/widgets/clock/Clock.qml
@@ -0,0 +1,18 @@
+import Quickshell
+import Quickshell.Io
+import QtQuick
+
+import "../common" as Common
+
+Item {
+ id: root
+ width: text.width
+ height: text.height
+ Common.Container {}
+ Text {
+ id: text
+ text: ClockData.time
+ font.pointSize: 10.25
+ color: "white"
+ }
+}
diff --git a/quickshell/bar/widgets/clock/ClockData.qml b/quickshell/bar/widgets/clock/ClockData.qml
new file mode 100644
index 0000000..c35f7de
--- /dev/null
+++ b/quickshell/bar/widgets/clock/ClockData.qml
@@ -0,0 +1,22 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Io
+import QtQuick
+
+Singleton {
+ id: root
+ readonly property string time: {
+ // Qt.formatDateTime(clock.date, "ddd d MMM [hh:mm]")
+ Qt.formatDateTime(clock.date, "hh:mm")
+ }
+ readonly property string date: {
+ Qt.formatDateTime(clock.date, "d MMM")
+ // Qt.formatDateTime(clock.date, "hh:mm")
+ }
+
+ SystemClock {
+ id: clock
+ precision: SystemClock.Minutes
+ }
+}
diff --git a/quickshell/bar/widgets/clock/Date.qml b/quickshell/bar/widgets/clock/Date.qml
new file mode 100644
index 0000000..c67df9b
--- /dev/null
+++ b/quickshell/bar/widgets/clock/Date.qml
@@ -0,0 +1,19 @@
+import Quickshell
+import Quickshell.Io
+import QtQuick
+
+import "../common" as Common
+
+Item {
+ id: root
+ width: text.width + 15
+ height: text.height
+ Common.Container {}
+ Text {
+ anchors.centerIn: parent
+ id: text
+ text: ClockData.date
+ font.pointSize: 10.25
+ color: "white"
+ }
+}
diff --git a/quickshell/bar/widgets/common/Container.qml b/quickshell/bar/widgets/common/Container.qml
new file mode 100644
index 0000000..8dddd66
--- /dev/null
+++ b/quickshell/bar/widgets/common/Container.qml
@@ -0,0 +1,13 @@
+import Quickshell
+import QtQuick
+
+Rectangle {
+ z: -1
+ color: "black"
+ anchors {
+ verticalCenter: parent.verticalCenter
+ }
+ height: 25
+ width: parent.width
+ radius: 7
+}
diff --git a/quickshell/bar/widgets/player/PlayerPopupV2.qml b/quickshell/bar/widgets/player/PlayerPopupV2.qml
index f740e85..6e75461 100644
--- a/quickshell/bar/widgets/player/PlayerPopupV2.qml
+++ b/quickshell/bar/widgets/player/PlayerPopupV2.qml
@@ -3,11 +3,16 @@ import QtQuick
import Quickshell
import QtQuick.Layouts
import QtQuick.Controls
+import Quickshell.Widgets
import Quickshell.Services.Mpris
PopupWindow {
property PlayerControllerV2 player: PlayerControllerV2;
+ readonly property string elementBackgroundColor : "#323232"
+ readonly property string elementButtonBaseColor : "#515151"
+ readonly property string elementButtonHoverColor : "#737373"
+
id: audioPopup
anchor {
item: root
@@ -16,6 +21,7 @@ PopupWindow {
anchor.rect.y: root.height * 1.2
height: columnContainer.height + 5
width: 425
+
Rectangle {
anchors.fill: parent
color: "#919191"
@@ -26,15 +32,15 @@ PopupWindow {
model: player.mpris.players
Item {
id: root
- width: 400
- height: 80
+ width: 375
+ height: 110
required property MprisPlayer modelData
property string trackPosition: PlayerControllerV2.trackPositionFormatter(root.modelData.position)
property string trackLength: "0:00"
Rectangle {
id: background
anchors.fill: parent
- color: "black"
+ color: audioPopup.elementBackgroundColor
radius: 7
}
MouseArea {
@@ -48,21 +54,23 @@ PopupWindow {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Layout.alignment: Qt.AlignHCenter
- width:380
+ width:root.width - 15
RowLayout {
- implicitWidth: 380
- Item {
- implicitWidth: 50
- implicitHeight: 50
+ implicitWidth: root.width - 15
+ ClippingWrapperRectangle {
+ implicitWidth: 75
+ implicitHeight: 75
+ radius: 7
Image {
anchors.fill: parent
+ mipmap: true
source: root.modelData.trackArtUrl
}
}
ColumnLayout {
spacing: 2
ScrollView {
- implicitWidth: 230
+ implicitWidth: 180
height: parent.height
Text {
@@ -75,7 +83,7 @@ PopupWindow {
Text {
text: root.modelData.trackArtist
color: "white"
- font.pointSize: 6
+ font.pointSize: 8
antialiasing: true
}
}
@@ -84,28 +92,41 @@ PopupWindow {
Layout.fillWidth: true
}
RowLayout {
- Layout.alignment: Qt.AlignRight
+ Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+ // Layout.
spacing: 0
// buttons
Item {
- width: 30
- height: 25
- Rectangle {
- id: gobackButton
- width: 30
- height: 25
- topLeftRadius: 7
- bottomLeftRadius: 7
- color: "white"
+ implicitWidth: 30
+ implicitHeight: 25
+ Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+ Item {
+ Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+ Rectangle {
+ id: gobackButton
+ width: 30
+ height: 25
+ topLeftRadius: 7
+ bottomLeftRadius: 7
+ color: audioPopup.elementButtonBaseColor
+ }
+ IconImage {
+ Layout.alignment: Qt.AlignCenter
+ implicitSize: 25
+ source: "root:/assets/media_player/skip_previous.svg"
+ }
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: event => {
- gobackButton.color = "grey"
+ gobackButton.color = audioPopup.elementButtonHoverColor
}
onExited: event => {
- gobackButton.color = "white"
+ gobackButton.color = audioPopup.elementButtonBaseColor
+ }
+ onClicked: event => {
+ root.modelData.previous();
}
}
}
@@ -113,6 +134,7 @@ PopupWindow {
width: 30
height: 25
Item {
+ Layout.alignment: Qt.AlignCenter
width: 30
height: 25
Rectangle {
@@ -121,7 +143,13 @@ PopupWindow {
height: 25
// topLeftRadius: 7
// bottomLeftRadius: 7
- color: "white"
+ color: audioPopup.elementButtonBaseColor
+ }
+ IconImage {
+ Layout.alignment: Qt.AlignCenter
+ anchors.centerIn: parent
+ implicitSize: 25
+ source: root.modelData.isPlaying ? "root:/assets/media_player/pausebutton.svg" : "root:/assets/media_player/playbutton.svg"
}
}
MouseArea {
@@ -129,10 +157,10 @@ PopupWindow {
anchors.fill: parent
hoverEnabled: true
onEntered: event => {
- pauseButton.color = "grey"
+ pauseButton.color = audioPopup.elementButtonHoverColor
}
onExited: event => {
- pauseButton.color = "white"
+ pauseButton.color = audioPopup.elementButtonBaseColor
}
onClicked: event => {
root.modelData.togglePlaying();
@@ -142,22 +170,33 @@ PopupWindow {
Item {
width: 30
height: 25
- Rectangle {
- id: gonextButton
- width: 30
- height: 25
- topRightRadius: 7
- bottomRightRadius: 7
- color: "white"
+ Item {
+ Layout.alignment: Qt.AlignCenter
+ Rectangle {
+ id: gonextButton
+ width: 30
+ height: 25
+ topRightRadius: 7
+ bottomRightRadius: 7
+ color: audioPopup.elementButtonBaseColor
+ }
+ IconImage {
+ Layout.alignment: Qt.AlignCenter
+ implicitSize: 25
+ source: "root:/assets/media_player/skip_next.svg"
+ }
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: event => {
- gonextButton.color = "grey"
+ gonextButton.color = audioPopup.elementButtonHoverColor
}
onExited: event => {
- gonextButton.color = "white"
+ gonextButton.color = audioPopup.elementButtonBaseColor
+ }
+ onClicked: event => {
+ root.modelData.next();
}
}
}
@@ -170,15 +209,20 @@ PopupWindow {
from: 0
value: root.modelData.position
to: root.modelData.length
+ property double lastPosition;
+ property bool debounceValue: false;
onMoved: event => {
- root.modelData.position = slider.value
- audioPopup.player.update(); // force values to update // causing ui to update with it
+ debounceValue = true; // there is insane lag if we put the move logic here, so its better to trigger a time with the logic instead
}
Timer {
- running: root.modelData.playbackState == MprisPlaybackState.Playing
- interval: 500
+ running: slider.debounceValue
+ interval: 250
repeat: true
- onTriggered: slider.value = root.modelData.position
+ onTriggered: {
+ root.modelData.position = slider.value
+ audioPopup.player.update(); // force values to update // causing ui to update with it
+ slider.debounceValue = false;
+ }
}
}
Text {
@@ -190,12 +234,17 @@ PopupWindow {
}
}
Timer {
- running: root.modelData.isPlaying
- interval: 1000
+ id: updateTimer
+ property bool tempOneshot: false;
+ running: root.modelData.isPlaying || (root.modelData.position != slider.lastPosition)
+ interval: 750
repeat: true
onTriggered: {
trackPosition = PlayerControllerV2.trackPositionFormatter(root.modelData.position)
trackLength = PlayerControllerV2.trackPositionFormatter(root.modelData.length)
+ updateTimer.tempOneshot = false;
+ slider.lastPosition = slider.value
+ slider.value = root.modelData.position
}
}
}