diff --git a/app/mmstyle.h b/app/mmstyle.h new file mode 100644 index 000000000..1292127c5 --- /dev/null +++ b/app/mmstyle.h @@ -0,0 +1,201 @@ +/*************************************************************************** + * * + * 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. * + * * + ***************************************************************************/ + +#ifndef MMSTYLE_H +#define MMSTYLE_H + +#include +#include +#include +#include + +class MMStyle: public QObject +{ + Q_OBJECT + + // Fonts - how to use + // standard - font: __style.p5 + // extended - font.pixelSize: __style.p5.pixelSize; font.italic: true + + // Fonts - Title + Q_PROPERTY( QFont t1 READ t1 CONSTANT ) + Q_PROPERTY( QFont t2 READ t2 CONSTANT ) + Q_PROPERTY( QFont t3 READ t3 CONSTANT ) + Q_PROPERTY( QFont t4 READ t4 CONSTANT ) + Q_PROPERTY( QFont t5 READ t5 CONSTANT ) + + // Fonts - Paragraph + Q_PROPERTY( QFont p1 READ p1 CONSTANT ) + Q_PROPERTY( QFont p2 READ p2 CONSTANT ) + Q_PROPERTY( QFont p3 READ p3 CONSTANT ) + Q_PROPERTY( QFont p4 READ p4 CONSTANT ) + Q_PROPERTY( QFont p5 READ p5 CONSTANT ) + Q_PROPERTY( QFont p6 READ p6 CONSTANT ) + Q_PROPERTY( QFont p7 READ p7 CONSTANT ) + + // Colors - primary palette + Q_PROPERTY( QColor grassColor READ grassColor CONSTANT ) + Q_PROPERTY( QColor forestColor READ forestColor CONSTANT ) + Q_PROPERTY( QColor nightColor READ nightColor CONSTANT ) + Q_PROPERTY( QColor whiteColor READ whiteColor CONSTANT ) + Q_PROPERTY( QColor transparentColor READ transparentColor CONSTANT ) + + // Colors - secondary palette + Q_PROPERTY( QColor lightGreenColor READ lightGreenColor CONSTANT ) + Q_PROPERTY( QColor mediumGreenColor READ mediumGreenColor CONSTANT ) + Q_PROPERTY( QColor grayColor READ grayColor CONSTANT ) + + // Colors - additional colors + Q_PROPERTY( QColor sandColor READ sandColor CONSTANT ) + Q_PROPERTY( QColor sunsetColor READ sunsetColor CONSTANT ) + Q_PROPERTY( QColor sunColor READ sunColor CONSTANT ) + Q_PROPERTY( QColor earthColor READ earthColor CONSTANT ) + Q_PROPERTY( QColor roseColor READ roseColor CONSTANT ) + Q_PROPERTY( QColor skyColor READ skyColor CONSTANT ) + Q_PROPERTY( QColor grapeColor READ grapeColor CONSTANT ) + Q_PROPERTY( QColor deepOceanColor READ deepOceanColor CONSTANT ) + Q_PROPERTY( QColor purpleColor READ purpleColor CONSTANT ) + Q_PROPERTY( QColor fieldColor READ fieldColor CONSTANT ) + + // Colors - sentiment colors + Q_PROPERTY( QColor positiveColor READ positiveColor CONSTANT ) + Q_PROPERTY( QColor warningColor READ warningColor CONSTANT ) + Q_PROPERTY( QColor negativeColor READ negativeColor CONSTANT ) + Q_PROPERTY( QColor informativeColor READ informativeColor CONSTANT ) + + // Colors - others + Q_PROPERTY( QColor nightAlphaColor READ nightAlphaColor CONSTANT ) // placeholder input color + Q_PROPERTY( QColor errorBgInputColor READ errorBgInputColor CONSTANT ) // error bg input color + Q_PROPERTY( QColor shadowColor READ shadowColor CONSTANT ) + + // Icons + Q_PROPERTY( QUrl arrowLinkRightIcon READ arrowLinkRightIcon CONSTANT ) + Q_PROPERTY( QUrl searchIcon READ searchIcon CONSTANT ) + Q_PROPERTY( QUrl calendarIcon READ calendarIcon CONSTANT ) + Q_PROPERTY( QUrl showIcon READ showIcon CONSTANT ) + Q_PROPERTY( QUrl hideIcon READ hideIcon CONSTANT ) + Q_PROPERTY( QUrl xMarkIcon READ xMarkIcon CONSTANT ) + Q_PROPERTY( QUrl errorIcon READ errorIcon CONSTANT ) + Q_PROPERTY( QUrl arrowUpIcon READ arrowUpIcon CONSTANT ) + Q_PROPERTY( QUrl arrowDownIcon READ arrowDownIcon CONSTANT ) + Q_PROPERTY( QUrl qrCodeIcon READ qrCodeIcon CONSTANT ) + Q_PROPERTY( QUrl checkmarkIcon READ checkmarkIcon CONSTANT ) + Q_PROPERTY( QUrl closeButtonIcon READ closeButtonIcon CONSTANT ) + Q_PROPERTY( QUrl closeIcon READ closeIcon CONSTANT ) + Q_PROPERTY( QUrl waitingIcon READ waitingIcon CONSTANT ) + Q_PROPERTY( QUrl deleteIcon READ deleteIcon CONSTANT ) + Q_PROPERTY( QUrl doneIcon READ doneIcon CONSTANT ) + Q_PROPERTY( QUrl editIcon READ editIcon CONSTANT ) + Q_PROPERTY( QUrl moreIcon READ moreIcon CONSTANT ) + + // Images + Q_PROPERTY( QUrl uploadImage READ uploadImage CONSTANT ) + Q_PROPERTY( QUrl reachedDataLimitImage READ reachedDataLimitImage CONSTANT ) + + // Map items + Q_PROPERTY( double mapItemHeight READ mapItemHeight CONSTANT ) + + // Toolbar + Q_PROPERTY( double toolbarHeight READ toolbarHeight CONSTANT ) + Q_PROPERTY( double menuDrawerHeight READ menuDrawerHeight CONSTANT ) + + public: + explicit MMStyle( qreal dp ) + : mDp( dp ) + {} + ~MMStyle() = default; + + QFont t1() {return fontFactory( 18, true );} + QFont t2() {return fontFactory( 16, true );} + QFont t3() {return fontFactory( 14, true );} + QFont t4() {return fontFactory( 18, true );} + QFont t5() {return fontFactory( 10, true );} + + QFont p1() {return fontFactory( 32, false );} + QFont p2() {return fontFactory( 24, false );} + QFont p3() {return fontFactory( 20, false );} + QFont p4() {return fontFactory( 16, false );} + QFont p5() {return fontFactory( 14, false );} + QFont p6() {return fontFactory( 12, false );} + QFont p7() {return fontFactory( 10, false );} + + QColor grassColor() {return QColor::fromString( "#73D19C" );} + QColor forestColor() {return QColor::fromString( "#004C45" );} + QColor nightColor() {return QColor::fromString( "#12181F" );} + QColor whiteColor() {return QColor::fromString( "#FFFFFF" );} + QColor transparentColor() {return QColor::fromString( "transparent" );} + + QColor lightGreenColor() {return QColor::fromString( "#EFF5F3" );} + QColor mediumGreenColor() {return QColor::fromString( "#B7CDC4" );} + QColor grayColor() {return QColor::fromString( "#E2E2E2" );} + + QColor sandColor() {return QColor::fromString( "#FFF4E2" );} + QColor sunsetColor() {return QColor::fromString( "#FFB673" );} + QColor sunColor() {return QColor::fromString( "#F4CB46" );} + QColor earthColor() {return QColor::fromString( "#4D2A24" );} + QColor roseColor() {return QColor::fromString( "#FFBABC" );} + QColor skyColor() {return QColor::fromString( "#A6CBF4" );} + QColor grapeColor() {return QColor::fromString( "#5A2740" );} + QColor deepOceanColor() {return QColor::fromString( "#1C324A" );} + QColor purpleColor() {return QColor::fromString( "#CCBDF5" );} + QColor fieldColor() {return QColor::fromString( "#9BD1A9" );} + + QColor positiveColor() {return QColor::fromString( "#C2FFA6" );} + QColor warningColor() {return QColor::fromString( "#FFD6A6" );} + QColor negativeColor() {return QColor::fromString( "#FFA6A6" );} + QColor informativeColor() {return QColor::fromString( "#A6F4FF" );} + + QColor nightAlphaColor() {return QColor::fromString( "#AA12181F" );} + QColor errorBgInputColor() {return QColor::fromString( "#FEFAF9" );} + QColor shadowColor() {return QColor::fromString( "#66777777" );} + + QUrl arrowLinkRightIcon() {return QUrl( "qrc:/Arrow Link Right.svg" );} + QUrl searchIcon() {return QUrl( "qrc:/Search.svg" );} + QUrl calendarIcon() {return QUrl( "qrc:/Calendar.svg" );} + QUrl showIcon() {return QUrl( "qrc:/Show.svg" );} + QUrl hideIcon() {return QUrl( "qrc:/Hide.svg" );} + QUrl xMarkIcon() {return QUrl( "qrc:/X Mark..svg" );} + QUrl errorIcon() {return QUrl( "qrc:/Error.svg" );} + QUrl arrowUpIcon() {return QUrl( "qrc:/Arrow Up.svg" );} + QUrl arrowDownIcon() {return QUrl( "qrc:/Arrow Down.svg" );} + QUrl qrCodeIcon() {return QUrl( "qrc:/QR Code.svg" );} + QUrl checkmarkIcon() {return QUrl( "qrc:/Checkmark.svg" );} + QUrl closeButtonIcon() {return QUrl( "qrc:/CloseButton.svg" );} + QUrl closeIcon() {return QUrl( "qrc:/Close.svg" );} + QUrl waitingIcon() {return QUrl( "qrc:/Waiting.svg" );} + QUrl deleteIcon() {return QUrl( "qrc:/Delete.svg" );} + QUrl doneIcon() {return QUrl( "qrc:/Done.svg" );} + QUrl editIcon() {return QUrl( "qrc:/Edit.svg" );} + QUrl moreIcon() {return QUrl( "qrc:/More.svg" );} + + QUrl uploadImage() {return QUrl( "qrc:/UploadImage.svg" );} + QUrl reachedDataLimitImage() {return QUrl( "qrc:/ReachedDataLimitImage.svg" );} + + double mapItemHeight() {return 50 * mDp;} + + double toolbarHeight() {return 89 * mDp;} + double menuDrawerHeight() {return 67 * mDp;} + + signals: + void styleChanged(); + + private: + QFont fontFactory( int pixelSize, bool bold ) + { + QFont f; + f.setBold( bold ); + f.setPixelSize( pixelSize * mDp ); + return f; + } + + qreal mDp; + +}; + +#endif // MMSTYLE_H diff --git a/app/qmlV2/StyleV2.qml b/app/qmlV2/StyleV2.qml deleted file mode 100644 index 7223ba69f..000000000 --- a/app/qmlV2/StyleV2.qml +++ /dev/null @@ -1,99 +0,0 @@ -/*************************************************************************** - * * - * 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. * - * * - ***************************************************************************/ - -pragma Singleton -import QtQuick - -QtObject { - // Fonts - how to use - // standard - font: StyleV2.p5 - // extended - font.pixelSize: StyleV2.p5.pixelSize; font.italic: true - - // Fonts - Title - readonly property font t1: Qt.font({ pixelSize: 18 * __dp, bold: true }) - readonly property font t2: Qt.font({ pixelSize: 16 * __dp, bold: true }) - readonly property font t3: Qt.font({ pixelSize: 14 * __dp, bold: true }) - readonly property font t4: Qt.font({ pixelSize: 12 * __dp, bold: true }) - readonly property font t5: Qt.font({ pixelSize: 10 * __dp, bold: true }) - - // Fonts - Paragraph - readonly property font p1: Qt.font({ pixelSize: 32 * __dp }) - readonly property font p2: Qt.font({ pixelSize: 24 * __dp }) - readonly property font p3: Qt.font({ pixelSize: 20 * __dp }) - readonly property font p4: Qt.font({ pixelSize: 16 * __dp }) - readonly property font p5: Qt.font({ pixelSize: 14 * __dp }) - readonly property font p6: Qt.font({ pixelSize: 12 * __dp }) - readonly property font p7: Qt.font({ pixelSize: 10 * __dp }) - - // Colors - pripary palette - readonly property color grassColor: "#73D19C" - readonly property color forestColor: "#004C45" - readonly property color nightColor: "#12181F" - readonly property color whiteColor: "#FFFFFF" - readonly property color transparentColor: "transparent" - - // Colors - secondary palette - readonly property color lightGreenColor: "#EFF5F3" - readonly property color mediumGreenColor: "#B7CDC4" - readonly property color grayColor: "#E2E2E2" - - // Colors - additional colors - readonly property color sendColor: "#FFF4E2" - readonly property color sunsetColor: "#FFB673" - readonly property color sunColor: "#F4CB46" - readonly property color earthColor: "#4D2A24" - readonly property color roseColor: "#FFBABC" - readonly property color skyColor: "#A6CBF4" - readonly property color grapeColor: "#5A2740" - readonly property color deepOceanColor: "#1C324A" - readonly property color purpleColor: "#CCBDF5" - readonly property color fieldColor: "#9BD1A9" - - // Colors - sentiment colors - readonly property color positiveColor: "#C2FFA6" - readonly property color warningColor: "#FFD6A6" - readonly property color negativeColor: "#FFA6A6" - readonly property color informativeColor: "#A6F4FF" - - // Colors - others - readonly property color nightAlphaColor: "#AA12181F" // placeholder input color - readonly property color errorBgInputColor: "#FEFAF9" // error bg input color - readonly property color shadowColor: "#66777777" - - // Icons - readonly property url arrowLinkRightIcon: "qrc:/Arrow Link Right.svg" - readonly property url searchIcon: "qrc:/Search.svg" - readonly property url calendarIcon: "qrc:/Calendar.svg" - readonly property url showIcon: "qrc:/Show.svg" - readonly property url hideIcon: "qrc:/Hide.svg" - readonly property url xMarkIcon: "qrc:/X Mark.svg" - readonly property url errorIcon: "qrc:/Error.svg" - readonly property url arrowUpIcon: "qrc:/Arrow Up.svg" - readonly property url arrowDownIcon: "qrc:/Arrow Down.svg" - readonly property url qrCodeIcon: "qrc:/QR Code.svg" - readonly property url checkmarkIcon: "qrc:/Checkmark.svg" - readonly property url closeButtonIcon: "qrc:/CloseButton.svg" - readonly property url closeIcon: "qrc:/Close.svg" - readonly property url waitingIcon: "qrc:/Waiting.svg" - readonly property url deleteIcon: "qrc:/Delete.svg" - readonly property url doneIcon: "qrc:/Done.svg" - readonly property url editIcon: "qrc:/Edit.svg" - readonly property url moreIcon: "qrc:/More.svg" - - // Images - readonly property url uploadImage: "qrc:/UploadImage.svg" - readonly property url reachedDataLimitImage: "qrc:/ReachedDataLimitImage.svg" - - // Map items - readonly property double mapItemHeight: 50 * __dp - - // Toolbar - readonly property double toolbarHeight: 89 * __dp - readonly property double menuDrawerHeight: 67 * __dp -} diff --git a/app/qmlV2/component/MMButton.qml b/app/qmlV2/component/MMButton.qml index ec3e6a31d..8c1901483 100644 --- a/app/qmlV2/component/MMButton.qml +++ b/app/qmlV2/component/MMButton.qml @@ -11,7 +11,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic import "." -import ".." Button { id: control @@ -20,20 +19,20 @@ Button { contentItem: Text { anchors.centerIn: control - font: StyleV2.t3 + font: __style.t3 text: control.text leftPadding: 32 * __dp rightPadding: 32 * __dp topPadding: 10 * __dp bottomPadding: 10 * __dp - color: control.enabled ? control.down || control.hovered ? StyleV2.grassColor : StyleV2.forestColor : StyleV2.forestColor + color: control.enabled ? control.down || control.hovered ? __style.grassColor : __style.forestColor : __style.forestColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { - color: transparent ? "transparent" : control.enabled ? control.down || control.hovered ? StyleV2.forestColor : StyleV2.grassColor : StyleV2.mediumGreenColor + color: transparent ? "transparent" : control.enabled ? control.down || control.hovered ? __style.forestColor : __style.grassColor : __style.mediumGreenColor radius: height / 2 } } diff --git a/app/qmlV2/component/MMButtonInput.qml b/app/qmlV2/component/MMButtonInput.qml index a0a22e46b..92c35c598 100644 --- a/app/qmlV2/component/MMButtonInput.qml +++ b/app/qmlV2/component/MMButtonInput.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." Column { id: control @@ -32,7 +31,7 @@ Column { id: titleItem width: parent.width - font: StyleV2.p6 + font: __style.p6 wrapMode: Text.WordWrap visible: text.length > 0 } @@ -42,8 +41,8 @@ Column { height: 40 * __dp width: parent.width - color: (errorMsg.length > 0 || warningMsg.length > 0) ? StyleV2.errorBgInputColor : StyleV2.whiteColor - border.color: errorMsg.length > 0 ? StyleV2.negativeColor : warningMsg.length > 0 ? StyleV2.warningColor : StyleV2.forestColor + color: (errorMsg.length > 0 || warningMsg.length > 0) ? __style.errorBgInputColor : __style.whiteColor + border.color: errorMsg.length > 0 ? __style.negativeColor : warningMsg.length > 0 ? __style.warningColor : __style.forestColor border.width: enabled ? (textField.activeFocus ? 2*__dp : textField.hovered ? 1*__dp : 0) : 0 radius: parent.height @@ -57,9 +56,9 @@ Column { id: leftIcon source: control.iconSource - color: errorMsg.length > 0 ? StyleV2.negativeColor : - warningMsg.length > 0 ? StyleV2.warningColor : - control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + color: errorMsg.length > 0 ? __style.negativeColor : + warningMsg.length > 0 ? __style.warningColor : + control.enabled ? __style.forestColor : __style.mediumGreenColor height: rect.height } @@ -71,13 +70,13 @@ Column { - (leftIcon.visible ? leftIcon.width : 0) - (button.visible ? button.width : 0) height: rect.height - 4 * __dp - color: control.enabled ? StyleV2.nightColor : StyleV2.mediumGreenColor - placeholderTextColor: StyleV2.nightAlphaColor - font: StyleV2.p5 + color: control.enabled ? __style.nightColor : __style.mediumGreenColor + placeholderTextColor: __style.nightAlphaColor + font: __style.p5 hoverEnabled: true anchors.verticalCenter: parent.verticalCenter background: Rectangle { - color: StyleV2.transparentColor + color: __style.transparentColor } } @@ -88,20 +87,20 @@ Column { contentItem: Text { anchors.centerIn: button - font: StyleV2.t5 + font: __style.t5 text: control.buttonText leftPadding: 2 * __dp rightPadding: 2 * __dp topPadding: 2 * __dp bottomPadding: 2 * __dp - color: StyleV2.deepOceanColor + color: __style.deepOceanColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { - color: button.enabled ? StyleV2.grassColor : StyleV2.mediumGreenColor + color: button.enabled ? __style.grassColor : __style.mediumGreenColor radius: height / 2 } @@ -124,13 +123,13 @@ Column { MMIcon { id: msgIcon - source: visible ? StyleV2.errorIcon : "" - color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor + source: visible ? __style.errorIcon : "" + color: errorMsg.length > 0 ? __style.negativeColor : __style.warningColor visible: errorMsg.length > 0 || warningMsg.length > 0 } Text { text: errorMsg.length > 0 ? errorMsg : warningMsg - font: StyleV2.t4 + font: __style.t4 wrapMode: Text.WordWrap width: messageItem.width - msgRow.spacing - msgIcon.width visible: errorMsg.length > 0 || warningMsg.length > 0 diff --git a/app/qmlV2/component/MMCheckBox.qml b/app/qmlV2/component/MMCheckBox.qml index a33797267..1c6f109ce 100644 --- a/app/qmlV2/component/MMCheckBox.qml +++ b/app/qmlV2/component/MMCheckBox.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." CheckBox { id: control @@ -23,23 +22,23 @@ CheckBox { x: control.leftPadding y: parent.height / 2 - height / 2 radius: 5 - color: enabled ? ( control.checked ? StyleV2.grassColor: StyleV2.whiteColor ) : StyleV2.whiteColor - border.color: enabled ? ( control.checked ? StyleV2.grassColor: StyleV2.forestColor ) : StyleV2.mediumGreenColor + color: enabled ? ( control.checked ? __style.grassColor: __style.whiteColor ) : __style.whiteColor + border.color: enabled ? ( control.checked ? __style.grassColor: __style.forestColor ) : __style.mediumGreenColor border.width: control.hovered ? 2.5 : 2 MMIcon { id: icon anchors.centerIn: parent - source: StyleV2.checkmarkIcon - color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + source: __style.checkmarkIcon + color: control.enabled ? __style.forestColor : __style.mediumGreenColor visible: control.checked } } contentItem: Text { text: control.text - font: StyleV2.p5 + font: __style.p5 color: icon.color verticalAlignment: Text.AlignVCenter leftPadding: control.indicator.width + control.spacing diff --git a/app/qmlV2/component/MMComboBox.qml b/app/qmlV2/component/MMComboBox.qml index f01e15f98..d86b8548a 100644 --- a/app/qmlV2/component/MMComboBox.qml +++ b/app/qmlV2/component/MMComboBox.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." Item { id: control @@ -31,8 +30,8 @@ Item { height: 40 * __dp indicator: MMIcon { - source: popup.visible ? StyleV2.arrowUpIcon : StyleV2.arrowDownIcon - color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + source: popup.visible ? __style.arrowUpIcon : __style.arrowDownIcon + color: control.enabled ? __style.forestColor : __style.mediumGreenColor x: combobox.width - width - combobox.rightPadding anchors.verticalCenter: parent.verticalCenter } @@ -42,17 +41,17 @@ Item { rightPadding: combobox.indicator.width + combobox.spacing text: combobox.displayText - font: StyleV2.p4 - color: control.enabled ? StyleV2.nightColor : StyleV2.mediumGreenColor + font: __style.p4 + color: control.enabled ? __style.nightColor : __style.mediumGreenColor verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { - color: (errorMsg.length > 0 || warningMsg.length > 0) ? StyleV2.errorBgInputColor : StyleV2.whiteColor - border.color: (combobox.activeFocus || combobox.hovered) ? (errorMsg.length > 0 ? StyleV2.negativeColor : - warningMsg.length > 0 ? StyleV2.warningColor : - StyleV2.forestColor) : StyleV2.transparentColor + color: (errorMsg.length > 0 || warningMsg.length > 0) ? __style.errorBgInputColor : __style.whiteColor + border.color: (combobox.activeFocus || combobox.hovered) ? (errorMsg.length > 0 ? __style.negativeColor : + warningMsg.length > 0 ? __style.warningColor : + __style.forestColor) : __style.transparentColor border.width: enabled ? (combobox.activeFocus ? 2*__dp : 1*__dp) : 0 radius: parent.height } @@ -75,7 +74,7 @@ Item { } background: Rectangle { - border.color: StyleV2.forestColor + border.color: __style.forestColor radius: 2 } } @@ -87,13 +86,13 @@ Item { height: 30 * __dp contentItem: Text { text: modelData - color: combobox.highlightedIndex === index ? StyleV2.grassColor : StyleV2.forestColor - font: StyleV2.p4 + color: combobox.highlightedIndex === index ? __style.grassColor : __style.forestColor + font: __style.p4 elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } background: Rectangle { - border.color: StyleV2.whiteColor + border.color: __style.whiteColor } } @@ -117,13 +116,13 @@ Item { MMIcon { id: msgIcon - source: visible ? StyleV2.errorIcon : "" - color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor + source: visible ? __style.errorIcon : "" + color: errorMsg.length > 0 ? __style.negativeColor : __style.warningColor visible: errorMsg.length > 0 || warningMsg.length > 0 } Text { text: errorMsg.length > 0 ? errorMsg : warningMsg - font: StyleV2.t4 + font: __style.t4 wrapMode: Text.WordWrap width: messageItem.width - msgRow.spacing - msgIcon.width visible: errorMsg.length > 0 || warningMsg.length > 0 diff --git a/app/qmlV2/component/MMComponent_reachedDataLimit.qml b/app/qmlV2/component/MMComponent_reachedDataLimit.qml index aa24f5398..3256e0999 100644 --- a/app/qmlV2/component/MMComponent_reachedDataLimit.qml +++ b/app/qmlV2/component/MMComponent_reachedDataLimit.qml @@ -11,7 +11,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic import "." -import ".." Item { id: control @@ -39,8 +38,8 @@ Item { Text { width: parent.width text: qsTr("Data to sync") - font: StyleV2.p5 - color: StyleV2.nightColor + font: __style.p5 + color: __style.nightColor horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } @@ -49,14 +48,14 @@ Item { width: parent.width text: control.dataToSync - font: StyleV2.t3 - color: StyleV2.nightColor + font: __style.t3 + color: __style.nightColor horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter } } - Rectangle { width: parent.width; height: 1; color: StyleV2.grayColor } + Rectangle { width: parent.width; height: 1; color: __style.grayColor } Item { width: parent.width @@ -65,8 +64,8 @@ Item { Text { width: parent.width text: qsTr("Using") - font: StyleV2.p5 - color: StyleV2.nightColor + font: __style.p5 + color: __style.nightColor horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } @@ -75,8 +74,8 @@ Item { width: parent.width text: control.dataUsing - font: StyleV2.t3 - color: StyleV2.nightColor + font: __style.t3 + color: __style.nightColor horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter } @@ -86,7 +85,7 @@ Item { position: control.usedData } - Rectangle { width: parent.width; height: 1; color: StyleV2.grayColor } + Rectangle { width: parent.width; height: 1; color: __style.grayColor } Item { width: parent.width @@ -95,8 +94,8 @@ Item { Text { width: parent.width text: qsTr("Plan") - font: StyleV2.p5 - color: StyleV2.nightColor + font: __style.p5 + color: __style.nightColor horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } @@ -105,8 +104,8 @@ Item { width: parent.width text: control.plan - font: StyleV2.t3 - color: StyleV2.nightColor + font: __style.t3 + color: __style.nightColor horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter } diff --git a/app/qmlV2/component/MMDrawer.qml b/app/qmlV2/component/MMDrawer.qml index 7eac765cd..7a2ad8f3e 100644 --- a/app/qmlV2/component/MMDrawer.qml +++ b/app/qmlV2/component/MMDrawer.qml @@ -11,7 +11,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic import "." -import ".." Drawer { id: control @@ -45,7 +44,7 @@ Drawer { id: roundedRect anchors.fill: parent - color: StyleV2.whiteColor + color: __style.whiteColor Column { id: mainColumn @@ -59,7 +58,7 @@ Drawer { Image { id: closeButton - source: StyleV2.closeButtonIcon + source: __style.closeButtonIcon anchors.right: parent.right anchors.rightMargin: 20 * __dp @@ -79,9 +78,9 @@ Drawer { id: title anchors.horizontalCenter: parent.horizontalCenter - font: StyleV2.t1 + font: __style.t1 width: parent.width - 2*20 * __dp - color: StyleV2.forestColor + color: __style.forestColor visible: text.length > 0 horizontalAlignment: Text.AlignHCenter } @@ -90,9 +89,9 @@ Drawer { id: description anchors.horizontalCenter: parent.horizontalCenter - font: StyleV2.p5 + font: __style.p5 width: parent.width - 2*20 * __dp - color: StyleV2.nightColor + color: __style.nightColor visible: text.length > 0 horizontalAlignment: Text.AlignHCenter wrapMode: Text.WordWrap @@ -105,15 +104,15 @@ Drawer { width: parent.width - 2*20 * __dp height: boundedDescription.height radius: 16 * __dp - color: StyleV2.lightGreenColor + color: __style.lightGreenColor Text { id: boundedDescription anchors.horizontalCenter: parent.horizontalCenter - font: StyleV2.p6 + font: __style.p6 width: parent.width - color: StyleV2.nightColor + color: __style.nightColor visible: text.length > 0 horizontalAlignment: Text.AlignLeft wrapMode: Text.WordWrap diff --git a/app/qmlV2/component/MMIcon.qml b/app/qmlV2/component/MMIcon.qml index e9cbacc5f..eb8c24de1 100644 --- a/app/qmlV2/component/MMIcon.qml +++ b/app/qmlV2/component/MMIcon.qml @@ -9,7 +9,6 @@ import QtQuick import Qt5Compat.GraphicalEffects -import ".." Item { id: control @@ -23,7 +22,7 @@ Item { Image { id: icon - source: StyleV2.arrowLinkRightIcon + source: __style.arrowLinkRightIcon anchors.centerIn: control } diff --git a/app/qmlV2/component/MMInput.qml b/app/qmlV2/component/MMInput.qml index 25570693f..169faff1c 100644 --- a/app/qmlV2/component/MMInput.qml +++ b/app/qmlV2/component/MMInput.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." Column { id: control @@ -29,7 +28,7 @@ Column { id: titleItem width: parent.width - font: StyleV2.p6 + font: __style.p6 wrapMode: Text.WordWrap visible: text.length > 0 } @@ -39,8 +38,8 @@ Column { height: 40 * __dp width: parent.width - color: (errorMsg.length > 0 || warningMsg.length > 0) ? StyleV2.errorBgInputColor : StyleV2.whiteColor - border.color: errorMsg.length > 0 ? StyleV2.negativeColor : warningMsg.length > 0 ? StyleV2.warningColor : StyleV2.forestColor + color: (errorMsg.length > 0 || warningMsg.length > 0) ? __style.errorBgInputColor : __style.whiteColor + border.color: errorMsg.length > 0 ? __style.negativeColor : warningMsg.length > 0 ? __style.warningColor : __style.forestColor border.width: enabled ? (textField.activeFocus ? 2*__dp : textField.hovered ? 1*__dp : 0) : 0 radius: parent.height @@ -54,9 +53,9 @@ Column { id: leftIcon source: control.iconSource - color: errorMsg.length > 0 ? StyleV2.negativeColor : - warningMsg.length > 0 ? StyleV2.warningColor : - control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + color: errorMsg.length > 0 ? __style.negativeColor : + warningMsg.length > 0 ? __style.warningColor : + control.enabled ? __style.forestColor : __style.mediumGreenColor height: rect.height } @@ -68,13 +67,13 @@ Column { - (leftIcon.visible ? leftIcon.width : 0) - (clearButton.visible ? clearButton.width : 0) height: rect.height - 4 * __dp - color: control.enabled ? StyleV2.nightColor : StyleV2.mediumGreenColor - placeholderTextColor: StyleV2.nightAlphaColor - font: StyleV2.p5 + color: control.enabled ? __style.nightColor : __style.mediumGreenColor + placeholderTextColor: __style.nightAlphaColor + font: __style.p5 hoverEnabled: true anchors.verticalCenter: parent.verticalCenter background: Rectangle { - color: StyleV2.transparentColor + color: __style.transparentColor } } @@ -82,8 +81,8 @@ Column { id: clearButton property bool pressed: false - source: StyleV2.xMarkIcon - color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + source: __style.xMarkIcon + color: control.enabled ? __style.forestColor : __style.mediumGreenColor width: visible ? height : 0 height: rect.height visible: textField.activeFocus && textField.text.length>0 @@ -110,13 +109,13 @@ Column { MMIcon { id: msgIcon - source: visible ? StyleV2.errorIcon : "" - color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor + source: visible ? __style.errorIcon : "" + color: errorMsg.length > 0 ? __style.negativeColor : __style.warningColor visible: errorMsg.length > 0 || warningMsg.length > 0 } Text { text: errorMsg.length > 0 ? errorMsg : warningMsg - font: StyleV2.t4 + font: __style.t4 wrapMode: Text.WordWrap width: messageItem.width - msgRow.spacing - msgIcon.width visible: errorMsg.length > 0 || warningMsg.length > 0 diff --git a/app/qmlV2/component/MMLink.qml b/app/qmlV2/component/MMLink.qml index 404b1c70c..f7ff33e8d 100644 --- a/app/qmlV2/component/MMLink.qml +++ b/app/qmlV2/component/MMLink.qml @@ -11,7 +11,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic import "." -import ".." Button { id: control @@ -23,9 +22,9 @@ Button { Text { id: text - font: StyleV2.t3 + font: __style.t3 text: control.text - color: control.enabled ? control.down || control.hovered ? StyleV2.nightColor : StyleV2.forestColor : StyleV2.mediumGreenColor + color: control.enabled ? control.down || control.hovered ? __style.nightColor : __style.forestColor : __style.mediumGreenColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -33,12 +32,12 @@ Button { } MMIcon { - source: StyleV2.arrowLinkRightIcon + source: __style.arrowLinkRightIcon color: text.color } } background: Rectangle { - color: StyleV2.transparentColor + color: __style.transparentColor } } diff --git a/app/qmlV2/component/MMLinkButton.qml b/app/qmlV2/component/MMLinkButton.qml index 97eeea96a..b87fc3e8c 100644 --- a/app/qmlV2/component/MMLinkButton.qml +++ b/app/qmlV2/component/MMLinkButton.qml @@ -11,28 +11,27 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic import "." -import ".." Button { id: control contentItem: Text { anchors.centerIn: control - font: StyleV2.t3 + font: __style.t3 text: control.text leftPadding: 32 * __dp rightPadding: 32 * __dp topPadding: 10 * __dp bottomPadding: 10 * __dp - color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + color: control.enabled ? __style.forestColor : __style.mediumGreenColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { - color: control.enabled ? control.down || control.hovered ? StyleV2.grassColor : StyleV2.whiteColor : StyleV2.whiteColor - border.color: control.enabled ? control.down || control.hovered ? StyleV2.transparentColor : StyleV2.forestColor : StyleV2.mediumGreenColor + color: control.enabled ? control.down || control.hovered ? __style.grassColor : __style.whiteColor : __style.whiteColor + border.color: control.enabled ? control.down || control.hovered ? __style.transparentColor : __style.forestColor : __style.mediumGreenColor border.width: 2 * __dp radius: height / 2 } diff --git a/app/qmlV2/component/MMMapButton.qml b/app/qmlV2/component/MMMapButton.qml index d1c9cb69b..1dfab7eb7 100644 --- a/app/qmlV2/component/MMMapButton.qml +++ b/app/qmlV2/component/MMMapButton.qml @@ -8,13 +8,12 @@ ***************************************************************************/ import QtQuick -import ".." Item { id: control width: height - height: StyleV2.mapItemHeight + height: __style.mapItemHeight property alias iconSource: icon.source @@ -24,7 +23,7 @@ Item { width: parent.width height: parent.height radius: control.height / 2 - color: StyleV2.whiteColor + color: __style.whiteColor layer.enabled: true layer.effect: MMShadow {} @@ -33,7 +32,7 @@ Item { id: icon anchors.centerIn: parent - color: StyleV2.forestColor + color: __style.forestColor } MouseArea { diff --git a/app/qmlV2/component/MMMapLabel.qml b/app/qmlV2/component/MMMapLabel.qml index e80a53004..b5921c2d6 100644 --- a/app/qmlV2/component/MMMapLabel.qml +++ b/app/qmlV2/component/MMMapLabel.qml @@ -9,20 +9,19 @@ import QtQuick import "." -import ".." Item { id: control width: text.width - height: StyleV2.mapItemHeight + height: __style.mapItemHeight signal clicked required property string text property url iconSource: "" - property color bgColor: StyleV2.positiveColor - property color textColor: StyleV2.forestColor + property color bgColor: __style.positiveColor + property color textColor: __style.forestColor Rectangle { width: row.width @@ -55,7 +54,7 @@ Item { color: control.textColor text: control.text - font: StyleV2.t3 + font: __style.t3 verticalAlignment: Text.AlignVCenter height: parent.height } diff --git a/app/qmlV2/component/MMMenuDrawer.qml b/app/qmlV2/component/MMMenuDrawer.qml index acf85445e..7289762e7 100644 --- a/app/qmlV2/component/MMMenuDrawer.qml +++ b/app/qmlV2/component/MMMenuDrawer.qml @@ -11,7 +11,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic import "." -import ".." Drawer { id: control @@ -39,7 +38,7 @@ Drawer { id: roundedRect anchors.fill: parent - color: StyleV2.whiteColor + color: __style.whiteColor Column { id: mainColumn @@ -53,7 +52,7 @@ Drawer { Image { id: closeButton - source: StyleV2.closeButtonIcon + source: __style.closeButtonIcon anchors.right: parent.right anchors.rightMargin: 20 * __dp @@ -67,9 +66,9 @@ Drawer { id: title anchors.horizontalCenter: parent.horizontalCenter - font: StyleV2.t1 + font: __style.t1 width: parent.width - 40 * __dp - color: StyleV2.forestColor + color: __style.forestColor visible: text.length > 0 horizontalAlignment: Text.AlignHCenter } @@ -78,9 +77,9 @@ Drawer { id: menuView width: parent.width - 40 * __dp - height: model ? model.count * StyleV2.menuDrawerHeight : 0 + height: model ? model.count * __style.menuDrawerHeight : 0 cellWidth: width - cellHeight: StyleV2.menuDrawerHeight + cellHeight: __style.menuDrawerHeight interactive: false } } diff --git a/app/qmlV2/component/MMNotification.qml b/app/qmlV2/component/MMNotification.qml index c97a579e5..782f3cc29 100644 --- a/app/qmlV2/component/MMNotification.qml +++ b/app/qmlV2/component/MMNotification.qml @@ -9,7 +9,6 @@ import QtQuick import notificationType 1.0 -import ".." Rectangle { id: notification @@ -23,11 +22,11 @@ Rectangle { radius: 12 * __dp color: { switch( type ) { - case NotificationType.Information: return StyleV2.informativeColor - case NotificationType.Success: return StyleV2.positiveColor - case NotificationType.Warning: return StyleV2.warningColor - case NotificationType.Error: return StyleV2.negativeColor - default: return StyleV2.positiveColor + case NotificationType.Information: return __style.informativeColor + case NotificationType.Success: return __style.positiveColor + case NotificationType.Warning: return __style.warningColor + case NotificationType.Error: return __style.negativeColor + default: return __style.positiveColor } } @@ -43,9 +42,9 @@ Rectangle { visible: icon !== NotificationType.None source: { switch( icon ) { - case NotificationType.None: return StyleV2.checkmarkIcon - case NotificationType.Waiting: return StyleV2.waitingIcon - case NotificationType.Check: return StyleV2.checkmarkIcon + case NotificationType.None: return __style.checkmarkIcon + case NotificationType.Waiting: return __style.waitingIcon + case NotificationType.Check: return __style.checkmarkIcon } } } @@ -60,7 +59,7 @@ Rectangle { verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft leftPadding: 20 * __dp - notification.innerSpacing - font: StyleV2.t3 + font: __style.t3 clip: true maximumLineCount: 3 wrapMode: Text.WordWrap @@ -68,10 +67,10 @@ Rectangle { elide: Text.ElideRight color: { switch( type ) { - case NotificationType.Information: return StyleV2.deepOceanColor - case NotificationType.Success: return StyleV2.forestColor - case NotificationType.Warning: return StyleV2.earthColor - case NotificationType.Error: return StyleV2.grapeColor + case NotificationType.Information: return __style.deepOceanColor + case NotificationType.Success: return __style.forestColor + case NotificationType.Warning: return __style.earthColor + case NotificationType.Error: return __style.grapeColor } } } @@ -83,7 +82,7 @@ Rectangle { anchors.rightMargin: 20 * __dp anchors.verticalCenter: parent.verticalCenter scale: maRemove.containsMouse ? 1.2 : 1 - source: StyleV2.closeIcon + source: __style.closeIcon color: text.color MouseArea { diff --git a/app/qmlV2/component/MMNotificationView.qml b/app/qmlV2/component/MMNotificationView.qml index 7a8119e8f..b3c81de4c 100644 --- a/app/qmlV2/component/MMNotificationView.qml +++ b/app/qmlV2/component/MMNotificationView.qml @@ -8,7 +8,6 @@ ***************************************************************************/ import QtQuick -import ".." Item { id: control @@ -23,12 +22,12 @@ Item { anchors.bottom: parent.bottom width: control.width height: 20 - color: StyleV2.whiteColor + color: __style.whiteColor Text { text: listView.count anchors.centerIn: parent - color: StyleV2.forestColor + color: __style.forestColor } } diff --git a/app/qmlV2/component/MMPasswordInput.qml b/app/qmlV2/component/MMPasswordInput.qml index 5d1eb0aeb..5e045c115 100644 --- a/app/qmlV2/component/MMPasswordInput.qml +++ b/app/qmlV2/component/MMPasswordInput.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." Column { id: control @@ -30,7 +29,7 @@ Column { id: titleItem width: parent.width - font: StyleV2.p6 + font: __style.p6 wrapMode: Text.WordWrap visible: text.length > 0 } @@ -40,8 +39,8 @@ Column { height: 40 * __dp width: parent.width - color: (errorMsg.length > 0 || warningMsg.length > 0) ? StyleV2.errorBgInputColor : StyleV2.whiteColor - border.color: isPasswordCorrect(textField.text) ? StyleV2.forestColor : errorMsg.length > 0 ? StyleV2.negativeColor : warningMsg.length > 0 ? StyleV2.warningColor : StyleV2.forestColor + color: (errorMsg.length > 0 || warningMsg.length > 0) ? __style.errorBgInputColor : __style.whiteColor + border.color: isPasswordCorrect(textField.text) ? __style.forestColor : errorMsg.length > 0 ? __style.negativeColor : warningMsg.length > 0 ? __style.warningColor : __style.forestColor border.width: enabled ? (textField.activeFocus ? 2*__dp : textField.hovered ? 1*__dp : 0) : 0 radius: parent.height @@ -55,9 +54,9 @@ Column { id: leftIcon source: control.iconSource - color: errorMsg.length > 0 ? StyleV2.negativeColor : - warningMsg.length > 0 ? StyleV2.warningColor : - control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + color: errorMsg.length > 0 ? __style.negativeColor : + warningMsg.length > 0 ? __style.warningColor : + control.enabled ? __style.forestColor : __style.mediumGreenColor height: rect.height } @@ -69,14 +68,14 @@ Column { - (leftIcon.visible ? leftIcon.width : 0) - (eyeButton.visible ? eyeButton.width : 0) height: rect.height - 4 * __dp - color: control.enabled ? StyleV2.nightColor : StyleV2.mediumGreenColor - placeholderTextColor: StyleV2.nightAlphaColor - font: StyleV2.p5 + color: control.enabled ? __style.nightColor : __style.mediumGreenColor + placeholderTextColor: __style.nightAlphaColor + font: __style.p5 hoverEnabled: true anchors.verticalCenter: parent.verticalCenter echoMode: eyeButton.pressed ? TextInput.Normal : TextInput.Password background: Rectangle { - color: StyleV2.transparentColor + color: __style.transparentColor } } @@ -84,8 +83,8 @@ Column { id: eyeButton property bool pressed: false - source: pressed ? StyleV2.hideIcon : StyleV2.showIcon - color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + source: pressed ? __style.hideIcon : __style.showIcon + color: control.enabled ? __style.forestColor : __style.mediumGreenColor width: visible ? height : 0 height: rect.height @@ -111,15 +110,15 @@ Column { MMIcon { id: msgIcon - source: visible ? StyleV2.errorIcon : "" - color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor + source: visible ? __style.errorIcon : "" + color: errorMsg.length > 0 ? __style.negativeColor : __style.warningColor visible: msg.visible } Text { id: msg text: errorMsg.length > 0 ? errorMsg : warningMsg - font: StyleV2.t4 + font: __style.t4 wrapMode: Text.WordWrap width: messageItem.width - msgRow.spacing - msgIcon.width visible: (errorMsg.length > 0 || warningMsg.length > 0) && !isPasswordCorrect(textField.text) diff --git a/app/qmlV2/component/MMProgressBar.qml b/app/qmlV2/component/MMProgressBar.qml index 34551d757..d3df3f6e3 100644 --- a/app/qmlV2/component/MMProgressBar.qml +++ b/app/qmlV2/component/MMProgressBar.qml @@ -9,7 +9,6 @@ import QtQuick import "." -import ".." Rectangle { id: control @@ -18,13 +17,13 @@ Rectangle { width: parent.width height: 12 * __dp - color: StyleV2.lightGreenColor + color: __style.lightGreenColor radius: height / 2 Rectangle { width: parent.width * control.position height: parent.height - color: StyleV2.grassColor + color: __style.grassColor radius: height / 2 } } diff --git a/app/qmlV2/component/MMRadioButton.qml b/app/qmlV2/component/MMRadioButton.qml index 9cec03ab8..b9115939a 100644 --- a/app/qmlV2/component/MMRadioButton.qml +++ b/app/qmlV2/component/MMRadioButton.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." RadioButton { id: control @@ -23,23 +22,23 @@ RadioButton { x: control.leftPadding y: parent.height / 2 - height / 2 radius: 12 - color: enabled ? ( control.checked ? StyleV2.grassColor: StyleV2.whiteColor ) : StyleV2.whiteColor - border.color: enabled ? ( control.checked ? StyleV2.grassColor: StyleV2.forestColor ) : StyleV2.mediumGreenColor + color: enabled ? ( control.checked ? __style.grassColor: __style.whiteColor ) : __style.whiteColor + border.color: enabled ? ( control.checked ? __style.grassColor: __style.forestColor ) : __style.mediumGreenColor border.width: control.hovered ? 2.5 : 2 MMIcon { id: icon anchors.centerIn: parent - source: StyleV2.checkmarkIcon - color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + source: __style.checkmarkIcon + color: control.enabled ? __style.forestColor : __style.mediumGreenColor visible: control.checked } } contentItem: Text { text: control.text - font: StyleV2.p5 + font: __style.p5 color: icon.color verticalAlignment: Text.AlignVCenter leftPadding: control.indicator.width + control.spacing diff --git a/app/qmlV2/component/MMRoundButton.qml b/app/qmlV2/component/MMRoundButton.qml index 68ae9ae3b..1568a32b2 100644 --- a/app/qmlV2/component/MMRoundButton.qml +++ b/app/qmlV2/component/MMRoundButton.qml @@ -11,7 +11,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic import "." -import ".." RoundButton { id: control @@ -22,12 +21,12 @@ RoundButton { contentItem: MMIcon { id: icon - source: StyleV2.arrowLinkRightIcon - color: control.enabled ? control.down || control.hovered ? StyleV2.grassColor : StyleV2.forestColor : StyleV2.forestColor + source: __style.arrowLinkRightIcon + color: control.enabled ? control.down || control.hovered ? __style.grassColor : __style.forestColor : __style.forestColor } background: Rectangle { - color: control.enabled ? control.down || control.hovered ? StyleV2.forestColor : StyleV2.grassColor : StyleV2.mediumGreenColor + color: control.enabled ? control.down || control.hovered ? __style.forestColor : __style.grassColor : __style.mediumGreenColor radius: control.implicitHeight / 2 } } diff --git a/app/qmlV2/component/MMRoundLinkButton.qml b/app/qmlV2/component/MMRoundLinkButton.qml index cf1f7cee5..e6bd31db5 100644 --- a/app/qmlV2/component/MMRoundLinkButton.qml +++ b/app/qmlV2/component/MMRoundLinkButton.qml @@ -11,7 +11,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic import "." -import ".." RoundButton { id: control @@ -22,13 +21,13 @@ RoundButton { contentItem: MMIcon { id: icon - source: StyleV2.arrowLinkRightIcon - color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + source: __style.arrowLinkRightIcon + color: control.enabled ? __style.forestColor : __style.mediumGreenColor } background: Rectangle { - color: control.enabled ? control.down || control.hovered ? StyleV2.grassColor : StyleV2.whiteColor : StyleV2.whiteColor - border.color: control.enabled ? control.down || control.hovered ? StyleV2.transparentColor : StyleV2.forestColor : StyleV2.mediumGreenColor + color: control.enabled ? control.down || control.hovered ? __style.grassColor : __style.whiteColor : __style.whiteColor + border.color: control.enabled ? control.down || control.hovered ? __style.transparentColor : __style.forestColor : __style.mediumGreenColor border.width: 2 * __dp radius: control.implicitHeight / 2 diff --git a/app/qmlV2/component/MMShadow.qml b/app/qmlV2/component/MMShadow.qml index 9d4363230..ce99955aa 100644 --- a/app/qmlV2/component/MMShadow.qml +++ b/app/qmlV2/component/MMShadow.qml @@ -9,13 +9,12 @@ import QtQuick import Qt5Compat.GraphicalEffects -import ".." DropShadow { id: shadow horizontalOffset: 2 * __dp verticalOffset: 3 * __dp radius: 7 * __dp - color: StyleV2.shadowColor + color: __style.shadowColor transparentBorder: true } diff --git a/app/qmlV2/component/MMSwitch.qml b/app/qmlV2/component/MMSwitch.qml index 0d60b0a96..0da197df9 100644 --- a/app/qmlV2/component/MMSwitch.qml +++ b/app/qmlV2/component/MMSwitch.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." Switch { id: control @@ -20,8 +19,8 @@ Switch { contentItem: Text { text: (control.textOn.length > 0 && control.textOff.length > 0) ? (control.checked ? control.textOn : control.textOff) : control.text - font: StyleV2.p5 - color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + font: __style.p5 + color: control.enabled ? __style.forestColor : __style.mediumGreenColor verticalAlignment: Text.AlignVCenter leftPadding: control.indicator.width + control.spacing } @@ -32,14 +31,14 @@ Switch { x: control.leftPadding y: parent.height / 2 - height / 2 radius: implicitHeight / 2 - color: control.checked ? StyleV2.grassColor : StyleV2.whiteColor + color: control.checked ? __style.grassColor : __style.whiteColor Rectangle { x: control.checked ? parent.width - width - radius/2 : radius/2 width: 20 height: width radius: width / 2 - color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor + color: control.enabled ? __style.forestColor : __style.mediumGreenColor anchors.verticalCenter: parent.verticalCenter } } diff --git a/app/qmlV2/component/MMTextArea.qml b/app/qmlV2/component/MMTextArea.qml index 71c8311f2..50c5b6ad9 100644 --- a/app/qmlV2/component/MMTextArea.qml +++ b/app/qmlV2/component/MMTextArea.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." Item { id: control @@ -38,15 +37,15 @@ Item { height: control.autoHeight ? ( contentHeight+10 > control.minHeight ? contentHeight+10 > control.maxHeight ? control.maxHeight : contentHeight+10 : control.minHeight ) : control.areaHeight width: parent.width hoverEnabled: true - placeholderTextColor: StyleV2.nightAlphaColor - color: control.enabled ? StyleV2.nightColor : StyleV2.mediumGreenColor - font: StyleV2.p5 + placeholderTextColor: __style.nightAlphaColor + color: control.enabled ? __style.nightColor : __style.mediumGreenColor + font: __style.p5 background: Rectangle { - color: (errorMsg.length > 0 || warningMsg.length > 0) ? StyleV2.errorBgInputColor : StyleV2.whiteColor - border.color: (textArea.activeFocus || textArea.hovered) ? (errorMsg.length > 0 ? StyleV2.negativeColor : - warningMsg.length > 0 ? StyleV2.warningColor : - StyleV2.forestColor) : StyleV2.transparentColor + color: (errorMsg.length > 0 || warningMsg.length > 0) ? __style.errorBgInputColor : __style.whiteColor + border.color: (textArea.activeFocus || textArea.hovered) ? (errorMsg.length > 0 ? __style.negativeColor : + warningMsg.length > 0 ? __style.warningColor : + __style.forestColor) : __style.transparentColor border.width: enabled ? (textArea.activeFocus ? 2*__dp : 1*__dp) : 0 radius: 10 * __dp } @@ -69,13 +68,13 @@ Item { MMIcon { id: msgIcon - source: visible ? StyleV2.errorIcon : "" - color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor + source: visible ? __style.errorIcon : "" + color: errorMsg.length > 0 ? __style.negativeColor : __style.warningColor visible: errorMsg.length > 0 || warningMsg.length > 0 } Text { text: errorMsg.length > 0 ? errorMsg : warningMsg - font: StyleV2.t4 + font: __style.t4 wrapMode: Text.WordWrap width: messageItem.width - msgRow.spacing - msgIcon.width visible: errorMsg.length > 0 || warningMsg.length > 0 diff --git a/app/qmlV2/component/MMToolbar.qml b/app/qmlV2/component/MMToolbar.qml index 6339042cf..267a42b72 100644 --- a/app/qmlV2/component/MMToolbar.qml +++ b/app/qmlV2/component/MMToolbar.qml @@ -9,7 +9,6 @@ import QtQuick import Qt5Compat.GraphicalEffects -import ".." Rectangle { id: control @@ -25,8 +24,8 @@ Rectangle { right: parent.right bottom: parent.bottom } - height: StyleV2.toolbarHeight - color: StyleV2.forestColor + height: __style.toolbarHeight + color: __style.forestColor onWidthChanged: setupBottomBar() @@ -47,7 +46,7 @@ Rectangle { anchors.fill: parent leftMargin: 20 * __dp rightMargin: 20 * __dp - cellHeight: StyleV2.toolbarHeight + cellHeight: __style.toolbarHeight interactive: false } @@ -67,7 +66,7 @@ Rectangle { id: componentMore MMToolbarButton { text: qsTr("More") - iconSource: StyleV2.moreIcon + iconSource: __style.moreIcon onClicked: menu.visible = true } } diff --git a/app/qmlV2/component/MMToolbarButton.qml b/app/qmlV2/component/MMToolbarButton.qml index 75c92d314..16b2d576d 100644 --- a/app/qmlV2/component/MMToolbarButton.qml +++ b/app/qmlV2/component/MMToolbarButton.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." Item { id: control @@ -24,14 +23,14 @@ Item { enum Button { Normal, Save } - height: isMenuButton ? StyleV2.menuDrawerHeight/2 : StyleV2.toolbarHeight + height: isMenuButton ? __style.menuDrawerHeight/2 : __style.toolbarHeight Rectangle { width: parent.width - 10 * __dp height: parent.height - 10 * __dp anchors.centerIn: parent clip: control.type !== MMToolbarButton.Button.Save - color: StyleV2.transparentColor + color: __style.transparentColor visible: !control.isMenuButton Image { @@ -48,8 +47,8 @@ Item { width: 56 * __dp height: width radius: width / 2 - color: StyleV2.transparentColor - border.color: StyleV2.grassColor + color: __style.transparentColor + border.color: __style.grassColor border.width: 14 * __dp } } @@ -58,8 +57,8 @@ Item { text: control.text width: parent.width - color: StyleV2.whiteColor - font: StyleV2.t4 + color: __style.whiteColor + font: __style.t4 anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom anchors.bottomMargin: 20 * __dp @@ -75,7 +74,7 @@ Item { // Menu button MMToolbarMenuButton { width: control.width - height: StyleV2.menuDrawerHeight + height: __style.menuDrawerHeight visible: control.isMenuButton iconSource: control.iconSource text: control.text diff --git a/app/qmlV2/component/MMToolbarLongButton.qml b/app/qmlV2/component/MMToolbarLongButton.qml index c1c75801c..301ada717 100644 --- a/app/qmlV2/component/MMToolbarLongButton.qml +++ b/app/qmlV2/component/MMToolbarLongButton.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." Item { id: control @@ -24,7 +23,7 @@ Item { readonly property double minimumToolbarLongButtonWidth: 200 * __dp readonly property double maximumToolbarLongButtonWidth: 500 * __dp - height: StyleV2.toolbarHeight + height: __style.toolbarHeight Button { width: { @@ -57,8 +56,8 @@ Item { id: text text: control.text - color: StyleV2.forestColor - font: StyleV2.t3 + color: __style.forestColor + font: __style.t3 verticalAlignment: Text.AlignVCenter topPadding: 10 * __dp bottomPadding: 10 * __dp @@ -67,7 +66,7 @@ Item { } background: Rectangle { - color: StyleV2.grassColor + color: __style.grassColor radius: height / 2 } diff --git a/app/qmlV2/component/MMToolbarMenuButton.qml b/app/qmlV2/component/MMToolbarMenuButton.qml index 1471e9203..1a2353bf8 100644 --- a/app/qmlV2/component/MMToolbarMenuButton.qml +++ b/app/qmlV2/component/MMToolbarMenuButton.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import ".." Item { id: control @@ -24,13 +23,13 @@ Item { id: menuButton width: control.width - height: StyleV2.menuDrawerHeight + height: __style.menuDrawerHeight Rectangle { anchors.top: parent.top width: parent.width height: 1 * __dp - color: StyleV2.grayColor + color: __style.grayColor } Row { @@ -39,13 +38,13 @@ Item { spacing: 20 * __dp MMIcon { height: parent.height - color: StyleV2.forestColor + color: __style.forestColor source: control.iconSource } Text { text: control.text - color: StyleV2.forestColor - font: StyleV2.t3 + color: __style.forestColor + font: __style.t3 verticalAlignment: Text.AlignVCenter height: parent.height } diff --git a/gallery/CMakeLists.txt b/gallery/CMakeLists.txt index 634927f10..68b9c010b 100644 --- a/gallery/CMakeLists.txt +++ b/gallery/CMakeLists.txt @@ -29,9 +29,9 @@ find_package( qt_standard_project_setup() qt_policy(SET QTP0001 NEW) -set(GALLERY_HDRS helper.h notificationmodel.h) +set(GALLERY_HDRS helper.h notificationmodel.h ../app/mmstyle.h) -set(GALLERY_SRCS helper.cpp notificationmodel.cpp) +set(GALLERY_SRCS helper.cpp notificationmodel.cpp main.cpp) if (IOS OR ANDROID) add_compile_definitions(MOBILE_OS) @@ -49,7 +49,6 @@ qt_add_executable( MerginMapsGallery ${GALLERY_SRCS} ${GALLERY_HDRS} - main.cpp qml.qrc fonts.qrc ../app/icons/icons.qrc @@ -69,7 +68,7 @@ qt_add_resources(fonts.qrc) set_target_properties( MerginMapsGallery - PROPERTIES MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com + PROPERTIES MACOSX_BUNDLE_GUI_IDENTIFIER uk.co.lutraconsulting.merginmaps.gallery MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION} MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR} @@ -78,6 +77,7 @@ set_target_properties( ) target_link_libraries(MerginMapsGallery PRIVATE Qt6::Quick) +target_include_directories(MerginMapsGallery PRIVATE ../app) install( TARGETS MerginMapsGallery diff --git a/gallery/main.cpp b/gallery/main.cpp index d7b4ffee8..f4e74460c 100644 --- a/gallery/main.cpp +++ b/gallery/main.cpp @@ -13,11 +13,11 @@ #ifdef DESKTOP_OS #include "hotreload.h" #endif +#include "mmstyle.h" #include "helper.h" #include #include #include "notificationmodel.h" - int main( int argc, char *argv[] ) { QGuiApplication app( argc, argv ); @@ -31,12 +31,15 @@ int main( int argc, char *argv[] ) engine.rootContext()->setContextProperty( "_hotReload", &hotReload ); #endif + qreal dp = Helper::calculateDpRatio(); + MMStyle style( dp ); NotificationModel notificationModel; - engine.rootContext()->setContextProperty( "notificationModel", ¬ificationModel ); + engine.rootContext()->setContextProperty( "notificationModel", ¬ificationModel ); // path to local wrapper pages engine.rootContext()->setContextProperty( "_qmlWrapperPath", QGuiApplication::applicationDirPath() + "/HotReload/qml/pages/" ); - engine.rootContext()->setContextProperty( "__dp", Helper::calculateDpRatio() ); + engine.rootContext()->setContextProperty( "__dp", dp ); + engine.rootContext()->setContextProperty( "__style", &style ); engine.rootContext()->setContextProperty( "__isMobile", Helper::isMobile() ); QObject::connect( &engine, &QQmlApplicationEngine::objectCreationFailed, diff --git a/gallery/qml.qrc b/gallery/qml.qrc index 5c78a5d05..b24a0a80c 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -5,7 +5,6 @@ qml/pages/InputsPage.qml qml/pages/ButtonsPage.qml ../app/qmlV2/component/MMInput.qml - ../app/qmlV2/StyleV2.qml ../app/qmlV2/component/MMButton.qml ../app/qmlV2/component/MMLinkButton.qml ../app/qmlV2/component/MMLink.qml diff --git a/gallery/qml/pages/DrawerPage.qml b/gallery/qml/pages/DrawerPage.qml index 412c1b5e4..267c413cb 100644 --- a/gallery/qml/pages/DrawerPage.qml +++ b/gallery/qml/pages/DrawerPage.qml @@ -38,7 +38,7 @@ Page { MMDrawer { id: drawer1 - picture: StyleV2.uploadImage + picture: __style.uploadImage title: "Upload project to Margin?" description: "This project is currently not uploaded on Mergin. Upload it to Mergin in order to activate synchronization and collaboration." primaryButton: "Yes, Upload Project" @@ -51,7 +51,7 @@ Page { MMDrawer { id: drawer2 - picture: StyleV2.reachedDataLimitImage + picture: __style.reachedDataLimitImage title: "You have reached a data limit" primaryButton: "Manage Subscription" specialComponent: component.comp @@ -72,7 +72,7 @@ Page { MMDrawer { id: drawer3 - picture: StyleV2.uploadImage + picture: __style.uploadImage title: "Failed to synchronize your changes" description: "Your changes could not be sent to server, make sure you are connected to internet and have write access to this project." primaryButton: "Ok, I understand" diff --git a/gallery/qml/pages/InputsPage.qml b/gallery/qml/pages/InputsPage.qml index ba17f2693..30cfb50aa 100644 --- a/gallery/qml/pages/InputsPage.qml +++ b/gallery/qml/pages/InputsPage.qml @@ -47,13 +47,13 @@ ScrollView { MMInput { title: "Search ..." placeholderText: "Search" - iconSource: StyleV2.searchIcon + iconSource: __style.searchIcon } } Column { MMInput { text: "Calendar" - iconSource: StyleV2.calendarIcon + iconSource: __style.calendarIcon warningMsg: "Would you like to be so kind and select a date please?" } } diff --git a/gallery/qml/pages/MapPage.qml b/gallery/qml/pages/MapPage.qml index 572a963d8..88dde5862 100644 --- a/gallery/qml/pages/MapPage.qml +++ b/gallery/qml/pages/MapPage.qml @@ -88,12 +88,12 @@ Page { spacing: 20 MMMapButton { - iconSource: StyleV2.arrowLinkRightIcon + iconSource: __style.arrowLinkRightIcon onClicked: console.log("Map button clicked") } MMMapButton { - iconSource: StyleV2.searchIcon + iconSource: __style.searchIcon onClicked: console.log("Map button clicked") } } @@ -105,7 +105,7 @@ Page { anchors.bottomMargin: 120 text: "20.0 m" - iconSource: StyleV2.checkmarkIcon + iconSource: __style.checkmarkIcon } MMMapLabel { diff --git a/gallery/qml/pages/ToolbarPage.qml b/gallery/qml/pages/ToolbarPage.qml index f0ad0a502..d460725bd 100644 --- a/gallery/qml/pages/ToolbarPage.qml +++ b/gallery/qml/pages/ToolbarPage.qml @@ -18,38 +18,38 @@ Page { MMToolbar { model: ObjectModel { - MMToolbarLongButton { text: "Long button"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarLongButton { text: "Long button"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } } anchors.bottomMargin: 360 * __dp } MMToolbar { model: ObjectModel { - MMToolbarButton { text: "aaa"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } - MMToolbarButton { text: "bbb"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: "aaa"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: "bbb"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } } anchors.bottomMargin: 240 * __dp } MMToolbar { model: ObjectModel { - MMToolbarButton { text: "1/8"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } - MMToolbarButton { text: "2/8"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } - MMToolbarButton { text: "3/8"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } - MMToolbarButton { text: "4/8"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } - MMToolbarButton { text: "5/8"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } - MMToolbarButton { text: "6/8"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } - MMToolbarButton { text: "7/8"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } - MMToolbarButton { text: "8/8"; iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: "1/8"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: "2/8"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: "3/8"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: "4/8"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: "5/8"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: "6/8"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: "7/8"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: "8/8"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } } anchors.bottomMargin: 120 * __dp } MMToolbar { model: ObjectModel { - MMToolbarButton { text: qsTr("Delete"); iconSource: StyleV2.deleteIcon; onClicked: console.log("tapped "+text) } - MMToolbarButton { text: qsTr("Edit Geometry"); iconSource: StyleV2.editIcon; onClicked: console.log("tapped "+text) } - MMToolbarButton { text: qsTr("Save"); iconSource: StyleV2.doneIcon; type: MMToolbarButton.Button.Save; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: qsTr("Delete"); iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: qsTr("Edit Geometry"); iconSource: __style.editIcon; onClicked: console.log("tapped "+text) } + MMToolbarButton { text: qsTr("Save"); iconSource: __style.doneIcon; type: MMToolbarButton.Button.Save; onClicked: console.log("tapped "+text) } } } }