From 5276d595790a0945c68fa3a3bf1dad6f45188386 Mon Sep 17 00:00:00 2001 From: Emeric Date: Wed, 17 Jan 2024 17:37:07 +0100 Subject: [PATCH] Update QML components --- qml/DesktopSidebar.qml | 12 +-- qml/components_generic/DesktopSidebarItem.qml | 72 +++++++--------- qml/components_generic/SelectorGrid.qml | 71 ++++++++++++++++ qml/components_generic/SelectorGridItem.qml | 82 +++++++++++++++++++ qml/components_themed/DrawerThemed.qml | 2 +- .../SwitchThemed_desktop.qml | 13 +-- src/main.cpp | 2 +- 7 files changed, 199 insertions(+), 55 deletions(-) create mode 100644 qml/components_generic/SelectorGrid.qml create mode 100644 qml/components_generic/SelectorGridItem.qml diff --git a/qml/DesktopSidebar.qml b/qml/DesktopSidebar.qml index c2a11f0..9fcb3c3 100644 --- a/qml/DesktopSidebar.qml +++ b/qml/DesktopSidebar.qml @@ -41,7 +41,7 @@ Rectangle { sourceSize: 40 highlightMode: "indicator" - selected: (appContent.state === "DesktopComponents") + highlighted: (appContent.state === "DesktopComponents") onClicked: screenDesktopComponents.loadScreen() } DesktopSidebarItem { @@ -49,7 +49,7 @@ Rectangle { sourceSize: 40 highlightMode: "indicator" - selected: (appContent.state === "MobileComponents") + highlighted: (appContent.state === "MobileComponents") onClicked: screenMobileComponents.loadScreen() } DesktopSidebarItem { @@ -57,7 +57,7 @@ Rectangle { sourceSize: 40 highlightMode: "indicator" - selected: (appContent.state === "HostInfos") + highlighted: (appContent.state === "HostInfos") onClicked: screenHostInfos.loadScreen() } DesktopSidebarItem { @@ -65,7 +65,7 @@ Rectangle { sourceSize: 40 highlightMode: "indicator" - selected: (appContent.state === "FontInfos") + highlighted: (appContent.state === "FontInfos") onClicked: screenFontInfos.loadScreen() } } @@ -83,7 +83,7 @@ Rectangle { sourceSize: 40 highlightMode: "indicator" - selected: (appContent.state === "Settings") + highlighted: (appContent.state === "Settings") onClicked: screenSettings.loadScreen() } @@ -92,7 +92,7 @@ Rectangle { sourceSize: 40 highlightMode: "indicator" - selected: (appContent.state === "About") + highlighted: (appContent.state === "About") onClicked: screenAbout.loadScreen() } diff --git a/qml/components_generic/DesktopSidebarItem.qml b/qml/components_generic/DesktopSidebarItem.qml index 1ce55ae..1f4a42a 100644 --- a/qml/components_generic/DesktopSidebarItem.qml +++ b/qml/components_generic/DesktopSidebarItem.qml @@ -1,28 +1,25 @@ import QtQuick 2.15 -import QtQuick.Layouts 1.15 +import QtQuick.Layouts 2.15 +import QtQuick.Controls.impl 2.15 +import QtQuick.Templates 2.15 as T import ThemeEngine 1.0 +import "qrc:/js/UtilsNumber.js" as UtilsNumber -Item { +T.Button { id: control + implicitWidth: 64 implicitHeight: 64 + focusPolicy: Qt.NoFocus + width: parent.width // width drive the size of this element height: Math.max(parent.width, content.height + 24) - // actions - signal clicked() - signal pressed() - signal pressAndHold() - - // states - property bool selected: false - - // settings property url source property int sourceSize: 40 - property string text + property string highlightMode: "background" // available: background, indicator, circle, content // colors @@ -30,26 +27,16 @@ Item { property string colorHighlight: Theme.colorSidebarHighlight // indicator - property url indicatorSource: "qrc:/assets/icons_material/baseline-autorenew-24px.svg" + property bool indicatorVisible: false property bool indicatorAnimated: false + property color indicatorColor: "white" + property url indicatorSource: "" //////////////////////////////////////////////////////////////////////////// - MouseArea { - id: mouseArea - anchors.fill: parent - hoverEnabled: true - - onClicked: control.clicked() - onPressed: control.pressed() - onPressAndHold: control.pressAndHold() - } - - //////////////////////////////////////////////////////////////////////////// - - Rectangle { - id: background - anchors.centerIn: parent + background: Rectangle { + implicitWidth: 64 + implicitHeight: 64 width: (control.highlightMode === "circle") ? height : parent.width height: parent.height @@ -60,21 +47,22 @@ Item { control.highlightMode === "circle") color: control.colorHighlight opacity: { - if (control.selected) return 1 - if (mouseArea.containsMouse) return 0.5 + if (control.highlighted) return 1 + if (control.hovered) return 0.5 return 0 } Behavior on opacity { OpacityAnimator { duration: 233 } } - } - Rectangle { - id: backgroundIndicator - anchors.top: parent.top - anchors.left: parent.left - anchors.bottom: parent.bottom - width: 6 - visible: (control.selected && control.highlightMode === "indicator") - color: Theme.colorPrimary + Rectangle { + id: backgroundIndicator + anchors.top: parent.top + anchors.left: parent.left + anchors.bottom: parent.bottom + + width: 6 + visible: (control.highlighted && control.highlightMode === "indicator") + color: Theme.colorPrimary + } } //////////////////////////////////////////////////////////////////////////// @@ -100,7 +88,7 @@ Item { visible: source.toString().length source: control.source - color: (!control.selected && control.highlightMode === "content") ? control.colorHighlight : control.colorContent + color: (!control.highlighted && control.highlightMode === "content") ? control.colorHighlight : control.colorContent opacity: control.enabled ? 1.0 : 0.33 Item { @@ -110,7 +98,7 @@ Item { anchors.rightMargin: -4 anchors.bottom: parent.bottom - opacity: control.indicatorAnimated ? 1 : 0 + opacity: (control.indicatorVisible || control.indicatorAnimated) ? 1 : 0 Behavior on opacity { OpacityAnimator { duration: 500 } } Rectangle { @@ -144,7 +132,7 @@ Item { visible: control.text text: control.text textFormat: Text.PlainText - color: (!control.selected && control.highlightMode === "content") ? control.colorHighlight : control.colorContent + color: (!control.highlighted && control.highlightMode === "content") ? control.colorHighlight : control.colorContent font.pixelSize: Theme.fontSizeContentVerySmall font.bold: true diff --git a/qml/components_generic/SelectorGrid.qml b/qml/components_generic/SelectorGrid.qml new file mode 100644 index 0000000..6dfd5e7 --- /dev/null +++ b/qml/components_generic/SelectorGrid.qml @@ -0,0 +1,71 @@ +import QtQuick 2.15 + +import ThemeEngine 1.0 + +Item { + id: selectorGrid + + implicitWidth: 512 + implicitHeight: 40 + + width: parent.width + height: (selectorGrid.btnRows * btnHeight) + (selectorGrid.btnRows * contentPositioner.spacing) + + opacity: enabled ? 1 : 0.4 + + property int btnCols: 4 + property int btnRows: 3 + property int btnWidth: width / selectorGrid.btnCols + property int btnHeight: 40 + + signal menuSelected(var index) + property int currentSelection: 0 + + property var model: null + + //////////////// + + Rectangle { // background + anchors.fill: parent + radius: Theme.componentRadius + color: Theme.colorComponentBackground + } + + //////////////// + + Grid { + id: contentPositioner + anchors.fill: parent + anchors.margins: 0 + spacing: 1 + + columns: selectorGrid.btnCols + rows: selectorGrid.btnRows + + Repeater { + model: selectorGrid.model + delegate: SelectorGridItem { + width: selectorGrid.btnWidth + height: selectorGrid.btnHeight + + highlighted: (selectorGrid.currentSelection === idx) + index: idx ?? 0 + text: txt ?? "" + onClicked: selectorGrid.menuSelected(idx) + } + } + } + + //////////////// + + Rectangle { // foreground border + anchors.fill: parent + radius: Theme.componentRadius + + color: "transparent" + border.width: Theme.componentBorderWidth + border.color: Theme.colorComponentBorder + } + + //////////////// +} diff --git a/qml/components_generic/SelectorGridItem.qml b/qml/components_generic/SelectorGridItem.qml new file mode 100644 index 0000000..006ae21 --- /dev/null +++ b/qml/components_generic/SelectorGridItem.qml @@ -0,0 +1,82 @@ +import QtQuick 2.15 +import QtQuick.Controls.impl 2.15 +import QtQuick.Templates 2.15 as T + +import ThemeEngine 1.0 + +T.Button { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + leftPadding: 16 + rightPadding: 16 + + focusPolicy: Qt.NoFocus + + // settings + property int index + property url source + property int sourceSize: 32 + + // colors + property string colorContent: Theme.colorComponentText + property string colorContentHighlight: Theme.colorComponentContent + property string colorBackgroundHighlight: Theme.colorComponentDown + + //////////////// + + background: Rectangle { + implicitWidth: 32 + implicitHeight: 32 + radius: Theme.componentRadius + + color: control.colorBackgroundHighlight + opacity: { + if (control.hovered && control.highlighted) return 0.9 + else if (control.highlighted) return 0.7 + else if (control.hovered) return 0.5 + return 0 + } + Behavior on opacity { OpacityAnimator { duration: 133 } } + } + + //////////////// + + contentItem: Item { + Row { + anchors.centerIn: parent + spacing: 4 + + IconSvg { // contentImage + anchors.verticalCenter: parent.verticalCenter + visible: control.source.toString().length + + width: control.sourceSize + height: control.sourceSize + + source: control.source + color: control.highlighted ? control.colorContentHighlight : control.colorContent + opacity: control.highlighted ? 1 : 0.5 + } + + Text { // contentText + anchors.verticalCenter: parent.verticalCenter + visible: control.text + + text: control.text + textFormat: Text.PlainText + font: control.font + verticalAlignment: Text.AlignVCenter + + color: control.highlighted ? control.colorContentHighlight : control.colorContent + opacity: control.highlighted ? 1 : 0.66 + } + } + } + + //////////////// +} diff --git a/qml/components_themed/DrawerThemed.qml b/qml/components_themed/DrawerThemed.qml index 0ba875e..0aa03a1 100644 --- a/qml/components_themed/DrawerThemed.qml +++ b/qml/components_themed/DrawerThemed.qml @@ -14,7 +14,7 @@ T.Drawer { implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, contentHeight + topPadding + bottomPadding) - width: (appWindow.screenOrientation === Qt.PortraitOrientation || appWindow.width < 480) + width: (appWindow.singleColumn || appWindow.screenOrientation === Qt.PortraitOrientation || appWindow.width < 480) ? 0.8 * appWindow.width : 0.5 * appWindow.width height: appWindow.height diff --git a/qml/components_themed/SwitchThemed_desktop.qml b/qml/components_themed/SwitchThemed_desktop.qml index 08d7e26..26e79eb 100644 --- a/qml/components_themed/SwitchThemed_desktop.qml +++ b/qml/components_themed/SwitchThemed_desktop.qml @@ -17,14 +17,17 @@ T.Switch { font.pixelSize: Theme.componentFontSize + property color colorText: Theme.colorText + property color colorSubText: Theme.colorSubText + //////////////// indicator: Rectangle { implicitWidth: 48 implicitHeight: Theme.componentHeight - x: control.leftPadding - y: (parent.height / 2) - (height / 2) + x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2 + y: control.topPadding + (control.availableHeight - height) / 2 width: 48 height: (width / 2) radius: (width / 2) @@ -57,15 +60,15 @@ T.Switch { } contentItem: Text { - leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0 - rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0 + leftPadding: !control.mirrored ? control.indicator.width + control.spacing : 0 + rightPadding: control.mirrored ? control.indicator.width + control.spacing : 0 opacity: enabled ? 1.0 : 0.33 text: control.text textFormat: Text.PlainText font: control.font - color: control.checked ? Theme.colorText : Theme.colorSubText + color: control.checked ? control.colorText : control.colorSubText elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } diff --git a/src/main.cpp b/src/main.cpp index d8e24ab..a54254f 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -24,7 +24,7 @@ #include #include #include -#include +#include #include #include