refactor: add connected rect component
This commit is contained in:
parent
c36a2ade54
commit
7489d369fb
4 changed files with 22 additions and 25 deletions
15
modules/nexus/common/ConnectedRect.qml
Normal file
15
modules/nexus/common/ConnectedRect.qml
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import QtQuick
|
||||||
|
import Caelestia.Config
|
||||||
|
import qs.components
|
||||||
|
import qs.services
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
property bool first
|
||||||
|
property bool last
|
||||||
|
|
||||||
|
color: Colours.tPalette.m3surfaceContainer
|
||||||
|
topLeftRadius: first ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
|
||||||
|
topRightRadius: first ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
|
||||||
|
bottomLeftRadius: last ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
|
||||||
|
bottomRightRadius: last ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
|
||||||
|
}
|
||||||
|
|
@ -8,8 +8,8 @@ StyledSwitch {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
property string subtext
|
property string subtext
|
||||||
property bool first
|
property alias first: bg.first
|
||||||
property bool last
|
property alias last: bg.last
|
||||||
readonly property alias bg: bg
|
readonly property alias bg: bg
|
||||||
|
|
||||||
horizontalPadding: Tokens.padding.largeIncreased
|
horizontalPadding: Tokens.padding.largeIncreased
|
||||||
|
|
@ -26,24 +26,13 @@ StyledSwitch {
|
||||||
|
|
||||||
onPressed: stateLayer.press(stateLayer.mouseX, stateLayer.mouseY)
|
onPressed: stateLayer.press(stateLayer.mouseX, stateLayer.mouseY)
|
||||||
|
|
||||||
background: StyledRect {
|
background: ConnectedRect {
|
||||||
id: bg
|
id: bg
|
||||||
|
|
||||||
color: Colours.tPalette.m3surfaceContainer
|
|
||||||
topLeftRadius: root.first ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
|
|
||||||
topRightRadius: root.first ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
|
|
||||||
bottomLeftRadius: root.last ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
|
|
||||||
bottomRightRadius: root.last ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
|
|
||||||
|
|
||||||
StateLayer {
|
StateLayer {
|
||||||
id: stateLayer
|
id: stateLayer
|
||||||
|
|
||||||
manualPressOverride: root.pressed
|
manualPressOverride: root.pressed
|
||||||
|
|
||||||
topLeftRadius: parent.topLeftRadius
|
|
||||||
topRightRadius: parent.topRightRadius
|
|
||||||
bottomLeftRadius: parent.bottomLeftRadius
|
|
||||||
bottomRightRadius: parent.bottomRightRadius
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -172,13 +172,10 @@ PageBase {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
StyledRect {
|
ConnectedRect {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
bottomLeftRadius: Tokens.rounding.extraLarge
|
|
||||||
bottomRightRadius: Tokens.rounding.extraLarge
|
|
||||||
radius: Tokens.rounding.extraSmall
|
|
||||||
implicitHeight: pairLayout.implicitHeight + pairLayout.anchors.margins * 2
|
implicitHeight: pairLayout.implicitHeight + pairLayout.anchors.margins * 2
|
||||||
color: Colours.tPalette.m3surfaceContainer
|
last: true
|
||||||
|
|
||||||
StateLayer {
|
StateLayer {
|
||||||
disabled: !root.btEnabled
|
disabled: !root.btEnabled
|
||||||
|
|
|
||||||
|
|
@ -201,14 +201,10 @@ PageBase {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
StyledRect {
|
ConnectedRect {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
bottomLeftRadius: Tokens.rounding.extraLarge
|
|
||||||
bottomRightRadius: Tokens.rounding.extraLarge
|
|
||||||
radius: Tokens.rounding.extraSmall
|
|
||||||
|
|
||||||
implicitHeight: addNetworkLayout.implicitHeight + addNetworkLayout.anchors.margins * 2
|
implicitHeight: addNetworkLayout.implicitHeight + addNetworkLayout.anchors.margins * 2
|
||||||
color: Colours.tPalette.m3surfaceContainer
|
last: true
|
||||||
|
|
||||||
StateLayer {}
|
StateLayer {}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue