more hacking friendliness

This commit is contained in:
end-4
2025-05-26 12:10:03 +02:00
parent 5434771d77
commit bca1a77ae3
12 changed files with 75 additions and 47 deletions
@@ -6,8 +6,8 @@ import QtQuick.Controls
import QtQuick.Layouts
/**
* A container that supports bouncy children.
* https://m3.material.io/components/button-groups/overview
* A container that supports GroupButton children for bounciness.
* See https://m3.material.io/components/button-groups/overview
*/
Rectangle {
id: root
@@ -1,9 +1,12 @@
// From https://github.com/rafzby/circular-progressbar
// From https://github.com/rafzby/circular-progressbar with modifications
// License: LGPL-3.0 - A copy can be found in `licenses` folder of repo
// Modified so it looks like in Material 3: https://m3.material.io/components/progress-indicators/specs
import QtQuick
import "root:/modules/common"
/**
* Material 3 circular progress. See https://m3.material.io/components/progress-indicators/specs
*/
Item {
id: root
@@ -6,13 +6,19 @@ import QtQuick.Layouts
import Quickshell
import Quickshell.Io
/**
* Material 3 dialog button. See https://m3.material.io/components/dialogs/overview
*/
RippleButton {
id: button
property string buttonText
implicitHeight: 30
implicitWidth: buttonTextWidget.implicitWidth + 15 * 2
buttonRadius: Appearance.rounding.full
buttonRadius: Appearance?.rounding.full ?? 9999
property color colEnabled: Appearance?.m3colors.m3primary ?? "#65558F"
property color colDisabled: Appearance?.m3colors.m3outline ?? "#8D8C96"
contentItem: StyledText {
id: buttonTextWidget
@@ -21,8 +27,8 @@ RippleButton {
anchors.rightMargin: 15
text: buttonText
horizontalAlignment: Text.AlignHCenter
font.pixelSize: Appearance.font.pixelSize.small
color: button.enabled ? Appearance.m3colors.m3primary : Appearance.m3colors.m3outline
font.pixelSize: Appearance?.font.pixelSize.small ?? 12
color: button.enabled ? button.colEnabled : button.colDisabled
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
@@ -4,7 +4,10 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
MouseArea { // Flick to dismiss
/**
* A convenience MouseArea for handling drag events.
*/
MouseArea {
id: root
hoverEnabled: true
acceptedButtons: Qt.LeftButton
@@ -1,5 +1,8 @@
import QtQuick
/**
* This is just to make sure `RippleButton`s can be used in a Flow layout.
*/
Flow {
property int clickIndex: -1
}
@@ -8,6 +8,10 @@ import QtQuick.Layouts
import Quickshell.Io
import Quickshell.Widgets
/**
* Material 3 button with expressive bounciness.
* See https://m3.material.io/components/button-groups/overview
*/
Button {
id: root
property bool toggled
@@ -35,12 +39,12 @@ Button {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
}
property color colBackground: ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
property color colBackgroundHover: Appearance.colors.colLayer1Hover
property color colBackgroundActive: Appearance.colors.colLayer1Active
property color colBackgroundToggled: Appearance.m3colors.m3primary
property color colBackgroundToggledHover: Appearance.colors.colPrimaryHover
property color colBackgroundToggledActive: Appearance.colors.colPrimaryActive
property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent"
property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
property color colBackgroundActive: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
property color colBackgroundToggled: Appearance?.m3colors.m3primary ?? "#65558F"
property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C"
property color colBackgroundToggledActive: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"
property real radius: root.down ? root.buttonRadiusPressed : root.buttonRadius
property color color: root.enabled ? (root.toggled ?
@@ -4,20 +4,20 @@ import QtQuick.Layouts
Text {
id: root
property real iconSize: Appearance.font.pixelSize.small
property real iconSize: Appearance?.font.pixelSize.small ?? 16
property real fill: 0
renderType: Text.NativeRendering
font.hintingPreference: Font.PreferFullHinting
verticalAlignment: Text.AlignVCenter
font.family: Appearance.font.family.iconMaterial
font.family: Appearance?.font.family.iconMaterial ?? "Material Symbols Rounded"
font.pixelSize: iconSize
color: Appearance.m3colors.m3onBackground
Behavior on fill {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
duration: Appearance?.animation.elementMoveFast.duration ?? 200
easing.type: Appearance?.animation.elementMoveFast.type ?? Easing.BezierSpline
easing.bezierCurve: Appearance?.animation.elementMoveFast.bezierCurve ?? [0.34, 0.80, 0.34, 1.00, 1, 1]
}
}
@@ -7,7 +7,7 @@ import Quickshell
import Quickshell.Io
RippleButton {
id: button
id: root
buttonRadius: 0
implicitHeight: 36
@@ -18,10 +18,10 @@ RippleButton {
anchors.fill: parent
anchors.leftMargin: 14
anchors.rightMargin: 14
text: button.buttonText
text: root.buttonText
horizontalAlignment: Text.AlignLeft
font.pixelSize: Appearance.font.pixelSize.small
color: button.enabled ? Appearance.m3colors.m3onSurface : Appearance.m3colors.m3outline
color: root.enabled ? Appearance.m3colors.m3onSurface : Appearance.m3colors.m3outline
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
@@ -12,16 +12,17 @@ RippleButton { // Expand button
id: root
required property int count
required property bool expanded
property real fontSize: Appearance.font.pixelSize.small
property real fontSize: Appearance?.font.pixelSize.small ?? 12
property real iconSize: Appearance?.font.pixelSize.normal ?? 16
implicitHeight: fontSize + 4 * 2
implicitWidth: Math.max(contentItem.implicitWidth + 5 * 2, 30)
Layout.alignment: Qt.AlignVCenter
Layout.fillHeight: false
buttonRadius: Appearance.rounding.full
colBackground: ColorUtils.mix(Appearance.colors.colLayer2, Appearance.colors.colLayer2Hover, 0.5)
colBackgroundHover: Appearance.colors.colLayer2Hover
colRipple: Appearance.colors.colLayer2Active
colBackground: ColorUtils.mix(Appearance?.colors.colLayer2, Appearance?.colors.colLayer2Hover, 0.5)
colBackgroundHover: Appearance?.colors.colLayer2Hover ?? "#E5DFED"
colRipple: Appearance?.colors.colLayer2Active ?? "#D6CEE2"
contentItem: Item {
anchors.centerIn: parent
@@ -38,7 +39,7 @@ RippleButton { // Expand button
}
MaterialSymbol {
text: "keyboard_arrow_down"
iconSize: Appearance.font.pixelSize.normal
iconSize: root.iconSize
color: Appearance.colors.colOnLayer2
rotation: expanded ? 180 : 0
Behavior on rotation {
@@ -10,6 +10,8 @@ ColumnLayout {
required property var tabButtonList // Something like [{"icon": "notifications", "name": qsTr("Notifications")}, {"icon": "volume_up", "name": qsTr("Volume mixer")}]
required property var externalTrackedTab
property bool enableIndicatorAnimation: false
property color colIndicator: Appearance?.m3colors.m3primary ?? "#65558F"
property color colBorder: Appearance?.m3colors.m3outlineVariant ?? "#C6C6D0"
signal currentIndexChanged(int index)
TabBar {
@@ -67,15 +69,15 @@ ColumnLayout {
x: tabBar.currentIndex * fullTabSize + (fullTabSize - targetWidth) / 2
color: Appearance.m3colors.m3primary
radius: Appearance.rounding.full
color: root.colIndicator
radius: Appearance?.rounding.full ?? 9999
Behavior on x {
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
}
Behavior on implicitWidth {
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
}
}
}
@@ -83,7 +85,7 @@ ColumnLayout {
Rectangle { // Tabbar bottom border
id: tabBarBottomBorder
Layout.fillWidth: true
height: 1
color: Appearance.m3colors.m3outlineVariant
implicitHeight: 1
color: root.colBorder
}
}
@@ -17,10 +17,16 @@ TabButton {
property int rippleDuration: 1200
height: buttonBackground.height
property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent"
property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
property color colRipple: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
property color colActive: Appearance?.m3colors.m3primary ?? "#65558F"
property color colInactive: Appearance?.colors.colOnLayer1 ?? "#45464F"
component RippleAnim: NumberAnimation {
duration: rippleDuration
easing.type: Appearance.animation.elementMoveEnter.type
easing.bezierCurve: Appearance.animationCurves.standardDecel
easing.type: Appearance?.animation.elementMoveEnter.type
easing.bezierCurve: Appearance?.animationCurves.standardDecel
}
MouseArea {
@@ -86,9 +92,9 @@ TabButton {
background: Rectangle {
id: buttonBackground
radius: Appearance.rounding.small
radius: Appearance?.rounding.small
implicitHeight: 50
color: (button.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1))
color: (button.hovered ? button.colBackgroundHover : button.colBackground)
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
@@ -99,14 +105,14 @@ TabButton {
}
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
}
Rectangle {
id: ripple
radius: Appearance.rounding.full
color: Appearance.colors.colLayer1Active
radius: Appearance?.rounding.full ?? 9999
color: button.colRipple
opacity: 0
transform: Translate {
@@ -126,22 +132,22 @@ TabButton {
Layout.alignment: Qt.AlignHCenter
horizontalAlignment: Text.AlignHCenter
text: buttonIcon
iconSize: Appearance.font.pixelSize.hugeass
iconSize: Appearance?.font.pixelSize.hugeass ?? 25
fill: selected ? 1 : 0
color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1
color: selected ? button.colActive : button.colInactive
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
StyledText {
id: buttonTextWidget
Layout.alignment: Qt.AlignHCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: Appearance.font.pixelSize.small
color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1
font.pixelSize: Appearance?.font.pixelSize.small
color: selected ? button.colActive : button.colInactive
text: buttonText
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
}
@@ -22,7 +22,7 @@ Button {
property bool rippleEnabled: true
property var altAction
property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "#00000000"
property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent"
property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
property color colBackgroundToggled: Appearance?.m3colors.m3primary ?? "#65558F"
property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C"