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/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/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/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 7e4ad084d..a45f42f84 100644 --- a/app/icons/icons.qrc +++ b/app/icons/icons.qrc @@ -64,7 +64,14 @@ XMark.svg XTwitter.svg Youtube.svg + Globe.svg + Global.svg + Home.svg + Projects.svg ZoomToProject.svg + GlobalFilled.svg + HomeFilled.svg + ProjectsFilled.svg Minus.svg Plus.svg diff --git a/app/mmstyle.h b/app/mmstyle.h index 6b2425503..cb9bbd442 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 ) @@ -108,7 +107,12 @@ 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 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 ) @@ -121,6 +125,8 @@ class MMStyle: public QObject Q_PROPERTY( QUrl othersIcon READ othersIcon CONSTANT ) Q_PROPERTY( QUrl plusIcon READ plusIcon 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 ) @@ -142,7 +148,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 ) @@ -217,7 +222,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" );} @@ -244,7 +248,11 @@ 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 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" );} @@ -257,6 +265,8 @@ class MMStyle: public QObject QUrl othersIcon() {return QUrl( "qrc:/Others.svg" );} QUrl plusIcon() {return QUrl( "qrc:/Plus.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 new file mode 100644 index 000000000..33a0bd669 --- /dev/null +++ b/app/qml/components/MMSelectableToolbar.qml @@ -0,0 +1,33 @@ +/*************************************************************************** + * * + * 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 + +Rectangle { + id: control + + signal clicked + + property alias model: buttonView.model + property alias index: buttonView.currentIndex + + height: __style.toolbarHeight + color: __style.forestColor + + GridView { + id: buttonView + + anchors.fill: parent + + cellHeight: __style.toolbarHeight + cellWidth: Math.floor(control.width / control.model.count) + + highlightFollowsCurrentItem: false + } +} diff --git a/app/qml/components/MMSelectableToolbarButton.qml b/app/qml/components/MMSelectableToolbarButton.qml new file mode 100644 index 000000000..3a824752c --- /dev/null +++ b/app/qml/components/MMSelectableToolbarButton.qml @@ -0,0 +1,66 @@ +/*************************************************************************** + * * + * 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 url iconSource + required property url selectedIconSource + 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: 44 * __dp + + source: control.checked ? control.selectedIconSource : 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 + elide: Text.ElideMiddle + } + + MouseArea { + anchors.fill: parent + onClicked: control.clicked() + } + } +} 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/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 { 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.qrc b/gallery/qml.qrc index 6994eb7fd..0d5ee35c3 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -68,6 +68,8 @@ ../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 ../app/qml/inputs/MMNumberEditor.qml ../app/qml/inputs/MMButtonInputEditor.qml diff --git a/gallery/qml/pages/IconsPage.qml b/gallery/qml/pages/IconsPage.qml index 12db7d145..691df9024 100644 --- a/gallery/qml/pages/IconsPage.qml +++ b/gallery/qml/pages/IconsPage.qml @@ -93,10 +93,34 @@ ScrollView { text: "errorIcon" source: __style.errorIcon } + IconBox { + text: "globeIcon" + source: __style.globeIcon + } + IconBox { + text: "globalIcon" + source: __style.globalIcon + colorise: true + } + IconBox { + text: "globalFilledIcon" + source: __style.globalFilledIcon + colorise: true + } IconBox { text: "hideIcon" source: __style.hideIcon } + IconBox { + text: "homeIcon" + source: __style.homeIcon + colorise: true + } + IconBox { + text: "homeFilledIcon" + source: __style.homeFilledIcon + colorise: true + } IconBox { text: "infoIcon" source: __style.infoIcon @@ -123,6 +147,16 @@ ScrollView { text: "projectButtonMoreIcon" source: __style.projectButtonMoreIcon } + IconBox { + text: "projectsIcon" + source: __style.projectsIcon + colorise: true + } + IconBox { + text: "projectsFilledIcon" + source: __style.projectsFilledIcon + colorise: true + } IconBox { text: "qrCodeIcon" source: __style.qrCodeIcon @@ -152,10 +186,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..83bd1b723 100644 --- a/gallery/qml/pages/ToolbarPage.qml +++ b/gallery/qml/pages/ToolbarPage.qml @@ -16,6 +16,55 @@ import "../../app/qml/" Page { id: pane + MMSelectableToolbar { + id: selectableToolbar + + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + + Component.onCompleted: index = 1 + + model: ObjectModel { + MMSelectableToolbarButton { + width: Math.floor((pane.width - 40 * __dp) / 3) + text: "Home" + iconSource: __style.homeIcon + selectedIconSource: __style.homeFilledIcon + 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 + selectedIconSource: __style.projectsFilledIcon + 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 + selectedIconSource: __style.globalFilledIcon + 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) }