mirror of
https://github.com/kossLAN/dots.git
synced 2025-11-05 06:59:50 -05:00
save progress
This commit is contained in:
parent
f0673a66a2
commit
c45c04e9ac
SSH key fingerprint:
SHA256:bdV0x+wdQHGJ6LgmstH3KV8OpWY+OOFmJcPcB0wQPV8
15 changed files with 621 additions and 418 deletions
48
widgets/FontIconButton.qml
Normal file
48
widgets/FontIconButton.qml
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import QtQuick
|
||||
import ".."
|
||||
|
||||
MaterialButton {
|
||||
id: root
|
||||
|
||||
property real implicitSize
|
||||
property string iconName: ""
|
||||
property string activeIconColor: ShellSettings.colors["inverse_primary"]
|
||||
property string inactiveIconColor: ShellSettings.colors["inverse_surface"]
|
||||
|
||||
implicitWidth: this.implicitSize
|
||||
implicitHeight: this.implicitSize
|
||||
|
||||
Text {
|
||||
id: textIcon
|
||||
text: root.iconName
|
||||
renderType: Text.NativeRendering
|
||||
textFormat: Text.PlainText
|
||||
color: root.containsMouse || root.checked ? root.activeIconColor : root.inactiveIconColor
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
anchors.fill: parent
|
||||
|
||||
font {
|
||||
family: "Material Symbols Outlined"
|
||||
pointSize: Math.max(parent.height * 0.60, 11)
|
||||
|
||||
variableAxes: {
|
||||
"FILL": fill
|
||||
}
|
||||
}
|
||||
|
||||
property real fill: !root.containsMouse && !root.checked ? 0 : 1
|
||||
|
||||
Behavior on fill {
|
||||
NumberAnimation {
|
||||
duration: 200
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: 200
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,24 @@
|
|||
import QtQuick
|
||||
import ".."
|
||||
|
||||
Rectangle {}
|
||||
MouseArea {
|
||||
id: root
|
||||
hoverEnabled: true
|
||||
|
||||
property real radius: width / 2
|
||||
property bool checked: false
|
||||
property var activeColor: ShellSettings.colors["primary"]
|
||||
property var inactiveColor: "transparent"
|
||||
|
||||
Rectangle {
|
||||
color: root.containsMouse || root.checked ? root.activeColor : root.inactiveColor
|
||||
radius: root.radius
|
||||
anchors.fill: parent
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: 200
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
105
widgets/MaterialSlider.qml
Normal file
105
widgets/MaterialSlider.qml
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Qt5Compat.GraphicalEffects
|
||||
import ".."
|
||||
|
||||
Slider {
|
||||
id: root
|
||||
|
||||
value: 0.5
|
||||
from: 0.0
|
||||
to: 1.0
|
||||
|
||||
property string text
|
||||
property Component icon
|
||||
|
||||
background: Rectangle {
|
||||
id: background
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: parent.height
|
||||
width: root.availableWidth
|
||||
height: implicitHeight
|
||||
x: root.leftPadding
|
||||
y: root.topPadding + root.availableHeight / 2 - height / 2
|
||||
z: 0
|
||||
color: ShellSettings.colors["surface_container_highest"]
|
||||
radius: height / 2
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: Rectangle {
|
||||
width: background.implicitWidth
|
||||
height: background.implicitHeight
|
||||
radius: background.radius
|
||||
color: "black"
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: visualPos
|
||||
width: root.visualPosition * (root.availableWidth - root.height) + (root.height / 2)
|
||||
height: parent.height
|
||||
color: ShellSettings.colors["primary"]
|
||||
}
|
||||
|
||||
Text {
|
||||
id: sliderText
|
||||
text: root.text
|
||||
visible: text !== ""
|
||||
color: ShellSettings.colors["inverse_primary"]
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
elide: Text.ElideRight
|
||||
|
||||
font {
|
||||
pointSize: Math.max(handle.implicitHeight * 0.35, 11)
|
||||
}
|
||||
|
||||
anchors {
|
||||
top: parent.top
|
||||
bottom: parent.bottom
|
||||
left: {
|
||||
let visualWidth = (root.visualPosition * root.availableWidth);
|
||||
if ((visualWidth / root.availableWidth) < 0.5)
|
||||
return visualPos.right;
|
||||
else
|
||||
return parent.left;
|
||||
}
|
||||
right: {
|
||||
let visualWidth = (root.visualPosition * root.availableWidth);
|
||||
if ((visualWidth / root.availableWidth) > 0.5)
|
||||
return visualPos.right;
|
||||
else
|
||||
return parent.right;
|
||||
}
|
||||
|
||||
leftMargin: 20
|
||||
rightMargin: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handle: Rectangle {
|
||||
id: handle
|
||||
color: ShellSettings.colors["primary"]
|
||||
implicitWidth: root.height
|
||||
implicitHeight: root.height
|
||||
radius: width / 2
|
||||
|
||||
x: root.leftPadding + root.visualPosition * (root.availableWidth - width)
|
||||
y: root.topPadding + root.availableHeight / 2 - height / 2
|
||||
// icon maybe
|
||||
|
||||
Loader {
|
||||
active: root.icon !== undefined
|
||||
sourceComponent: root.icon
|
||||
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
import QtQuick
|
||||
import Qt5Compat.GraphicalEffects
|
||||
import Quickshell
|
||||
import Quickshell.Widgets
|
||||
import ".."
|
||||
|
||||
Item {
|
||||
id: root
|
||||
property string icon
|
||||
property bool enabled: true
|
||||
property bool highlight: true
|
||||
property bool clickable: false
|
||||
property bool useMask: true
|
||||
property bool useVariableFill: false
|
||||
property real size: 18
|
||||
property real outerSize: size
|
||||
property color hoverColor: ShellSettings.colors["inverse_primary"]
|
||||
property color iconColor: ShellSettings.colors["primary"]
|
||||
property real buttonRadius: 6
|
||||
property real padding: 4
|
||||
|
||||
property real fillValue: 0.0
|
||||
property real fillTarget: 0.0
|
||||
property real fillHover: 1.0
|
||||
property real fillNormal: 0.0
|
||||
property int fillDuration: 300
|
||||
|
||||
signal clicked(var mouse)
|
||||
|
||||
implicitWidth: outerSize + (padding * 2)
|
||||
implicitHeight: outerSize + (padding * 2)
|
||||
|
||||
Rectangle {
|
||||
id: backgroundRect
|
||||
anchors.fill: parent
|
||||
radius: root.buttonRadius
|
||||
color: mouseArea.containsMouse && root.highlight ? root.hoverColor : "transparent"
|
||||
visible: root.highlight
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: 200
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
id: fillAnimation
|
||||
target: root
|
||||
property: "fillValue"
|
||||
duration: root.fillDuration
|
||||
easing.type: Easing.OutCubic
|
||||
to: root.fillTarget
|
||||
}
|
||||
|
||||
Text {
|
||||
id: variableFillIcon
|
||||
visible: root.useVariableFill
|
||||
anchors.centerIn: parent
|
||||
font.family: "Material Symbols Outlined"
|
||||
renderType: Text.NativeRendering
|
||||
textFormat: Text.PlainText
|
||||
font.pointSize: root.size * 0.8
|
||||
text: root.icon
|
||||
color: root.enabled ?? root.iconColor
|
||||
opacity: root.enabled ? 1.0 : 0.5
|
||||
|
||||
font.variableAxes: {
|
||||
"FILL": root.fillValue.toFixed(1)
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: 200
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: maskedIcon
|
||||
visible: root.useMask && !root.useVariableFill
|
||||
anchors.centerIn: parent
|
||||
width: root.size
|
||||
height: root.size
|
||||
smooth: true
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
source: Rectangle {
|
||||
width: root.size
|
||||
height: root.size
|
||||
color: "white"
|
||||
}
|
||||
maskSource: IconImage {
|
||||
mipmap: true
|
||||
implicitSize: root.size
|
||||
source: Quickshell.iconPath(root.icon)
|
||||
opacity: root.enabled ? 1.0 : 0.5
|
||||
smooth: true
|
||||
}
|
||||
}
|
||||
|
||||
transform: Translate {
|
||||
x: mouseArea.containsMouse ? -1 : 0
|
||||
y: mouseArea.containsMouse ? -2 : 0
|
||||
|
||||
Behavior on x {
|
||||
NumberAnimation {
|
||||
duration: 450
|
||||
easing.type: Easing.OutElastic
|
||||
easing.amplitude: 1.0
|
||||
easing.period: 0.3
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on y {
|
||||
NumberAnimation {
|
||||
duration: 450
|
||||
easing.type: Easing.OutElastic
|
||||
easing.amplitude: 1.0
|
||||
easing.period: 0.3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: root.enabled ?? root.iconColor
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: 200
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
IconImage {
|
||||
id: unmaskedIcon
|
||||
visible: !root.useMask && !root.useVariableFill
|
||||
anchors.centerIn: parent
|
||||
source: Quickshell.iconPath(root.icon)
|
||||
implicitSize: root.size
|
||||
opacity: root.enabled ? 1.0 : 0.5
|
||||
|
||||
transform: Translate {
|
||||
x: mouseArea.containsMouse ? -1 : 0
|
||||
y: mouseArea.containsMouse ? -2 : 0
|
||||
|
||||
Behavior on x {
|
||||
NumberAnimation {
|
||||
duration: 350
|
||||
easing.type: Easing.OutElastic
|
||||
easing.amplitude: 1.0
|
||||
easing.period: 0.6
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on y {
|
||||
NumberAnimation {
|
||||
duration: 350
|
||||
easing.type: Easing.OutElastic
|
||||
easing.amplitude: 1.0
|
||||
easing.period: 0.6
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: 200
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
cursorShape: root.clickable ? Qt.PointingHandCursor : ""
|
||||
enabled: root.clickable && root.enabled
|
||||
hoverEnabled: true
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
|
||||
|
||||
onClicked: function (mouse) {
|
||||
root.clicked(mouse);
|
||||
}
|
||||
|
||||
onContainsMouseChanged: {
|
||||
if (root.useVariableFill) {
|
||||
root.fillTarget = containsMouse ? root.fillHover : root.fillNormal;
|
||||
fillAnimation.restart();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
if (useVariableFill) {
|
||||
fillValue = fillNormal;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue