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 { Text {
font.family: Styling.lucide.font.family font.family: Styling.lucide.font.family
font.pixelSize: 16 font.pixelSize: 16
color: Styling.theme.basecontent color: Styling.theme.basecontent
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {

19
components/MprisController.qml
View file

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

4
components/MprisPlayerSelector.qml
View file

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

4
components/StyledButton.qml
View file

@ -7,7 +7,7 @@ Button {
property alias border: rectangle.border property alias border: rectangle.border
property alias radius: rectangle.radius property alias radius: rectangle.radius
font.pixelSize: 14 font.pixelSize: Styling.typography.textSize.base
verticalPadding: 6 verticalPadding: 6
horizontalPadding: 8 horizontalPadding: 8
@ -33,6 +33,6 @@ Button {
background: Rectangle { background: Rectangle {
id: rectangle id: rectangle
color: root.palette.button 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.family: Styling.lucide.font.family
font.pixelSize: 16 font.pixelSize: 16
radius: 8 radius: Styling.theme.radiusField
padding: 8 padding: 8
HoverHandler { HoverHandler {

2
components/StyledLabel.qml
View file

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

4
components/StyledProgressBar.qml
View file

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

4
components/StyledSlider.qml
View file

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

4
components/StyledSwitch.qml
View file

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

4
components/StyledToolTip.qml
View file

@ -13,9 +13,9 @@ ToolTip {
} }
background: Rectangle { background: Rectangle {
radius: 8 radius: Styling.theme.radiusBox
color: Styling.theme.base100 color: Styling.theme.base100
border.color: Styling.theme.base200 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 import Quickshell.Widgets
WrapperRectangle { WrapperRectangle {
radius: 8 radius: Styling.theme.radiusBox
color: Styling.theme.base100 color: Styling.theme.base100
Behavior on color { Behavior on color {
ColorAnimation { 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 Animations animations: Animations {}
readonly property Typography typography: Typography {} readonly property Typography typography: Typography {}
readonly property Layout layout: Layout {}
readonly property var theme: Theme.palette readonly property var theme: Theme.palette
readonly property Lucide lucide: Lucide {} readonly property Lucide lucide: Lucide {}
@ -33,6 +34,16 @@ Singleton {
readonly property int xl: 24 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 { component Lucide: Item {
readonly property alias font: loader.font readonly property alias font: loader.font

5
config/Theme.qml
View file

@ -86,6 +86,11 @@ Singleton {
property color warningcontent: "#793205" property color warningcontent: "#793205"
property color error: "#ff627d" property color error: "#ff627d"
property color errorcontent: "#4d0218" 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.left: true
anchors.right: true anchors.right: true
implicitHeight: Dimensions.bar.height implicitHeight: 50
color: 'transparent' color: 'transparent'
WlrLayershell.layer: WlrLayer.Top WlrLayershell.layer: WlrLayer.Top
@ -24,20 +24,20 @@ PanelWindow {
Item { Item {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Dimensions.bar.horizontalMargins anchors.leftMargin: 8
anchors.rightMargin: Dimensions.bar.horizontalMargins anchors.rightMargin: 8
anchors.topMargin: Dimensions.bar.verticalMargins anchors.topMargin: 4
anchors.bottomMargin: Dimensions.bar.verticalMargins anchors.bottomMargin: 4
Rectangle { Rectangle {
id: background id: background
anchors.fill: parent anchors.fill: parent
color: Styling.theme.base100 color: Styling.theme.base100
radius: Dimensions.radius radius: Styling.theme.radiusBox
border { border {
color: Styling.theme.base200 color: Styling.theme.base200
width: Dimensions.bar.border width: Styling.theme.border
pixelAligned: true pixelAligned: true
} }
} }
@ -48,11 +48,11 @@ PanelWindow {
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Dimensions.bar.horizontalPadding anchors.leftMargin: 8
anchors.topMargin: Dimensions.bar.verticalPadding anchors.topMargin: 4
anchors.bottomMargin: Dimensions.bar.verticalPadding anchors.bottomMargin: 4
spacing: Dimensions.bar.spacing spacing: Styling.layout.spacing.base
SystemLogo { SystemLogo {
implicitSize: 22 implicitSize: 22
@ -69,10 +69,10 @@ PanelWindow {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.topMargin: Dimensions.bar.verticalPadding anchors.topMargin: 4
anchors.bottomMargin: Dimensions.bar.verticalPadding anchors.bottomMargin: 4
spacing: Dimensions.bar.spacing spacing: Styling.layout.spacing.base
Mpris {} Mpris {}
} }
@ -83,11 +83,11 @@ PanelWindow {
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.rightMargin: Dimensions.bar.horizontalPadding anchors.rightMargin: 8
anchors.topMargin: Dimensions.bar.verticalPadding anchors.topMargin: 4
anchors.bottomMargin: Dimensions.bar.verticalPadding anchors.bottomMargin: 4
spacing: Dimensions.bar.spacing spacing: Styling.layout.spacing.base
Pywal {} Pywal {}

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

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

5
modules/powermenu/PowerMenu.qml
View file

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