wm-packages/pikabar
2
0
Fork 0
generated from wm-packages/pika-hyprland-settings
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Various fixes for various layout issues, make bar less thicc

Browse Source
This commit is contained in:
ferreo 2024-11-22 23:16:04 +00:00
parent b6e5bd54f8
commit afcb62dbb4
10 changed files with 158 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pikabar/usr/share/pikabar/CommonStyles.qml
View File

@ -11,7 +11,10 @@ QtObject {
property int fontWeight: 500
property int tooltipFontSize: 14
property int textFontSize: 16
property int smallTextFontSize: 12
property int iconFontSize: 16
property int iconFontSizeLarge: 20
property int textFontSizeMedium: 14
property int textFontSizeSmall: 12
property int smallTextFontSize: 10
property int iconFontSize: 18
property int iconFontSizeSmall: 14
property int iconFontSizeMedium: 16
}

91
pikabar/usr/share/pikabar/Topbar.qml
View File

@ -1,10 +1,11 @@
import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Widgets
import "widgets" as Widgets
PanelWindow {
id: panel
property var weatherConfig: ({})
property string sysInfoInterval: "2s"
property int workspaces: 10
@ -15,82 +16,96 @@ PanelWindow {
right: true
}
height: 46
width: 500
height: 30
color: "transparent"
Rectangle {
anchors.leftMargin: 10
anchors.rightMargin: 10
anchors.topMargin: 5
anchors.fill: parent
color: "#141418"
radius: 25
ShaderEffect {
id: shaderEffect
anchors.fill: parent
property color baseColor: "#191823"
property color transparent: Qt.rgba(0, 0, 0, 0)
property real rectWidth: parent.width
property real rectHeight: parent.height
property real cornerRadius: 25.0
property real rectWidth: panel.width
property real rectHeight: panel.height
property real cornerRadius: 0
property real time: 0.0
fragmentShader: "gradient.frag.qsb"
}
RowLayout {
anchors.fill: parent
spacing: 10
width: parent.width
height: parent.height
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
Item {
Layout.fillWidth: true
Layout.preferredWidth: panel.width / 3
Layout.maximumWidth: panel.width / 3
Layout.fillHeight: true
RowLayout {
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
spacing: 10
Widgets.Workspaces {
Layout.fillHeight: true
id: workspacesWidget
workspaces: workspaces
}
Widgets.NowPlaying {
Layout.fillHeight: true
}
}
}
Widgets.ActiveWindow {
Layout.fillHeight: true
Widgets.NowPlaying {
maxWidth: panel.width / 3 - workspacesWidget.implicitWidth - 26
}
}
}
Item {
Layout.fillWidth: true
Layout.preferredWidth: panel.width / 3
Layout.maximumWidth: panel.width / 3
Layout.fillHeight: true
RowLayout {
spacing: 10
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
Widgets.Stats {
anchors.centerIn: parent
width: parent.width
Widgets.ActiveWindow {
Layout.fillWidth: true
maxWidth: panel.width / 3
Layout.maximumWidth: parent.width
}
}
}
Item {
Layout.fillWidth: true
Layout.preferredWidth: panel.width / 3
Layout.maximumWidth: panel.width / 3
Layout.fillHeight: true
RowLayout {
anchors {
right: parent.right
top: parent.top
bottom: parent.bottom
}
spacing: 10
Widgets.Stats {
updateInterval: sysInfoInterval
}
Widgets.Weather {
Layout.fillHeight: true
isAmerican: weatherConfig.isamerican ?? false
city: weatherConfig.city ?? "London"
updateInterval: weatherConfig.weatherupdateinterval ?? 300000
}
Widgets.Power {
Layout.fillHeight: true
}
Widgets.SystemTray {
Layout.fillHeight: true
}
Widgets.Clock {
Layout.fillHeight: true
}
Widgets.Power {}
Widgets.SystemTray {}
Widgets.Clock {}
}
}
}

39
pikabar/usr/share/pikabar/widgets/ActiveWindow.qml
View File

@ -5,8 +5,11 @@ import Quickshell.Wayland
import Quickshell.Widgets
import "root:/"
Row {
spacing: 10
BarWidget {
id: wrapper
color: "transparent"
property int maxWidth: 100
Layout.fillWidth: true
function getIcon() {
var icon = Quickshell.iconPath(ToplevelManager.activeToplevel.appId.toLowerCase(), true);
@ -23,24 +26,40 @@ Row {
return icon;
}
RowLayout {
width: parent.width
height: parent.height
spacing: 4
Item {
Layout.fillWidth: true
Layout.preferredWidth: parent.width / 2
}
IconImage {
height: 42
Layout.fillHeight: true
implicitWidth: parent.height * 0.6
id: icon
implicitHeight: 20
implicitWidth: 20
source: ToplevelManager.activeToplevel ? getIcon() : ""
}
Text {
id: text
height: 42
Layout.fillWidth: false
Layout.maximumWidth: wrapper.maxWidth - icon.implicitWidth - 16
horizontalAlignment: Text.AlignLeft
text: ToplevelManager.activeToplevel?.title ?? ""
color: Globals.commonStyles.textColor
font.pointSize: Globals.commonStyles.smallTextFontSize
font.pointSize: Globals.commonStyles.textFontSizeSmall
font.family: Globals.commonStyles.fontFamily
font.weight: Globals.commonStyles.fontWeight
elide: Text.ElideRight
width: Math.min(implicitWidth, 200)
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
maximumLineCount: 1
}
Item {
Layout.fillWidth: true
Layout.preferredWidth: parent.width / 2
}
}
}

26
pikabar/usr/share/pikabar/widgets/Clock.qml
View File

@ -6,20 +6,21 @@ import "root:/"
BarWidget {
id: clockWidget
color: "transparent"
Layout.minimumWidth: clockLayout.implicitWidth + 80
Layout.alignment: Qt.AlignRight
Layout.fillHeight: true
Layout.minimumWidth: clockLayout.implicitWidth + 20
Layout.minimumHeight: clockLayout.implicitHeight
widgetAnchors.margins: 10
radius: 25
widgetAnchors.margins: 0
property bool calendarOpen: false
Rectangle {
id: background
anchors.fill: parent
anchors.margins: 0
anchors.centerIn: parent
width: clockLayout.implicitWidth + 20
height: 30
color: "#40ffffff"
radius: 25
radius: 0
opacity: mouseArea.containsMouse ? 0.2 : 0
Behavior on opacity {
NumberAnimation {
@ -30,18 +31,19 @@ BarWidget {
Column {
id: clockLayout
anchors.centerIn: parent
rightPadding: 0
spacing: 2
anchors.horizontalCenter: parent.right
anchors.verticalCenter: parent.verticalCenter
rightPadding: 6
spacing: 0
Text {
id: timeText
anchors.right: parent.right
anchors.right: parent.horizontalCenter
text: {
let now = Globals.date;
return now.toLocaleString(Qt.locale(), "HH:mm");
}
font.pixelSize: Globals.commonStyles.textFontSize
font.pixelSize: Globals.commonStyles.textFontSizeMedium
font.family: Globals.commonStyles.fontFamily
font.weight: Globals.commonStyles.fontWeight
color: Globals.commonStyles.textColor
@ -50,7 +52,7 @@ BarWidget {
Text {
id: dateText
anchors.right: parent.right
anchors.right: parent.horizontalCenter
text: {
let now = Globals.date;
let dayName = now.toLocaleDateString(Qt.locale(), "ddd");

41
pikabar/usr/share/pikabar/widgets/NowPlaying.qml
View File

@ -8,9 +8,13 @@ import "root:/"
BarWidget {
id: root
property int maxWidth: 100
color: "transparent"
implicitHeight: 42
implicitWidth: childrenRect.width
implicitHeight: 30
implicitWidth: mainRect.implicitWidth
width: mainRect.implicitWidth
height: 30
property MprisPlayer player: Mpris.players.values[0] ?? null
onPlayerChanged: updateProcessState()
@ -40,7 +44,7 @@ BarWidget {
try {
const data = JSON.parse(line);
for (let i = 0; i < data.length && i < visualizerRepeater.count; i++) {
const newHeight = visualizerRepeater.itemAt(i).height = (data[i] / 1500) * 42 + 25;
const newHeight = visualizerRepeater.itemAt(i).height = (data[i] / 1500) * 30 + 25;
}
} catch (e) {
console.log("Failed to parse cava output:", e);
@ -52,9 +56,9 @@ BarWidget {
property double measuredWidth: {
if (!root.player)
return 0;
let titleWidth = Math.min(titleText.width, 200);
let artistWidth = Math.min(artistText.width, 200);
return ((Math.max(titleWidth, artistWidth) / Screen.devicePixelRatio) + artContainer.width) * Screen.devicePixelRatio;
let titleWidth = titleText.width
let artistWidth = artistText.width
return ((Math.max(titleWidth, artistWidth) / Screen.devicePixelRatio) + artContainer.width + 3) * Screen.devicePixelRatio;
}
Repeater {
@ -80,31 +84,36 @@ BarWidget {
leftMargin: 8
rightMargin: 8
}
implicitWidth: artContainer.width + titleContainer.width + 48
color: "transparent"
radius: 8
visible: root.player?.playbackState === MprisPlaybackState.Playing || root.player?.playbackState === MprisPlaybackState.Paused
Rectangle {
id: artContainer
width: 40
height: 40
width: 30
height: 30
anchors.left: parent.left
anchors.leftMargin: 32
anchors.verticalCenter: parent.verticalCenter
color: "transparent"
radius: parent.radius
ClippingRectangle {
ClippingWrapperRectangle {
anchors.fill: parent
anchors.topMargin: 2
anchors.rightMargin: 2
color: "transparent"
radius: parent.radius
resizeChild: true
border.color: "#9900246b"
border.width: 2
IconImage {
child: Image {
id: artImage
anchors.fill: parent
source: root.player?.trackArtUrl ?? ""
fillMode: Image.PreserveAspectCrop
antialiasing: true
}
}
@ -120,7 +129,7 @@ BarWidget {
anchors.centerIn: parent
text: root.player?.playbackState === MprisPlaybackState.Playing ? "pause" : "play_arrow"
font.family: Globals.commonStyles.iconFontFamily
font.pixelSize: Globals.commonStyles.iconFontSizeLarge
font.pixelSize: Globals.commonStyles.iconFontSizeSmall
color: Globals.commonStyles.textColor
opacity: mouseArea.containsMouse ? 1.0 : 0.0
Behavior on opacity {
@ -145,11 +154,10 @@ BarWidget {
anchors.right: parent.right
anchors.leftMargin: 16
anchors.rightMargin: 12
height: 42
height: 30
Text {
id: titleText
width: Math.min(implicitWidth, 200)
anchors.left: parent.left
anchors.bottom: parent.verticalCenter
anchors.bottomMargin: 4
@ -157,13 +165,13 @@ BarWidget {
elide: Text.ElideRight
color: Globals.commonStyles.textColor
font.family: Globals.commonStyles.fontFamily
font.pixelSize: Globals.commonStyles.textFontSize
font.pixelSize: Globals.commonStyles.textFontSizeMedium
font.weight: Globals.commonStyles.fontWeight
width: Math.min(implicitWidth, root.maxWidth - artContainer.width - 32)
}
Text {
id: artistText
width: Math.min(implicitWidth, 200)
anchors.left: parent.left
anchors.top: parent.verticalCenter
anchors.topMargin: -2
@ -173,6 +181,7 @@ BarWidget {
font.family: Globals.commonStyles.fontFamily
font.pixelSize: Globals.commonStyles.smallTextFontSize
font.weight: Globals.commonStyles.fontWeight
width: Math.min(implicitWidth, root.maxWidth - artContainer.width - 32)
}
}
}

4
pikabar/usr/share/pikabar/widgets/Power.qml
View File

@ -22,9 +22,10 @@ Loader {
RowLayout {
anchors.fill: parent
spacing: 5
spacing: 3
Text {
Layout.alignment: Qt.AlignVCenter
font.family: Globals.commonStyles.iconFontFamily
font.pixelSize: Globals.commonStyles.iconFontSize
color: Globals.commonStyles.textColor
@ -45,6 +46,7 @@ Loader {
}
Text {
Layout.alignment: Qt.AlignVCenter
font.family: Globals.commonStyles.fontFamily
font.weight: Globals.commonStyles.fontWeight
font.pixelSize: Globals.commonStyles.textFontSize

15
pikabar/usr/share/pikabar/widgets/Stats.qml
View File

@ -8,7 +8,7 @@ import "root:/"
BarWidget {
id: root
color: "transparent"
implicitHeight: 42
implicitHeight: 30
implicitWidth: mainRect.width
property string updateInterval: "2s"
@ -44,7 +44,8 @@ BarWidget {
RowLayout {
id: layout
anchors.centerIn: parent
spacing: 20
anchors.verticalCenterOffset: 1
spacing: 10
// CPU Usage Component
Item {
@ -61,11 +62,13 @@ BarWidget {
RowLayout {
id: cpuUsageLayout
spacing: 5
spacing: 3
Text {
font.family: Globals.commonStyles.iconFontFamily
font.pixelSize: Globals.commonStyles.iconFontSize
text: "developer_board"
verticalAlignment: Text.AlignVCenter
color: Globals.commonStyles.textColor
}
@ -109,11 +112,12 @@ BarWidget {
RowLayout {
id: cpuTempLayout
spacing: 5
spacing: 3
Text {
font.family: Globals.commonStyles.iconFontFamily
font.pixelSize: Globals.commonStyles.iconFontSize
text: "thermometer"
verticalAlignment: Text.AlignVCenter
color: Globals.commonStyles.textColor
}
@ -157,12 +161,13 @@ BarWidget {
RowLayout {
id: memoryUsageLayout
spacing: 5
spacing: 3
Text {
font.family: Globals.commonStyles.iconFontFamily
font.pixelSize: Globals.commonStyles.iconFontSize
text: "memory"
color: Globals.commonStyles.textColor
verticalAlignment: Text.AlignVCenter
}
Text {

10
pikabar/usr/share/pikabar/widgets/SystemTray.qml
View File

@ -15,10 +15,12 @@ BarWidget {
widgetAnchors.margins: 0
widgetAnchors.leftMargin: 3
widgetAnchors.rightMargin: 3
height: 30
implicitHeight: 30
RowLayout {
anchors.fill: parent
anchors.bottomMargin: 4
anchors.bottomMargin: 0
spacing: 10
Repeater {
@ -43,7 +45,6 @@ BarWidget {
} else if (event.button == Qt.RightButton && item.hasMenu) {
const window = QsWindow.window;
const widgetRect = window.contentItem.mapFromItem(delegate, 0, delegate.height, delegate.width, delegate.height);
menuAnchor.anchor.rect = widgetRect;
menuAnchor.open();
}
@ -61,7 +62,7 @@ BarWidget {
anchors.verticalCenter: parent.verticalCenter
source: item && item.icon ? item.icon : ""
visible: status === Image.Ready
implicitSize: 24
implicitSize: 20
smooth: true
}
BarTooltip {
@ -81,8 +82,7 @@ BarWidget {
QsMenuAnchor {
id: menuAnchor
menu: item.menu
anchor.window: delegate.QsWindow.window
anchor.window: delegate.QsWindow.window?? null
anchor.adjustment: PopupAdjustment.Flip
}
}

11
pikabar/usr/share/pikabar/widgets/Weather.qml
View File

@ -7,7 +7,7 @@ import "root:/"
BarWidget {
id: root
color: "transparent"
implicitHeight: 42
implicitHeight: 30
implicitWidth: mainRect.width
property string city: "London"
@ -102,7 +102,7 @@ BarWidget {
Rectangle {
id: mainRect
height: parent.height
width: layout.width + 16
width: layout.width + 10
color: "transparent"
radius: 8
@ -131,20 +131,19 @@ BarWidget {
RowLayout {
id: layout
anchors.centerIn: parent
spacing: 8
anchors.verticalCenterOffset: 1
spacing: 5
Text {
id: weatherIcon
Layout.alignment: Qt.AlignVCenter
font.family: Globals.commonStyles.iconFontFamily
font.pixelSize: Globals.commonStyles.iconFontSize
font.pixelSize: Globals.commonStyles.iconFontSizeMedium
color: Globals.commonStyles.textColor
text: "rainy"
}
Text {
id: tempLabel
Layout.alignment: Qt.AlignVCenter
font.family: Globals.commonStyles.fontFamily
font.pixelSize: Globals.commonStyles.textFontSize
color: Globals.commonStyles.textColor

7
pikabar/usr/share/pikabar/widgets/Workspaces.qml
View File

@ -2,6 +2,7 @@ import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Hyprland
import Quickshell.Widgets
import "root:/"
BarWidget {
@ -15,7 +16,7 @@ BarWidget {
RowLayout {
anchors {
left: parent.left
leftMargin: 16
leftMargin: 12
verticalCenter: parent.verticalCenter
}
spacing: 0
@ -24,8 +25,8 @@ BarWidget {
model: root.workspaces
Item {
Layout.preferredWidth: 26
Layout.preferredHeight: 26
Layout.preferredWidth: 24
Layout.preferredHeight: 24
Rectangle {
id: wsRect