Skip to content

Commit

Permalink
Use Style singleton, instead of JS
Browse files Browse the repository at this point in the history
  • Loading branch information
@iiLubos
iiLubos committed Nov 14, 2023
1 parent c4c84ca commit 001a53e
Show file tree
Hide file tree
Showing 18 changed files with 261 additions and 252 deletions.
128 changes: 64 additions & 64 deletions app/qmlV2/Style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
//}
86 changes: 60 additions & 26 deletions app/qmlV2/StyleV2.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
29 changes: 3 additions & 26 deletions app/qmlV2/component/MMButton.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import "../Style.js" as Style
import "."
import ".."

Expand All @@ -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
// }
// }
}
12 changes: 6 additions & 6 deletions app/qmlV2/component/MMCheckBox.qml
View file
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

0 comments on commit 001a53e

Please sign in to comment.