Various improvements

emericg · Nov 23, 2024 · 9af22fb · 9af22fb
1 parent d8758b8
commit 9af22fb
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 43 deletions.
diff --git a/qml/DesktopHeader.qml b/qml/DesktopHeader.qml
@@ -47,9 +47,6 @@ Rectangle {
         anchors.bottomMargin: 6
         width: height
 
-        enabled: (source !== "qrc:/IconLibrary/material-symbols/arrow_back.svg" || wideMode)
-        visible: enabled
-
         colorBackground: Theme.colorHeader
         colorHighlight: Theme.colorHeaderHighlight
         colorIcon: Theme.colorHeaderContent
@@ -63,7 +60,6 @@ Rectangle {
         anchors.leftMargin: 72
         anchors.verticalCenter: parent.verticalCenter
 
-        visible: wideMode
         text: appHeader.headerTitle
         font.bold: true
         font.pixelSize: Theme.fontSizeHeader

diff --git a/qml/MobileApplication.qml b/qml/MobileApplication.qml
@@ -258,6 +258,9 @@ ApplicationWindow {
         ScreenMobileComponents {
             id: screenMobileComponents
         }
+        ScreenPlayground {
+            id: screenPlayground
+        }
         ScreenFontInfos {
             id: screenFontInfos
         }
@@ -287,6 +290,18 @@ ApplicationWindow {
                 name: "MobileComponents"
                 PropertyChanges { target: appHeader; headerTitle: "QmlAppTemplate"; }
                 PropertyChanges { target: screenMobileComponents; visible: true; enabled: true; }
+                PropertyChanges { target: screenPlayground; visible: false; enabled: false; }
+                PropertyChanges { target: screenFontInfos; visible: false; enabled: false; }
+                PropertyChanges { target: screenHostInfos; visible: false; enabled: false; }
+                PropertyChanges { target: screenSettings; visible: false; enabled: false; }
+                PropertyChanges { target: screenAbout; visible: false; enabled: false; }
+                PropertyChanges { target: screenAboutPermissions; visible: false; enabled: false; }
+            },
+            State {
+                name: "Playground"
+                PropertyChanges { target: appHeader; headerTitle: "Playground"; }
+                PropertyChanges { target: screenMobileComponents; visible: false; enabled: false; }
+                PropertyChanges { target: screenPlayground; visible: true; enabled: true; }
                 PropertyChanges { target: screenFontInfos; visible: false; enabled: false; }
                 PropertyChanges { target: screenHostInfos; visible: false; enabled: false; }
                 PropertyChanges { target: screenSettings; visible: false; enabled: false; }
@@ -297,6 +312,7 @@ ApplicationWindow {
                 name: "FontInfos"
                 PropertyChanges { target: appHeader; headerTitle: "Font infos"; }
                 PropertyChanges { target: screenMobileComponents; visible: false; enabled: false; }
+                PropertyChanges { target: screenPlayground; visible: false; enabled: false; }
                 PropertyChanges { target: screenFontInfos; visible: true; enabled: true; }
                 PropertyChanges { target: screenHostInfos; visible: false; enabled: false; }
                 PropertyChanges { target: screenSettings; visible: false; enabled: false; }
@@ -307,6 +323,7 @@ ApplicationWindow {
                 name: "HostInfos"
                 PropertyChanges { target: appHeader; headerTitle: "Host infos"; }
                 PropertyChanges { target: screenMobileComponents; visible: false; enabled: false; }
+                PropertyChanges { target: screenPlayground; visible: false; enabled: false; }
                 PropertyChanges { target: screenFontInfos; visible: false; enabled: false; }
                 PropertyChanges { target: screenHostInfos; visible: true; enabled: true; }
                 PropertyChanges { target: screenSettings; visible: false; enabled: false; }
@@ -317,6 +334,7 @@ ApplicationWindow {
                 name: "Settings"
                 PropertyChanges { target: appHeader; headerTitle: qsTr("Settings"); }
                 PropertyChanges { target: screenMobileComponents; visible: false; enabled: false; }
+                PropertyChanges { target: screenPlayground; visible: false; enabled: false; }
                 PropertyChanges { target: screenFontInfos; visible: false; enabled: false; }
                 PropertyChanges { target: screenHostInfos; visible: false; enabled: false; }
                 PropertyChanges { target: screenSettings; visible: true; enabled: true; }
@@ -327,6 +345,7 @@ ApplicationWindow {
                 name: "About"
                 PropertyChanges { target: appHeader; headerTitle: qsTr("About"); }
                 PropertyChanges { target: screenMobileComponents; visible: false; enabled: false; }
+                PropertyChanges { target: screenPlayground; visible: false; enabled: false; }
                 PropertyChanges { target: screenFontInfos; visible: false; enabled: false; }
                 PropertyChanges { target: screenHostInfos; visible: false; enabled: false; }
                 PropertyChanges { target: screenSettings; visible: false; enabled: false; }
@@ -337,6 +356,7 @@ ApplicationWindow {
                 name: "AboutPermissions"
                 PropertyChanges { target: appHeader; headerTitle: qsTr("Permissions"); }
                 PropertyChanges { target: screenMobileComponents; visible: false; enabled: false; }
+                PropertyChanges { target: screenPlayground; visible: false; enabled: false; }
                 PropertyChanges { target: screenFontInfos; visible: false; enabled: false; }
                 PropertyChanges { target: screenHostInfos; visible: false; enabled: false; }
                 PropertyChanges { target: screenSettings; visible: false; enabled: false; }

diff --git a/qml/MobileDrawer.qml b/qml/MobileDrawer.qml
@@ -96,6 +96,17 @@ DrawerThemed {
                     }
                 }
 
+                DrawerItem {
+                    text: qsTr("Playground")
+                    source: "qrc:/IconLibrary/material-symbols/build-fill.svg"
+                    highlighted: (appContent.state === "Playground")
+
+                    onClicked: {
+                        screenPlayground.loadScreen()
+                        appDrawer.close()
+                    }
+                }
+
                 DrawerItem {
                     text: qsTr("Host infos")
                     source: "qrc:/IconLibrary/material-icons/duotone/memory.svg"

diff --git a/qml/ScreenDesktopComponents.qml b/qml/ScreenDesktopComponents.qml
@@ -293,9 +293,8 @@ Loader {
                     }
 
                     ComboBoxThemed {
-                        id: comboBoxAppTheme
-                        width: 256
                         anchors.verticalCenter: parent.verticalCenter
+                        width: 256
 
                         model: ListModel {
                             id: cbAppTheme
@@ -367,6 +366,37 @@ Loader {
                             ListElement { idx: 1; txt: "dark"; sz: 0; }
                         }
                     }
+
+                    SquareButtonSunken {
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: 40
+                        height: 40
+
+                        source: "qrc:/IconLibrary/material-symbols/more_vert.svg"
+                        onClicked: actionMenu.open()
+
+                        ActionMenu_floating {
+                            id: actionMenu
+                            parent: parent
+
+                            width: 240
+
+                            titleTxt: "back"
+                            titleSrc: "qrc:/IconLibrary/material-symbols/chevron_left.svg"
+
+                            model: ListModel {
+                                id: lmActionMenu
+                                ListElement { t: "itm"; idx: 1; txt: "Action 1"; src: "qrc:/IconLibrary/material-symbols/accessibility.svg"; }
+                                ListElement { t: "itm"; idx: 2; txt: "Action 2"; src: "qrc:/IconLibrary/material-symbols/accessibility.svg"; }
+                                ListElement { t: "sep"; }
+                                ListElement { t: "itm"; idx: 3; txt: "Action 3"; src: "qrc:/IconLibrary/material-symbols/accessibility.svg"; }
+                            }
+
+                            onMenuSelected: (index) => {
+                                //console.log("ActionMenu clicked #" + index)
+                            }
+                        }
+                    }
                 }
 
                 ////////////////

diff --git a/qml/ScreenMobileComponents.qml b/qml/ScreenMobileComponents.qml
@@ -51,9 +51,86 @@ Loader {
 
         ////////
 
+        Loader {
+            id: stackViewHeader
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: 56
+            z: 10
+
+            active: isDesktop
+            asynchronous: true
+
+            sourceComponent: Rectangle {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                height: 56
+
+                color: Theme.colorActionbar
+
+                Row {
+                    anchors.top: parent.top
+                    anchors.topMargin: 8
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 8
+                    spacing: 16
+
+                    SquareButtonClear { // buttonBack
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        width: height
+
+                        //colorBackground: Theme.colorActionbar
+                        //colorHighlight: Theme.colorActionbarHighlight
+                        //colorIcon: Theme.colorActionbarContent
+
+                        source: "qrc:/IconLibrary/material-symbols/arrow_back.svg"
+                        onClicked: backAction()
+                    }
+
+                    SquareButtonClear { // buttonMenu
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        width: height
+
+                        //colorBackground: Theme.colorActionbar
+                        //colorHighlight: Theme.colorActionbarHighlight
+                        //colorIcon: Theme.colorActionbarContent
+
+                        source: "qrc:/IconLibrary/material-symbols/more_vert.svg"
+                        onClicked: actionMenu.open()
+
+                        ActionMenu_bottom {
+                            id: actionMenu
+
+                            titleTxt: "ActionMenu"
+                            //titleSrc: "qrc:/IconLibrary/material-symbols/chevron_left.svg"
+
+                            model: ListModel {
+                                id: lmActionMenu
+                                ListElement { t: "itm"; idx: 1; txt: "Action 1"; src: "qrc:/IconLibrary/material-symbols/accessibility.svg"; }
+                                ListElement { t: "itm"; idx: 2; txt: "Action 2"; src: "qrc:/IconLibrary/material-symbols/accessibility.svg"; }
+                                ListElement { t: "sep"; }
+                                ListElement { t: "itm"; idx: 3; txt: "Action 3"; src: "qrc:/IconLibrary/material-symbols/accessibility.svg"; }
+                            }
+
+                            onMenuSelected: (index) => {
+                                //console.log("ActionMenu clicked #" + index)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        ////////
+
         StackView {
             id: stackView
             anchors.fill: parent
+            anchors.topMargin: stackViewHeader.active ? stackViewHeader.height : 0
 
             initialItem: mainView
         }
@@ -146,8 +223,8 @@ Loader {
                     topMargin: Theme.componentMargin
                     bottomMargin: Theme.componentMargin
 
-                    delegate: listComponent
                     model: pagesModel
+                    delegate: listComponent
                 }
 
                 ////////

diff --git a/src/main.cpp b/src/main.cpp
@@ -51,6 +51,7 @@ int main(int argc, char *argv[])
 
     // Application name
     app.setApplicationName("QmlAppTemplate");
+    app.setApplicationDisplayName("QmlAppTemplate");
     app.setOrganizationName("emeric");
     app.setOrganizationDomain("emeric");
 
@@ -88,7 +89,6 @@ int main(int argc, char *argv[])
 
     MobileUI::registerQML();
 
-    // Then we start the UI
     QQmlApplicationEngine engine;
     engine.addImportPath(":/qt/qml/QmlAppTemplate");
     engine.addImportPath(":/qt/qml/ComponentLibrary");

diff --git a/thirdparty/ComponentLibrary/ThemeEngine.qml b/thirdparty/ComponentLibrary/ThemeEngine.qml
@@ -154,7 +154,7 @@ Item {
     property color colorComponentBorder
     property color colorComponentDown
     property color colorComponentBackground
-    property color colorComponentShadow: isLight ? "#44000000" : "#88000000"
+    property color colorComponentShadow: isLight ? "#40000000" : "#88000000"
 
     property int componentRadius: 4
     property int componentBorderWidth: 2
@@ -357,7 +357,7 @@ Item {
             colorIcon                   = "#303030"
             colorSeparator              = "#ececec"
             colorLowContrast            = "white"
-            colorHighContrast           = "black"
+            colorHighContrast           = "#303030"
 
             colorComponent              = "#f0f0f0"
             colorComponentText          = "black"
@@ -469,7 +469,7 @@ Item {
             colorIcon                   = "#303030"
             colorSeparator              = "#ececec"
             colorLowContrast            = "white"
-            colorHighContrast           = "black"
+            colorHighContrast           = "#303030"
 
             colorComponent              = "#f6f6f6"
             colorComponentText          = "black"
@@ -776,7 +776,7 @@ Item {
             colorIcon                   = "#333333"
             colorSeparator              = "#e8e8e8"
             colorLowContrast            = "white"
-            colorHighContrast           = "black"
+            colorHighContrast           = "#303030"
 
             colorComponent              = "#EAEAEA"
             colorComponentText          = "black"
@@ -1006,7 +1006,7 @@ Item {
             colorIcon                   = "#333"
             colorSeparator              = "#E4E4E4"
             colorLowContrast            = "white"
-            colorHighContrast           = "black"
+            colorHighContrast           = "#303030"
 
             colorComponent              = "#EAEAEA"
             colorComponentText          = "black"