QML UI: redo all the colors

Naming them the same way Davide named them in his emails and assigning the
color values he proposed.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Dirk Hohndel 2017-06-21 07:39:07 -07:00
parent 16f16f6818
commit 9ddd26ff37
3 changed files with 30 additions and 22 deletions

View file

@ -59,7 +59,7 @@ Item {
id: gpsButton
height: Math.round(1.5 * Kirigami.Units.gridUnit)
width: dive.gps == "" ? 0 : buttonText.width + Kirigami.Units.gridUnit
color: subsurfaceTheme.accentColor
color: subsurfaceTheme.darkPrimaryColor
antialiasing: true
radius: Kirigami.Units.smallSpacing * 2
anchors {
@ -70,7 +70,7 @@ Item {
Kirigami.Label {
id: buttonText
text: qsTr("Map it")
color: subsurfaceTheme.accentTextColor
color: subsurfaceTheme.darkPrimaryTextColor
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
@ -96,21 +96,21 @@ Item {
text: dive.date + " " + dive.time
width: Math.max(locationText.width * 0.45, paintedWidth)
font.pointSize: subsurfaceTheme.smallPointSize
color: Kirigami.Theme.textColor
color: subsurfaceTheme.diveListTextColor
}
// let's try to show the depth / duration very compact
Kirigami.Label {
text: dive.depth + ' / ' + dive.duration
width: Math.max(Kirigami.Units.gridUnit * 3, paintedWidth)
font.pointSize: subsurfaceTheme.smallPointSize
color: Kirigami.Theme.textColor
color: subsurfaceTheme.diveListTextColor
}
}
Kirigami.Label {
id: numberText
text: "#" + dive.number
font.pointSize: subsurfaceTheme.smallPointSize
color: Kirigami.Theme.textColor
color: subsurfaceTheme.diveListTextColor
anchors {
right: parent.right
top: locationText.bottom
@ -142,7 +142,7 @@ Item {
color: "transparent"
opacity: 0.6
border.width: 1
border.color: Kirigami.Theme.textColor;
border.color: subsurfaceTheme.darkPrimaryColor
anchors.fill: parent
}
}
@ -199,7 +199,7 @@ Item {
}
Rectangle {
color: subsurfaceTheme.accentColor
color: subsurfaceTheme.darkPrimaryColor
height: 1
opacity: 0.5
Layout.columnSpan: 3
@ -252,7 +252,7 @@ Item {
}
Rectangle {
color: subsurfaceTheme.accentColor
color: subsurfaceTheme.darkPrimaryColor
height: 1
opacity: 0.5
Layout.columnSpan: 3
@ -294,7 +294,7 @@ Item {
}
Rectangle {
color: subsurfaceTheme.accentColor
color: subsurfaceTheme.darkPrimaryColor
height: 1
opacity: 0.5
Layout.columnSpan: 3

View file

@ -31,7 +31,9 @@ Kirigami.ScrollablePage {
checked: diveListView.currentIndex === model.index
width: parent.width
height: diveListEntry.height + Kirigami.Units.smallSpacing
background.opacity: checked ? 0.4 : 1
background.opacity: checked ? 0.8 : 1
backgroundColor: checked ? subsurfaceTheme.primaryColor : Kirigami.Theme.viewBackgroundColor
textColor: checked ? subsurfaceTheme.primaryTextColor : subsurfaceTheme.diveListTextColor
property real detailsOpacity : 0
@ -55,7 +57,7 @@ Kirigami.ScrollablePage {
id: leftBarDive
width: dive.tripMeta == "" ? 0 : Kirigami.Units.smallSpacing
height: diveListEntry.height * 0.8
color: subsurfaceTheme.accentColor
color: subsurfaceTheme.lightPrimaryColor
anchors {
left: parent.left
top: parent.top
@ -123,7 +125,7 @@ Kirigami.ScrollablePage {
visible: deleteButtonVisible
height: diveListEntry.height - Kirigami.Units.smallSpacing
width: height - 3 * Kirigami.Units.smallSpacing
color: "#FF3030"
color: subsurfaceTheme.contrastAccentColor
antialiasing: true
radius: Kirigami.Units.smallSpacing
anchors {
@ -173,7 +175,7 @@ Kirigami.ScrollablePage {
right: parent.right
rightMargin: Kirigami.Units.gridUnit * -2
}
color: subsurfaceTheme.accentColor
color: subsurfaceTheme.lightPrimaryColor
visible: section != ""
Kirigami.Label {
id: sectionText
@ -199,7 +201,7 @@ Kirigami.ScrollablePage {
leftMargin: horizontalPadding * 2
right: parent.right
}
color: textColor
color: subsurfaceTheme.lightPrimaryTextColor
}
}
Rectangle {
@ -210,7 +212,7 @@ Kirigami.ScrollablePage {
rightMargin: Kirigami.Units.gridUnit * -2
right: parent.right
}
color: subsurfaceTheme.accentColor
color: subsurfaceTheme.lightPrimaryColor
}
}
}

View file

@ -310,14 +310,21 @@ Kirigami.ApplicationWindow {
id: subsurfaceTheme
property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5)
property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.8)
property color accentColor: "#C0CFFF"
property color darkAccentColor: "#5870cb"
property color shadedColor: "#132744"
property color accentTextColor: "#ececec"
property color diveListTextColor: "#000000" // the Kirigami theme text color is too light
property color darkPrimaryColor: "#303F9f"
property color darkPrimaryTextColor: "#ECECEC"
property color primaryColor: "#3F51B5"
property color primaryTextColor: "#ECECEC"
property color lightPrimaryColor: "#C5CAE9"
property color lightPrimaryTextColor: "#212121"
property color contrastAccentColor: "#FF9800" // used for delete button
property color diveListTextColor: lightPrimaryTextColor
property int columnWidth: Math.round(rootItem.width/(Kirigami.Units.gridUnit*28)) > 0 ? Math.round(rootItem.width / Math.round(rootItem.width/(Kirigami.Units.gridUnit*28))) : rootItem.width
Component.onCompleted: {
Kirigami.Theme.highlightcolor = darkAccentColor
Kirigami.Theme.highlightColor = darkPrimaryColor
Kirigami.Theme.highlighedTextColor = darkPrimaryTextColor
}
}
property Item stackView: pageStack
@ -374,7 +381,6 @@ Kirigami.ApplicationWindow {
}
Component.onCompleted: {
Kirigami.Theme.highlightColor = subsurfaceTheme.accentColor
manager.finishSetup();
rootItem.visible = true
diveList.opacity = 1