Refactor widgets in the UI: replace transparent colors with items, adjust layout margins and spacing for cleaner design
All checks were successful
PikaOS Package Build & Release (amd64-v3) / build (push) Successful in 48s

This commit is contained in:
ferreo 2024-11-23 00:26:20 +00:00
parent 4f5a25698c
commit 8f936e55bc
12 changed files with 21 additions and 35 deletions

View File

@ -1 +1 @@
2
1

View File

@ -1,4 +1,4 @@
pikabar (1.0.0-101pika15) pika; urgency=medium
pikabar (1.0.0-101pika16) pika; urgency=medium
* Less of a chonker

View File

@ -93,7 +93,7 @@ PanelWindow {
top: parent.top
bottom: parent.bottom
}
spacing: 10
spacing: 0
Widgets.Stats {
updateInterval: sysInfoInterval

View File

@ -7,7 +7,6 @@ import "root:/"
BarWidget {
id: wrapper
color: "transparent"
property int maxWidth: 100
Layout.fillWidth: true

View File

@ -1,6 +1,6 @@
import QtQuick
Rectangle {
Item {
id: root
property real padding: 6
// all items placed inside the BarWidget will go to the content item

View File

@ -5,11 +5,9 @@ import "root:/"
BarWidget {
id: clockWidget
color: "transparent"
Layout.minimumWidth: clockLayout.implicitWidth + 20
Layout.minimumWidth: clockLayout.implicitWidth + 10
Layout.minimumHeight: clockLayout.implicitHeight
widgetAnchors.margins: 10
radius: 25
property bool calendarOpen: false
@ -17,7 +15,7 @@ BarWidget {
id: background
anchors.margins: 0
anchors.centerIn: parent
width: clockLayout.implicitWidth + 20
width: clockLayout.implicitWidth + 10
height: 30
color: "#40ffffff"
radius: 0

View File

@ -9,7 +9,6 @@ import "root:/"
BarWidget {
id: root
property int maxWidth: 100
color: "transparent"
implicitHeight: 30
implicitWidth: mainRect.implicitWidth
width: mainRect.implicitWidth
@ -44,7 +43,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) * 30 + 25;
const newHeight = visualizerRepeater.itemAt(i).height = ((data[i] / 1500) * 30)+ 20;
}
} catch (e) {
console.log("Failed to parse cava output:", e);
@ -77,7 +76,7 @@ BarWidget {
}
}
Rectangle {
Item {
id: mainRect
anchors {
fill: parent
@ -85,26 +84,22 @@ BarWidget {
rightMargin: 8
}
implicitWidth: artContainer.width + titleContainer.width + 48
color: "transparent"
radius: 8
visible: root.player?.playbackState === MprisPlaybackState.Playing || root.player?.playbackState === MprisPlaybackState.Paused
Rectangle {
Item {
id: artContainer
width: 30
height: 30
anchors.left: parent.left
anchors.leftMargin: 32
anchors.verticalCenter: parent.verticalCenter
color: "transparent"
radius: parent.radius
ClippingWrapperRectangle {
anchors.fill: parent
anchors.topMargin: 2
anchors.rightMargin: 2
color: "transparent"
radius: parent.radius
radius: 8
resizeChild: true
border.color: "#9900246b"
border.width: 2
@ -122,11 +117,12 @@ BarWidget {
color: "black"
opacity: 0.3
visible: mouseArea.containsMouse
radius: parent.radius
radius: 8
}
Text {
anchors.centerIn: parent
anchors.verticalCenterOffset: 2
text: root.player?.playbackState === MprisPlaybackState.Playing ? "pause" : "play_arrow"
font.family: Globals.commonStyles.iconFontFamily
font.pixelSize: Globals.commonStyles.iconFontSizeSmall

View File

@ -18,7 +18,6 @@ Loader {
BarWidget {
id: widget
anchors.fill: parent
color: "transparent"
RowLayout {
anchors.fill: parent

View File

@ -5,9 +5,9 @@ import QtQuick.Layouts
import QtQuick.Controls
import "root:/"
BarWidget {
Item {
id: root
color: "transparent"
//color: "transparent"
implicitHeight: 30
implicitWidth: mainRect.width
@ -34,12 +34,10 @@ BarWidget {
}
}
Rectangle {
Item {
id: mainRect
height: parent.height
width: layout.width
color: "transparent"
radius: 8
RowLayout {
id: layout

View File

@ -8,20 +8,21 @@ import "root:/"
BarWidget {
id: root
color: "transparent"
// This removes BarWidget's implicit padding so the mouse areas of
// each tray item cover as much area as possible.
widgetAnchors.margins: 0
widgetAnchors.leftMargin: 3
widgetAnchors.rightMargin: 3
widgetAnchors.leftMargin: 5
widgetAnchors.rightMargin: 0
height: 30
implicitHeight: 30
implicitWidth: trayLayout.implicitWidth + 5
RowLayout {
id: trayLayout
anchors.fill: parent
anchors.bottomMargin: 0
spacing: 10
spacing: 5
Repeater {
model: SystemTray.items
@ -63,7 +64,6 @@ BarWidget {
source: item && item.icon ? item.icon : ""
visible: status === Image.Ready
implicitSize: 20
smooth: true
}
BarTooltip {
relativeItem: delegate.containsMouse ? delegate : null

View File

@ -6,7 +6,6 @@ import "root:/"
BarWidget {
id: root
color: "transparent"
implicitHeight: 30
implicitWidth: mainRect.width
@ -99,12 +98,10 @@ BarWidget {
xhr.send();
}
Rectangle {
Item {
id: mainRect
height: parent.height
width: layout.width + 10
color: "transparent"
radius: 8
MouseArea {
id: mouseArea

View File

@ -7,7 +7,6 @@ import "root:/"
BarWidget {
id: root
color: "transparent"
Layout.alignment: Qt.AlignLeft
property int workspaces: 10
Layout.fillHeight: true