Allow changing the tile overlay icon color in the style

This commit is contained in:
Michael Zanetti 2020-12-17 11:09:17 +01:00
parent eea91a2d7f
commit 39f2c9373b
3 changed files with 16 additions and 4 deletions

View File

@ -4,6 +4,9 @@ Item {
property color backgroundColor: "#fafafa"
property color foregroundColor: "#202020"
property color accentColor: "#ff57baae"
property color iconColor: "#808080"
property color headerBackgroundColor: "#ffffff"
property color headerForegroundColor: "#202020"
@ -11,11 +14,9 @@ Item {
property color tileForegroundColor: foregroundColor
property color tileOverlayColor: Qt.tint(backgroundColor, Qt.rgba(foregroundColor.r, foregroundColor.g, foregroundColor.b, 0.1))
property color tileOverlayForegroundColor: foregroundColor
property color tileOverlayIconColor: iconColor
property int tileRadius: 6
property color accentColor: "#ff57baae"
property color iconColor: "#808080"
// Note: Font files need to be provided in a "fonts" folder in the style
property string fontFamily: "Ubuntu"

View File

@ -40,12 +40,15 @@ RowLayout {
property Thing thing: null
property color iconColor: Style.iconColor
property bool showExtendedControls: false
readonly property State playbackState: thing.stateByName("playbackStatus")
readonly property State shuffleState: thing.stateByName("shuffle")
readonly property State repeatState: thing.stateByName("repeat")
function executeAction(actionName, params) {
if (params === undefined) {
params = []
@ -62,6 +65,7 @@ RowLayout {
enabled: root.shuffleState !== null
opacity: enabled ? 1 : .5
visible: root.showExtendedControls
color: root.shuffleState.value === false ? root.iconColor : Style.accentColor
onClicked: {
var params = []
var param = {}
@ -81,6 +85,7 @@ RowLayout {
longpressEnabled: root.thing.thingClass.actionTypes.findByName("fastRewind") !== null
enabled: root.playbackState && root.playbackState.value !== "Stopped"
opacity: enabled ? 1 : .5
color: root.iconColor
repeat: true
onClicked: {
@ -97,6 +102,7 @@ RowLayout {
imageSource: root.playbackState && root.playbackState.value === "Playing" ? "../images/media-playback-pause.svg" : "../images/media-playback-start.svg"
longpressImageSource: "../images/media-playback-stop.svg"
longpressEnabled: root.playbackState && root.playbackState.value !== "Stopped"
color: root.iconColor
onClicked: {
if (root.playbackState.value === "Playing") {
@ -120,6 +126,7 @@ RowLayout {
enabled: root.playbackState && root.playbackState.value !== "Stopped"
opacity: enabled ? 1 : .5
repeat: true
color: root.iconColor
onClicked: {
root.executeAction("skipNext")
}
@ -133,7 +140,7 @@ RowLayout {
Layout.preferredHeight: app.iconSize
Layout.preferredWidth: height
imageSource: root.repeatState.value === "One" ? "../images/media-playlist-repeat-one.svg" : "../images/media-playlist-repeat.svg"
color: root.repeatState.value === "None" ? Style.iconColor : Style.accentColor
color: root.repeatState.value === "None" ? root.iconColor : Style.accentColor
longpressEnabled: false
enabled: root.repeatState !== null
opacity: enabled ? 1 : .5

View File

@ -255,6 +255,7 @@ MainPageTile {
MediaControls {
thing: inlineMediaControl.currentDevice
iconColor: Style.tileOverlayIconColor
}
}
}
@ -308,6 +309,7 @@ MainPageTile {
ProgressButton {
longpressEnabled: false
visible: imageSource.length > 0
color: Style.tileOverlayIconColor
imageSource: {
switch (iface.name) {
case "media":
@ -382,6 +384,7 @@ MainPageTile {
ProgressButton {
longpressEnabled: false
visible: imageSource.length > 0
color: Style.tileOverlayIconColor
imageSource: {
switch (iface.name) {
case "media":
@ -454,6 +457,7 @@ MainPageTile {
ProgressButton {
longpressEnabled: false
color: Style.tileOverlayIconColor
imageSource: {
switch (iface.name) {
case "media":