controlcenter: cleaning up ui to match
This commit is contained in:
ATMDA
parent
d20a5095bb
commit
615d1d9a49
2 changed files with 175 additions and 67 deletions
|
|
@ -29,74 +29,38 @@ ColumnLayout {
|
|||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: wifiIcon.implicitHeight + Appearance.padding.normal * 2
|
||||
ToggleButton {
|
||||
toggled: Network.wifiEnabled
|
||||
icon: "wifi"
|
||||
accent: "Tertiary"
|
||||
|
||||
radius: Appearance.rounding.normal
|
||||
color: Network.wifiEnabled ? Colours.palette.m3tertiary : Colours.palette.m3tertiaryContainer
|
||||
|
||||
StateLayer {
|
||||
function onClicked(): void {
|
||||
Network.toggleWifi();
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: wifiIcon
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: "wifi"
|
||||
color: Network.wifiEnabled ? Colours.palette.m3onTertiary : Colours.palette.m3onTertiaryContainer
|
||||
function onClicked(): void {
|
||||
Network.toggleWifi();
|
||||
}
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: scanIcon.implicitHeight + Appearance.padding.normal * 2
|
||||
ToggleButton {
|
||||
toggled: Network.scanning
|
||||
icon: "wifi_find"
|
||||
accent: "Secondary"
|
||||
|
||||
radius: Appearance.rounding.normal
|
||||
color: Network.scanning ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
|
||||
|
||||
StateLayer {
|
||||
function onClicked(): void {
|
||||
Network.rescanWifi();
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: scanIcon
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: "wifi_find"
|
||||
color: Network.scanning ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
|
||||
function onClicked(): void {
|
||||
Network.rescanWifi();
|
||||
}
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: settingsIcon.implicitHeight + Appearance.padding.normal * 2
|
||||
ToggleButton {
|
||||
toggled: !root.session.network.active
|
||||
icon: "settings"
|
||||
accent: "Primary"
|
||||
|
||||
radius: Appearance.rounding.normal
|
||||
color: !root.session.network.active ? Colours.palette.m3primary : Colours.palette.m3primaryContainer
|
||||
|
||||
StateLayer {
|
||||
function onClicked(): void {
|
||||
if (root.session.network.active)
|
||||
root.session.network.active = null;
|
||||
else {
|
||||
root.session.network.active = view.model.get(0)?.modelData ?? null;
|
||||
}
|
||||
function onClicked(): void {
|
||||
if (root.session.network.active)
|
||||
root.session.network.active = null;
|
||||
else {
|
||||
root.session.network.active = view.model.get(0)?.modelData ?? null;
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: settingsIcon
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: "settings"
|
||||
color: !root.session.network.active ? Colours.palette.m3onPrimary : Colours.palette.m3onPrimaryContainer
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -258,4 +222,79 @@ ColumnLayout {
|
|||
implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
|
||||
}
|
||||
}
|
||||
|
||||
component ToggleButton: StyledRect {
|
||||
id: toggleBtn
|
||||
|
||||
required property bool toggled
|
||||
property string icon
|
||||
property string label
|
||||
property string accent: "Secondary"
|
||||
|
||||
function onClicked(): void {
|
||||
}
|
||||
|
||||
Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
|
||||
implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
|
||||
implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
|
||||
|
||||
radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
|
||||
color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
|
||||
|
||||
StateLayer {
|
||||
id: toggleStateLayer
|
||||
|
||||
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
|
||||
|
||||
function onClicked(): void {
|
||||
toggleBtn.onClicked();
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: toggleBtnInner
|
||||
|
||||
anchors.centerIn: parent
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
MaterialIcon {
|
||||
id: toggleBtnIcon
|
||||
|
||||
visible: !!text
|
||||
fill: toggleBtn.toggled ? 1 : 0
|
||||
text: toggleBtn.icon
|
||||
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
|
||||
font.pointSize: Appearance.font.size.large
|
||||
|
||||
Behavior on fill {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
asynchronous: true
|
||||
active: !!toggleBtn.label
|
||||
visible: active
|
||||
|
||||
sourceComponent: StyledText {
|
||||
text: toggleBtn.label
|
||||
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on radius {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveFastSpatial
|
||||
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on Layout.preferredWidth {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveFastSpatial
|
||||
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import qs.components
|
|||
import qs.components.effects
|
||||
import qs.components.containers
|
||||
import qs.config
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
|
|
@ -41,30 +42,92 @@ RowLayout {
|
|||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
Loader {
|
||||
id: loader
|
||||
|
||||
ClippingRectangle {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.large * 2
|
||||
anchors.margins: Appearance.padding.normal
|
||||
anchors.leftMargin: 0
|
||||
anchors.rightMargin: Appearance.padding.normal / 2
|
||||
|
||||
sourceComponent: root.session.network.active ? details : settings
|
||||
radius: rightBorder.innerRadius
|
||||
color: "transparent"
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: 200
|
||||
Loader {
|
||||
id: loader
|
||||
|
||||
property var pane: root.session.network.active
|
||||
property string paneId: pane ? (pane.ssid || pane.bssid || "") : ""
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.large * 2
|
||||
|
||||
opacity: 1
|
||||
scale: 1
|
||||
transformOrigin: Item.Center
|
||||
|
||||
clip: false
|
||||
asynchronous: true
|
||||
sourceComponent: pane ? details : settings
|
||||
|
||||
Behavior on paneId {
|
||||
SequentialAnimation {
|
||||
ParallelAnimation {
|
||||
Anim {
|
||||
target: loader
|
||||
property: "opacity"
|
||||
to: 0
|
||||
easing.bezierCurve: Appearance.anim.curves.standardAccel
|
||||
}
|
||||
Anim {
|
||||
target: loader
|
||||
property: "scale"
|
||||
to: 0.8
|
||||
easing.bezierCurve: Appearance.anim.curves.standardAccel
|
||||
}
|
||||
}
|
||||
PropertyAction {}
|
||||
ParallelAnimation {
|
||||
Anim {
|
||||
target: loader
|
||||
property: "opacity"
|
||||
to: 1
|
||||
easing.bezierCurve: Appearance.anim.curves.standardDecel
|
||||
}
|
||||
Anim {
|
||||
target: loader
|
||||
property: "scale"
|
||||
to: 1
|
||||
easing.bezierCurve: Appearance.anim.curves.standardDecel
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onPaneChanged: {
|
||||
paneId = pane ? (pane.ssid || pane.bssid || "") : "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
InnerBorder {
|
||||
id: rightBorder
|
||||
|
||||
leftThickness: Appearance.padding.normal / 2
|
||||
}
|
||||
|
||||
Component {
|
||||
id: settings
|
||||
|
||||
Settings {
|
||||
session: root.session
|
||||
StyledFlickable {
|
||||
flickableDirection: Flickable.VerticalFlick
|
||||
contentHeight: settingsInner.height
|
||||
|
||||
Settings {
|
||||
id: settingsInner
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
session: root.session
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,4 +145,10 @@ RowLayout {
|
|||
session: root.session
|
||||
z: 1000
|
||||
}
|
||||
|
||||
component Anim: NumberAnimation {
|
||||
target: loader
|
||||
duration: Appearance.anim.durations.normal / 2
|
||||
easing.type: Easing.BezierSpline
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue