Update QML components

emericg · Oct 9, 2023 · 2c4ec88 · 2c4ec88
1 parent f74ae01
commit 2c4ec88
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 31 deletions.
diff --git a/qml/PageDialogs.qml b/qml/PageDialogs.qml
@@ -102,7 +102,7 @@ Flickable {
 
             PopupTime {
                 id: popupTime
-                onUpdateTime: (newtime) => { savethedate = newtime }
+                //onUpdateTime: (newtime) => { savethedate = newtime }
             }
 
             onClicked: popupTime.openTime(savethedate)

diff --git a/qml/PageSelectors.qml b/qml/PageSelectors.qml
@@ -28,75 +28,112 @@ Flickable {
             icon: ""
         }
 
+        ListModel {
+            id: lmSelectorMenuTxt
+            ListElement { idx: 1; txt: "4/3"; src: ""; sz: 0; }
+            ListElement { idx: 2; txt: "16/9"; src: ""; sz: 0; }
+            ListElement { idx: 3; txt: "21/9"; src: ""; sz: 0; }
+        }
+        ListModel {
+            id: lmSelectorMenuImg
+            ListElement { idx: 1; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 20; }
+            ListElement { idx: 2; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 26; }
+            ListElement { idx: 3; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 32; }
+        }
+        ListModel {
+            id: lmSelectorMenuImgTxt
+            ListElement { idx: 1; txt: "4/3"; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 20; }
+            ListElement { idx: 2; txt: "16/9"; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 26; }
+            ListElement { idx: 3; txt: "21/9"; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 32; }
+        }
+
+        ////
+
         SelectorMenuThemed {
             anchors.horizontalCenter: parent.horizontalCenter
-            height: 40
+            height: 32
 
             currentSelection: 1
-            model: ListModel {
-                id: lmSelectorMenuImg1
-                ListElement { idx: 1; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 20; }
-                ListElement { idx: 2; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 26; }
-                ListElement { idx: 3; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 32; }
-            }
+            model: lmSelectorMenuTxt
 
             onMenuSelected: (index) => {
                 //console.log("SelectorMenu clicked #" + index)
                 currentSelection = index
             }
         }
 
+        ////
+
         SelectorMenuThemed {
             anchors.horizontalCenter: parent.horizontalCenter
-            height: 32
+            height: 40
 
             currentSelection: 1
-            model: ListModel {
-                id: lmSelectorMenuTxt1
-                ListElement { idx: 1; txt: "4/3"; src: ""; sz: 0; }
-                ListElement { idx: 2; txt: "16/9"; src: ""; sz: 0; }
-                ListElement { idx: 3; txt: "21/9"; src: ""; sz: 0; }
+            model: lmSelectorMenuImg
+
+            onMenuSelected: (index) => {
+                //console.log("SelectorMenu clicked #" + index)
+                currentSelection = index
             }
+        }
+
+        ////
+
+        SelectorMenuThemed {
+            anchors.horizontalCenter: parent.horizontalCenter
+            height: 36
+
+            model: lmSelectorMenuImgTxt
 
             onMenuSelected: (index) => {
                 //console.log("SelectorMenu clicked #" + index)
                 currentSelection = index
             }
         }
 
+        ////
+
         SelectorMenu {
             anchors.horizontalCenter: parent.horizontalCenter
-            height: 40
+            height: 32
 
             currentSelection: 1
-            model: ListModel {
-                id: lmSelectorMenuImg2
-                ListElement { idx: 1; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 20; }
-                ListElement { idx: 2; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 26; }
-                ListElement { idx: 3; src: "qrc:/assets/icons_material/baseline-accessibility-24px.svg"; sz: 32; }
-            }
+            model: lmSelectorMenuTxt
 
             onMenuSelected: (index) => {
                 //console.log("SelectorMenu clicked #" + index)
                 currentSelection = index
             }
         }
 
+        ////
+
         SelectorMenu {
             anchors.horizontalCenter: parent.horizontalCenter
-            height: 32
+            height: 40
 
-            model: ListModel {
-                id: lmSelectorMenuTxt2
-                ListElement { idx: 1; txt: "4/3"; src: ""; sz: 0; }
-                ListElement { idx: 2; txt: "16/9"; src: ""; sz: 0; }
-                ListElement { idx: 3; txt: "21/9"; src: ""; sz: 0; }
+            model: lmSelectorMenuImg
+
+            onMenuSelected: (index) => {
+                //console.log("SelectorMenu clicked #" + index)
+                currentSelection = index
             }
+        }
+
+        ////
+
+        SelectorMenu {
+            anchors.horizontalCenter: parent.horizontalCenter
+            height: 36
+
+            model: lmSelectorMenuImgTxt
 
             onMenuSelected: (index) => {
                 //console.log("SelectorMenu clicked #" + index)
                 currentSelection = index
             }
         }
+
+        ////
     }
 }
diff --git a/qml/ScreenDesktopComponents.qml b/qml/ScreenDesktopComponents.qml
@@ -1,6 +1,9 @@
 import QtQuick
 import QtQuick.Controls
 
+import QtQuick.Effects
+import Qt5Compat.GraphicalEffects
+
 import ThemeEngine
 
 Loader {

diff --git a/qml/components_generic/SelectorMenuItem.qml b/qml/components_generic/SelectorMenuItem.qml
@@ -47,6 +47,8 @@ T.Button {
     ////////////////
 
     contentItem: Row {
+        spacing: 4
+
         IconSvg { // contentImage
             anchors.verticalCenter: parent.verticalCenter
             visible: control.source.toString().length
@@ -65,7 +67,7 @@ T.Button {
 
             text: control.text
             textFormat: Text.PlainText
-            font.pixelSize: Theme.componentFontSize
+            font: control.font
             verticalAlignment: Text.AlignVCenter
 
             color: control.highlighted ? control.colorContentHighlight : control.colorContent

diff --git a/qml/components_themed/PageIndicatorThemed.qml b/qml/components_themed/PageIndicatorThemed.qml
@@ -18,14 +18,16 @@ T.PageIndicator {
     count: 1
     currentIndex: 1
 
+    property color color: "white"
+
     ////////////////
 
     delegate: Rectangle {
         implicitWidth: 12
         implicitHeight: 12
         radius: (width / 2)
 
-        color: Theme.colorHeaderContent
+        color: control.color
         opacity: (index === control.currentIndex) ? (0.95) : (control.pressed ? 0.7 : 0.45)
 
         required property int index

diff --git a/qml/components_themed/ProgressBarThemed.qml b/qml/components_themed/ProgressBarThemed.qml
@@ -2,6 +2,9 @@ import QtQuick 2.15
 import QtQuick.Controls.impl 2.15
 import QtQuick.Templates 2.15 as T
 
+//import QtGraphicalEffects 1.15 // Qt5
+import Qt5Compat.GraphicalEffects // Qt6
+
 import ThemeEngine 1.0
 
 T.ProgressBar {
@@ -21,7 +24,6 @@ T.ProgressBar {
         implicitWidth: 200
         implicitHeight: 12
         y: (control.height - height) / 2
-        height: 12
 
         radius: (Theme.componentRadius / 2)
         color: control.colorBackground
@@ -33,9 +35,19 @@ T.ProgressBar {
         Rectangle {
             width: control.visualPosition * control.width
             height: control.height
-            radius: (Theme.componentRadius / 2)
             color: control.colorForeground
         }
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                x: contentItem.x
+                y: contentItem.y
+                width: contentItem.width
+                height: contentItem.height
+                radius: contentItem.height
+            }
+        }
     }
 
     ////////////////

diff --git a/qml/components_themed/SelectorMenuThemedItem.qml b/qml/components_themed/SelectorMenuThemedItem.qml
@@ -48,6 +48,8 @@ T.Button {
     ////////////////
 
     contentItem: Row {
+        spacing: 4
+
         IconSvg { // contentImage
             anchors.verticalCenter: parent.verticalCenter
             visible: control.source.toString().length