From 9af22fb134297add49c6643df30ca72f33c09d7d Mon Sep 17 00:00:00 2001 From: Emeric Date: Sat, 23 Nov 2024 20:47:49 +0100 Subject: [PATCH] Various improvements --- qml/DesktopHeader.qml | 4 - qml/MobileApplication.qml | 20 +++++ qml/MobileDrawer.qml | 11 +++ qml/ScreenDesktopComponents.qml | 34 +++++++- qml/ScreenMobileComponents.qml | 79 ++++++++++++++++++- src/main.cpp | 2 +- thirdparty/ComponentLibrary/ThemeEngine.qml | 10 +-- .../menus/ActionMenu_bottom.qml | 49 +++++++++--- .../menus/ActionMenu_floating.qml | 4 +- .../ComponentLibrary/menus/ListTitle.qml | 4 +- thirdparty/SingleApplication/CMakeLists.txt | 35 ++++---- 11 files changed, 209 insertions(+), 43 deletions(-) diff --git a/qml/DesktopHeader.qml b/qml/DesktopHeader.qml index f225f2f..839639e 100644 --- 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 index 61c992c..90c31e7 100644 --- 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 index c70a704..66fb164 100644 --- 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 index ad801c0..bfaa12e 100644 --- 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 index 4a2f95f..4ba6d1e 100644 --- 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 index ee491d9..7ced433 100644 --- 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 index a5dc58c..eb6052d 100644 --- 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" diff --git a/thirdparty/ComponentLibrary/menus/ActionMenu_bottom.qml b/thirdparty/ComponentLibrary/menus/ActionMenu_bottom.qml index 44d66ff..f24cc8b 100644 --- a/thirdparty/ComponentLibrary/menus/ActionMenu_bottom.qml +++ b/thirdparty/ComponentLibrary/menus/ActionMenu_bottom.qml @@ -10,7 +10,7 @@ T.Popup { id: actionMenu implicitWidth: parent.width - implicitHeight: contentColumn.height + implicitHeight: actualHeight y: appWindow.height @@ -28,7 +28,7 @@ T.Popup { property var model: null - property int layoutDirection: Qt.LeftToRight // disabled + property int layoutDirection: Qt.LeftToRight signal menuSelected(var index) @@ -40,8 +40,22 @@ T.Popup { return contentColumn.height } - enter: Transition { NumberAnimation { duration: 233; property: "height"; from: 0; to: actionMenu.actualHeight; } } - exit: Transition { NumberAnimation { duration: 233; property: "height"; from: actionMenu.actualHeight; to: 0; } } + property bool opening: false + property bool closing: false + + onAboutToShow: { + opening = true + closing = false + } + onAboutToHide: { + opening = false + closing = true + } + + //////////////// + + enter: Transition { NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 233; } } + exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.66; duration: 233; } } //////////////// @@ -50,22 +64,34 @@ T.Popup { opacity: Theme.isLight ? 0.24 : 0.48 } - background: Rectangle { + background: Item { } + + contentItem: Item { } + + //////////////// + + Rectangle { + id: actualPopup + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + + height: opening ? actionMenu.actualHeight : 0 + Behavior on height { NumberAnimation { duration: 233 } } + color: Theme.colorComponentBackground - Rectangle { + Rectangle { // separator anchors.left: parent.left anchors.right: parent.right height: Theme.componentBorderWidth color: Theme.colorSeparator } - } - - //////////////// - contentItem: Item { - Column { + Column { // content id: contentColumn + anchors.top: parent.top + anchors.topMargin: 0 anchors.left: parent.left anchors.leftMargin: screenPaddingLeft anchors.right: parent.right @@ -114,6 +140,7 @@ T.Popup { roleValue: "itm" ActionMenuItem { width: actionMenu.width + height: Theme.componentHeight + 4 layoutDirection: actionMenu.layoutDirection index: idx text: txt diff --git a/thirdparty/ComponentLibrary/menus/ActionMenu_floating.qml b/thirdparty/ComponentLibrary/menus/ActionMenu_floating.qml index 23f25e2..b5caef2 100644 --- a/thirdparty/ComponentLibrary/menus/ActionMenu_floating.qml +++ b/thirdparty/ComponentLibrary/menus/ActionMenu_floating.qml @@ -19,7 +19,7 @@ T.Popup { dim: false focus: isMobile closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside - parent: T.Overlay.overlay + //parent: T.Overlay.overlay // let it float property string titleTxt property string titleSrc @@ -48,7 +48,7 @@ T.Popup { autoPaddingEnabled: true shadowEnabled: true shadowOpacity: 0.24 - shadowColor: control.border.color + shadowColor: background.border.color } } diff --git a/thirdparty/ComponentLibrary/menus/ListTitle.qml b/thirdparty/ComponentLibrary/menus/ListTitle.qml index 0afd33c..6744ff1 100644 --- a/thirdparty/ComponentLibrary/menus/ListTitle.qml +++ b/thirdparty/ComponentLibrary/menus/ListTitle.qml @@ -11,7 +11,7 @@ Rectangle { anchors.right: parent.right anchors.rightMargin: singleColumn ? 0 : Theme.componentMargin - height: Theme.componentHeightL + height: Theme.componentHeightXL radius: singleColumn ? 0 : Theme.componentRadius z: 2 @@ -69,7 +69,7 @@ Rectangle { layer.effect: MultiEffect { autoPaddingEnabled: true shadowEnabled: true - shadowOpacity: 0.24 + shadowOpacity: 0.12 shadowColor: control.border.color } diff --git a/thirdparty/SingleApplication/CMakeLists.txt b/thirdparty/SingleApplication/CMakeLists.txt index 7aa6cce..fd05f38 100644 --- a/thirdparty/SingleApplication/CMakeLists.txt +++ b/thirdparty/SingleApplication/CMakeLists.txt @@ -1,32 +1,35 @@ -cmake_minimum_required(VERSION 3.20) - project(SingleApplication LANGUAGES CXX) -set(CMAKE_CXX_STANDARD 14) -set(CMAKE_CXX_STANDARD_REQUIRED ON) +set(CMAKE_CXX_STANDARD 17) set(CMAKE_AUTOMOC ON) ################################################################################ -if(NOT QT_DEFAULT_MAJOR_VERSION) - set(QT_DEFAULT_MAJOR_VERSION 6 CACHE STRING "Qt version to use (5 or 6), defaults to 6") +if(NOT QAPPLICATION_CLASS) + if(IOS OR ANDROID) + message("QAPPLICATION_CLASS is not set, using default for mobile: QGuiApplication") + set(QAPPLICATION_CLASS QGuiApplication) + else() + set(QAPPLICATION_CLASS QApplication) + message("QAPPLICATION_CLASS is not set, using default for desktop: QApplication") + endif() endif() -# Find dependencies +################################################################################ + +# Dependencies set(CORE_COMPONENTS Core Network) -set(CORE_LIBRARIES Qt::Core Qt::Network) +set(CORE_LIBRARIES Qt6::Core Qt6::Network) if(QAPPLICATION_CLASS STREQUAL QApplication) list(APPEND CORE_COMPONENTS Widgets) - list(APPEND CORE_LIBRARIES Qt${QT_DEFAULT_MAJOR_VERSION}::Widgets) + list(APPEND CORE_LIBRARIES Qt6::Widgets) elseif(QAPPLICATION_CLASS STREQUAL QGuiApplication) list(APPEND CORE_COMPONENTS Gui) - list(APPEND CORE_LIBRARIES Qt${QT_DEFAULT_MAJOR_VERSION}::Gui) -else() - set(QAPPLICATION_CLASS QCoreApplication) + list(APPEND CORE_LIBRARIES Qt6::Gui) endif() -find_package(Qt${QT_DEFAULT_MAJOR_VERSION} COMPONENTS ${CORE_COMPONENTS} REQUIRED) +find_package(Qt6 COMPONENTS ${CORE_COMPONENTS} REQUIRED) if(WIN32) if(MSVC) @@ -39,10 +42,10 @@ endif() ################################################################################ -add_library(SingleApplication STATIC SingleApplication.cpp SingleApplication_private.cpp ) +add_library(SingleApplication STATIC SingleApplication.cpp SingleApplication_private.cpp) add_library(SingleApplication::SingleApplication ALIAS SingleApplication) -target_link_libraries(SingleApplication PUBLIC ${CORE_LIBRARIES} ${PLATFORM_LIBRARIES}) +target_link_libraries(SingleApplication PRIVATE ${CORE_LIBRARIES} ${PLATFORM_LIBRARIES}) target_include_directories(SingleApplication PUBLIC ${CMAKE_CURRENT_SOURCE_DIR}) target_compile_definitions(SingleApplication PUBLIC QAPPLICATION_CLASS=${QAPPLICATION_CLASS}) @@ -56,3 +59,5 @@ target_compile_definitions(SingleApplication PRIVATE QT_NO_KEYWORDS QT_NO_FOREACH ) + +################################################################################