notification changes
This commit is contained in:
Zacharias-Brohn
@@ -0,0 +1,88 @@
|
||||
import Quickshell
|
||||
import QtQuick.Layouts
|
||||
import qs.Helpers
|
||||
import qs.Components
|
||||
import qs.Modules
|
||||
import qs.Config
|
||||
import qs.Modules.Dashboard.Dash
|
||||
|
||||
GridLayout {
|
||||
id: root
|
||||
|
||||
required property PersistentProperties state
|
||||
|
||||
rowSpacing: 8
|
||||
columnSpacing: 8
|
||||
|
||||
Rect {
|
||||
Layout.column: 2
|
||||
Layout.columnSpan: 3
|
||||
Layout.preferredWidth: 48
|
||||
Layout.preferredHeight: 48
|
||||
|
||||
radius: 8
|
||||
|
||||
CachingImage {
|
||||
path: Quickshell.env("HOME") + "/.face"
|
||||
}
|
||||
}
|
||||
|
||||
Rect {
|
||||
Layout.row: 0
|
||||
Layout.columnSpan: 2
|
||||
Layout.preferredWidth: Config.dashboard.sizes.weatherWidth
|
||||
Layout.fillHeight: true
|
||||
|
||||
radius: 8
|
||||
|
||||
Weather {}
|
||||
}
|
||||
|
||||
Rect {
|
||||
Layout.row: 1
|
||||
Layout.preferredWidth: dateTime.implicitWidth
|
||||
Layout.fillHeight: true
|
||||
|
||||
radius: 8
|
||||
|
||||
DateTime {
|
||||
id: dateTime
|
||||
}
|
||||
}
|
||||
|
||||
Rect {
|
||||
Layout.row: 1
|
||||
Layout.column: 1
|
||||
Layout.columnSpan: 3
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 100
|
||||
|
||||
radius: 8
|
||||
|
||||
}
|
||||
|
||||
Rect {
|
||||
Layout.row: 1
|
||||
Layout.column: 4
|
||||
Layout.preferredWidth: 100
|
||||
Layout.fillHeight: true
|
||||
|
||||
radius: 8
|
||||
|
||||
}
|
||||
|
||||
Rect {
|
||||
Layout.row: 0
|
||||
Layout.column: 5
|
||||
Layout.rowSpan: 2
|
||||
Layout.preferredWidth: 100
|
||||
Layout.fillHeight: true
|
||||
|
||||
radius: 8
|
||||
|
||||
}
|
||||
|
||||
component Rect: CustomRect {
|
||||
color: DynamicColors.tPalette.m3surfaceContainer
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
implicitWidth: 110
|
||||
|
||||
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
|
||||
text: "•••"
|
||||
color: DynamicColors.palette.m3primary
|
||||
font.pointSize: 18 * 0.9
|
||||
font.family: "Rubik"
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import QtQuick
|
||||
import qs.Helpers
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
anchors.centerIn: parent
|
||||
|
||||
implicitWidth: icon.implicitWidth + info.implicitWidth + info.anchors.leftMargin
|
||||
|
||||
Component.onCompleted: Weather.reload()
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
|
||||
animate: true
|
||||
text: Weather.icon
|
||||
color: DynamicColors.palette.m3secondary
|
||||
font.pointSize: 24
|
||||
}
|
||||
|
||||
Column {
|
||||
id: info
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: icon.right
|
||||
|
||||
spacing: 8
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Config
|
||||
import qs.Modules
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
required property var wrapper
|
||||
readonly property PersistentProperties state: PersistentProperties {
|
||||
property int currentTab
|
||||
property date currentDate: new Date()
|
||||
|
||||
reloadableId: "dashboardState"
|
||||
}
|
||||
readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2
|
||||
readonly property real nonAnimHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + viewWrapper.anchors.margins * 2
|
||||
|
||||
implicitWidth: nonAnimWidth
|
||||
implicitHeight: nonAnimHeight
|
||||
|
||||
Tabs {
|
||||
id: tabs
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
|
||||
nonAnimWidth: root.nonAnimWidth - anchors.margins * 2
|
||||
state: root.state
|
||||
}
|
||||
|
||||
ClippingRectangle {
|
||||
id: viewWrapper
|
||||
|
||||
anchors.top: tabs.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
radius: 8
|
||||
color: "transparent"
|
||||
|
||||
Flickable {
|
||||
id: view
|
||||
|
||||
readonly property int currentIndex: root.state.currentTab
|
||||
readonly property Item currentItem: row.children[currentIndex]
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
flickableDirection: Flickable.HorizontalFlick
|
||||
|
||||
implicitWidth: currentItem.implicitWidth
|
||||
implicitHeight: currentItem.implicitHeight
|
||||
|
||||
contentX: currentItem.x
|
||||
contentWidth: row.implicitWidth
|
||||
contentHeight: row.implicitHeight
|
||||
|
||||
onContentXChanged: {
|
||||
if (!moving)
|
||||
return;
|
||||
|
||||
const x = contentX - currentItem.x;
|
||||
if (x > currentItem.implicitWidth / 2)
|
||||
root.state.currentTab = Math.min(root.state.currentTab + 1, tabs.count - 1);
|
||||
else if (x < -currentItem.implicitWidth / 2)
|
||||
root.state.currentTab = Math.max(root.state.currentTab - 1, 0);
|
||||
}
|
||||
|
||||
onDragEnded: {
|
||||
const x = contentX - currentItem.x;
|
||||
if (x > currentItem.implicitWidth / 10)
|
||||
root.state.currentTab = Math.min(root.state.currentTab + 1, tabs.count - 1);
|
||||
else if (x < -currentItem.implicitWidth / 10)
|
||||
root.state.currentTab = Math.max(root.state.currentTab - 1, 0);
|
||||
else
|
||||
contentX = Qt.binding(() => currentItem.x);
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: row
|
||||
|
||||
Pane {
|
||||
index: 0
|
||||
sourceComponent: Dash {
|
||||
state: root.state
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on contentX {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on implicitWidth {
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
}
|
||||
|
||||
component Pane: Loader {
|
||||
id: pane
|
||||
|
||||
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);
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,246 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
import qs.Helpers
|
||||
import qs.Modules
|
||||
import Quickshell
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
required property real nonAnimWidth
|
||||
required property PersistentProperties state
|
||||
readonly property alias count: bar.count
|
||||
|
||||
implicitHeight: bar.implicitHeight + indicator.implicitHeight + indicator.anchors.topMargin + separator.implicitHeight
|
||||
|
||||
TabBar {
|
||||
id: bar
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
|
||||
currentIndex: root.state.currentTab
|
||||
background: null
|
||||
|
||||
onCurrentIndexChanged: root.state.currentTab = currentIndex
|
||||
|
||||
Tab {
|
||||
iconName: "dashboard"
|
||||
text: qsTr("Dashboard")
|
||||
}
|
||||
|
||||
Tab {
|
||||
iconName: "queue_music"
|
||||
text: qsTr("Media")
|
||||
}
|
||||
|
||||
Tab {
|
||||
iconName: "speed"
|
||||
text: qsTr("Performance")
|
||||
}
|
||||
|
||||
Tab {
|
||||
iconName: "cloud"
|
||||
text: qsTr("Weather")
|
||||
}
|
||||
|
||||
// Tab {
|
||||
// iconName: "workspaces"
|
||||
// text: qsTr("Workspaces")
|
||||
// }
|
||||
}
|
||||
|
||||
Item {
|
||||
id: indicator
|
||||
|
||||
anchors.top: bar.bottom
|
||||
|
||||
implicitWidth: bar.currentItem.implicitWidth
|
||||
implicitHeight: 40
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
clip: true
|
||||
|
||||
CustomRect {
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
implicitHeight: parent.implicitHeight * 2
|
||||
|
||||
color: DynamicColors.palette.m3primary
|
||||
radius: 1000
|
||||
}
|
||||
|
||||
Behavior on x {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Behavior on implicitWidth {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
id: separator
|
||||
|
||||
anchors.top: indicator.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
|
||||
implicitHeight: 1
|
||||
color: DynamicColors.palette.m3outlineVariant
|
||||
}
|
||||
|
||||
component Tab: TabButton {
|
||||
id: tab
|
||||
|
||||
required property string iconName
|
||||
readonly property bool current: TabBar.tabBar.currentItem === this
|
||||
|
||||
background: null
|
||||
|
||||
contentItem: CustomMouseArea {
|
||||
id: mouse
|
||||
|
||||
implicitWidth: Math.max(icon.width, label.width)
|
||||
implicitHeight: icon.height + label.height
|
||||
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onPressed: event => {
|
||||
root.state.currentTab = tab.TabBar.index;
|
||||
|
||||
const stateY = stateWrapper.y;
|
||||
rippleAnim.x = event.x;
|
||||
rippleAnim.y = event.y - stateY;
|
||||
|
||||
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
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
Anim {
|
||||
target: ripple
|
||||
property: "opacity"
|
||||
to: 0
|
||||
easing.type: Easing.BezierSpline
|
||||
duration: MaterialEasing.expressiveEffectsTime
|
||||
easing.bezierCurve: MaterialEasing.expressiveEffects
|
||||
}
|
||||
}
|
||||
|
||||
ClippingRectangle {
|
||||
id: stateWrapper
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
implicitHeight: parent.height + 8 * 2
|
||||
|
||||
color: "transparent"
|
||||
radius: 8
|
||||
|
||||
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
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
id: ripple
|
||||
|
||||
radius: 1000
|
||||
color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
|
||||
opacity: 0
|
||||
|
||||
transform: Translate {
|
||||
x: -ripple.width / 2
|
||||
y: -ripple.height / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.bottom: label.top
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user