formatter
This commit is contained in:
Zacharias-Brohn
@@ -4,62 +4,63 @@ import QtQuick
|
||||
import QtQuick.Shapes
|
||||
|
||||
ShapePath {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
required property Wrapper wrapper
|
||||
readonly property real rounding: 8
|
||||
readonly property bool flatten: wrapper.height < rounding * 2
|
||||
readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
|
||||
readonly property bool flatten: wrapper.height < rounding * 2
|
||||
readonly property real rounding: 8
|
||||
readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
|
||||
required property Wrapper wrapper
|
||||
|
||||
strokeWidth: -1
|
||||
fillColor: DynamicColors.palette.m3surface
|
||||
fillColor: DynamicColors.palette.m3surface
|
||||
strokeWidth: -1
|
||||
|
||||
PathArc {
|
||||
relativeX: root.rounding
|
||||
relativeY: root.roundingY
|
||||
radiusX: root.rounding
|
||||
radiusY: Math.min(root.rounding, root.wrapper.height)
|
||||
}
|
||||
Behavior on fillColor {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
|
||||
PathLine {
|
||||
relativeX: 0
|
||||
relativeY: root.wrapper.height - root.roundingY * 2
|
||||
}
|
||||
PathArc {
|
||||
radiusX: root.rounding
|
||||
radiusY: Math.min(root.rounding, root.wrapper.height)
|
||||
relativeX: root.rounding
|
||||
relativeY: root.roundingY
|
||||
}
|
||||
|
||||
PathArc {
|
||||
relativeX: root.rounding
|
||||
relativeY: root.roundingY
|
||||
radiusX: root.rounding
|
||||
radiusY: Math.min(root.rounding, root.wrapper.height)
|
||||
direction: PathArc.Counterclockwise
|
||||
}
|
||||
PathLine {
|
||||
relativeX: 0
|
||||
relativeY: root.wrapper.height - root.roundingY * 2
|
||||
}
|
||||
|
||||
PathLine {
|
||||
relativeX: root.wrapper.width - root.rounding * 2
|
||||
relativeY: 0
|
||||
}
|
||||
PathArc {
|
||||
direction: PathArc.Counterclockwise
|
||||
radiusX: root.rounding
|
||||
radiusY: Math.min(root.rounding, root.wrapper.height)
|
||||
relativeX: root.rounding
|
||||
relativeY: root.roundingY
|
||||
}
|
||||
|
||||
PathArc {
|
||||
relativeX: root.rounding
|
||||
relativeY: -root.roundingY
|
||||
radiusX: root.rounding
|
||||
radiusY: Math.min(root.rounding, root.wrapper.height)
|
||||
direction: PathArc.Counterclockwise
|
||||
}
|
||||
PathLine {
|
||||
relativeX: root.wrapper.width - root.rounding * 2
|
||||
relativeY: 0
|
||||
}
|
||||
|
||||
PathLine {
|
||||
relativeX: 0
|
||||
relativeY: -(root.wrapper.height - root.roundingY * 2)
|
||||
}
|
||||
PathArc {
|
||||
direction: PathArc.Counterclockwise
|
||||
radiusX: root.rounding
|
||||
radiusY: Math.min(root.rounding, root.wrapper.height)
|
||||
relativeX: root.rounding
|
||||
relativeY: -root.roundingY
|
||||
}
|
||||
|
||||
PathArc {
|
||||
relativeX: root.rounding
|
||||
relativeY: -root.roundingY
|
||||
radiusX: root.rounding
|
||||
radiusY: Math.min(root.rounding, root.wrapper.height)
|
||||
}
|
||||
PathLine {
|
||||
relativeX: 0
|
||||
relativeY: -(root.wrapper.height - root.roundingY * 2)
|
||||
}
|
||||
|
||||
Behavior on fillColor {
|
||||
CAnim {}
|
||||
}
|
||||
PathArc {
|
||||
radiusX: root.rounding
|
||||
radiusY: Math.min(root.rounding, root.wrapper.height)
|
||||
relativeX: root.rounding
|
||||
relativeY: -root.roundingY
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,81 +8,79 @@ import qs.Config
|
||||
import qs.Components
|
||||
|
||||
Item {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
required property PersistentProperties visibilities
|
||||
readonly property real nonAnimHeight: view.implicitHeight + viewWrapper.anchors.margins * 2
|
||||
readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2
|
||||
required property PersistentProperties state
|
||||
readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2
|
||||
readonly property real nonAnimHeight: view.implicitHeight + viewWrapper.anchors.margins * 2
|
||||
required property PersistentProperties visibilities
|
||||
|
||||
implicitWidth: nonAnimWidth
|
||||
implicitHeight: nonAnimHeight
|
||||
implicitHeight: nonAnimHeight
|
||||
implicitWidth: nonAnimWidth
|
||||
|
||||
ClippingRectangle {
|
||||
id: viewWrapper
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
}
|
||||
Behavior on implicitWidth {
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
}
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
ClippingRectangle {
|
||||
id: viewWrapper
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.margins: Appearance.padding.smaller
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
color: "transparent"
|
||||
radius: 6
|
||||
|
||||
radius: 6
|
||||
color: "transparent"
|
||||
Item {
|
||||
id: view
|
||||
|
||||
Item {
|
||||
id: view
|
||||
readonly property int currentIndex: root.state.currentTab
|
||||
readonly property Item currentItem: row.children[currentIndex]
|
||||
|
||||
readonly property int currentIndex: root.state.currentTab
|
||||
readonly property Item currentItem: row.children[currentIndex]
|
||||
anchors.fill: parent
|
||||
implicitHeight: currentItem.implicitHeight
|
||||
implicitWidth: currentItem.implicitWidth
|
||||
|
||||
anchors.fill: parent
|
||||
RowLayout {
|
||||
id: row
|
||||
|
||||
implicitWidth: currentItem.implicitWidth
|
||||
implicitHeight: currentItem.implicitHeight
|
||||
Pane {
|
||||
index: 0
|
||||
|
||||
RowLayout {
|
||||
id: row
|
||||
|
||||
Pane {
|
||||
index: 0
|
||||
sourceComponent: Dash {
|
||||
state: root.state
|
||||
sourceComponent: Dash {
|
||||
state: root.state
|
||||
visibilities: root.visibilities
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on implicitWidth {
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
}
|
||||
component Pane: Loader {
|
||||
id: pane
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
}
|
||||
required property int index
|
||||
|
||||
component Pane: Loader {
|
||||
id: pane
|
||||
Layout.alignment: Qt.AlignTop
|
||||
|
||||
required property int index
|
||||
|
||||
Layout.alignment: Qt.AlignTop
|
||||
|
||||
Component.onCompleted: active = Qt.binding(() => {
|
||||
// Always keep current tab loaded
|
||||
if (pane.index === view.currentIndex)
|
||||
return true;
|
||||
const vx = Math.floor(view.visibleArea.xPosition * view.contentWidth);
|
||||
const vex = Math.floor(vx + view.visibleArea.widthRatio * view.contentWidth);
|
||||
return (vx >= x && vx <= x + implicitWidth) || (vex >= x && vex <= x + implicitWidth);
|
||||
})
|
||||
}
|
||||
Component.onCompleted: active = Qt.binding(() => {
|
||||
// Always keep current tab loaded
|
||||
if (pane.index === view.currentIndex)
|
||||
return true;
|
||||
const vx = Math.floor(view.visibleArea.xPosition * view.contentWidth);
|
||||
const vex = Math.floor(vx + view.visibleArea.widthRatio * view.contentWidth);
|
||||
return (vx >= x && vx <= x + implicitWidth) || (vex >= x && vex <= x + implicitWidth);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
+86
-86
@@ -9,18 +9,16 @@ import qs.Config
|
||||
import qs.Modules.Dashboard.Dash
|
||||
|
||||
GridLayout {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
required property PersistentProperties visibilities
|
||||
required property PersistentProperties state
|
||||
readonly property bool dashboardVisible: visibilities.dashboard
|
||||
|
||||
property int radius: 6
|
||||
required property PersistentProperties state
|
||||
required property PersistentProperties visibilities
|
||||
|
||||
rowSpacing: Appearance.spacing.smaller
|
||||
columnSpacing: Appearance.spacing.smaller
|
||||
|
||||
columnSpacing: Appearance.spacing.smaller
|
||||
opacity: 0
|
||||
rowSpacing: Appearance.spacing.smaller
|
||||
scale: 0.9
|
||||
|
||||
onDashboardVisibleChanged: {
|
||||
@@ -33,115 +31,117 @@ GridLayout {
|
||||
|
||||
ParallelAnimation {
|
||||
id: openAnim
|
||||
|
||||
Anim {
|
||||
target: root
|
||||
property: "opacity"
|
||||
target: root
|
||||
to: 1
|
||||
}
|
||||
|
||||
Anim {
|
||||
target: root
|
||||
property: "scale"
|
||||
target: root
|
||||
to: 1
|
||||
}
|
||||
}
|
||||
|
||||
ParallelAnimation {
|
||||
id: closeAnim
|
||||
|
||||
Anim {
|
||||
target: root
|
||||
property: "opacity"
|
||||
target: root
|
||||
to: 0
|
||||
}
|
||||
|
||||
Anim {
|
||||
target: root
|
||||
property: "scale"
|
||||
target: root
|
||||
to: 0.9
|
||||
}
|
||||
}
|
||||
|
||||
Rect {
|
||||
Layout.column: 2
|
||||
Layout.columnSpan: 3
|
||||
Layout.preferredWidth: user.implicitWidth
|
||||
Layout.preferredHeight: user.implicitHeight
|
||||
Rect {
|
||||
Layout.column: 2
|
||||
Layout.columnSpan: 3
|
||||
Layout.preferredHeight: user.implicitHeight
|
||||
Layout.preferredWidth: user.implicitWidth
|
||||
radius: root.radius
|
||||
|
||||
radius: root.radius
|
||||
User {
|
||||
id: user
|
||||
|
||||
User {
|
||||
id: user
|
||||
state: root.state
|
||||
}
|
||||
}
|
||||
|
||||
state: root.state
|
||||
}
|
||||
}
|
||||
|
||||
Rect {
|
||||
Layout.row: 0
|
||||
Layout.columnSpan: 2
|
||||
Layout.preferredWidth: Config.dashboard.sizes.weatherWidth
|
||||
Layout.fillHeight: true
|
||||
|
||||
radius: root.radius
|
||||
|
||||
Weather {}
|
||||
}
|
||||
|
||||
// Rect {
|
||||
// Layout.row: 1
|
||||
// Layout.preferredWidth: dateTime.implicitWidth
|
||||
// Layout.fillHeight: true
|
||||
//
|
||||
// radius: root.radius
|
||||
//
|
||||
// DateTime {
|
||||
// id: dateTime
|
||||
// }
|
||||
// }
|
||||
|
||||
Rect {
|
||||
Layout.row: 1
|
||||
Layout.column: 0
|
||||
Layout.columnSpan: 3
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: calendar.implicitHeight
|
||||
|
||||
radius: root.radius
|
||||
|
||||
Calendar {
|
||||
id: calendar
|
||||
|
||||
state: root.state
|
||||
}
|
||||
}
|
||||
|
||||
Rect {
|
||||
Layout.row: 1
|
||||
Layout.column: 3
|
||||
Rect {
|
||||
Layout.columnSpan: 2
|
||||
Layout.preferredWidth: resources.implicitWidth
|
||||
Layout.fillHeight: true
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredWidth: Config.dashboard.sizes.weatherWidth
|
||||
Layout.row: 0
|
||||
radius: root.radius
|
||||
|
||||
radius: root.radius
|
||||
Weather {
|
||||
}
|
||||
}
|
||||
|
||||
Resources {
|
||||
id: resources
|
||||
}
|
||||
}
|
||||
// Rect {
|
||||
// Layout.row: 1
|
||||
// Layout.preferredWidth: dateTime.implicitWidth
|
||||
// Layout.fillHeight: true
|
||||
//
|
||||
// radius: root.radius
|
||||
//
|
||||
// DateTime {
|
||||
// id: dateTime
|
||||
// }
|
||||
// }
|
||||
|
||||
Rect {
|
||||
Layout.row: 0
|
||||
Layout.column: 5
|
||||
Layout.rowSpan: 2
|
||||
Layout.preferredWidth: media.implicitWidth
|
||||
Layout.fillHeight: true
|
||||
Rect {
|
||||
Layout.column: 0
|
||||
Layout.columnSpan: 3
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: calendar.implicitHeight
|
||||
Layout.row: 1
|
||||
radius: root.radius
|
||||
|
||||
radius: root.radius
|
||||
Calendar {
|
||||
id: calendar
|
||||
|
||||
Media {
|
||||
id: media
|
||||
}
|
||||
}
|
||||
state: root.state
|
||||
}
|
||||
}
|
||||
|
||||
component Rect: CustomRect {
|
||||
color: DynamicColors.tPalette.m3surfaceContainer
|
||||
}
|
||||
Rect {
|
||||
Layout.column: 3
|
||||
Layout.columnSpan: 2
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredWidth: resources.implicitWidth
|
||||
Layout.row: 1
|
||||
radius: root.radius
|
||||
|
||||
Resources {
|
||||
id: resources
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Rect {
|
||||
Layout.column: 5
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredWidth: media.implicitWidth
|
||||
Layout.row: 0
|
||||
Layout.rowSpan: 2
|
||||
radius: root.radius
|
||||
|
||||
Media {
|
||||
id: media
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
component Rect: CustomRect {
|
||||
color: DynamicColors.tPalette.m3surfaceContainer
|
||||
}
|
||||
}
|
||||
|
||||
+184
-196
@@ -9,244 +9,232 @@ import qs.Config
|
||||
import qs.Modules
|
||||
|
||||
CustomMouseArea {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
required property var state
|
||||
readonly property int currMonth: state.currentDate.getMonth()
|
||||
readonly property int currYear: state.currentDate.getFullYear()
|
||||
required property var state
|
||||
|
||||
readonly property int currMonth: state.currentDate.getMonth()
|
||||
readonly property int currYear: state.currentDate.getFullYear()
|
||||
function onWheel(event: WheelEvent): void {
|
||||
if (event.angleDelta.y > 0)
|
||||
root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
|
||||
else if (event.angleDelta.y < 0)
|
||||
root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
|
||||
}
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
implicitHeight: inner.implicitHeight + inner.anchors.margins * 2
|
||||
acceptedButtons: Qt.MiddleButton
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
implicitHeight: inner.implicitHeight + inner.anchors.margins * 2
|
||||
|
||||
acceptedButtons: Qt.MiddleButton
|
||||
onClicked: root.state.currentDate = new Date()
|
||||
onClicked: root.state.currentDate = new Date()
|
||||
|
||||
function onWheel(event: WheelEvent): void {
|
||||
if (event.angleDelta.y > 0)
|
||||
root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
|
||||
else if (event.angleDelta.y < 0)
|
||||
root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
|
||||
}
|
||||
ColumnLayout {
|
||||
id: inner
|
||||
|
||||
ColumnLayout {
|
||||
id: inner
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.large
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.large
|
||||
spacing: Appearance.spacing.small
|
||||
RowLayout {
|
||||
id: monthNavigationRow
|
||||
|
||||
RowLayout {
|
||||
id: monthNavigationRow
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.small
|
||||
Item {
|
||||
implicitHeight: prevMonthText.implicitHeight + Appearance.padding.small * 2
|
||||
implicitWidth: implicitHeight
|
||||
|
||||
Item {
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: prevMonthText.implicitHeight + Appearance.padding.small * 2
|
||||
StateLayer {
|
||||
id: prevMonthStateLayer
|
||||
|
||||
StateLayer {
|
||||
id: prevMonthStateLayer
|
||||
function onClicked(): void {
|
||||
root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
|
||||
}
|
||||
|
||||
radius: Appearance.rounding.full
|
||||
radius: Appearance.rounding.full
|
||||
}
|
||||
|
||||
function onClicked(): void {
|
||||
root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
|
||||
}
|
||||
}
|
||||
MaterialIcon {
|
||||
id: prevMonthText
|
||||
|
||||
MaterialIcon {
|
||||
id: prevMonthText
|
||||
anchors.centerIn: parent
|
||||
color: DynamicColors.palette.m3tertiary
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
font.weight: 700
|
||||
text: "chevron_left"
|
||||
}
|
||||
}
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: "chevron_left"
|
||||
color: DynamicColors.palette.m3tertiary
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
font.weight: 700
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: monthYearDisplay.implicitHeight + Appearance.padding.small * 2
|
||||
implicitWidth: monthYearDisplay.implicitWidth + Appearance.padding.small * 2
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
StateLayer {
|
||||
function onClicked(): void {
|
||||
root.state.currentDate = new Date();
|
||||
}
|
||||
|
||||
implicitWidth: monthYearDisplay.implicitWidth + Appearance.padding.small * 2
|
||||
implicitHeight: monthYearDisplay.implicitHeight + Appearance.padding.small * 2
|
||||
anchors.fill: monthYearDisplay
|
||||
anchors.leftMargin: -Appearance.padding.normal
|
||||
anchors.margins: -Appearance.padding.small
|
||||
anchors.rightMargin: -Appearance.padding.normal
|
||||
disabled: {
|
||||
const now = new Date();
|
||||
return root.currMonth === now.getMonth() && root.currYear === now.getFullYear();
|
||||
}
|
||||
radius: Appearance.rounding.full
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
anchors.fill: monthYearDisplay
|
||||
anchors.margins: -Appearance.padding.small
|
||||
anchors.leftMargin: -Appearance.padding.normal
|
||||
anchors.rightMargin: -Appearance.padding.normal
|
||||
CustomText {
|
||||
id: monthYearDisplay
|
||||
|
||||
radius: Appearance.rounding.full
|
||||
disabled: {
|
||||
const now = new Date();
|
||||
return root.currMonth === now.getMonth() && root.currYear === now.getFullYear();
|
||||
}
|
||||
anchors.centerIn: parent
|
||||
color: DynamicColors.palette.m3primary
|
||||
font.capitalization: Font.Capitalize
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
font.weight: 500
|
||||
text: grid.title
|
||||
}
|
||||
}
|
||||
|
||||
function onClicked(): void {
|
||||
root.state.currentDate = new Date();
|
||||
}
|
||||
}
|
||||
Item {
|
||||
implicitHeight: nextMonthText.implicitHeight + Appearance.padding.small * 2
|
||||
implicitWidth: implicitHeight
|
||||
|
||||
CustomText {
|
||||
id: monthYearDisplay
|
||||
StateLayer {
|
||||
id: nextMonthStateLayer
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: grid.title
|
||||
color: DynamicColors.palette.m3primary
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
font.weight: 500
|
||||
font.capitalization: Font.Capitalize
|
||||
}
|
||||
}
|
||||
function onClicked(): void {
|
||||
root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: nextMonthText.implicitHeight + Appearance.padding.small * 2
|
||||
radius: Appearance.rounding.full
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
id: nextMonthStateLayer
|
||||
MaterialIcon {
|
||||
id: nextMonthText
|
||||
|
||||
radius: Appearance.rounding.full
|
||||
anchors.centerIn: parent
|
||||
color: DynamicColors.palette.m3tertiary
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
font.weight: 700
|
||||
text: "chevron_right"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onClicked(): void {
|
||||
root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
|
||||
}
|
||||
}
|
||||
DayOfWeekRow {
|
||||
id: daysRow
|
||||
|
||||
MaterialIcon {
|
||||
id: nextMonthText
|
||||
Layout.fillWidth: true
|
||||
locale: grid.locale
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: "chevron_right"
|
||||
color: DynamicColors.palette.m3tertiary
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
font.weight: 700
|
||||
}
|
||||
}
|
||||
}
|
||||
delegate: CustomText {
|
||||
required property var model
|
||||
|
||||
DayOfWeekRow {
|
||||
id: daysRow
|
||||
color: (model.day === 0) ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3onSurfaceVariant
|
||||
font.weight: 500
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: model.shortName
|
||||
}
|
||||
}
|
||||
|
||||
Layout.fillWidth: true
|
||||
locale: grid.locale
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: grid.implicitHeight
|
||||
|
||||
delegate: CustomText {
|
||||
required property var model
|
||||
MonthGrid {
|
||||
id: grid
|
||||
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: model.shortName
|
||||
font.weight: 500
|
||||
color: (model.day === 0) ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3onSurfaceVariant
|
||||
}
|
||||
}
|
||||
anchors.fill: parent
|
||||
locale: Qt.locale("en_SE")
|
||||
month: root.currMonth
|
||||
spacing: 3
|
||||
year: root.currYear
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: grid.implicitHeight
|
||||
delegate: Item {
|
||||
id: dayItem
|
||||
|
||||
MonthGrid {
|
||||
id: grid
|
||||
required property var model
|
||||
|
||||
month: root.currMonth
|
||||
year: root.currYear
|
||||
implicitHeight: text.implicitHeight + Appearance.padding.small * 2
|
||||
implicitWidth: implicitHeight
|
||||
|
||||
anchors.fill: parent
|
||||
CustomText {
|
||||
id: text
|
||||
|
||||
spacing: 3
|
||||
locale: Qt.locale("en_SE")
|
||||
anchors.centerIn: parent
|
||||
color: {
|
||||
const dayOfWeek = dayItem.model.date.getUTCDay();
|
||||
if (dayOfWeek === 6)
|
||||
return DynamicColors.palette.m3secondary;
|
||||
|
||||
delegate: Item {
|
||||
id: dayItem
|
||||
return DynamicColors.palette.m3onSurfaceVariant;
|
||||
}
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
font.weight: 500
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
opacity: dayItem.model.today || dayItem.model.month === grid.month ? 1 : 0.4
|
||||
text: grid.locale.toString(dayItem.model.day)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
required property var model
|
||||
CustomRect {
|
||||
id: todayIndicator
|
||||
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: text.implicitHeight + Appearance.padding.small * 2
|
||||
property Item today
|
||||
readonly property Item todayItem: grid.contentItem.children.find(c => c.model.today) ?? null
|
||||
|
||||
CustomText {
|
||||
id: text
|
||||
clip: true
|
||||
color: DynamicColors.palette.m3primary
|
||||
implicitHeight: today?.implicitHeight ?? 0
|
||||
implicitWidth: today?.implicitWidth ?? 0
|
||||
opacity: todayItem ? 1 : 0
|
||||
radius: Appearance.rounding.full
|
||||
scale: todayItem ? 1 : 0.7
|
||||
x: today ? today.x + (today.width - implicitWidth) / 2 : 0
|
||||
y: today?.y ?? 0
|
||||
|
||||
anchors.centerIn: parent
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
Behavior on scale {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
Behavior on x {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
||||
}
|
||||
}
|
||||
Behavior on y {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
||||
}
|
||||
}
|
||||
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: grid.locale.toString(dayItem.model.day)
|
||||
color: {
|
||||
const dayOfWeek = dayItem.model.date.getUTCDay();
|
||||
if (dayOfWeek === 6)
|
||||
return DynamicColors.palette.m3secondary;
|
||||
onTodayItemChanged: {
|
||||
if (todayItem)
|
||||
today = todayItem;
|
||||
}
|
||||
|
||||
return DynamicColors.palette.m3onSurfaceVariant;
|
||||
}
|
||||
opacity: dayItem.model.today || dayItem.model.month === grid.month ? 1 : 0.4
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
font.weight: 500
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
id: todayIndicator
|
||||
|
||||
readonly property Item todayItem: grid.contentItem.children.find(c => c.model.today) ?? null
|
||||
property Item today
|
||||
|
||||
onTodayItemChanged: {
|
||||
if (todayItem)
|
||||
today = todayItem;
|
||||
}
|
||||
|
||||
x: today ? today.x + (today.width - implicitWidth) / 2 : 0
|
||||
y: today?.y ?? 0
|
||||
|
||||
implicitWidth: today?.implicitWidth ?? 0
|
||||
implicitHeight: today?.implicitHeight ?? 0
|
||||
|
||||
clip: true
|
||||
radius: Appearance.rounding.full
|
||||
color: DynamicColors.palette.m3primary
|
||||
|
||||
opacity: todayItem ? 1 : 0
|
||||
scale: todayItem ? 1 : 0.7
|
||||
|
||||
Coloriser {
|
||||
x: -todayIndicator.x
|
||||
y: -todayIndicator.y
|
||||
|
||||
implicitWidth: grid.width
|
||||
implicitHeight: grid.height
|
||||
|
||||
source: grid
|
||||
sourceColor: DynamicColors.palette.m3onSurface
|
||||
colorizationColor: DynamicColors.palette.m3onPrimary
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Behavior on scale {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Behavior on x {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on y {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveDefaultSpatial
|
||||
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Coloriser {
|
||||
colorizationColor: DynamicColors.palette.m3onPrimary
|
||||
implicitHeight: grid.height
|
||||
implicitWidth: grid.width
|
||||
source: grid
|
||||
sourceColor: DynamicColors.palette.m3onSurface
|
||||
x: -todayIndicator.x
|
||||
y: -todayIndicator.y
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,44 +7,44 @@ import qs.Config
|
||||
import qs.Helpers
|
||||
|
||||
Item {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
implicitWidth: 110
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.top: parent.top
|
||||
implicitWidth: 110
|
||||
|
||||
ColumnLayout {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 0
|
||||
ColumnLayout {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 0
|
||||
|
||||
CustomText {
|
||||
Layout.bottomMargin: -(font.pointSize * 0.4)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: Time.hourStr
|
||||
color: DynamicColors.palette.m3secondary
|
||||
font.pointSize: 18
|
||||
font.family: "Rubik"
|
||||
font.weight: 600
|
||||
}
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.bottomMargin: -(font.pointSize * 0.4)
|
||||
color: DynamicColors.palette.m3secondary
|
||||
font.family: "Rubik"
|
||||
font.pointSize: 18
|
||||
font.weight: 600
|
||||
text: Time.hourStr
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "•••"
|
||||
color: DynamicColors.palette.m3primary
|
||||
font.pointSize: 18 * 0.9
|
||||
font.family: "Rubik"
|
||||
}
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
color: DynamicColors.palette.m3primary
|
||||
font.family: "Rubik"
|
||||
font.pointSize: 18 * 0.9
|
||||
text: "•••"
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.topMargin: -(font.pointSize * 0.4)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: Time.minuteStr
|
||||
color: DynamicColors.palette.m3secondary
|
||||
font.pointSize: 18
|
||||
font.family: "Rubik"
|
||||
font.weight: 600
|
||||
}
|
||||
}
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.topMargin: -(font.pointSize * 0.4)
|
||||
color: DynamicColors.palette.m3secondary
|
||||
font.family: "Rubik"
|
||||
font.pointSize: 18
|
||||
font.weight: 600
|
||||
text: Time.minuteStr
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+179
-186
@@ -9,230 +9,223 @@ import qs.Modules
|
||||
import qs.Paths
|
||||
|
||||
Item {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
property real playerProgress: {
|
||||
const active = Players.active;
|
||||
return active?.length ? active.position / active.length : 0;
|
||||
}
|
||||
property real playerProgress: {
|
||||
const active = Players.active;
|
||||
return active?.length ? active.position / active.length : 0;
|
||||
}
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
implicitWidth: Config.dashboard.sizes.mediaWidth
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.top: parent.top
|
||||
implicitWidth: Config.dashboard.sizes.mediaWidth
|
||||
|
||||
Behavior on playerProgress {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.large
|
||||
}
|
||||
}
|
||||
Behavior on playerProgress {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.large
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
running: Players.active?.isPlaying ?? false
|
||||
interval: Config.dashboard.mediaUpdateInterval
|
||||
triggeredOnStart: true
|
||||
repeat: true
|
||||
onTriggered: Players.active?.positionChanged()
|
||||
}
|
||||
Timer {
|
||||
interval: Config.dashboard.mediaUpdateInterval
|
||||
repeat: true
|
||||
running: Players.active?.isPlaying ?? false
|
||||
triggeredOnStart: true
|
||||
|
||||
ServiceRef {
|
||||
service: Audio.beatTracker
|
||||
}
|
||||
onTriggered: Players.active?.positionChanged()
|
||||
}
|
||||
|
||||
Shape {
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
ServiceRef {
|
||||
service: Audio.beatTracker
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
fillColor: "transparent"
|
||||
strokeColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
|
||||
strokeWidth: Config.dashboard.sizes.mediaProgressThickness
|
||||
capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
|
||||
Shape {
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
PathAngleArc {
|
||||
centerX: cover.x + cover.width / 2
|
||||
centerY: cover.y + cover.height / 2
|
||||
radiusX: (cover.width + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
|
||||
radiusY: (cover.height + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
|
||||
startAngle: -90 - Config.dashboard.sizes.mediaProgressSweep / 2
|
||||
sweepAngle: Config.dashboard.sizes.mediaProgressSweep
|
||||
}
|
||||
ShapePath {
|
||||
capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
|
||||
fillColor: "transparent"
|
||||
strokeColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
|
||||
strokeWidth: Config.dashboard.sizes.mediaProgressThickness
|
||||
|
||||
Behavior on strokeColor {
|
||||
CAnim {}
|
||||
}
|
||||
}
|
||||
Behavior on strokeColor {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
fillColor: "transparent"
|
||||
strokeColor: DynamicColors.palette.m3primary
|
||||
strokeWidth: Config.dashboard.sizes.mediaProgressThickness
|
||||
capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
|
||||
PathAngleArc {
|
||||
centerX: cover.x + cover.width / 2
|
||||
centerY: cover.y + cover.height / 2
|
||||
radiusX: (cover.width + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
|
||||
radiusY: (cover.height + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
|
||||
startAngle: -90 - Config.dashboard.sizes.mediaProgressSweep / 2
|
||||
sweepAngle: Config.dashboard.sizes.mediaProgressSweep
|
||||
}
|
||||
}
|
||||
|
||||
PathAngleArc {
|
||||
centerX: cover.x + cover.width / 2
|
||||
centerY: cover.y + cover.height / 2
|
||||
radiusX: (cover.width + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
|
||||
radiusY: (cover.height + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
|
||||
startAngle: -90 - Config.dashboard.sizes.mediaProgressSweep / 2
|
||||
sweepAngle: Config.dashboard.sizes.mediaProgressSweep * root.playerProgress
|
||||
}
|
||||
ShapePath {
|
||||
capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
|
||||
fillColor: "transparent"
|
||||
strokeColor: DynamicColors.palette.m3primary
|
||||
strokeWidth: Config.dashboard.sizes.mediaProgressThickness
|
||||
|
||||
Behavior on strokeColor {
|
||||
CAnim {}
|
||||
}
|
||||
}
|
||||
}
|
||||
Behavior on strokeColor {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
|
||||
CustomClippingRect {
|
||||
id: cover
|
||||
PathAngleArc {
|
||||
centerX: cover.x + cover.width / 2
|
||||
centerY: cover.y + cover.height / 2
|
||||
radiusX: (cover.width + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
|
||||
radiusY: (cover.height + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
|
||||
startAngle: -90 - Config.dashboard.sizes.mediaProgressSweep / 2
|
||||
sweepAngle: Config.dashboard.sizes.mediaProgressSweep * root.playerProgress
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.margins: Appearance.padding.large + Config.dashboard.sizes.mediaProgressThickness + Appearance.spacing.small
|
||||
CustomClippingRect {
|
||||
id: cover
|
||||
|
||||
implicitHeight: width
|
||||
color: DynamicColors.tPalette.m3surfaceContainerHigh
|
||||
radius: Infinity
|
||||
anchors.left: parent.left
|
||||
anchors.margins: Appearance.padding.large + Config.dashboard.sizes.mediaProgressThickness + Appearance.spacing.small
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
color: DynamicColors.tPalette.m3surfaceContainerHigh
|
||||
implicitHeight: width
|
||||
radius: Infinity
|
||||
|
||||
MaterialIcon {
|
||||
anchors.centerIn: parent
|
||||
MaterialIcon {
|
||||
anchors.centerIn: parent
|
||||
color: DynamicColors.palette.m3onSurfaceVariant
|
||||
font.pointSize: (parent.width * 0.4) || 1
|
||||
grade: 200
|
||||
text: "art_track"
|
||||
}
|
||||
|
||||
grade: 200
|
||||
text: "art_track"
|
||||
color: DynamicColors.palette.m3onSurfaceVariant
|
||||
font.pointSize: (parent.width * 0.4) || 1
|
||||
}
|
||||
Image {
|
||||
id: image
|
||||
|
||||
Image {
|
||||
id: image
|
||||
anchors.fill: parent
|
||||
asynchronous: true
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
source: Players.active?.trackArtUrl ?? ""
|
||||
sourceSize.height: height
|
||||
sourceSize.width: width
|
||||
}
|
||||
}
|
||||
|
||||
anchors.fill: parent
|
||||
CustomText {
|
||||
id: title
|
||||
|
||||
source: Players.active?.trackArtUrl ?? ""
|
||||
asynchronous: true
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
sourceSize.width: width
|
||||
sourceSize.height: height
|
||||
}
|
||||
}
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: cover.bottom
|
||||
anchors.topMargin: Appearance.spacing.normal
|
||||
animate: true
|
||||
color: DynamicColors.palette.m3primary
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
|
||||
width: parent.implicitWidth - Appearance.padding.large * 2
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: title
|
||||
CustomText {
|
||||
id: album
|
||||
|
||||
anchors.top: cover.bottom
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.topMargin: Appearance.spacing.normal
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: title.bottom
|
||||
anchors.topMargin: Appearance.spacing.small
|
||||
animate: true
|
||||
color: DynamicColors.palette.m3outline
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Appearance.font.size.small
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: (Players.active?.trackAlbum ?? qsTr("No media")) || qsTr("Unknown album")
|
||||
width: parent.implicitWidth - Appearance.padding.large * 2
|
||||
}
|
||||
|
||||
animate: true
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
|
||||
color: DynamicColors.palette.m3primary
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
CustomText {
|
||||
id: artist
|
||||
|
||||
width: parent.implicitWidth - Appearance.padding.large * 2
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: album.bottom
|
||||
anchors.topMargin: Appearance.spacing.small
|
||||
animate: true
|
||||
color: DynamicColors.palette.m3secondary
|
||||
elide: Text.ElideRight
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: (Players.active?.trackArtist ?? qsTr("No media")) || qsTr("Unknown artist")
|
||||
width: parent.implicitWidth - Appearance.padding.large * 2
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: album
|
||||
Row {
|
||||
id: controls
|
||||
|
||||
anchors.top: title.bottom
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.topMargin: Appearance.spacing.small
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: artist.bottom
|
||||
anchors.topMargin: Appearance.spacing.smaller
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
animate: true
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: (Players.active?.trackAlbum ?? qsTr("No media")) || qsTr("Unknown album")
|
||||
color: DynamicColors.palette.m3outline
|
||||
font.pointSize: Appearance.font.size.small
|
||||
Control {
|
||||
function onClicked(): void {
|
||||
Players.active?.previous();
|
||||
}
|
||||
|
||||
width: parent.implicitWidth - Appearance.padding.large * 2
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
canUse: Players.active?.canGoPrevious ?? false
|
||||
icon: "skip_previous"
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: artist
|
||||
Control {
|
||||
function onClicked(): void {
|
||||
Players.active?.togglePlaying();
|
||||
}
|
||||
|
||||
anchors.top: album.bottom
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.topMargin: Appearance.spacing.small
|
||||
canUse: Players.active?.canTogglePlaying ?? false
|
||||
icon: Players.active?.isPlaying ? "pause" : "play_arrow"
|
||||
}
|
||||
|
||||
animate: true
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: (Players.active?.trackArtist ?? qsTr("No media")) || qsTr("Unknown artist")
|
||||
color: DynamicColors.palette.m3secondary
|
||||
Control {
|
||||
function onClicked(): void {
|
||||
Players.active?.next();
|
||||
}
|
||||
|
||||
width: parent.implicitWidth - Appearance.padding.large * 2
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
canUse: Players.active?.canGoNext ?? false
|
||||
icon: "skip_next"
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: controls
|
||||
component Control: CustomRect {
|
||||
id: control
|
||||
|
||||
anchors.top: artist.bottom
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.topMargin: Appearance.spacing.smaller
|
||||
required property bool canUse
|
||||
required property string icon
|
||||
|
||||
spacing: Appearance.spacing.small
|
||||
function onClicked(): void {
|
||||
}
|
||||
|
||||
Control {
|
||||
icon: "skip_previous"
|
||||
canUse: Players.active?.canGoPrevious ?? false
|
||||
implicitHeight: implicitWidth
|
||||
implicitWidth: Math.max(icon.implicitHeight, icon.implicitHeight) + Appearance.padding.small
|
||||
|
||||
function onClicked(): void {
|
||||
Players.active?.previous();
|
||||
}
|
||||
}
|
||||
StateLayer {
|
||||
function onClicked(): void {
|
||||
control.onClicked();
|
||||
}
|
||||
|
||||
Control {
|
||||
icon: Players.active?.isPlaying ? "pause" : "play_arrow"
|
||||
canUse: Players.active?.canTogglePlaying ?? false
|
||||
disabled: !control.canUse
|
||||
radius: Appearance.rounding.full
|
||||
}
|
||||
|
||||
function onClicked(): void {
|
||||
Players.active?.togglePlaying();
|
||||
}
|
||||
}
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
Control {
|
||||
icon: "skip_next"
|
||||
canUse: Players.active?.canGoNext ?? false
|
||||
|
||||
function onClicked(): void {
|
||||
Players.active?.next();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component Control: CustomRect {
|
||||
id: control
|
||||
|
||||
required property string icon
|
||||
required property bool canUse
|
||||
function onClicked(): void {
|
||||
}
|
||||
|
||||
implicitWidth: Math.max(icon.implicitHeight, icon.implicitHeight) + Appearance.padding.small
|
||||
implicitHeight: implicitWidth
|
||||
|
||||
StateLayer {
|
||||
disabled: !control.canUse
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
function onClicked(): void {
|
||||
control.onClicked();
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
anchors.centerIn: parent
|
||||
anchors.verticalCenterOffset: font.pointSize * 0.05
|
||||
|
||||
animate: true
|
||||
text: control.icon
|
||||
color: control.canUse ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
|
||||
font.pointSize: Appearance.font.size.large
|
||||
}
|
||||
}
|
||||
anchors.centerIn: parent
|
||||
anchors.verticalCenterOffset: font.pointSize * 0.05
|
||||
animate: true
|
||||
color: control.canUse ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
|
||||
font.pointSize: Appearance.font.size.large
|
||||
text: control.icon
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,95 +4,90 @@ import qs.Helpers
|
||||
import qs.Config
|
||||
|
||||
Row {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.top: parent.top
|
||||
padding: Appearance.padding.large
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
padding: Appearance.padding.large
|
||||
spacing: Appearance.spacing.large
|
||||
Ref {
|
||||
service: SystemUsage
|
||||
}
|
||||
|
||||
Ref {
|
||||
service: SystemUsage
|
||||
}
|
||||
Resource {
|
||||
color: DynamicColors.palette.m3primary
|
||||
icon: "memory"
|
||||
value: SystemUsage.cpuPerc
|
||||
}
|
||||
|
||||
Resource {
|
||||
icon: "memory"
|
||||
value: SystemUsage.cpuPerc
|
||||
color: DynamicColors.palette.m3primary
|
||||
}
|
||||
Resource {
|
||||
color: DynamicColors.palette.m3secondary
|
||||
icon: "memory_alt"
|
||||
value: SystemUsage.memPerc
|
||||
}
|
||||
|
||||
Resource {
|
||||
icon: "memory_alt"
|
||||
value: SystemUsage.memPerc
|
||||
color: DynamicColors.palette.m3secondary
|
||||
}
|
||||
Resource {
|
||||
color: DynamicColors.palette.m3tertiary
|
||||
icon: "gamepad"
|
||||
value: SystemUsage.gpuPerc
|
||||
}
|
||||
|
||||
Resource {
|
||||
icon: "gamepad"
|
||||
value: SystemUsage.gpuPerc
|
||||
color: DynamicColors.palette.m3tertiary
|
||||
}
|
||||
Resource {
|
||||
color: DynamicColors.palette.m3primary
|
||||
icon: "host"
|
||||
value: SystemUsage.gpuMemUsed
|
||||
}
|
||||
|
||||
Resource {
|
||||
icon: "host"
|
||||
value: SystemUsage.gpuMemUsed
|
||||
color: DynamicColors.palette.m3primary
|
||||
}
|
||||
Resource {
|
||||
color: DynamicColors.palette.m3secondary
|
||||
icon: "hard_disk"
|
||||
value: SystemUsage.storagePerc
|
||||
}
|
||||
|
||||
Resource {
|
||||
icon: "hard_disk"
|
||||
value: SystemUsage.storagePerc
|
||||
color: DynamicColors.palette.m3secondary
|
||||
}
|
||||
component Resource: Item {
|
||||
id: res
|
||||
|
||||
component Resource: Item {
|
||||
id: res
|
||||
required property color color
|
||||
required property string icon
|
||||
required property real value
|
||||
|
||||
required property string icon
|
||||
required property real value
|
||||
required property color color
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.margins: Appearance.padding.large
|
||||
anchors.top: parent.top
|
||||
implicitWidth: icon.implicitWidth
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.margins: Appearance.padding.large
|
||||
implicitWidth: icon.implicitWidth
|
||||
Behavior on value {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.large
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: icon.top
|
||||
anchors.bottomMargin: Appearance.spacing.small
|
||||
CustomRect {
|
||||
anchors.bottom: icon.top
|
||||
anchors.bottomMargin: Appearance.spacing.small
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: parent.top
|
||||
color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
|
||||
implicitWidth: Config.dashboard.sizes.resourceProgessThickness
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
implicitWidth: Config.dashboard.sizes.resourceProgessThickness
|
||||
CustomRect {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
color: res.color
|
||||
implicitHeight: res.value * parent.height
|
||||
radius: Appearance.rounding.full
|
||||
}
|
||||
}
|
||||
|
||||
color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
|
||||
radius: Appearance.rounding.full
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
CustomRect {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
implicitHeight: res.value * parent.height
|
||||
|
||||
color: res.color
|
||||
radius: Appearance.rounding.full
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
text: res.icon
|
||||
color: res.color
|
||||
}
|
||||
|
||||
Behavior on value {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.large
|
||||
}
|
||||
}
|
||||
}
|
||||
anchors.bottom: parent.bottom
|
||||
color: res.color
|
||||
text: res.icon
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,122 +7,116 @@ import Quickshell
|
||||
import QtQuick
|
||||
|
||||
Row {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
required property PersistentProperties state
|
||||
required property PersistentProperties state
|
||||
|
||||
padding: 20
|
||||
spacing: 12
|
||||
padding: 20
|
||||
spacing: 12
|
||||
|
||||
CustomClippingRect {
|
||||
implicitWidth: info.implicitHeight
|
||||
implicitHeight: info.implicitHeight
|
||||
CustomClippingRect {
|
||||
color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
|
||||
implicitHeight: info.implicitHeight
|
||||
implicitWidth: info.implicitHeight
|
||||
radius: 8
|
||||
|
||||
radius: 8
|
||||
color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
|
||||
MaterialIcon {
|
||||
anchors.centerIn: parent
|
||||
fill: 1
|
||||
font.pointSize: Math.floor(info.implicitHeight / 2) || 1
|
||||
grade: 200
|
||||
text: "person"
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
anchors.centerIn: parent
|
||||
CachingImage {
|
||||
id: pfp
|
||||
|
||||
text: "person"
|
||||
fill: 1
|
||||
grade: 200
|
||||
font.pointSize: Math.floor(info.implicitHeight / 2) || 1
|
||||
}
|
||||
anchors.fill: parent
|
||||
path: `${Paths.home}/.face`
|
||||
}
|
||||
}
|
||||
|
||||
CachingImage {
|
||||
id: pfp
|
||||
Column {
|
||||
id: info
|
||||
|
||||
anchors.fill: parent
|
||||
path: `${Paths.home}/.face`
|
||||
}
|
||||
}
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 12
|
||||
|
||||
Column {
|
||||
id: info
|
||||
Item {
|
||||
id: line
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 12
|
||||
implicitHeight: Math.max(icon.implicitHeight, text.implicitHeight)
|
||||
implicitWidth: icon.implicitWidth + text.width + text.anchors.leftMargin
|
||||
|
||||
Item {
|
||||
id: line
|
||||
ColoredIcon {
|
||||
id: icon
|
||||
|
||||
implicitWidth: icon.implicitWidth + text.width + text.anchors.leftMargin
|
||||
implicitHeight: Math.max(icon.implicitHeight, text.implicitHeight)
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: (Config.dashboard.sizes.infoIconSize - implicitWidth) / 2
|
||||
color: DynamicColors.palette.m3primary
|
||||
implicitSize: Math.floor(13 * 1.34)
|
||||
source: SystemInfo.osLogo
|
||||
}
|
||||
|
||||
ColoredIcon {
|
||||
id: icon
|
||||
CustomText {
|
||||
id: text
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: (Config.dashboard.sizes.infoIconSize - implicitWidth) / 2
|
||||
anchors.left: icon.right
|
||||
anchors.leftMargin: icon.anchors.leftMargin
|
||||
anchors.verticalCenter: icon.verticalCenter
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: 13
|
||||
text: `: ${SystemInfo.osPrettyName || SystemInfo.osName}`
|
||||
width: Config.dashboard.sizes.infoWidth
|
||||
}
|
||||
}
|
||||
|
||||
source: SystemInfo.osLogo
|
||||
implicitSize: Math.floor(13 * 1.34)
|
||||
color: DynamicColors.palette.m3primary
|
||||
}
|
||||
InfoLine {
|
||||
colour: DynamicColors.palette.m3secondary
|
||||
icon: "select_window_2"
|
||||
text: SystemInfo.wm
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: text
|
||||
InfoLine {
|
||||
id: uptime
|
||||
|
||||
anchors.verticalCenter: icon.verticalCenter
|
||||
anchors.left: icon.right
|
||||
anchors.leftMargin: icon.anchors.leftMargin
|
||||
text: `: ${SystemInfo.osPrettyName || SystemInfo.osName}`
|
||||
font.pointSize: 13
|
||||
colour: DynamicColors.palette.m3tertiary
|
||||
icon: "timer"
|
||||
text: qsTr("up %1").arg(SystemInfo.uptime)
|
||||
}
|
||||
}
|
||||
|
||||
width: Config.dashboard.sizes.infoWidth
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
component InfoLine: Item {
|
||||
id: line
|
||||
|
||||
InfoLine {
|
||||
icon: "select_window_2"
|
||||
text: SystemInfo.wm
|
||||
colour: DynamicColors.palette.m3secondary
|
||||
}
|
||||
required property color colour
|
||||
required property string icon
|
||||
required property string text
|
||||
|
||||
InfoLine {
|
||||
id: uptime
|
||||
implicitHeight: Math.max(icon.implicitHeight, text.implicitHeight)
|
||||
implicitWidth: icon.implicitWidth + text.width + text.anchors.leftMargin
|
||||
|
||||
icon: "timer"
|
||||
text: qsTr("up %1").arg(SystemInfo.uptime)
|
||||
colour: DynamicColors.palette.m3tertiary
|
||||
}
|
||||
}
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
component InfoLine: Item {
|
||||
id: line
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: (Config.dashboard.sizes.infoIconSize - implicitWidth) / 2
|
||||
color: line.colour
|
||||
fill: 1
|
||||
font.pointSize: 13
|
||||
text: line.icon
|
||||
}
|
||||
|
||||
required property string icon
|
||||
required property string text
|
||||
required property color colour
|
||||
CustomText {
|
||||
id: text
|
||||
|
||||
implicitWidth: icon.implicitWidth + text.width + text.anchors.leftMargin
|
||||
implicitHeight: Math.max(icon.implicitHeight, text.implicitHeight)
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: (Config.dashboard.sizes.infoIconSize - implicitWidth) / 2
|
||||
|
||||
fill: 1
|
||||
text: line.icon
|
||||
color: line.colour
|
||||
font.pointSize: 13
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: text
|
||||
|
||||
anchors.verticalCenter: icon.verticalCenter
|
||||
anchors.left: icon.right
|
||||
anchors.leftMargin: icon.anchors.leftMargin
|
||||
text: `: ${line.text}`
|
||||
font.pointSize: 13
|
||||
|
||||
width: Config.dashboard.sizes.infoWidth
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
anchors.left: icon.right
|
||||
anchors.leftMargin: icon.anchors.leftMargin
|
||||
anchors.verticalCenter: icon.verticalCenter
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: 13
|
||||
text: `: ${line.text}`
|
||||
width: Config.dashboard.sizes.infoWidth
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,53 +4,47 @@ import qs.Components
|
||||
import qs.Config
|
||||
|
||||
Item {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
anchors.centerIn: parent
|
||||
anchors.centerIn: parent
|
||||
implicitWidth: icon.implicitWidth + info.implicitWidth + info.anchors.leftMargin
|
||||
|
||||
implicitWidth: icon.implicitWidth + info.implicitWidth + info.anchors.leftMargin
|
||||
Component.onCompleted: Weather.reload()
|
||||
|
||||
Component.onCompleted: Weather.reload()
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
animate: true
|
||||
color: DynamicColors.palette.m3secondary
|
||||
font.pointSize: 54
|
||||
text: Weather.icon
|
||||
}
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
Column {
|
||||
id: info
|
||||
|
||||
animate: true
|
||||
text: Weather.icon
|
||||
color: DynamicColors.palette.m3secondary
|
||||
font.pointSize: 54
|
||||
}
|
||||
|
||||
Column {
|
||||
id: info
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: icon.right
|
||||
anchors.left: icon.right
|
||||
anchors.leftMargin: Appearance.spacing.large
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 8
|
||||
|
||||
spacing: 8
|
||||
CustomText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
animate: true
|
||||
color: DynamicColors.palette.m3primary
|
||||
font.pointSize: Appearance.font.size.extraLarge
|
||||
font.weight: 500
|
||||
text: Weather.temp
|
||||
}
|
||||
|
||||
CustomText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
animate: true
|
||||
text: Weather.temp
|
||||
color: DynamicColors.palette.m3primary
|
||||
font.pointSize: Appearance.font.size.extraLarge
|
||||
font.weight: 500
|
||||
}
|
||||
|
||||
CustomText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
animate: true
|
||||
text: Weather.description
|
||||
|
||||
elide: Text.ElideRight
|
||||
width: Math.min(implicitWidth, root.parent.width - icon.implicitWidth - info.anchors.leftMargin - 24 * 2)
|
||||
}
|
||||
}
|
||||
CustomText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
animate: true
|
||||
elide: Text.ElideRight
|
||||
text: Weather.description
|
||||
width: Math.min(implicitWidth, root.parent.width - icon.implicitWidth - info.anchors.leftMargin - 24 * 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+182
-186
@@ -10,237 +10,233 @@ import QtQuick
|
||||
import QtQuick.Controls
|
||||
|
||||
Item {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
required property real nonAnimWidth
|
||||
required property PersistentProperties state
|
||||
readonly property alias count: bar.count
|
||||
readonly property alias count: bar.count
|
||||
required property real nonAnimWidth
|
||||
required property PersistentProperties state
|
||||
|
||||
implicitHeight: bar.implicitHeight + indicator.implicitHeight + indicator.anchors.topMargin + separator.implicitHeight
|
||||
implicitHeight: bar.implicitHeight + indicator.implicitHeight + indicator.anchors.topMargin + separator.implicitHeight
|
||||
|
||||
TabBar {
|
||||
id: bar
|
||||
TabBar {
|
||||
id: bar
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
background: null
|
||||
currentIndex: root.state.currentTab
|
||||
|
||||
currentIndex: root.state.currentTab
|
||||
background: null
|
||||
onCurrentIndexChanged: root.state.currentTab = currentIndex
|
||||
|
||||
onCurrentIndexChanged: root.state.currentTab = currentIndex
|
||||
Tab {
|
||||
iconName: "dashboard"
|
||||
text: qsTr("Dashboard")
|
||||
}
|
||||
|
||||
Tab {
|
||||
iconName: "dashboard"
|
||||
text: qsTr("Dashboard")
|
||||
}
|
||||
Tab {
|
||||
iconName: "queue_music"
|
||||
text: qsTr("Media")
|
||||
}
|
||||
|
||||
Tab {
|
||||
iconName: "queue_music"
|
||||
text: qsTr("Media")
|
||||
}
|
||||
Tab {
|
||||
iconName: "speed"
|
||||
text: qsTr("Performance")
|
||||
}
|
||||
|
||||
Tab {
|
||||
iconName: "speed"
|
||||
text: qsTr("Performance")
|
||||
}
|
||||
Tab {
|
||||
iconName: "cloud"
|
||||
text: qsTr("Weather")
|
||||
}
|
||||
|
||||
Tab {
|
||||
iconName: "cloud"
|
||||
text: qsTr("Weather")
|
||||
}
|
||||
// Tab {
|
||||
// iconName: "workspaces"
|
||||
// text: qsTr("Workspaces")
|
||||
// }
|
||||
}
|
||||
|
||||
// Tab {
|
||||
// iconName: "workspaces"
|
||||
// text: qsTr("Workspaces")
|
||||
// }
|
||||
}
|
||||
Item {
|
||||
id: indicator
|
||||
|
||||
Item {
|
||||
id: indicator
|
||||
anchors.top: bar.bottom
|
||||
clip: true
|
||||
implicitHeight: 40
|
||||
implicitWidth: bar.currentItem.implicitWidth
|
||||
x: {
|
||||
const tab = bar.currentItem;
|
||||
const width = (root.nonAnimWidth - bar.spacing * (bar.count - 1)) / bar.count;
|
||||
return width * tab.TabBar.index + (width - tab.implicitWidth) / 2;
|
||||
}
|
||||
|
||||
anchors.top: bar.bottom
|
||||
Behavior on implicitWidth {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
Behavior on x {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
implicitWidth: bar.currentItem.implicitWidth
|
||||
implicitHeight: 40
|
||||
CustomRect {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
color: DynamicColors.palette.m3primary
|
||||
implicitHeight: parent.implicitHeight * 2
|
||||
radius: 1000
|
||||
}
|
||||
}
|
||||
|
||||
x: {
|
||||
const tab = bar.currentItem;
|
||||
const width = (root.nonAnimWidth - bar.spacing * (bar.count - 1)) / bar.count;
|
||||
return width * tab.TabBar.index + (width - tab.implicitWidth) / 2;
|
||||
}
|
||||
CustomRect {
|
||||
id: separator
|
||||
|
||||
clip: true
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: indicator.bottom
|
||||
color: DynamicColors.palette.m3outlineVariant
|
||||
implicitHeight: 1
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
implicitHeight: parent.implicitHeight * 2
|
||||
component Tab: TabButton {
|
||||
id: tab
|
||||
|
||||
color: DynamicColors.palette.m3primary
|
||||
radius: 1000
|
||||
}
|
||||
readonly property bool current: TabBar.tabBar.currentItem === this
|
||||
required property string iconName
|
||||
|
||||
Behavior on x {
|
||||
Anim {}
|
||||
}
|
||||
background: null
|
||||
|
||||
Behavior on implicitWidth {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
contentItem: CustomMouseArea {
|
||||
id: mouse
|
||||
|
||||
CustomRect {
|
||||
id: separator
|
||||
function onWheel(event: WheelEvent): void {
|
||||
if (event.angleDelta.y < 0)
|
||||
root.state.currentTab = Math.min(root.state.currentTab + 1, bar.count - 1);
|
||||
else if (event.angleDelta.y > 0)
|
||||
root.state.currentTab = Math.max(root.state.currentTab - 1, 0);
|
||||
}
|
||||
|
||||
anchors.top: indicator.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
implicitHeight: icon.height + label.height
|
||||
implicitWidth: Math.max(icon.width, label.width)
|
||||
|
||||
implicitHeight: 1
|
||||
color: DynamicColors.palette.m3outlineVariant
|
||||
}
|
||||
onPressed: event => {
|
||||
root.state.currentTab = tab.TabBar.index;
|
||||
|
||||
component Tab: TabButton {
|
||||
id: tab
|
||||
const stateY = stateWrapper.y;
|
||||
rippleAnim.x = event.x;
|
||||
rippleAnim.y = event.y - stateY;
|
||||
|
||||
required property string iconName
|
||||
readonly property bool current: TabBar.tabBar.currentItem === this
|
||||
const dist = (ox, oy) => ox * ox + oy * oy;
|
||||
rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y + stateY), dist(event.x, stateWrapper.height - event.y), dist(width - event.x, event.y + stateY), dist(width - event.x, stateWrapper.height - event.y)));
|
||||
|
||||
background: null
|
||||
rippleAnim.restart();
|
||||
}
|
||||
|
||||
contentItem: CustomMouseArea {
|
||||
id: mouse
|
||||
SequentialAnimation {
|
||||
id: rippleAnim
|
||||
|
||||
implicitWidth: Math.max(icon.width, label.width)
|
||||
implicitHeight: icon.height + label.height
|
||||
property real radius
|
||||
property real x
|
||||
property real y
|
||||
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
PropertyAction {
|
||||
property: "x"
|
||||
target: ripple
|
||||
value: rippleAnim.x
|
||||
}
|
||||
|
||||
onPressed: event => {
|
||||
root.state.currentTab = tab.TabBar.index;
|
||||
PropertyAction {
|
||||
property: "y"
|
||||
target: ripple
|
||||
value: rippleAnim.y
|
||||
}
|
||||
|
||||
const stateY = stateWrapper.y;
|
||||
rippleAnim.x = event.x;
|
||||
rippleAnim.y = event.y - stateY;
|
||||
PropertyAction {
|
||||
property: "opacity"
|
||||
target: ripple
|
||||
value: 0.08
|
||||
}
|
||||
|
||||
const dist = (ox, oy) => ox * ox + oy * oy;
|
||||
rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y + stateY), dist(event.x, stateWrapper.height - event.y), dist(width - event.x, event.y + stateY), dist(width - event.x, stateWrapper.height - event.y)));
|
||||
|
||||
rippleAnim.restart();
|
||||
}
|
||||
|
||||
function onWheel(event: WheelEvent): void {
|
||||
if (event.angleDelta.y < 0)
|
||||
root.state.currentTab = Math.min(root.state.currentTab + 1, bar.count - 1);
|
||||
else if (event.angleDelta.y > 0)
|
||||
root.state.currentTab = Math.max(root.state.currentTab - 1, 0);
|
||||
}
|
||||
|
||||
SequentialAnimation {
|
||||
id: rippleAnim
|
||||
|
||||
property real x
|
||||
property real y
|
||||
property real radius
|
||||
|
||||
PropertyAction {
|
||||
target: ripple
|
||||
property: "x"
|
||||
value: rippleAnim.x
|
||||
}
|
||||
PropertyAction {
|
||||
target: ripple
|
||||
property: "y"
|
||||
value: rippleAnim.y
|
||||
}
|
||||
PropertyAction {
|
||||
target: ripple
|
||||
property: "opacity"
|
||||
value: 0.08
|
||||
}
|
||||
Anim {
|
||||
target: ripple
|
||||
properties: "implicitWidth,implicitHeight"
|
||||
from: 0
|
||||
to: rippleAnim.radius * 2
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
Anim {
|
||||
target: ripple
|
||||
property: "opacity"
|
||||
to: 0
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
from: 0
|
||||
properties: "implicitWidth,implicitHeight"
|
||||
target: ripple
|
||||
to: rippleAnim.radius * 2
|
||||
}
|
||||
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
}
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
easing.type: Easing.BezierSpline
|
||||
property: "opacity"
|
||||
target: ripple
|
||||
to: 0
|
||||
}
|
||||
}
|
||||
|
||||
ClippingRectangle {
|
||||
id: stateWrapper
|
||||
ClippingRectangle {
|
||||
id: stateWrapper
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
implicitHeight: parent.height + 8 * 2
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: "transparent"
|
||||
implicitHeight: parent.height + 8 * 2
|
||||
radius: 8
|
||||
|
||||
color: "transparent"
|
||||
radius: 8
|
||||
CustomRect {
|
||||
id: stateLayer
|
||||
|
||||
CustomRect {
|
||||
id: stateLayer
|
||||
anchors.fill: parent
|
||||
color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
|
||||
opacity: mouse.pressed ? 0.1 : tab.hovered ? 0.08 : 0
|
||||
|
||||
anchors.fill: parent
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
|
||||
opacity: mouse.pressed ? 0.1 : tab.hovered ? 0.08 : 0
|
||||
CustomRect {
|
||||
id: ripple
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
|
||||
opacity: 0
|
||||
radius: 1000
|
||||
|
||||
CustomRect {
|
||||
id: ripple
|
||||
transform: Translate {
|
||||
x: -ripple.width / 2
|
||||
y: -ripple.height / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
radius: 1000
|
||||
color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
|
||||
opacity: 0
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
transform: Translate {
|
||||
x: -ripple.width / 2
|
||||
y: -ripple.height / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
anchors.bottom: label.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
|
||||
fill: tab.current ? 1 : 0
|
||||
font.pointSize: 18
|
||||
text: tab.iconName
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
Behavior on fill {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.bottom: label.top
|
||||
CustomText {
|
||||
id: label
|
||||
|
||||
text: tab.iconName
|
||||
color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
|
||||
fill: tab.current ? 1 : 0
|
||||
font.pointSize: 18
|
||||
|
||||
Behavior on fill {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: label
|
||||
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
text: tab.text
|
||||
color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
|
||||
}
|
||||
}
|
||||
}
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
|
||||
text: tab.text
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,85 +6,83 @@ import qs.Components
|
||||
import qs.Config
|
||||
|
||||
Item {
|
||||
id: root
|
||||
id: root
|
||||
|
||||
required property PersistentProperties visibilities
|
||||
readonly property PersistentProperties dashState: PersistentProperties {
|
||||
property int currentTab
|
||||
property date currentDate: new Date()
|
||||
readonly property PersistentProperties dashState: PersistentProperties {
|
||||
property date currentDate: new Date()
|
||||
property int currentTab
|
||||
|
||||
reloadableId: "dashboardState"
|
||||
}
|
||||
reloadableId: "dashboardState"
|
||||
}
|
||||
readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0
|
||||
required property PersistentProperties visibilities
|
||||
|
||||
readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0
|
||||
implicitHeight: 0
|
||||
implicitWidth: content.implicitWidth
|
||||
visible: height > 0
|
||||
|
||||
visible: height > 0
|
||||
implicitHeight: 0
|
||||
implicitWidth: content.implicitWidth
|
||||
states: State {
|
||||
name: "visible"
|
||||
when: root.visibilities.dashboard && Config.dashboard.enabled
|
||||
|
||||
onStateChanged: {
|
||||
if (state === "visible" && timer.running) {
|
||||
timer.triggered();
|
||||
timer.stop();
|
||||
}
|
||||
}
|
||||
PropertyChanges {
|
||||
root.implicitHeight: content.implicitHeight
|
||||
}
|
||||
}
|
||||
transitions: [
|
||||
Transition {
|
||||
from: ""
|
||||
to: "visible"
|
||||
|
||||
states: State {
|
||||
name: "visible"
|
||||
when: root.visibilities.dashboard && Config.dashboard.enabled
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
property: "implicitHeight"
|
||||
target: root
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
from: "visible"
|
||||
to: ""
|
||||
|
||||
PropertyChanges {
|
||||
root.implicitHeight: content.implicitHeight
|
||||
}
|
||||
}
|
||||
Anim {
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
property: "implicitHeight"
|
||||
target: root
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
from: ""
|
||||
to: "visible"
|
||||
onStateChanged: {
|
||||
if (state === "visible" && timer.running) {
|
||||
timer.triggered();
|
||||
timer.stop();
|
||||
}
|
||||
}
|
||||
|
||||
Anim {
|
||||
target: root
|
||||
property: "implicitHeight"
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
from: "visible"
|
||||
to: ""
|
||||
Timer {
|
||||
id: timer
|
||||
|
||||
Anim {
|
||||
target: root
|
||||
property: "implicitHeight"
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
}
|
||||
]
|
||||
interval: Appearance.anim.durations.extraLarge
|
||||
running: true
|
||||
|
||||
Timer {
|
||||
id: timer
|
||||
onTriggered: {
|
||||
content.active = Qt.binding(() => (root.visibilities.dashboard && Config.dashboard.enabled) || root.visible);
|
||||
content.visible = true;
|
||||
}
|
||||
}
|
||||
|
||||
running: true
|
||||
interval: Appearance.anim.durations.extraLarge
|
||||
onTriggered: {
|
||||
content.active = Qt.binding(() => (root.visibilities.dashboard && Config.dashboard.enabled) || root.visible);
|
||||
content.visible = true;
|
||||
}
|
||||
}
|
||||
Loader {
|
||||
id: content
|
||||
|
||||
Loader {
|
||||
id: content
|
||||
active: true
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
visible: false
|
||||
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
visible: false
|
||||
active: true
|
||||
|
||||
sourceComponent: Content {
|
||||
visibilities: root.visibilities
|
||||
state: root.dashState
|
||||
}
|
||||
}
|
||||
sourceComponent: Content {
|
||||
state: root.dashState
|
||||
visibilities: root.visibilities
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user