baobeld/lux-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

layout, radius and border

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/LucideIcon.qml
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 {

19
components/MprisController.qml
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;
}

4
components/MprisPlayerSelector.qml
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 {

4
components/StyledButton.qml
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
}
}

2
components/StyledIconButton.qml
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 {

2
components/StyledLabel.qml
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 {

4
components/StyledProgressBar.qml
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
}

4
components/StyledSlider.qml
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

4
components/StyledSwitch.qml
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
}
}

4
components/StyledToolTip.qml
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
}
}

2
components/StyledWrapperRectangle.qml
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 {

22
config/Dimensions.qml
View file

@ -1,22 +0,0 @@
pragma Singleton
import QtQuick
import Quickshell
Singleton {
id: root
property int radius: 8
property Bar bar: Bar {}
component Bar: QtObject {
property int spacing: 8
property int border: 2
property int height: 50
property int verticalMargins: 4
property int horizontalMargins: 8
property int verticalPadding: 2
property int horizontalPadding: 8
}
}

11
config/Styling.qml
View file

@ -8,6 +8,7 @@ Singleton {
readonly property Animations animations: Animations {}
readonly property Typography typography: Typography {}
readonly property Layout layout: Layout {}
readonly property var theme: Theme.palette
readonly property Lucide lucide: Lucide {}
@ -33,6 +34,16 @@ Singleton {
readonly property int xl: 24
}
component Layout: QtObject {
readonly property LayoutSpacing spacing: LayoutSpacing {}
}
component LayoutSpacing: QtObject {
readonly property int sm: 2
readonly property int base: 4
readonly property int lg: 8
readonly property int xl: 12
}
component Lucide: Item {
readonly property alias font: loader.font

5
config/Theme.qml
View file

@ -86,6 +86,11 @@ Singleton {
property color warningcontent: "#793205"
property color error: "#ff627d"
property color errorcontent: "#4d0218"
property int radiusSelector: 8
property int radiusField: 8
property int radiusBox: 8
property int border: 2
}
}
}

36
modules/bar/Bar.qml
View file

@ -16,7 +16,7 @@ PanelWindow {
anchors.left: true
anchors.right: true
implicitHeight: Dimensions.bar.height
implicitHeight: 50
color: 'transparent'
WlrLayershell.layer: WlrLayer.Top
@ -24,20 +24,20 @@ PanelWindow {
Item {
anchors.fill: parent
anchors.leftMargin: Dimensions.bar.horizontalMargins
anchors.rightMargin: Dimensions.bar.horizontalMargins
anchors.topMargin: Dimensions.bar.verticalMargins
anchors.bottomMargin: Dimensions.bar.verticalMargins
anchors.leftMargin: 8
anchors.rightMargin: 8
anchors.topMargin: 4
anchors.bottomMargin: 4
Rectangle {
id: background
anchors.fill: parent
color: Styling.theme.base100
radius: Dimensions.radius
radius: Styling.theme.radiusBox
border {
color: Styling.theme.base200
width: Dimensions.bar.border
width: Styling.theme.border
pixelAligned: true
}
}
@ -48,11 +48,11 @@ PanelWindow {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Dimensions.bar.horizontalPadding
anchors.topMargin: Dimensions.bar.verticalPadding
anchors.bottomMargin: Dimensions.bar.verticalPadding
anchors.leftMargin: 8
anchors.topMargin: 4
anchors.bottomMargin: 4
spacing: Dimensions.bar.spacing
spacing: Styling.layout.spacing.base
SystemLogo {
implicitSize: 22
@ -69,10 +69,10 @@ PanelWindow {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
anchors.topMargin: Dimensions.bar.verticalPadding
anchors.bottomMargin: Dimensions.bar.verticalPadding
anchors.topMargin: 4
anchors.bottomMargin: 4
spacing: Dimensions.bar.spacing
spacing: Styling.layout.spacing.base
Mpris {}
}
@ -83,11 +83,11 @@ PanelWindow {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.rightMargin: Dimensions.bar.horizontalPadding
anchors.topMargin: Dimensions.bar.verticalPadding
anchors.bottomMargin: Dimensions.bar.verticalPadding
anchors.rightMargin: 8
anchors.topMargin: 4
anchors.bottomMargin: 4
spacing: Dimensions.bar.spacing
spacing: Styling.layout.spacing.base
Pywal {}

3
modules/launcher/items/AppItem.qml
View file

@ -43,7 +43,6 @@ Item {
Layout.alignment: Qt.AlignBottom
Layout.fillWidth: true
color: root.active ? Styling.theme.primarycontent : Styling.theme.basecontent
font.pixelSize: 14
font.bold: true
}
@ -53,7 +52,7 @@ Item {
Layout.alignment: Qt.AlignTop
Layout.fillWidth: true
color: root.active ? Styling.theme.primarycontent : Styling.theme.basecontent
font.pixelSize: 10
font.pixelSize: Styling.typography.textSize.sm
elide: Text.ElideRight
}
}

5
modules/powermenu/PowerMenu.qml
View file

@ -28,7 +28,6 @@ StyledWindow {
id: rect
margin: 14
radius: 8
HyprlandFocusGrab {
active: Visibility.powermenu
@ -67,7 +66,7 @@ StyledWindow {
model: Config.powermenu.actions
spacing: 8
spacing: Styling.layout.spacing.base
implicitWidth: 220
implicitHeight: 185
@ -105,7 +104,7 @@ StyledWindow {
padding: 16
color: list.currentIndex == index ? Styling.theme.primarycontent : Styling.theme.basecontent
text: modelData.text
font.pixelSize: 18
font.pixelSize: Styling.typography.textSize.lg
font.bold: true
}
}