nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: revamp dash user card

Browse source
This commit is contained in:
2 * r + 2 * t 2026-04-22 23:18:52 +10:00
parent 3443b6fee3
commit a674b6836f
5 changed files with 181 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
CMakeLists.txt
View file

@ -71,3 +71,15 @@ if("shell" IN_LIST ENABLE_MODULES)
install(FILES LICENSE DESTINATION "${INSTALL_QSCONFDIR}")
endif()
if("plugin" IN_LIST ENABLE_MODULES OR "shell" IN_LIST ENABLE_MODULES)
message(STATUS "Fetching M3Shapes module")
include(FetchContent)
FetchContent_Declare(
m3shapes_external
GIT_REPOSITORY https://github.com/soramanew/m3shapes.git
GIT_TAG main
)
FetchContent_MakeAvailable(m3shapes_external)
message(STATUS "Done fetching M3Shapes module")
endif()

10
modules/dashboard/Dash.qml
View file

@ -18,8 +18,8 @@ GridLayout {
Rect {
Layout.column: 2
Layout.columnSpan: 3
Layout.preferredWidth: user.implicitWidth
Layout.preferredHeight: user.implicitHeight
Layout.preferredWidth: Tokens.sizes.dashboard.userWidth
Layout.fillHeight: true
radius: Tokens.rounding.extraLarge
@ -35,11 +35,13 @@ GridLayout {
Layout.row: 0
Layout.columnSpan: 2
Layout.preferredWidth: Tokens.sizes.dashboard.weatherWidth
Layout.fillHeight: true
Layout.preferredHeight: weather.implicitHeight
radius: Tokens.rounding.extraLarge * 1.5
SmallWeather {}
SmallWeather {
id: weather
}
}
Rect {

1
modules/dashboard/dash/SmallWeather.qml
View file

@ -9,6 +9,7 @@ Item {
anchors.centerIn: parent
implicitWidth: icon.implicitWidth + info.implicitWidth + info.anchors.leftMargin
implicitHeight: Math.max(icon.implicitHeight, info.implicitHeight) + Tokens.padding.largeIncreased
Component.onCompleted: Weather.reload()

305
modules/dashboard/dash/User.qml
View file

@ -1,4 +1,7 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Effects
import M3Shapes
import Caelestia.Config
import qs.components
import qs.components.effects
@ -7,30 +10,37 @@ import qs.components.images
import qs.services
import qs.utils
Row {
Item {
id: root
required property DrawerVisibilities visibilities
required property FileDialog facePicker
padding: Tokens.padding.large
spacing: Tokens.spacing.medium
anchors.fill: parent
anchors.margins: Tokens.padding.large
StyledClippingRect {
implicitWidth: info.implicitHeight
implicitHeight: info.implicitHeight
Item {
id: pfpContainer
radius: Tokens.rounding.extraLarge
color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: logoShape.right
anchors.topMargin: Tokens.padding.extraSmall
anchors.leftMargin: -Tokens.padding.extraLarge
implicitWidth: height
MaterialShape {
id: shape
MaterialIcon {
anchors.centerIn: parent
implicitSize: parent.height
shape: MaterialShape.Pill
color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
layer.enabled: true
text: "person"
fill: 1
grade: 200
fontStyle: Tokens.font.icon.size(Math.floor(info.implicitHeight / 2) || 1).build()
visible: pfp.status !== Image.Ready
Behavior on color {
CAnim {}
}
}
CachingImage {
@ -38,155 +48,156 @@ Row {
anchors.fill: parent
path: `${Paths.home}/.face`
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
StyledRect {
anchors.fill: parent
color: Qt.alpha(Colours.palette.m3scrim, 0.5)
opacity: parent.containsMouse ? 1 : 0
Behavior on opacity {
Anim {
duration: Tokens.anim.durations.expressiveFastSpatial
}
}
}
StyledRect {
anchors.centerIn: parent
implicitWidth: selectIcon.implicitHeight + Tokens.padding.small
implicitHeight: selectIcon.implicitHeight + Tokens.padding.small
radius: Tokens.rounding.large
color: Colours.palette.m3primary
scale: parent.containsMouse ? 1 : 0.5
opacity: parent.containsMouse ? 1 : 0
StateLayer {
color: Colours.palette.m3onPrimary
onClicked: {
root.visibilities.launcher = false;
root.facePicker.open();
}
}
MaterialIcon {
id: selectIcon
anchors.centerIn: parent
anchors.horizontalCenterOffset: -font.pointSize * 0.02
text: "frame_person"
color: Colours.palette.m3onPrimary
fontStyle: Tokens.font.icon.extraLarge
}
Behavior on scale {
Anim {
type: Anim.FastSpatial
}
}
Behavior on opacity {
Anim {
duration: Tokens.anim.durations.expressiveFastSpatial
}
}
layer.enabled: true
layer.effect: MultiEffect {
maskEnabled: true
maskSource: shape
maskThresholdMin: 0.5
maskSpreadAtMin: 1
}
}
}
Column {
id: info
MaterialShape {
id: logoShape
anchors.verticalCenter: parent.verticalCenter
spacing: Tokens.spacing.medium
x: Tokens.padding.extraSmall
implicitSize: Tokens.sizes.dashboard.logoSize + Tokens.padding.small * 2
shape: MaterialShape.Gem
color: Colours.palette.m3primaryContainer
Item {
id: line
Behavior on color {
CAnim {}
}
implicitWidth: icon.implicitWidth + text.width + text.anchors.leftMargin
implicitHeight: Math.max(icon.implicitHeight, text.implicitHeight)
Loader {
anchors.centerIn: parent
sourceComponent: SysInfo.isDefaultLogo ? caelestiaLogo : osLogo
}
}
ColouredIcon {
id: icon
Component {
id: osLogo
anchors.left: parent.left
anchors.leftMargin: (Tokens.sizes.dashboard.infoIconSize - implicitWidth) / 2
ColouredIcon {
id: icon
source: SysInfo.osLogo
implicitSize: Math.floor(Tokens.font.body.medium.pointSize * 1.34)
colour: Colours.palette.m3primary
source: SysInfo.osLogo
implicitSize: Tokens.sizes.dashboard.logoSize
colour: Colours.palette.m3onPrimaryContainer
}
}
Component {
id: caelestiaLogo
Logo {
implicitWidth: Tokens.sizes.dashboard.logoSize
implicitHeight: Tokens.sizes.dashboard.logoSize
topColour: Colours.palette.m3primary
bottomColour: Colours.palette.m3onPrimaryContainer
}
}
MaterialShape {
id: uptimeShape
anchors.bottom: parent.bottom
anchors.left: pfpContainer.right
anchors.leftMargin: -Tokens.padding.extraLargeIncreased
implicitSize: Tokens.sizes.dashboard.uptimeSize + Tokens.padding.small * 2
shape: MaterialShape.ClamShell
color: Colours.palette.m3tertiaryContainer
Behavior on color {
CAnim {}
}
MaterialIcon {
anchors.centerIn: parent
text: "clock_arrow_up"
color: Colours.palette.m3onTertiaryContainer
fontStyle: Tokens.font.icon.medium
}
}
StyledText {
anchors.left: uptimeShape.right
anchors.verticalCenter: uptimeShape.verticalCenter
anchors.leftMargin: Tokens.spacing.small
anchors.verticalCenterOffset: Math.round(fontInfo.pointSize * 0.1)
text: "up " + SysInfo.uptime.split(",").slice(0, 2).join(",") // Max 2 components
font: Tokens.font.label.medium
width: Tokens.sizes.dashboard.userWidth - x - Tokens.padding.extraLarge
elide: Text.ElideRight
}
StyledRect {
id: bubble1
anchors.left: pfpContainer.right
anchors.top: bubble2.bottom
anchors.leftMargin: Tokens.spacing.small
anchors.topMargin: -Tokens.spacing.extraSmall
implicitWidth: 10
implicitHeight: 10
radius: Tokens.rounding.full
color: Colours.palette.m3secondaryContainer
}
StyledRect {
id: bubble2
anchors.left: bubble1.right
anchors.verticalCenter: wmContainer.bottom
anchors.leftMargin: Tokens.spacing.extraSmall
implicitWidth: 15
implicitHeight: 15
radius: Tokens.rounding.full
color: Colours.palette.m3secondaryContainer
}
StyledRect {
id: wmContainer
anchors.left: bubble2.left
anchors.leftMargin: -Tokens.padding.medium
y: Tokens.padding.extraSmall
radius: Tokens.rounding.largeIncreased
color: Colours.palette.m3secondaryContainer
implicitWidth: wmLabel.implicitWidth + Tokens.padding.medium * 2
implicitHeight: wmLabel.implicitHeight + Tokens.padding.small * 2
Row {
id: wmLabel
anchors.centerIn: parent
spacing: Tokens.spacing.extraSmall
MaterialIcon {
id: wmIcon
anchors.verticalCenter: parent.verticalCenter
text: "select_window"
color: Colours.palette.m3onSecondaryContainer
fontStyle: wmText.font
}
StyledText {
id: text
id: wmText
anchors.verticalCenter: icon.verticalCenter
anchors.left: icon.right
anchors.leftMargin: icon.anchors.leftMargin
text: `: ${SysInfo.osPrettyName || SysInfo.osName}`
font: Tokens.font.body.medium
width: Tokens.sizes.dashboard.infoWidth
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: Math.round(fontInfo.pointSize * 0.1)
text: SysInfo.wm + "..."
color: Colours.palette.m3onSecondaryContainer
font: Tokens.font.body.builders.small.vaxis("slnt", -4).build()
width: Math.min(implicitWidth, Tokens.sizes.dashboard.userWidth - wmContainer.x - Tokens.padding.medium * 2 - wmIcon.implicitWidth - wmLabel.spacing - Tokens.padding.extraLarge)
elide: Text.ElideRight
}
}
InfoLine {
icon: "select_window_2"
text: SysInfo.wm
colour: Colours.palette.m3secondary
}
InfoLine {
id: uptime
icon: "timer"
text: qsTr("up %1").arg(SysInfo.uptime)
colour: Colours.palette.m3tertiary
}
}
component InfoLine: Item {
id: line
required property string icon
required property string text
required property color colour
implicitWidth: icon.implicitWidth + text.width + text.anchors.leftMargin
implicitHeight: Math.max(icon.implicitHeight, text.implicitHeight)
MaterialIcon {
id: icon
anchors.left: parent.left
anchors.leftMargin: (Tokens.sizes.dashboard.infoIconSize - implicitWidth) / 2
fill: 1
text: line.icon
color: line.colour
fontStyle: Tokens.font.icon.medium
}
StyledText {
id: text
anchors.verticalCenter: icon.verticalCenter
anchors.left: icon.right
anchors.leftMargin: icon.anchors.leftMargin
text: `: ${line.text}`
font: Tokens.font.body.medium
width: Tokens.sizes.dashboard.infoWidth
elide: Text.ElideRight
}
}
}

6
plugin/src/Caelestia/Config/tokens.hpp
View file

@ -177,8 +177,10 @@ class DashboardTokens : public ConfigObject {
CONFIG_PROPERTY(int, tabIndicatorHeight, 3)
CONFIG_PROPERTY(int, tabIndicatorSpacing, 5)
CONFIG_PROPERTY(int, infoWidth, 200)
CONFIG_PROPERTY(int, infoIconSize, 25)
CONFIG_PROPERTY(int, userWidth, 320)
CONFIG_PROPERTY(int, logoSize, 30)
CONFIG_PROPERTY(int, uptimeSize, 30)
CONFIG_PROPERTY(int, bubbleSize, 8)
CONFIG_PROPERTY(int, dateTimeWidth, 110)
CONFIG_PROPERTY(int, mediaWidth, 200)
CONFIG_PROPERTY(int, mediaProgressSweep, 180)