From c680b07844be9a05d485910046fa7f6fa0738e54 Mon Sep 17 00:00:00 2001 From: Lubos Date: Mon, 18 Dec 2023 19:12:56 +0100 Subject: [PATCH 1/5] Added selectable toolbar --- app/icons/Global.svg | 7 ++ app/icons/Home.svg | 4 ++ app/icons/Projects.svg | 5 ++ app/icons/icons.qrc | 3 + app/mmstyle.h | 8 ++- app/qml/components/MMSelectableToolbar.qml | 41 ++++++++++++ .../components/MMSelectableToolbarButton.qml | 64 +++++++++++++++++++ gallery/qml.qrc | 2 + gallery/qml/pages/IconsPage.qml | 23 +++++-- gallery/qml/pages/ToolbarPage.qml | 40 ++++++++++++ 10 files changed, 192 insertions(+), 5 deletions(-) create mode 100644 app/icons/Global.svg create mode 100644 app/icons/Home.svg create mode 100644 app/icons/Projects.svg create mode 100644 app/qml/components/MMSelectableToolbar.qml create mode 100644 app/qml/components/MMSelectableToolbarButton.qml diff --git a/app/icons/Global.svg b/app/icons/Global.svg new file mode 100644 index 000000000..cf3548d8a --- /dev/null +++ b/app/icons/Global.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/icons/Home.svg b/app/icons/Home.svg new file mode 100644 index 000000000..83d44dbb9 --- /dev/null +++ b/app/icons/Home.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/icons/Projects.svg b/app/icons/Projects.svg new file mode 100644 index 000000000..cc7e89d73 --- /dev/null +++ b/app/icons/Projects.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc index 567c5a10c..d6c92c2e0 100644 --- a/app/icons/icons.qrc +++ b/app/icons/icons.qrc @@ -56,5 +56,8 @@ XTwitter.svg Youtube.svg Globe.svg + Global.svg + Home.svg + Projects.svg diff --git a/app/mmstyle.h b/app/mmstyle.h index e8f0d414e..a0aa7a2f6 100644 --- a/app/mmstyle.h +++ b/app/mmstyle.h @@ -100,7 +100,10 @@ class MMStyle: public QObject Q_PROPERTY( QUrl environmentalIcon READ environmentalIcon CONSTANT ) Q_PROPERTY( QUrl errorIcon READ errorIcon CONSTANT ) Q_PROPERTY( QUrl facebookIcon READ facebookIcon CONSTANT ) + Q_PROPERTY( QUrl globeIcon READ globeIcon CONSTANT ) + Q_PROPERTY( QUrl globalIcon READ globalIcon CONSTANT ) Q_PROPERTY( QUrl hideIcon READ hideIcon CONSTANT ) + Q_PROPERTY( QUrl homeIcon READ homeIcon CONSTANT ) Q_PROPERTY( QUrl infoIcon READ infoIcon CONSTANT ) Q_PROPERTY( QUrl linkedinIcon READ linkedinIcon CONSTANT ) Q_PROPERTY( QUrl mastodonIcon READ mastodonIcon CONSTANT ) @@ -111,6 +114,7 @@ class MMStyle: public QObject Q_PROPERTY( QUrl otherIcon READ otherIcon CONSTANT ) Q_PROPERTY( QUrl othersIcon READ othersIcon CONSTANT ) Q_PROPERTY( QUrl projectButtonMoreIcon READ projectButtonMoreIcon CONSTANT ) + Q_PROPERTY( QUrl projectsIcon READ projectsIcon CONSTANT ) Q_PROPERTY( QUrl qgisIcon READ qgisIcon CONSTANT ) Q_PROPERTY( QUrl qrCodeIcon READ qrCodeIcon CONSTANT ) Q_PROPERTY( QUrl redditIcon READ redditIcon CONSTANT ) @@ -131,7 +135,6 @@ class MMStyle: public QObject Q_PROPERTY( QUrl xMarkIcon READ xMarkIcon CONSTANT ) Q_PROPERTY( QUrl xTwitterIcon READ xTwitterIcon CONSTANT ) Q_PROPERTY( QUrl youtubeIcon READ youtubeIcon CONSTANT ) - Q_PROPERTY( QUrl globeIcon READ globeIcon CONSTANT ) // Images Q_PROPERTY( QUrl acceptInvitationImage READ acceptInvitationImage CONSTANT ) @@ -225,7 +228,9 @@ class MMStyle: public QObject QUrl errorIcon() {return QUrl( "qrc:/Error.svg" );} QUrl facebookIcon() {return QUrl( "qrc:/Facebook.svg" );} QUrl globeIcon() {return QUrl( "qrc:/Globe.svg" );} + QUrl globalIcon() {return QUrl( "qrc:/Global.svg" );} QUrl hideIcon() {return QUrl( "qrc:/Hide.svg" );} + QUrl homeIcon() {return QUrl( "qrc:/Home.svg" );} QUrl infoIcon() {return QUrl( "qrc:/Info.svg" );} QUrl linkedinIcon() {return QUrl( "qrc:/Linkedin.svg" );} QUrl mastodonIcon() {return QUrl( "qrc:/Mastodon.svg" );} @@ -236,6 +241,7 @@ class MMStyle: public QObject QUrl otherIcon() {return QUrl( "qrc:/Other.svg" );} QUrl othersIcon() {return QUrl( "qrc:/Others.svg" );} QUrl projectButtonMoreIcon() {return QUrl( "qrc:/ProjectButtonMore.svg" );} + QUrl projectsIcon() {return QUrl( "qrc:/Projects.svg" );} QUrl qgisIcon() {return QUrl( "qrc:/QGIS.svg" );} QUrl qrCodeIcon() {return QUrl( "qrc:/QRCode.svg" );} QUrl redditIcon() {return QUrl( "qrc:/Reddit.svg" );} diff --git a/app/qml/components/MMSelectableToolbar.qml b/app/qml/components/MMSelectableToolbar.qml new file mode 100644 index 000000000..a0023b12e --- /dev/null +++ b/app/qml/components/MMSelectableToolbar.qml @@ -0,0 +1,41 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import Qt5Compat.GraphicalEffects + +Rectangle { + id: control + + signal clicked + + required property var model + property alias index: buttonView.currentIndex + + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + height: __style.toolbarHeight + color: __style.forestColor + + GridView { + id: buttonView + + anchors.fill: parent + leftMargin: 20 * __dp + rightMargin: 20 * __dp + cellHeight: __style.toolbarHeight + cellWidth: Math.floor((control.width - leftMargin - rightMargin) / control.model.count) + + model: control.model + highlightFollowsCurrentItem: false + } +} diff --git a/app/qml/components/MMSelectableToolbarButton.qml b/app/qml/components/MMSelectableToolbarButton.qml new file mode 100644 index 000000000..3a7f62385 --- /dev/null +++ b/app/qml/components/MMSelectableToolbarButton.qml @@ -0,0 +1,64 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic + +Item { + id: control + + signal clicked + + required property var iconSource + required property string text + + property bool checked: false + + height: __style.toolbarHeight + + Rectangle { + width: parent.width - 10 * __dp + height: parent.height - 10 * __dp + anchors.centerIn: parent + + clip: true + color: __style.transparentColor + + MMIcon { + id: icon + + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + anchors.bottomMargin: 40 * __dp + + source: control.iconSource + color: control.checked ? __style.whiteColor : __style.mediumGreenColor + } + + Text { + id: text + + width: parent.width + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + anchors.bottomMargin: 20 * __dp + + text: control.text + color: icon.color + font: __style.t4 + horizontalAlignment: Text.AlignHCenter + } + + MouseArea { + anchors.fill: parent + onClicked: control.clicked() + } + } +} diff --git a/gallery/qml.qrc b/gallery/qml.qrc index c2a1f484d..7b3b8d6ea 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -68,5 +68,7 @@ ../app/qml/components/MMBackButton.qml ../app/qml/components/MMIconCheckBoxHorizontal.qml ../app/qml/components/MMIconCheckBoxVertical.qml + ../app/qml/components/MMSelectableToolbar.qml + ../app/qml/components/MMSelectableToolbarButton.qml diff --git a/gallery/qml/pages/IconsPage.qml b/gallery/qml/pages/IconsPage.qml index 5cc60455a..4e07b3a04 100644 --- a/gallery/qml/pages/IconsPage.qml +++ b/gallery/qml/pages/IconsPage.qml @@ -93,10 +93,24 @@ ScrollView { text: "errorIcon" source: __style.errorIcon } + IconBox { + text: "globeIcon" + source: __style.globeIcon + } + IconBox { + text: "globalIcon" + source: __style.globalIcon + colorise: true + } IconBox { text: "hideIcon" source: __style.hideIcon } + IconBox { + text: "homeIcon" + source: __style.homeIcon + colorise: true + } IconBox { text: "infoIcon" source: __style.infoIcon @@ -115,6 +129,11 @@ ScrollView { text: "projectButtonMoreIcon" source: __style.projectButtonMoreIcon } + IconBox { + text: "projectsIcon" + source: __style.projectsIcon + colorise: true + } IconBox { text: "qrCodeIcon" source: __style.qrCodeIcon @@ -144,10 +163,6 @@ ScrollView { text: "xMarkIcon" source: __style.xMarkIcon } - IconBox { - text: "globeIcon" - source: __style.globeIcon - } } } diff --git a/gallery/qml/pages/ToolbarPage.qml b/gallery/qml/pages/ToolbarPage.qml index 61b26d5cd..98a20ea53 100644 --- a/gallery/qml/pages/ToolbarPage.qml +++ b/gallery/qml/pages/ToolbarPage.qml @@ -16,6 +16,46 @@ import "../../app/qml/" Page { id: pane + MMSelectableToolbar { + id: selectableToolbar + + Component.onCompleted: index = 1 + + model: ObjectModel { + MMSelectableToolbarButton { + width: Math.floor((pane.width - 40 * __dp) / 3) + text: "Home" + iconSource: __style.homeIcon + checked: selectableToolbar.index === 0 + onClicked: { + selectableToolbar.index = 0 + console.log("tapped "+text) + } + } + MMSelectableToolbarButton { + width: Math.floor((pane.width - 40 * __dp) / 3) + text: "Projects" + iconSource: __style.projectsIcon + checked: selectableToolbar.index === 1 + onClicked: { + selectableToolbar.index = 1 + console.log("tapped "+text) + } + } + MMSelectableToolbarButton { + width: Math.floor((pane.width - 40 * __dp) / 3) + text: "Explore" + iconSource: __style.globalIcon + checked: selectableToolbar.index === 2 + onClicked: { + selectableToolbar.index = 2 + console.log("tapped "+text) + } + } + } + anchors.bottomMargin: 480 * __dp + } + MMToolbar { model: ObjectModel { MMToolbarLongButton { text: "Long button"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } From 61aa9475074929fa364c467ef8a58d2920c96550 Mon Sep 17 00:00:00 2001 From: Peter Petrik Date: Tue, 19 Dec 2023 08:02:54 +0100 Subject: [PATCH 2/5] Update app/qml/components/MMSelectableToolbar.qml Co-authored-by: Tomas Mizera --- app/qml/components/MMSelectableToolbar.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/qml/components/MMSelectableToolbar.qml b/app/qml/components/MMSelectableToolbar.qml index a0023b12e..892932e41 100644 --- a/app/qml/components/MMSelectableToolbar.qml +++ b/app/qml/components/MMSelectableToolbar.qml @@ -15,7 +15,7 @@ Rectangle { signal clicked - required property var model + required property alias model property alias index: buttonView.currentIndex anchors { From c024b1244cd82da43b6f508d5c1d81a28d886e1e Mon Sep 17 00:00:00 2001 From: Lubos Date: Tue, 19 Dec 2023 08:25:13 +0100 Subject: [PATCH 3/5] Applied review comments --- app/qml/components/MMSelectableToolbar.qml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/qml/components/MMSelectableToolbar.qml b/app/qml/components/MMSelectableToolbar.qml index 892932e41..21b52947b 100644 --- a/app/qml/components/MMSelectableToolbar.qml +++ b/app/qml/components/MMSelectableToolbar.qml @@ -8,14 +8,13 @@ ***************************************************************************/ import QtQuick -import Qt5Compat.GraphicalEffects Rectangle { id: control signal clicked - required property alias model + property alias model: buttonView.model property alias index: buttonView.currentIndex anchors { @@ -35,7 +34,6 @@ Rectangle { cellHeight: __style.toolbarHeight cellWidth: Math.floor((control.width - leftMargin - rightMargin) / control.model.count) - model: control.model highlightFollowsCurrentItem: false } } From 65e9d6dc945be81a55da6d248a1663e9c64f976e Mon Sep 17 00:00:00 2001 From: Lubos Date: Tue, 19 Dec 2023 09:16:38 +0100 Subject: [PATCH 4/5] Applied review comments --- app/icons/GlobalFilled.svg | 11 +++++++++++ app/icons/HomeFilled.svg | 4 ++++ app/icons/ProjectsFilled.svg | 5 +++++ app/icons/icons.qrc | 3 +++ app/mmstyle.h | 8 ++++++-- app/qml/components/MMSelectableToolbar.qml | 10 ++-------- app/qml/components/MMSelectableToolbarButton.qml | 7 ++++--- app/qml/components/MMToolbar.qml | 4 +--- app/qml/components/MMToolbarLongButton.qml | 2 +- gallery/qml/pages/IconsPage.qml | 15 +++++++++++++++ gallery/qml/pages/ToolbarPage.qml | 9 +++++++++ 11 files changed, 61 insertions(+), 17 deletions(-) create mode 100644 app/icons/GlobalFilled.svg create mode 100644 app/icons/HomeFilled.svg create mode 100644 app/icons/ProjectsFilled.svg diff --git a/app/icons/GlobalFilled.svg b/app/icons/GlobalFilled.svg new file mode 100644 index 000000000..e3100ed79 --- /dev/null +++ b/app/icons/GlobalFilled.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/icons/HomeFilled.svg b/app/icons/HomeFilled.svg new file mode 100644 index 000000000..83d44dbb9 --- /dev/null +++ b/app/icons/HomeFilled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/icons/ProjectsFilled.svg b/app/icons/ProjectsFilled.svg new file mode 100644 index 000000000..4aa2df974 --- /dev/null +++ b/app/icons/ProjectsFilled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc index 47a8f8316..021e84140 100644 --- a/app/icons/icons.qrc +++ b/app/icons/icons.qrc @@ -69,5 +69,8 @@ Home.svg Projects.svg ZoomToProject.svg + GlobalFilled.svg + HomeFilled.svg + ProjectsFilled.svg diff --git a/app/mmstyle.h b/app/mmstyle.h index c6036c8da..1bbc2400e 100644 --- a/app/mmstyle.h +++ b/app/mmstyle.h @@ -81,7 +81,6 @@ class MMStyle: public QObject // Icons Q_PROPERTY( QUrl addIcon READ addIcon CONSTANT ) - Q_PROPERTY( QUrl homeIcon READ homeIcon CONSTANT ) Q_PROPERTY( QUrl layersIcon READ layersIcon CONSTANT ) Q_PROPERTY( QUrl localChangesIcon READ localChangesIcon CONSTANT ) Q_PROPERTY( QUrl mapThemesIcon READ mapThemesIcon CONSTANT ) @@ -110,8 +109,10 @@ class MMStyle: public QObject Q_PROPERTY( QUrl facebookIcon READ facebookIcon CONSTANT ) Q_PROPERTY( QUrl globeIcon READ globeIcon CONSTANT ) Q_PROPERTY( QUrl globalIcon READ globalIcon CONSTANT ) + Q_PROPERTY( QUrl globalFilledIcon READ globalFilledIcon CONSTANT ) Q_PROPERTY( QUrl hideIcon READ hideIcon CONSTANT ) Q_PROPERTY( QUrl homeIcon READ homeIcon CONSTANT ) + Q_PROPERTY( QUrl homeFilledIcon READ homeFilledIcon CONSTANT ) Q_PROPERTY( QUrl infoIcon READ infoIcon CONSTANT ) Q_PROPERTY( QUrl linkedinIcon READ linkedinIcon CONSTANT ) Q_PROPERTY( QUrl mastodonIcon READ mastodonIcon CONSTANT ) @@ -123,6 +124,7 @@ class MMStyle: public QObject Q_PROPERTY( QUrl othersIcon READ othersIcon CONSTANT ) Q_PROPERTY( QUrl projectButtonMoreIcon READ projectButtonMoreIcon CONSTANT ) Q_PROPERTY( QUrl projectsIcon READ projectsIcon CONSTANT ) + Q_PROPERTY( QUrl projectsFilledIcon READ projectsFilledIcon CONSTANT ) Q_PROPERTY( QUrl qgisIcon READ qgisIcon CONSTANT ) Q_PROPERTY( QUrl qrCodeIcon READ qrCodeIcon CONSTANT ) Q_PROPERTY( QUrl redditIcon READ redditIcon CONSTANT ) @@ -218,7 +220,6 @@ class MMStyle: public QObject QUrl addIcon() {return QUrl( "qrc:/Add.svg" );} QUrl layersIcon() {return QUrl( "qrc:/Layers.svg" );} - QUrl homeIcon() {return QUrl( "qrc:/Home.svg" );} QUrl localChangesIcon() {return QUrl( "qrc:/LocalChanges.svg" );} QUrl mapThemesIcon() {return QUrl( "qrc:/MapThemes.svg" );} QUrl positionTrackingIcon() {return QUrl( "qrc:/PositionTracking.svg" );} @@ -246,8 +247,10 @@ class MMStyle: public QObject QUrl facebookIcon() {return QUrl( "qrc:/Facebook.svg" );} QUrl globeIcon() {return QUrl( "qrc:/Globe.svg" );} QUrl globalIcon() {return QUrl( "qrc:/Global.svg" );} + QUrl globalFilledIcon() {return QUrl( "qrc:/GlobalFilled.svg" );} QUrl hideIcon() {return QUrl( "qrc:/Hide.svg" );} QUrl homeIcon() {return QUrl( "qrc:/Home.svg" );} + QUrl homeFilledIcon() {return QUrl( "qrc:/HomeFilled.svg" );} QUrl infoIcon() {return QUrl( "qrc:/Info.svg" );} QUrl linkedinIcon() {return QUrl( "qrc:/Linkedin.svg" );} QUrl mastodonIcon() {return QUrl( "qrc:/Mastodon.svg" );} @@ -259,6 +262,7 @@ class MMStyle: public QObject QUrl othersIcon() {return QUrl( "qrc:/Others.svg" );} QUrl projectButtonMoreIcon() {return QUrl( "qrc:/ProjectButtonMore.svg" );} QUrl projectsIcon() {return QUrl( "qrc:/Projects.svg" );} + QUrl projectsFilledIcon() {return QUrl( "qrc:/ProjectsFilled.svg" );} QUrl qgisIcon() {return QUrl( "qrc:/QGIS.svg" );} QUrl qrCodeIcon() {return QUrl( "qrc:/QRCode.svg" );} QUrl redditIcon() {return QUrl( "qrc:/Reddit.svg" );} diff --git a/app/qml/components/MMSelectableToolbar.qml b/app/qml/components/MMSelectableToolbar.qml index 21b52947b..33a0bd669 100644 --- a/app/qml/components/MMSelectableToolbar.qml +++ b/app/qml/components/MMSelectableToolbar.qml @@ -17,11 +17,6 @@ Rectangle { property alias model: buttonView.model property alias index: buttonView.currentIndex - anchors { - left: parent.left - right: parent.right - bottom: parent.bottom - } height: __style.toolbarHeight color: __style.forestColor @@ -29,10 +24,9 @@ Rectangle { id: buttonView anchors.fill: parent - leftMargin: 20 * __dp - rightMargin: 20 * __dp + cellHeight: __style.toolbarHeight - cellWidth: Math.floor((control.width - leftMargin - rightMargin) / control.model.count) + cellWidth: Math.floor(control.width / control.model.count) highlightFollowsCurrentItem: false } diff --git a/app/qml/components/MMSelectableToolbarButton.qml b/app/qml/components/MMSelectableToolbarButton.qml index 3a7f62385..15da72812 100644 --- a/app/qml/components/MMSelectableToolbarButton.qml +++ b/app/qml/components/MMSelectableToolbarButton.qml @@ -16,7 +16,8 @@ Item { signal clicked - required property var iconSource + required property url iconSource + required property url selectedIconSource required property string text property bool checked: false @@ -36,9 +37,9 @@ Item { anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom - anchors.bottomMargin: 40 * __dp + anchors.bottomMargin: 44 * __dp - source: control.iconSource + source: control.checked ? control.selectedIconSource : control.iconSource color: control.checked ? __style.whiteColor : __style.mediumGreenColor } diff --git a/app/qml/components/MMToolbar.qml b/app/qml/components/MMToolbar.qml index 267a42b72..44c45b800 100644 --- a/app/qml/components/MMToolbar.qml +++ b/app/qml/components/MMToolbar.qml @@ -44,8 +44,6 @@ Rectangle { model: visibleButtonModel anchors.fill: parent - leftMargin: 20 * __dp - rightMargin: 20 * __dp cellHeight: __style.toolbarHeight interactive: false } @@ -75,7 +73,7 @@ Rectangle { function setupBottomBar() { var m = control.model var c = m.count - var w = control.width - 40 * __dp + var w = control.width var button // add all buttons (max 4) into toolbar diff --git a/app/qml/components/MMToolbarLongButton.qml b/app/qml/components/MMToolbarLongButton.qml index 301ada717..2e7e92842 100644 --- a/app/qml/components/MMToolbarLongButton.qml +++ b/app/qml/components/MMToolbarLongButton.qml @@ -27,7 +27,7 @@ Item { Button { width: { - var w = parent.width - 10 * __dp + var w = parent.width - 40 * __dp if(w < control.minimumToolbarLongButtonWidth) return control.minimumToolbarLongButtonWidth else if(w > control.maximumToolbarLongButtonWidth) diff --git a/gallery/qml/pages/IconsPage.qml b/gallery/qml/pages/IconsPage.qml index 4e07b3a04..46f3a218a 100644 --- a/gallery/qml/pages/IconsPage.qml +++ b/gallery/qml/pages/IconsPage.qml @@ -102,6 +102,11 @@ ScrollView { source: __style.globalIcon colorise: true } + IconBox { + text: "globalFilledIcon" + source: __style.globalFilledIcon + colorise: true + } IconBox { text: "hideIcon" source: __style.hideIcon @@ -111,6 +116,11 @@ ScrollView { source: __style.homeIcon colorise: true } + IconBox { + text: "homeFilledIcon" + source: __style.homeFilledIcon + colorise: true + } IconBox { text: "infoIcon" source: __style.infoIcon @@ -134,6 +144,11 @@ ScrollView { source: __style.projectsIcon colorise: true } + IconBox { + text: "projectsFilledIcon" + source: __style.projectsFilledIcon + colorise: true + } IconBox { text: "qrCodeIcon" source: __style.qrCodeIcon diff --git a/gallery/qml/pages/ToolbarPage.qml b/gallery/qml/pages/ToolbarPage.qml index 98a20ea53..83bd1b723 100644 --- a/gallery/qml/pages/ToolbarPage.qml +++ b/gallery/qml/pages/ToolbarPage.qml @@ -19,6 +19,12 @@ Page { MMSelectableToolbar { id: selectableToolbar + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + Component.onCompleted: index = 1 model: ObjectModel { @@ -26,6 +32,7 @@ Page { width: Math.floor((pane.width - 40 * __dp) / 3) text: "Home" iconSource: __style.homeIcon + selectedIconSource: __style.homeFilledIcon checked: selectableToolbar.index === 0 onClicked: { selectableToolbar.index = 0 @@ -36,6 +43,7 @@ Page { width: Math.floor((pane.width - 40 * __dp) / 3) text: "Projects" iconSource: __style.projectsIcon + selectedIconSource: __style.projectsFilledIcon checked: selectableToolbar.index === 1 onClicked: { selectableToolbar.index = 1 @@ -46,6 +54,7 @@ Page { width: Math.floor((pane.width - 40 * __dp) / 3) text: "Explore" iconSource: __style.globalIcon + selectedIconSource: __style.globalFilledIcon checked: selectableToolbar.index === 2 onClicked: { selectableToolbar.index = 2 From 26a5157ce08854a355ae021ebbc56d0eb0272e1d Mon Sep 17 00:00:00 2001 From: Lubos Date: Thu, 21 Dec 2023 08:50:04 +0100 Subject: [PATCH 5/5] Text.ElideMiddle --- app/qml/components/MMSelectableToolbarButton.qml | 1 + app/qml/components/MMToolbarButton.qml | 1 + 2 files changed, 2 insertions(+) diff --git a/app/qml/components/MMSelectableToolbarButton.qml b/app/qml/components/MMSelectableToolbarButton.qml index 15da72812..3a824752c 100644 --- a/app/qml/components/MMSelectableToolbarButton.qml +++ b/app/qml/components/MMSelectableToolbarButton.qml @@ -55,6 +55,7 @@ Item { color: icon.color font: __style.t4 horizontalAlignment: Text.AlignHCenter + elide: Text.ElideMiddle } MouseArea { diff --git a/app/qml/components/MMToolbarButton.qml b/app/qml/components/MMToolbarButton.qml index 16b2d576d..a17527219 100644 --- a/app/qml/components/MMToolbarButton.qml +++ b/app/qml/components/MMToolbarButton.qml @@ -63,6 +63,7 @@ Item { anchors.bottom: parent.bottom anchors.bottomMargin: 20 * __dp horizontalAlignment: Text.AlignHCenter + elide: Text.ElideMiddle } MouseArea {