Skip to content

Commit

Permalink
Master style v2 (#2916)
Browse files Browse the repository at this point in the history
* Use singleton StyleV2.qml
  • Loading branch information
iiLubos authored Nov 15, 2023
1 parent 27ba9ad commit 0cd97bd
Show file tree
Hide file tree
Showing 34 changed files with 390 additions and 417 deletions.
110 changes: 0 additions & 110 deletions app/qmlV2/Style.js

This file was deleted.

99 changes: 99 additions & 0 deletions app/qmlV2/StyleV2.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
/***************************************************************************
* *
* 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
}
30 changes: 4 additions & 26 deletions app/qmlV2/component/MMButton.qml
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import "../Style.js" as Style
import "."
import ".."

Button {
id: control
Expand All @@ -20,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 : Style.forest : Style.forest
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
// }
// }
}
32 changes: 16 additions & 16 deletions app/qmlV2/component/MMButtonInput.qml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import "../Style.js" as Style
import ".."

Item {
id: control
Expand Down Expand Up @@ -44,13 +44,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
Expand All @@ -63,8 +63,8 @@ Item {

height: 40 * __dp
width: parent.width
color: (errorMsg.length > 0 || warningMsg.length > 0) ? Style.errorBgInputColor : Style.white
border.color: errorMsg.length > 0 ? Style.negative : warningMsg.length > 0 ? Style.warning : Style.forest
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
border.width: enabled ? (textField.activeFocus ? 2*__dp : textField.hovered ? 1*__dp : 0) : 0
radius: parent.height

Expand All @@ -78,9 +78,9 @@ Item {
id: leftIcon

source: control.iconSource
color: errorMsg.length > 0 ? Style.negative :
warningMsg.length > 0 ? Style.warning :
control.enabled ? Style.forest : Style.mediumGreen
color: errorMsg.length > 0 ? StyleV2.negativeColor :
warningMsg.length > 0 ? StyleV2.warningColor :
control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor
height: rect.height
}

Expand All @@ -92,13 +92,13 @@ Item {
- (leftIcon.visible ? leftIcon.width : 0)
- (button.visible ? button.width : 0)
height: rect.height - 4 * __dp
color: control.enabled ? Style.night : Style.mediumGreen
placeholderTextColor: Style.night_6
font: Qt.font(Style.p5)
color: control.enabled ? StyleV2.nightColor : StyleV2.mediumGreenColor
placeholderTextColor: StyleV2.nightAlphaColor
font: StyleV2.p5
hoverEnabled: true
anchors.verticalCenter: parent.verticalCenter
background: Rectangle {
color: Style.transparent
color: StyleV2.transparentColor
}
}

Expand All @@ -109,20 +109,20 @@ Item {

contentItem: Text {
anchors.centerIn: button
font: Qt.font(Style.t5)
font: StyleV2.t5
text: control.buttonText
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
}

Expand Down
12 changes: 6 additions & 6 deletions app/qmlV2/component/MMCheckBox.qml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import "../Style.js" as Style
import ".."

CheckBox {
id: control
Expand All @@ -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
Expand Down
Loading

1 comment on commit 0cd97bd

@inputapp-bot
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

iOS - version 23.11.488611 just submitted!

Please sign in to comment.