lock screen: redesign password prompt

2025-08-26 17:59:37 +07:00
parent 8f2863c02c
commit 79e7f262a7
12 changed files with 215 additions and 91 deletions
@@ -30,11 +30,11 @@ Button {
    property color colRippleToggled: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"

    opacity: root.enabled ? 1 : 0.4
-    property color buttonColor: root.enabled ? (root.toggled ? 
+    property color buttonColor: ColorUtils.transparentize(root.toggled ? 
        (root.hovered ? colBackgroundToggledHover : 
            colBackgroundToggled) :
        (root.hovered ? colBackgroundHover : 
-            colBackground)) : colBackground
+            colBackground), root.enabled ? 0 : 1)
    property color rippleColor: root.toggled ? colRippleToggled : colRipple

    function startRipple(x, y) {
@@ -0,0 +1,39 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+/**
+ * Material 3 expressive style toolbar.
+ * https://m3.material.io/components/toolbars
+ */
+Item {
+    id: root
+
+    property real padding: 6
+    property alias colBackground: background.color
+    default property alias data: toolbarLayout.data
+    implicitWidth: background.implicitWidth
+    implicitHeight: background.implicitHeight
+
+    StyledRectangularShadow {
+        target: background
+    }
+
+    Rectangle {
+        id: background
+        anchors.centerIn: parent
+        color: Appearance.colors.colLayer2
+        implicitHeight: toolbarLayout.implicitHeight + root.padding * 2
+        implicitWidth: toolbarLayout.implicitWidth + root.padding * 2
+        radius: Appearance.rounding.full
+
+        RowLayout {
+            id: toolbarLayout
+            anchors {
+                fill: parent
+                margins: root.padding
+            }
+        }
+    }
+}
@@ -0,0 +1,10 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+
+RippleButton {
+    Layout.fillHeight: true
+    Layout.topMargin: 2
+    Layout.bottomMargin: 2
+    buttonRadius: Appearance.rounding.full
+}
@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import qs.modules.common
+import qs.modules.common.widgets
+
+TextField {
+    id: filterField
+
+    property alias colBackground: background.color
+
+    Layout.fillHeight: true
+    Layout.topMargin: 2
+    Layout.bottomMargin: 2
+    implicitWidth: 200
+    padding: 10
+
+    placeholderTextColor: Appearance.colors.colSubtext
+    color: Appearance.colors.colOnLayer1
+    font.pixelSize: Appearance.font.pixelSize.small
+    renderType: Text.NativeRendering
+    selectedTextColor: Appearance.colors.colOnSecondaryContainer
+    selectionColor: Appearance.colors.colSecondaryContainer
+
+    background: Rectangle {
+        id: background
+        color: Appearance.colors.colLayer1
+        radius: Appearance.rounding.full
+    }
+}
@@ -0,0 +1,10 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.functions
+
+ToolbarButton {
+    colBackground: ColorUtils.transparentize(Appearance.colors.colPrimaryContainer)
+    colBackgroundHover: Appearance.colors.colPrimaryContainerHover
+    colRipple: Appearance.colors.colPrimaryContainerActive
+}