From 001a53e6ebd55028f0133f806f551046ae0a7364 Mon Sep 17 00:00:00 2001 From: Lubos Date: Tue, 14 Nov 2023 10:49:20 +0100 Subject: [PATCH] Use Style singleton, instead of JS --- app/qmlV2/Style.js | 128 +++++++++--------- app/qmlV2/StyleV2.qml | 86 ++++++++---- app/qmlV2/component/MMButton.qml | 29 +--- app/qmlV2/component/MMCheckBox.qml | 12 +- app/qmlV2/component/MMComboBox.qml | 32 ++--- .../MMComponent_reachedDataLimit.qml | 36 ++--- app/qmlV2/component/MMDrawer.qml | 45 +++--- app/qmlV2/component/MMIcon.qml | 4 +- app/qmlV2/component/MMInput.qml | 45 +++--- app/qmlV2/component/MMLink.qml | 10 +- app/qmlV2/component/MMLinkButton.qml | 10 +- app/qmlV2/component/MMProgressBar.qml | 6 +- app/qmlV2/component/MMRadioButton.qml | 12 +- app/qmlV2/component/MMRoundButton.qml | 8 +- app/qmlV2/component/MMRoundLinkButton.qml | 11 +- app/qmlV2/component/MMSwitch.qml | 12 +- app/qmlV2/component/MMTextArea.qml | 19 ++- gallery/qml/pages/DrawerPage.qml | 8 +- 18 files changed, 261 insertions(+), 252 deletions(-) diff --git a/app/qmlV2/Style.js b/app/qmlV2/Style.js index 98c8b2567..7c647f8eb 100644 --- a/app/qmlV2/Style.js +++ b/app/qmlV2/Style.js @@ -7,77 +7,77 @@ * * ***************************************************************************/ -// Fonts - Title -const t1 = { pixelSize: 18 * __dp, bold: true } -const t2 = { pixelSize: 16 * __dp, bold: true } -const t3 = { pixelSize: 14 * __dp, bold: true } -const t4 = { pixelSize: 12 * __dp, bold: true } -const t5 = { pixelSize: 10 * __dp, bold: true } +//// Fonts - Title +//const t1 = { pixelSize: 18 * __dp, bold: true } +//const t2 = { pixelSize: 16 * __dp, bold: true } +//const t3 = { pixelSize: 14 * __dp, bold: true } +//const t4 = { pixelSize: 12 * __dp, bold: true } +//const t5 = { pixelSize: 10 * __dp, bold: true } -// Fonts - Paragraph -const p1 = { pixelSize: 32 * __dp } -const p2 = { pixelSize: 24 * __dp } -const p3 = { pixelSize: 20 * __dp } -const p4 = { pixelSize: 16 * __dp } -const p5 = { pixelSize: 14 * __dp } -const p6 = { pixelSize: 12 * __dp } -const p7 = { pixelSize: 10 * __dp } +//// Fonts - Paragraph +//const p1 = { pixelSize: 32 * __dp } +//const p2 = { pixelSize: 24 * __dp } +//const p3 = { pixelSize: 20 * __dp } +//const p4 = { pixelSize: 16 * __dp } +//const p5 = { pixelSize: 14 * __dp } +//const p6 = { pixelSize: 12 * __dp } +//const p7 = { pixelSize: 10 * __dp } -// Colors - pripary palette -const grass = "#73D19C" -const forest = "#004C45" -const night = "#12181F" -const white = "#FFFFFF" -const transparent = "transparent" +//// Colors - pripary palette +//const grass = "#73D19C" +//const forest = "#004C45" +//const night = "#12181F" +//const white = "#FFFFFF" +//const transparent = "transparent" -// Colors - secondary palette -const lightGreen = "#EFF5F3" -const mediumGreen = "#B7CDC4" -const gray = "#E2E2E2" +//// Colors - secondary palette +//const lightGreen = "#EFF5F3" +//const mediumGreen = "#B7CDC4" +//const gray = "#E2E2E2" -// Colors - additional colors -const send = "#FFF4E2" -const sunset = "#FFB673" -const sun = "#F4CB46" -const earth = "#4D2A24" -const rose = "#FFBABC" -const sky = "#A6CBF4" -const grape = "#5A2740" -const deepOcean = "#1C324A" -const purple = "#CCBDF5" -const field = "#9BD1A9" +//// Colors - additional colors +//const send = "#FFF4E2" +//const sunset = "#FFB673" +//const sun = "#F4CB46" +//const earth = "#4D2A24" +//const rose = "#FFBABC" +//const sky = "#A6CBF4" +//const grape = "#5A2740" +//const deepOcean = "#1C324A" +//const purple = "#CCBDF5" +//const field = "#9BD1A9" -// Colors - sentiment colors -const positive = "#C2FFA6" -const warning = "#FFD6A6" -const negative = "#FFA6A6" -const informative = "#A6F4FF" +//// Colors - sentiment colors +//const positive = "#C2FFA6" +//const warning = "#FFD6A6" +//const negative = "#FFA6A6" +//const informative = "#A6F4FF" -// Colors - special -const night_6 = "#AA12181F" // placeholder input color -const errorBgInputColor = "#FEFAF9" // error bg input color +//// Colors - special +//const night_6 = "#AA12181F" // placeholder input color +//const errorBgInputColor = "#FEFAF9" // error bg input color -// Icons -const arrowLinkRightIcon= "qrc:/Arrow Link Right.svg" -const searchIcon = "qrc:/Search.svg" -const calendarIcon = "qrc:/Calendar.svg" -const showIcon = "qrc:/Show.svg" -const hideIcon = "qrc:/Hide.svg" -const xMarkIcon = "qrc:/X Mark.svg" -const errorIcon = "qrc:/Error.svg" -const arrowUpIcon = "qrc:/Arrow Up.svg" -const arrowDownIcon = "qrc:/Arrow Down.svg" -const qrCodeIcon = "qrc:/QR Code.svg" -const checkmarkIcon = "qrc:/Checkmark.svg" -const closeButtonIcon = "qrc:/CloseButton.svg" +//// Icons +//const arrowLinkRightIcon= "qrc:/Arrow Link Right.svg" +//const searchIcon = "qrc:/Search.svg" +//const calendarIcon = "qrc:/Calendar.svg" +//const showIcon = "qrc:/Show.svg" +//const hideIcon = "qrc:/Hide.svg" +//const xMarkIcon = "qrc:/X Mark.svg" +//const errorIcon = "qrc:/Error.svg" +//const arrowUpIcon = "qrc:/Arrow Up.svg" +//const arrowDownIcon = "qrc:/Arrow Down.svg" +//const qrCodeIcon = "qrc:/QR Code.svg" +//const checkmarkIcon = "qrc:/Checkmark.svg" +//const closeButtonIcon = "qrc:/CloseButton.svg" -// Images -const uploadImage = "qrc:/UploadImage.svg" -const ReachedDataLimitImage = "qrc:/ReachedDataLimitImage.svg" +//// Images +//const uploadImage = "qrc:/UploadImage.svg" +//const reachedDataLimitImage = "qrc:/ReachedDataLimitImage.svg" -// Spacing -const commonSpacing = 20 * __dp +//// Spacing +//const commonSpacing = 20 * __dp -function dynamicText() { - return "Dynamic text" -} +//function dynamicText() { +// return "Dynamic text" +//} diff --git a/app/qmlV2/StyleV2.qml b/app/qmlV2/StyleV2.qml index 29537af10..53b548850 100644 --- a/app/qmlV2/StyleV2.qml +++ b/app/qmlV2/StyleV2.qml @@ -11,37 +11,71 @@ pragma Singleton import QtQuick QtObject { + // 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 - property color grassColor: "#73D19C" - property color forestColor: "#004C45" - property color nightColor: "#12181F" - property color whiteColor: "#FFFFFF" - property color transparentColor: "transparent" + 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 - property color lightGreenColor: "#EFF5F3" - property color mediumGreenColor: "#B7CDC4" - property color grayColor: "#E2E2E2" + readonly property color lightGreenColor: "#EFF5F3" + readonly property color mediumGreenColor: "#B7CDC4" + readonly property color grayColor: "#E2E2E2" // Colors - additional colors - property color sendColor: "#FFF4E2" - property color sunsetColor: "#FFB673" - property color sunColor: "#F4CB46" - property color earthColor: "#4D2A24" - property color roseColor: "#FFBABC" - property color skyColor: "#A6CBF4" - property color grapeColor: "#5A2740" - property color deepOceanColor: "#1C324A" - property color purpleColor: "#CCBDF5" - property color fieldColor: "#9BD1A9" + 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 - property color positiveColor: "#C2FFA6" - property color warningColor: "#FFD6A6" - property color negativeColor: "#FFA6A6" - property color informativeColor: "#A6F4FF" - - // Colors - special - property color nightAlphaColor: "#AA12181F" // placeholder input color - property color errorBgInputColor: "#FEFAF9" // error bg input color + 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 + + // 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" + + // Images + readonly property url uploadImage: "qrc:/UploadImage.svg" + readonly property url reachedDataLimitImage: "qrc:/ReachedDataLimitImage.svg" } diff --git a/app/qmlV2/component/MMButton.qml b/app/qmlV2/component/MMButton.qml index 8002faf34..ec3e6a31d 100644 --- a/app/qmlV2/component/MMButton.qml +++ b/app/qmlV2/component/MMButton.qml @@ -10,7 +10,6 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style import "." import ".." @@ -21,42 +20,20 @@ Button { contentItem: Text { anchors.centerIn: control - font: Qt.font(Style.t3) + font: StyleV2.t3 text: control.text leftPadding: 32 * __dp rightPadding: 32 * __dp topPadding: 10 * __dp bottomPadding: 10 * __dp - color: control.enabled ? control.down || control.hovered ? Style.grass : StyleV2.forestColor : StyleV2.forestColor + color: control.enabled ? control.down || control.hovered ? StyleV2.grassColor : StyleV2.forestColor : StyleV2.forestColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { - color: transparent ? "transparent" : control.enabled ? control.down || control.hovered ? Style.forest : Style.grass : Style.mediumGreen + color: transparent ? "transparent" : control.enabled ? control.down || control.hovered ? StyleV2.forestColor : StyleV2.grassColor : StyleV2.mediumGreenColor radius: height / 2 } - -// onPressed: clickTransition.running = true - -// SequentialAnimation { -// id: clickTransition - -// PropertyAnimation { -// target: control -// properties: "scale" -// from: 1 -// to: 0.9 -// duration: 100 -// } - -// PropertyAnimation { -// target: control -// properties: "scale" -// from: 0.9 -// to: 1 -// duration: 100 -// } -// } } diff --git a/app/qmlV2/component/MMCheckBox.qml b/app/qmlV2/component/MMCheckBox.qml index cb28a4cb5..a33797267 100644 --- a/app/qmlV2/component/MMCheckBox.qml +++ b/app/qmlV2/component/MMCheckBox.qml @@ -10,7 +10,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style +import ".." CheckBox { id: control @@ -23,23 +23,23 @@ CheckBox { x: control.leftPadding y: parent.height / 2 - height / 2 radius: 5 - color: enabled ? ( control.checked ? Style.grass: Style.white ) : Style.white - border.color: enabled ? ( control.checked ? Style.grass: Style.forest ) : Style.mediumGreen + color: enabled ? ( control.checked ? StyleV2.grassColor: StyleV2.whiteColor ) : StyleV2.whiteColor + border.color: enabled ? ( control.checked ? StyleV2.grassColor: StyleV2.forestColor ) : StyleV2.mediumGreenColor border.width: control.hovered ? 2.5 : 2 MMIcon { id: icon anchors.centerIn: parent - source: Style.checkmarkIcon - color: control.enabled ? Style.forest : Style.mediumGreen + source: StyleV2.checkmarkIcon + color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor visible: control.checked } } contentItem: Text { text: control.text - font: Qt.font(Style.p5) + font: StyleV2.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 57f0f7f8e..f01e15f98 100644 --- a/app/qmlV2/component/MMComboBox.qml +++ b/app/qmlV2/component/MMComboBox.qml @@ -10,7 +10,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style +import ".." Item { id: control @@ -31,8 +31,8 @@ Item { height: 40 * __dp indicator: MMIcon { - source: popup.visible ? Style.arrowUpIcon : Style.arrowDownIcon - color: control.enabled ? Style.forest : Style.mediumGreen + source: popup.visible ? StyleV2.arrowUpIcon : StyleV2.arrowDownIcon + color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor x: combobox.width - width - combobox.rightPadding anchors.verticalCenter: parent.verticalCenter } @@ -42,17 +42,17 @@ Item { rightPadding: combobox.indicator.width + combobox.spacing text: combobox.displayText - font: Qt.font(Style.p4) - color: control.enabled ? Style.night : Style.mediumGreen + font: StyleV2.p4 + color: control.enabled ? StyleV2.nightColor : StyleV2.mediumGreenColor verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { - color: (errorMsg.length > 0 || warningMsg.length > 0) ? Style.errorBgInputColor : Style.white - border.color: (combobox.activeFocus || combobox.hovered) ? (errorMsg.length > 0 ? Style.negative : - warningMsg.length > 0 ? Style.warning : - Style.forest) : "transparent" + 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 border.width: enabled ? (combobox.activeFocus ? 2*__dp : 1*__dp) : 0 radius: parent.height } @@ -75,7 +75,7 @@ Item { } background: Rectangle { - border.color: Style.forest + border.color: StyleV2.forestColor radius: 2 } } @@ -87,13 +87,13 @@ Item { height: 30 * __dp contentItem: Text { text: modelData - color: combobox.highlightedIndex === index ? Style.grass : Style.forest - font: Qt.font(Style.p4) + color: combobox.highlightedIndex === index ? StyleV2.grassColor : StyleV2.forestColor + font: StyleV2.p4 elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } background: Rectangle { - border.color: Style.white + border.color: StyleV2.whiteColor } } @@ -117,13 +117,13 @@ Item { MMIcon { id: msgIcon - source: visible ? Style.errorIcon : "" - color: errorMsg.length > 0 ? Style.negative : Style.warning + source: visible ? StyleV2.errorIcon : "" + color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor visible: errorMsg.length > 0 || warningMsg.length > 0 } Text { text: errorMsg.length > 0 ? errorMsg : warningMsg - font: Qt.font(Style.t4) + font: StyleV2.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 fc21b882d..aa24f5398 100644 --- a/app/qmlV2/component/MMComponent_reachedDataLimit.qml +++ b/app/qmlV2/component/MMComponent_reachedDataLimit.qml @@ -10,8 +10,8 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style import "." +import ".." Item { id: control @@ -28,9 +28,9 @@ Item { id: component Column { - width: control.width - 2 * Style.commonSpacing - spacing: Style.commonSpacing / 2 - topPadding: Style.commonSpacing + width: control.width - 40 * __dp + spacing: 10 * __dp + topPadding: 20 * __dp Item { width: parent.width @@ -39,8 +39,8 @@ Item { Text { width: parent.width text: qsTr("Data to sync") - font: Qt.font(Style.p5) - color: Style.night + font: StyleV2.p5 + color: StyleV2.nightColor horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } @@ -49,14 +49,14 @@ Item { width: parent.width text: control.dataToSync - font: Qt.font(Style.t3) - color: Style.night + font: StyleV2.t3 + color: StyleV2.nightColor horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter } } - Rectangle { width: parent.width; height: 1; color: Style.gray } + Rectangle { width: parent.width; height: 1; color: StyleV2.grayColor } Item { width: parent.width @@ -65,8 +65,8 @@ Item { Text { width: parent.width text: qsTr("Using") - font: Qt.font(Style.p5) - color: Style.night + font: StyleV2.p5 + color: StyleV2.nightColor horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } @@ -75,8 +75,8 @@ Item { width: parent.width text: control.dataUsing - font: Qt.font(Style.t3) - color: Style.night + font: StyleV2.t3 + color: StyleV2.nightColor horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter } @@ -86,7 +86,7 @@ Item { position: control.usedData } - Rectangle { width: parent.width; height: 1; color: Style.gray } + Rectangle { width: parent.width; height: 1; color: StyleV2.grayColor } Item { width: parent.width @@ -95,8 +95,8 @@ Item { Text { width: parent.width text: qsTr("Plan") - font: Qt.font(Style.p5) - color: Style.night + font: StyleV2.p5 + color: StyleV2.nightColor horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } @@ -105,8 +105,8 @@ Item { width: parent.width text: control.plan - font: Qt.font(Style.t3) - color: Style.night + font: StyleV2.t3 + color: StyleV2.nightColor horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter } diff --git a/app/qmlV2/component/MMDrawer.qml b/app/qmlV2/component/MMDrawer.qml index 6389957d2..7eac765cd 100644 --- a/app/qmlV2/component/MMDrawer.qml +++ b/app/qmlV2/component/MMDrawer.qml @@ -10,8 +10,8 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style import "." +import ".." Drawer { id: control @@ -38,30 +38,30 @@ Drawer { anchors.right: parent.right height: 2 * radius anchors.topMargin: -radius - radius: Style.commonSpacing + radius: 20 * __dp } Rectangle { id: roundedRect anchors.fill: parent - color: Style.white + color: StyleV2.whiteColor Column { id: mainColumn width: parent.width - spacing: Style.commonSpacing - leftPadding: Style.commonSpacing - rightPadding: Style.commonSpacing - bottomPadding: Style.commonSpacing + spacing: 20 * __dp + leftPadding: 20 * __dp + rightPadding: 20 * __dp + bottomPadding: 20 * __dp Image { id: closeButton - source: Style.closeButtonIcon + source: StyleV2.closeButtonIcon anchors.right: parent.right - anchors.rightMargin: Style.commonSpacing + anchors.rightMargin: 20 * __dp MouseArea { anchors.fill: parent @@ -79,9 +79,9 @@ Drawer { id: title anchors.horizontalCenter: parent.horizontalCenter - font: Qt.font(Style.t1) - width: parent.width - 2*Style.commonSpacing - color: Style.forest + font: StyleV2.t1 + width: parent.width - 2*20 * __dp + color: StyleV2.forestColor visible: text.length > 0 horizontalAlignment: Text.AlignHCenter } @@ -90,9 +90,9 @@ Drawer { id: description anchors.horizontalCenter: parent.horizontalCenter - font: Qt.font(Style.p5) - width: parent.width - 2*Style.commonSpacing - color: Style.night + font: StyleV2.p5 + width: parent.width - 2*20 * __dp + color: StyleV2.nightColor visible: text.length > 0 horizontalAlignment: Text.AlignHCenter wrapMode: Text.WordWrap @@ -102,24 +102,23 @@ Drawer { Rectangle { anchors.horizontalCenter: parent.horizontalCenter visible: boundedDescription.text.length > 0 - width: parent.width - 2*Style.commonSpacing + width: parent.width - 2*20 * __dp height: boundedDescription.height radius: 16 * __dp - - color: Style.lightGreen + color: StyleV2.lightGreenColor Text { id: boundedDescription anchors.horizontalCenter: parent.horizontalCenter - font: Qt.font(Style.p6) + font: StyleV2.p6 width: parent.width - color: Style.night + color: StyleV2.nightColor visible: text.length > 0 horizontalAlignment: Text.AlignLeft wrapMode: Text.WordWrap lineHeight: 1.6 - padding: Style.commonSpacing + padding: 20 * __dp } } @@ -134,7 +133,7 @@ Drawer { MMButton { id: primaryButton - width: parent.width - 2*Style.commonSpacing + width: parent.width - 2*20 * __dp visible: text.length > 0 onClicked: primaryButtonClicked() @@ -143,7 +142,7 @@ Drawer { MMButton { id: secondaryButton - width: parent.width - 2*Style.commonSpacing + width: parent.width - 2*20 * __dp visible: text.length > 0 transparent: true topPadding: 0 diff --git a/app/qmlV2/component/MMIcon.qml b/app/qmlV2/component/MMIcon.qml index 2be5fb0d6..c6e3d9d83 100644 --- a/app/qmlV2/component/MMIcon.qml +++ b/app/qmlV2/component/MMIcon.qml @@ -9,7 +9,7 @@ import QtQuick import Qt5Compat.GraphicalEffects -import "../Style.js" as Style +import ".." Item { id: control @@ -22,7 +22,7 @@ Item { Image { id: icon - source: Style.arrowLinkRightIcon + source: StyleV2.arrowLinkRightIcon anchors.centerIn: control } diff --git a/app/qmlV2/component/MMInput.qml b/app/qmlV2/component/MMInput.qml index 9a57a7e52..5c83e3b6d 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 "../Style.js" as Style import ".." Item { @@ -44,13 +43,13 @@ Item { MMIcon { id: msgIcon - source: visible ? Style.errorIcon : "" - color: errorMsg.length > 0 ? Style.negative : Style.warning + source: visible ? StyleV2.errorIcon : "" + color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor visible: errorMsg.length > 0 || warningMsg.length > 0 } Text { text: errorMsg.length > 0 ? errorMsg : warningMsg - font: Qt.font(Style.t4) + font: StyleV2.t4 wrapMode: Text.WordWrap width: messageItem.width - msgRow.spacing - msgIcon.width visible: errorMsg.length > 0 || warningMsg.length > 0 @@ -63,10 +62,10 @@ Item { height: 40 * __dp width: parent.width - color: (errorMsg.length > 0 || warningMsg.length > 0) ? Style.errorBgInputColor : Style.white - border.color: (textField.activeFocus || textField.hovered) ? (errorMsg.length > 0 ? Style.negative : - warningMsg.length > 0 ? Style.warning : - Style.forest) : "transparent" + color: (errorMsg.length > 0 || warningMsg.length > 0) ? StyleV2.errorBgInputColor : StyleV2.whiteColor + border.color: (textField.activeFocus || textField.hovered) ? (errorMsg.length > 0 ? StyleV2.negativeColor : + warningMsg.length > 0 ? StyleV2.warningColor : + StyleV2.forestColor) : StyleV2.transparentColor border.width: enabled ? (textField.activeFocus ? 2*__dp : 1*__dp) : 0 radius: parent.height @@ -79,11 +78,11 @@ Item { MMIcon { id: leftIcon - source: control.type === MMInput.Type.Search ? Style.searchIcon : - control.type === MMInput.Type.Calendar ? Style.calendarIcon : "" - color: errorMsg.length > 0 ? Style.negative : - warningMsg.length > 0 ? Style.warning : - control.enabled ? Style.forest : Style.mediumGreen + source: control.type === MMInput.Type.Search ? StyleV2.searchIcon : + control.type === MMInput.Type.Calendar ? StyleV2.calendarIcon : "" + color: errorMsg.length > 0 ? StyleV2.negativeColor : + warningMsg.length > 0 ? StyleV2.warningColor : + control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor width: height height: rect.height visible: control.type === MMInput.Type.Search || control.type === MMInput.Type.Calendar @@ -98,14 +97,14 @@ Item { - (rightIcon.visible ? rightIcon.width : 0) - (button.visible ? button.width : 0) height: rect.height - 4 * __dp - color: control.enabled ? Style.night : Style.mediumGreen + color: control.enabled ? StyleV2.nightColor : StyleV2.mediumGreenColor placeholderTextColor: StyleV2.nightAlphaColor - font: Qt.font(Style.p5) + font: StyleV2.p5 hoverEnabled: true anchors.verticalCenter: parent.verticalCenter echoMode: (control.type === MMInput.Type.Password && !rightIcon.pressed) ? TextInput.Password : TextInput.Normal background: Rectangle { - color: Style.transparent + color: StyleV2.transparentColor } } @@ -113,10 +112,10 @@ Item { id: rightIcon property bool pressed: false - source: control.type === MMInput.Type.Password ? (pressed ? Style.hideIcon : Style.showIcon) : - control.type === MMInput.Type.Scan ? Style.qrCodeIcon : - (textField.activeFocus && textField.text.length>0) ? Style.xMarkIcon : "" - color: control.enabled ? Style.forest : Style.mediumGreen + source: control.type === MMInput.Type.Password ? (pressed ? StyleV2.hideIcon : StyleV2.showIcon) : + control.type === MMInput.Type.Scan ? StyleV2.qrCodeIcon : + (textField.activeFocus && textField.text.length>0) ? StyleV2.xMarkIcon : "" + color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor width: visible ? height : 0 height: rect.height visible: control.type === MMInput.Type.Password || @@ -146,20 +145,20 @@ Item { contentItem: Text { anchors.centerIn: button - font: Qt.font(Style.t5) + font: StyleV2.t5 text: qsTr("Copy") leftPadding: 2 * __dp rightPadding: 2 * __dp topPadding: 2 * __dp bottomPadding: 2 * __dp - color: Style.deepOcean + color: StyleV2.deepOceanColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { - color: button.enabled ? Style.grass : Style.mediumGreen + color: button.enabled ? StyleV2.grassColor : StyleV2.mediumGreenColor radius: height / 2 } diff --git a/app/qmlV2/component/MMLink.qml b/app/qmlV2/component/MMLink.qml index feae882b0..404b1c70c 100644 --- a/app/qmlV2/component/MMLink.qml +++ b/app/qmlV2/component/MMLink.qml @@ -10,8 +10,8 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style import "." +import ".." Button { id: control @@ -23,9 +23,9 @@ Button { Text { id: text - font: Qt.font(Style.t3) + font: StyleV2.t3 text: control.text - color: control.enabled ? control.down || control.hovered ? Style.night : Style.forest : Style.mediumGreen + color: control.enabled ? control.down || control.hovered ? StyleV2.nightColor : StyleV2.forestColor : StyleV2.mediumGreenColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -33,12 +33,12 @@ Button { } MMIcon { - source: Style.arrowLinkRightIcon + source: StyleV2.arrowLinkRightIcon color: text.color } } background: Rectangle { - color: Style.transparent + color: StyleV2.transparentColor } } diff --git a/app/qmlV2/component/MMLinkButton.qml b/app/qmlV2/component/MMLinkButton.qml index 66ac81277..97eeea96a 100644 --- a/app/qmlV2/component/MMLinkButton.qml +++ b/app/qmlV2/component/MMLinkButton.qml @@ -10,29 +10,29 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style import "." +import ".." Button { id: control contentItem: Text { anchors.centerIn: control - font: Qt.font(Style.t3) + font: StyleV2.t3 text: control.text leftPadding: 32 * __dp rightPadding: 32 * __dp topPadding: 10 * __dp bottomPadding: 10 * __dp - color: control.enabled ? Style.forest : Style.mediumGreen + color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { - color: control.enabled ? control.down || control.hovered ? Style.grass : Style.white : Style.white - border.color: control.enabled ? control.down || control.hovered ? Style.transparent : Style.forest : Style.mediumGreen + 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 border.width: 2 * __dp radius: height / 2 } diff --git a/app/qmlV2/component/MMProgressBar.qml b/app/qmlV2/component/MMProgressBar.qml index 47641ee78..34551d757 100644 --- a/app/qmlV2/component/MMProgressBar.qml +++ b/app/qmlV2/component/MMProgressBar.qml @@ -8,8 +8,8 @@ ***************************************************************************/ import QtQuick -import "../Style.js" as Style import "." +import ".." Rectangle { id: control @@ -18,13 +18,13 @@ Rectangle { width: parent.width height: 12 * __dp - color: Style.lightGreen + color: StyleV2.lightGreenColor radius: height / 2 Rectangle { width: parent.width * control.position height: parent.height - color: Style.grass + color: StyleV2.grassColor radius: height / 2 } } diff --git a/app/qmlV2/component/MMRadioButton.qml b/app/qmlV2/component/MMRadioButton.qml index b4a2bb62a..9cec03ab8 100644 --- a/app/qmlV2/component/MMRadioButton.qml +++ b/app/qmlV2/component/MMRadioButton.qml @@ -10,7 +10,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style +import ".." RadioButton { id: control @@ -23,23 +23,23 @@ RadioButton { x: control.leftPadding y: parent.height / 2 - height / 2 radius: 12 - color: enabled ? ( control.checked ? Style.grass: Style.white ) : Style.white - border.color: enabled ? ( control.checked ? Style.grass: Style.forest ) : Style.mediumGreen + color: enabled ? ( control.checked ? StyleV2.grassColor: StyleV2.whiteColor ) : StyleV2.whiteColor + border.color: enabled ? ( control.checked ? StyleV2.grassColor: StyleV2.forestColor ) : StyleV2.mediumGreenColor border.width: control.hovered ? 2.5 : 2 MMIcon { id: icon anchors.centerIn: parent - source: Style.checkmarkIcon - color: control.enabled ? Style.forest : Style.mediumGreen + source: StyleV2.checkmarkIcon + color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor visible: control.checked } } contentItem: Text { text: control.text - font: Qt.font(Style.p5) + font: StyleV2.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 cc12ca7d2..68ae9ae3b 100644 --- a/app/qmlV2/component/MMRoundButton.qml +++ b/app/qmlV2/component/MMRoundButton.qml @@ -10,8 +10,8 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style import "." +import ".." RoundButton { id: control @@ -22,12 +22,12 @@ RoundButton { contentItem: MMIcon { id: icon - source: Style.arrowLinkRightIcon - color: control.enabled ? control.down || control.hovered ? Style.grass : Style.forest : Style.forest + source: StyleV2.arrowLinkRightIcon + color: control.enabled ? control.down || control.hovered ? StyleV2.grassColor : StyleV2.forestColor : StyleV2.forestColor } background: Rectangle { - color: control.enabled ? control.down || control.hovered ? Style.forest : Style.grass : Style.mediumGreen + color: control.enabled ? control.down || control.hovered ? StyleV2.forestColor : StyleV2.grassColor : StyleV2.mediumGreenColor radius: control.implicitHeight / 2 } } diff --git a/app/qmlV2/component/MMRoundLinkButton.qml b/app/qmlV2/component/MMRoundLinkButton.qml index 37b4c4634..cf1f7cee5 100644 --- a/app/qmlV2/component/MMRoundLinkButton.qml +++ b/app/qmlV2/component/MMRoundLinkButton.qml @@ -10,8 +10,8 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style import "." +import ".." RoundButton { id: control @@ -22,13 +22,14 @@ RoundButton { contentItem: MMIcon { id: icon - source: Style.arrowLinkRightIcon - color: control.enabled ? Style.forest : Style.mediumGreen + source: StyleV2.arrowLinkRightIcon + color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor } background: Rectangle { - color: control.enabled ? control.down || control.hovered ? Style.grass : Style.white : Style.white - border.color: control.enabled ? control.down || control.hovered ? Style.transparent : Style.forest : Style.mediumGreen + 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 + border.width: 2 * __dp radius: control.implicitHeight / 2 } diff --git a/app/qmlV2/component/MMSwitch.qml b/app/qmlV2/component/MMSwitch.qml index 27cfcc08c..7f220707c 100644 --- a/app/qmlV2/component/MMSwitch.qml +++ b/app/qmlV2/component/MMSwitch.qml @@ -10,7 +10,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Controls.Basic -import "../Style.js" as Style +import ".." Switch { id: control @@ -20,8 +20,8 @@ Switch { contentItem: Text { text: (control.textOn.length > 0 && control.textOff.length > 0) ? (control.checked ? control.textOn : control.textOff) : control.text - font: Qt.font(Style.p5) - color: control.enabled ? Style.forest : Style.mediumGreen + font: StyleV2.p5 + color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor verticalAlignment: Text.AlignVCenter leftPadding: control.indicator.width + control.spacing } @@ -32,15 +32,15 @@ Switch { x: control.leftPadding y: parent.height / 2 - height / 2 radius: implicitHeight / 2 - color: control.checked ? Style.grass : Style.white + color: control.checked ? StyleV2.grassColor : StyleV2.whiteColor Rectangle { x: control.checked ? parent.width - width - radius/2 : radius/2 width: 20 height: width radius: width / 2 - color: control.down ? Style.mediumGreen : Style.white - border.color: control.enabled ? Style.forest : Style.mediumGreen + color: control.down ? StyleV2.mediumGreenColor : StyleV2.whiteColor + border.color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor border.width: 6 anchors.verticalCenter: parent.verticalCenter } diff --git a/app/qmlV2/component/MMTextArea.qml b/app/qmlV2/component/MMTextArea.qml index f07f2f0f7..4f185e16d 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 "../Style.js" as Style import ".." Item { @@ -40,14 +39,14 @@ Item { width: parent.width hoverEnabled: true placeholderTextColor: StyleV2.nightAlphaColor - color: control.enabled ? Style.night : Style.mediumGreen - font: Qt.font(Style.p5) + color: control.enabled ? StyleV2.nightColor : StyleV2.mediumGreenColor + font: StyleV2.p5 background: Rectangle { - color: (errorMsg.length > 0 || warningMsg.length > 0) ? Style.errorBgInputColor : Style.white - border.color: (textArea.activeFocus || textArea.hovered) ? (errorMsg.length > 0 ? Style.negative : - warningMsg.length > 0 ? Style.warning : - Style.forest) : "transparent" + 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 border.width: enabled ? (textArea.activeFocus ? 2*__dp : 1*__dp) : 0 radius: 10 * __dp } @@ -70,13 +69,13 @@ Item { MMIcon { id: msgIcon - source: visible ? Style.errorIcon : "" - color: errorMsg.length > 0 ? Style.negative : Style.warning + source: visible ? StyleV2.errorIcon : "" + color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor visible: errorMsg.length > 0 || warningMsg.length > 0 } Text { text: errorMsg.length > 0 ? errorMsg : warningMsg - font: Qt.font(Style.t4) + font: StyleV2.t4 wrapMode: Text.WordWrap width: messageItem.width - msgRow.spacing - msgIcon.width visible: errorMsg.length > 0 || warningMsg.length > 0 diff --git a/gallery/qml/pages/DrawerPage.qml b/gallery/qml/pages/DrawerPage.qml index 6111fedbe..412c1b5e4 100644 --- a/gallery/qml/pages/DrawerPage.qml +++ b/gallery/qml/pages/DrawerPage.qml @@ -12,7 +12,7 @@ import QtQuick.Controls import QtQuick.Controls.Basic import "../../app/qmlV2/component" -import "../../app/qmlV2/Style.js" as Style +import "../../app/qmlV2" Page { id: pane @@ -38,7 +38,7 @@ Page { MMDrawer { id: drawer1 - picture: Style.uploadImage + picture: StyleV2.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: Style.ReachedDataLimitImage + picture: StyleV2.reachedDataLimitImage title: "You have reached a data limit" primaryButton: "Manage Subscription" specialComponent: component.comp @@ -72,7 +72,7 @@ Page { MMDrawer { id: drawer3 - picture: Style.uploadImage + picture: StyleV2.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"