Update shared components

emericg · Aug 7, 2024 · ee4c2a9 · ee4c2a9
1 parent 2e52ae4
commit ee4c2a9
Show file tree

Hide file tree

Showing 40 changed files with 313 additions and 144 deletions.
diff --git a/assets/icons.qrc b/assets/icons.qrc
@@ -139,6 +139,7 @@
         <file>icons/material-icons/duotone/settings_bluetooth.svg</file>
         <file>icons/material-icons/duotone/settings_overscan.svg</file>
         <file>icons/material-icons/duotone/shutter_speed.svg</file>
+        <file>icons/material-icons/duotone/speak.svg</file>
         <file>icons/material-icons/duotone/speaker.svg</file>
         <file>icons/material-icons/duotone/speed.svg</file>
         <file>icons/material-icons/duotone/spherical.svg</file>

diff --git a/assets/icons/material-icons/duotone/speak.svg b/assets/icons/material-icons/duotone/speak.svg
diff --git a/qml/ComponentLibrary/ThemeEngine.qml b/qml/ComponentLibrary/ThemeEngine.qml
@@ -543,7 +543,7 @@ Item {
 
             colorActionbar              = "#eaeaea"
             colorActionbarContent       = "#444"
-            colorActionbarHighlight     = "#f6e148"
+            colorActionbarHighlight     = "#dadada"
 
             colorTabletmenu             = "#ffffff"
             colorTabletmenuContent      = "#9d9d9d"
@@ -569,7 +569,7 @@ Item {
             colorComponentText          = "black"
             colorComponentContent       = "black"
             colorComponentBorder        = "#ddd"
-            colorComponentDown          = "#d0d0d0"
+            colorComponentDown          = "#dadada"
             colorComponentBackground    = "#fcfcfc"
 
             componentRadius = 6

diff --git a/qml/ComponentLibrary/buttons/ButtonImpl.qml b/qml/ComponentLibrary/buttons/ButtonImpl.qml
@@ -71,10 +71,9 @@ T.Button {
         }
 
         RippleThemed {
-            width: parent.width
-            height: parent.height
-
+            anchors.fill: parent
             anchor: control
+
             pressed: control.pressed
             active: control.enabled && (control.down || control.hovered || control.visualFocus)
             color: control.colorRipple

diff --git a/qml/ComponentLibrary/buttons/RoundButtonImpl.qml b/qml/ComponentLibrary/buttons/RoundButtonImpl.qml
@@ -62,10 +62,9 @@ T.Button {
         }
 
         RippleThemed {
-            width: parent.width
-            height: parent.height
-
+            anchors.fill: parent
             anchor: control
+
             pressed: control.pressed
             active: control.enabled && (control.down || control.hovered || control.visualFocus)
             color: control.colorRipple

diff --git a/qml/ComponentLibrary/buttons/SquareButtonImpl.qml b/qml/ComponentLibrary/buttons/SquareButtonImpl.qml
@@ -65,10 +65,9 @@ T.Button {
         }
 
         RippleThemed {
-            width: parent.width
-            height: parent.height
-
+            anchors.fill: parent
             anchor: control
+
             pressed: control.pressed
             active: control.enabled && (control.down || control.hovered || control.visualFocus)
             color: control.colorRipple

diff --git a/qml/ComponentLibrary/controls/DialThemed.qml b/qml/ComponentLibrary/controls/DialThemed.qml
@@ -37,7 +37,6 @@ T.Dial {
 
         opacity: control.enabled ? 1 : 0.66
         color: control.pressed ? Theme.colorSecondary : Theme.colorPrimary
-        antialiasing: true
 
         transform: [
             Translate { y: -Math.min(control.background.width, control.background.height) * 0.4 + 8; },

diff --git a/qml/ComponentLibrary/controls/ItemDelegateThemed.qml b/qml/ComponentLibrary/controls/ItemDelegateThemed.qml
@@ -31,11 +31,10 @@ T.ItemDelegate {
         color: control.highlighted ? control.Material.listHighlightColor : "transparent"
 
         RippleThemed {
-            width: parent.width
-            height: parent.height
+            anchors.fill: parent
+            anchor: control
 
             clip: visible
-            anchor: control
             pressed: control.pressed
             active: enabled && (control.down || control.visualFocus || control.hovered)
             color: Qt.rgba(Theme.colorForeground.r, Theme.colorForeground.g, Theme.colorForeground.b, 0.5)

diff --git a/qml/ComponentLibrary/controls/ProgressBarThemed.qml b/qml/ComponentLibrary/controls/ProgressBarThemed.qml
@@ -15,6 +15,7 @@ T.ProgressBar {
 
     property color colorBackground: Theme.colorComponentBackground
     property color colorForeground: Theme.colorPrimary
+    property bool rounded: false
 
     ////////////////
 
@@ -23,32 +24,35 @@ T.ProgressBar {
         implicitHeight: 12
         y: (control.height - height) / 2
         color: control.colorBackground
+        radius: Theme.componentRadius
     }
 
     ////////////////
 
     contentItem: Item {
+        width: control.width
+        height: control.height
+
         Rectangle {
             width: control.visualPosition * control.width
             height: control.height
             color: control.colorForeground
+            radius: control.rounded ? Theme.componentRadius : 0
         }
-    }
-
-    ////////////////
 
-    layer.enabled: true
-    layer.effect: MultiEffect {
-        maskEnabled: true
-        maskInverted: false
-        maskThresholdMin: 0.5
-        maskSpreadAtMin: 1.0
-        maskSpreadAtMax: 0.0
-        maskSource: ShaderEffectSource {
-            sourceItem: Rectangle {
-                width: control.width
-                height: control.height
-                radius: Theme.componentRadius
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            maskEnabled: true
+            maskInverted: false
+            maskThresholdMin: 0.5
+            maskSpreadAtMin: 1.0
+            maskSpreadAtMax: 0.0
+            maskSource: ShaderEffectSource {
+                sourceItem: Rectangle {
+                    width: control.width
+                    height: control.height
+                    radius: Theme.componentRadius
+                }
             }
         }
     }

diff --git a/qml/ComponentLibrary/controls/ScrollBarThemed.qml b/qml/ComponentLibrary/controls/ScrollBarThemed.qml
@@ -12,8 +12,18 @@ T.ScrollBar {
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                              implicitContentHeight + topPadding + bottomPadding)
 
+    leftPadding: 0
+    rightPadding: 0
+
     visible: (policy !== T.ScrollBar.AlwaysOff)
-    minimumSize: (orientation === Qt.Horizontal) ? height / width : width / height
+
+    minimumSize: (orientation === Qt.Horizontal) ? (height / width) : (width / height)
+
+    property int radius: isDesktop ? 0 : 8
+
+    property color colorBackground: Theme.colorBackground
+    property color colorMoving: Theme.colorSecondary
+    property color colorPressed: Theme.colorPrimary
 
     ////////////////
 
@@ -45,7 +55,8 @@ T.ScrollBar {
         y: control.topPadding
         height: control.height - control.topPadding - control.bottomPadding
 
-        color: Theme.colorBackground
+        radius: control.radius
+        color: control.colorBackground
         opacity: 0.0
     }
 
@@ -55,7 +66,8 @@ T.ScrollBar {
         implicitWidth: control.interactive ? 12 : 6
         implicitHeight: control.interactive ? 12 : 6
 
-        color: control.pressed ? Theme.colorSecondary : Theme.colorForeground
+        radius: control.radius
+        color: control.pressed ? control.colorPressed : control.colorMoving
         opacity: 0.0
     }
 

diff --git a/qml/ComponentLibrary/generic/AndroidButton.qml b/qml/ComponentLibrary/generic/AndroidButton.qml
@@ -29,10 +29,9 @@ T.Button {
         implicitHeight: 48
 
         RippleThemed {
-            width: parent.width
-            height: parent.height
-
+            anchors.fill: parent
             anchor: control
+
             pressed: control.pressed
             active: control.enabled && (control.down || control.visualFocus)
             color: Qt.rgba(control.colorPrimary.r, control.colorPrimary.g, control.colorPrimary.b, 0.1)

diff --git a/qml/ComponentLibrary/generic/AndroidButtonIcon.qml b/qml/ComponentLibrary/generic/AndroidButtonIcon.qml
@@ -24,6 +24,7 @@ T.Button {
     // settings
     property url source
     property int sourceSize: 26
+    property int sourceRotation: 0
     property int layoutDirection: Qt.LeftToRight
 
     // colors
@@ -37,9 +38,9 @@ T.Button {
 
         opacity: control.enabled ? 1 : 0.66
 
-        Rectangle {
-            id: shadowarea
+        Rectangle { // shadowarea
             anchors.fill: parent
+
             border.color: "#eee"
             radius: 8
             border.width: 1
@@ -54,10 +55,9 @@ T.Button {
         }
 
         RippleThemed {
-            width: parent.width
-            height: parent.height
-
+            anchors.fill: parent
             anchor: control
+
             pressed: control.pressed
             active: enabled && (control.down || control.visualFocus)
             color: Qt.rgba(Theme.colorForeground.r, Theme.colorForeground.g, Theme.colorForeground.b, 0.5)
@@ -94,6 +94,7 @@ T.Button {
 
             width: control.sourceSize
             height: control.sourceSize
+            rotation: control.sourceRotation
 
             source: control.source
             color: control.colorPrimary

diff --git a/qml/ComponentLibrary/generic/ButtonChip.qml b/qml/ComponentLibrary/generic/ButtonChip.qml
@@ -30,11 +30,13 @@ T.Button {
     // colors
     property color color: Theme.colorPrimary
 
-    // icon
+    // icons
     property string leftIcon
     property int leftIconSize: UtilsNumber.alignTo(height * 1.0, 2)
+    property int leftIconRotation: 0
     property string rightIcon
     property int rightIconSize: UtilsNumber.alignTo(height * 0.5, 2)
+    property int rightIconRotation: 0
 
     ////////////////
 
@@ -55,10 +57,9 @@ T.Button {
         }
 
         RippleThemed {
-            width: parent.width
-            height: parent.height
-
+            anchors.fill: parent
             anchor: control
+
             pressed: control.pressed
             active: control.enabled && (control.down || control.visualFocus)
             color: Qt.rgba(control.color.r, control.color.g, control.color.b, 0.16)
@@ -100,9 +101,10 @@ T.Button {
                 visible: control.leftIcon.length
 
                 IconSvg {
+                    anchors.centerIn: parent
                     width: control.leftIconSize
                     height: control.leftIconSize
-                    anchors.centerIn: parent
+                    rotation: control.leftIconRotation
 
                     color: control.color
                     source: control.leftIcon
@@ -130,9 +132,10 @@ T.Button {
                 visible: control.rightIcon.length
 
                 IconSvg {
+                    anchors.centerIn: parent
                     width: control.rightIconSize
                     height: control.rightIconSize
-                    anchors.centerIn: parent
+                    rotation: control.rightIconRotation
 
                     color: control.color
                     source: control.rightIcon

diff --git a/qml/ComponentLibrary/generic/ButtonFab.qml b/qml/ComponentLibrary/generic/ButtonFab.qml
@@ -61,10 +61,9 @@ T.Button {
         }
 
         RippleThemed {
-            width: parent.width
-            height: parent.height
-
+            anchors.fill: parent
             anchor: control
+
             pressed: control.pressed
             active: control.enabled && (control.down || control.visualFocus)
             color: Qt.rgba(control.colorHighlight.r, control.colorHighlight.g, control.colorHighlight.b, 0.1)

diff --git a/qml/ComponentLibrary/generic/ButtonFabExtended.qml b/qml/ComponentLibrary/generic/ButtonFabExtended.qml
@@ -68,10 +68,9 @@ T.Button {
         }
 
         RippleThemed {
-            width: parent.width
-            height: parent.height
-
+            anchors.fill: parent
             anchor: control
+
             pressed: control.pressed
             active: control.enabled && (control.down || control.visualFocus)
             color: Qt.rgba(control.colorHighlight.r, control.colorHighlight.g, control.colorHighlight.b, 0.1)

diff --git a/qml/ComponentLibrary/generic/ButtonToggle.qml b/qml/ComponentLibrary/generic/ButtonToggle.qml
@@ -60,10 +60,9 @@ T.Button {
         }
 
         RippleThemed {
-            width: parent.width
-            height: parent.height
-
+            anchors.fill: parent
             anchor: control
+
             pressed: control.pressed
             active: control.enabled && (control.down || control.visualFocus)
             color: control.colorRipple

diff --git a/qml/ComponentLibrary/generic/DataBarSolid.qml b/qml/ComponentLibrary/generic/DataBarSolid.qml
@@ -69,7 +69,7 @@ Item {
                 radius: control.hhh
                 color: control.colorBackground
 
-                layer.enabled: !isDesktop
+                layer.enabled: true
                 layer.effect: MultiEffect {
                     maskEnabled: true
                     maskInverted: false

diff --git a/qml/ComponentLibrary/generic/IconSvg.qml b/qml/ComponentLibrary/generic/IconSvg.qml
@@ -10,6 +10,7 @@ Item {
     property alias source: sourceImg.source
     property alias color: overlayImg.colorizationColor
     property alias fillMode: sourceImg.fillMode
+    property alias smooth: sourceImg.smooth
     property alias asynchronous: sourceImg.asynchronous
 
     Image {
@@ -19,7 +20,7 @@ Item {
         visible: parent.color ? false : true
         sourceSize: Qt.size(width, height)
         fillMode: Image.PreserveAspectFit
-        smooth: control.smooth
+        smooth: false
         asynchronous: false
     }