layout, radius and border

This commit is contained in:
Benjamin Palko 2025-09-06 08:45:35 -04:00
parent 7de7ae19bb
commit af396bc2c5
17 changed files with 67 additions and 65 deletions

View file

@ -4,7 +4,6 @@ import QtQuick
Text {
font.family: Styling.lucide.font.family
font.pixelSize: 16
color: Styling.theme.basecontent
Behavior on color {
ColorAnimation {

View file

@ -14,35 +14,43 @@ Loader {
active: player != null
sourceComponent: ColumnLayout {
spacing: 12
spacing: Styling.layout.spacing.xl
implicitWidth: 800
StyledText {
id: text
Layout.alignment: Qt.AlignHCenter
text: `${root.player.trackTitle} - ${root.player.trackArtist}`
font.pixelSize: Styling.typography.textSize.base
text: `${root.player.trackTitle} - ${root.player.trackArtist}`
}
RowLayout {
Layout.alignment: Qt.AlignHCenter
StyledIconButton {
id: backButton
text: Styling.lucide.icons.skipBack
onClicked: {
root.player.previous();
}
}
StyledIconButton {
id: playPauseButton
text: root.player.isPlaying ? Styling.lucide.icons.pause : Styling.lucide.icons.play
onClicked: {
root.player.isPlaying = !root.player.isPlaying;
}
}
StyledIconButton {
id: forwardButton
text: Styling.lucide.icons.skipForward
onClicked: {
root.player.next();
}
@ -51,21 +59,24 @@ Loader {
StyledText {
Layout.alignment: Qt.AlignHCenter
font.pixelSize: Styling.typography.textSize.sm
text: {
function formatTime(num) {
return Math.floor(num).toString().padStart(2, "0");
}
return `${formatTime(root.player.position / 60)}:${formatTime(root.player.position % 60)} - ${formatTime(root.player.length / 60)}:${formatTime(root.player.length % 60)}`;
}
font.pixelSize: Styling.typography.textSize.sm
}
StyledSlider {
Layout.fillWidth: true
from: 0
to: root.player.length ?? 0
value: root.player.position
implicitHeight: 6
Layout.fillWidth: true
onMoved: {
root.player.position = value;
}

View file

@ -5,7 +5,7 @@ import QtQuick
import QtQuick.Layouts
RowLayout {
spacing: 8
spacing: Styling.layout.spacing.xl
Layout.alignment: Qt.AlignHCenter
@ -21,6 +21,7 @@ RowLayout {
}
StyledText {
font.pixelSize: Styling.typography.textSize.xl
text: {
if (!Mpris.active) {
return "inactive";
@ -35,7 +36,6 @@ RowLayout {
}
return displayName;
}
font.pixelSize: 20
}
StyledIconButton {

View file

@ -7,7 +7,7 @@ Button {
property alias border: rectangle.border
property alias radius: rectangle.radius
font.pixelSize: 14
font.pixelSize: Styling.typography.textSize.base
verticalPadding: 6
horizontalPadding: 8
@ -33,6 +33,6 @@ Button {
background: Rectangle {
id: rectangle
color: root.palette.button
radius: 8
radius: Styling.theme.radiusField
}
}

View file

@ -11,7 +11,7 @@ RoundButton {
font.family: Styling.lucide.font.family
font.pixelSize: 16
radius: 8
radius: Styling.theme.radiusField
padding: 8
HoverHandler {

View file

@ -5,7 +5,7 @@ import Quickshell.Widgets
WrapperRectangle {
id: root
margin: 8
radius: 8
radius: Styling.theme.radiusBox
color: Styling.theme.base200
Behavior on color {
ColorAnimation {

View file

@ -16,7 +16,7 @@ ProgressBar {
implicitWidth: 200
implicitHeight: 6
color: Styling.theme.base100
radius: 8
radius: Styling.theme.radiusField
}
contentItem: Item {
@ -27,7 +27,7 @@ ProgressBar {
Rectangle {
width: control.visualPosition * parent.width
height: parent.height
radius: 8
radius: Styling.theme.radiusField
color: Styling.theme.primary
visible: !control.indeterminate
}

View file

@ -18,7 +18,7 @@ Slider {
implicitHeight: control.height
width: control.availableWidth
height: implicitHeight
radius: 8
radius: Styling.theme.radiusField
color: Styling.theme.base200
Rectangle {
@ -30,7 +30,7 @@ Slider {
}
height: parent.height
color: Styling.theme.primary
radius: 8
radius: Styling.theme.radiusField
}
}
handle: null

View file

@ -29,7 +29,7 @@ Switch {
implicitHeight: 24
x: control.width - width - control.rightPadding
y: parent.height / 2 - height / 2
radius: 16
radius: Styling.theme.radiusSelector
color: "transparent"
border.color: control.checked ? Styling.theme.primary : Styling.theme.basecontent
border.width: 2
@ -45,7 +45,7 @@ Switch {
}
width: parent.width / 2 - indicator.padding
height: parent.height - indicator.padding
radius: 16
radius: Styling.theme.radiusSelector
color: control.checked ? Styling.theme.primary : Styling.theme.basecontent
}
}

View file

@ -13,9 +13,9 @@ ToolTip {
}
background: Rectangle {
radius: 8
radius: Styling.theme.radiusBox
color: Styling.theme.base100
border.color: Styling.theme.base200
border.width: 2
border.width: Styling.theme.border
}
}

View file

@ -3,7 +3,7 @@ import QtQuick
import Quickshell.Widgets
WrapperRectangle {
radius: 8
radius: Styling.theme.radiusBox
color: Styling.theme.base100
Behavior on color {
ColorAnimation {