QML UI: style the overlay drawer

This adds separate colors for the overlay drawer background for light and dark themes.

Signed-off-by: Joakim Bygdell <j.bygdell@gmail.com>
This commit is contained in:
Joakim Bygdell 2017-07-15 16:31:51 +02:00
parent 0c31167e72
commit 1f20350849

View file

@ -335,6 +335,7 @@ if you have network connectivity and want to sync your data to cloud storage."),
subsurfaceTheme.textColor = subsurfaceTheme.blueTextColor subsurfaceTheme.textColor = subsurfaceTheme.blueTextColor
subsurfaceTheme.secondaryTextColor = subsurfaceTheme.blueSecondaryTextColor subsurfaceTheme.secondaryTextColor = subsurfaceTheme.blueSecondaryTextColor
manager.setStatusbarColor(subsurfaceTheme.darkerPrimaryColor) manager.setStatusbarColor(subsurfaceTheme.darkerPrimaryColor)
subsurfaceTheme.drawerColor = subsurfaceTheme.lightDrawerColor
} }
function pinkTheme() { function pinkTheme() {
@ -349,6 +350,7 @@ if you have network connectivity and want to sync your data to cloud storage."),
subsurfaceTheme.textColor = subsurfaceTheme.pinkTextColor subsurfaceTheme.textColor = subsurfaceTheme.pinkTextColor
subsurfaceTheme.secondaryTextColor = subsurfaceTheme.pinkSecondaryTextColor subsurfaceTheme.secondaryTextColor = subsurfaceTheme.pinkSecondaryTextColor
manager.setStatusbarColor(subsurfaceTheme.darkerPrimaryColor) manager.setStatusbarColor(subsurfaceTheme.darkerPrimaryColor)
subsurfaceTheme.drawerColor = subsurfaceTheme.lightDrawerColor
} }
function darkTheme() { function darkTheme() {
@ -363,6 +365,7 @@ if you have network connectivity and want to sync your data to cloud storage."),
subsurfaceTheme.textColor = subsurfaceTheme.darkTextColor subsurfaceTheme.textColor = subsurfaceTheme.darkTextColor
subsurfaceTheme.secondaryTextColor = subsurfaceTheme.darkSecondaryTextColor subsurfaceTheme.secondaryTextColor = subsurfaceTheme.darkSecondaryTextColor
manager.setStatusbarColor(subsurfaceTheme.darkerPrimaryColor) manager.setStatusbarColor(subsurfaceTheme.darkerPrimaryColor)
subsurfaceTheme.drawerColor = subsurfaceTheme.darkDrawerColor
} }
QtObject { QtObject {
@ -381,6 +384,7 @@ if you have network connectivity and want to sync your data to cloud storage."),
property color backgroundColor property color backgroundColor
property color textColor property color textColor
property color secondaryTextColor property color secondaryTextColor
property color drawerColor
// colors for the blue theme // colors for the blue theme
property color blueDarkerPrimaryColor: "#303F9f" property color blueDarkerPrimaryColor: "#303F9f"
@ -416,6 +420,8 @@ if you have network connectivity and want to sync your data to cloud storage."),
property color darkSecondaryTextColor: "#757575" property color darkSecondaryTextColor: "#757575"
property color contrastAccentColor: "#FF5722" // used for delete button property color contrastAccentColor: "#FF5722" // used for delete button
property color lightDrawerColor: "#FFFFFF"
property color darkDrawerColor: "#424242"
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 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: { Component.onCompleted: {
@ -424,6 +430,7 @@ if you have network connectivity and want to sync your data to cloud storage."),
Kirigami.Theme.backgroundColor = Qt.binding(function() { return backgroundColor }) Kirigami.Theme.backgroundColor = Qt.binding(function() { return backgroundColor })
Kirigami.Theme.textColor = Qt.binding(function() { return textColor }) Kirigami.Theme.textColor = Qt.binding(function() { return textColor })
Kirigami.Theme.buttonHoverColor = Qt.binding(function() { return darkerPrimaryColor }) Kirigami.Theme.buttonHoverColor = Qt.binding(function() { return darkerPrimaryColor })
Kirigami.Theme.viewBackgroundColor = Qt.binding(function() { return drawerColor })
// this needs to pick the theme from persistent preference settings // this needs to pick the theme from persistent preference settings
var theme = manager.theme var theme = manager.theme