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 * Less of a chonker

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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