layout, radius and border
This commit is contained in:
parent
7de7ae19bb
commit
af396bc2c5
17 changed files with 67 additions and 65 deletions
|
|
@ -4,7 +4,6 @@ import QtQuick
|
|||
Text {
|
||||
font.family: Styling.lucide.font.family
|
||||
font.pixelSize: 16
|
||||
|
||||
color: Styling.theme.basecontent
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ RoundButton {
|
|||
|
||||
font.family: Styling.lucide.font.family
|
||||
font.pixelSize: 16
|
||||
radius: 8
|
||||
radius: Styling.theme.radiusField
|
||||
padding: 8
|
||||
|
||||
HoverHandler {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import QtQuick
|
|||
import Quickshell.Widgets
|
||||
|
||||
WrapperRectangle {
|
||||
radius: 8
|
||||
radius: Styling.theme.radiusBox
|
||||
color: Styling.theme.base100
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue