Commit 84742d89 authored by Filip Fila's avatar Filip Fila 🌆
Browse files

[Notes] Fix icons being almost invisible with light backgrounds when using dark themes

Summary:
Old code had no way to adapt icon colors based on background so this patch uses different components to color the icons black with light backgrounds, and white with dark backgrounds.

Because Plasma Components 2.0 ToolButton doesn't support icon colors and because with 3.0 the code doesn't work, we have to port the affected buttons to QQC2 ToolButton.

BUG: 353819
FIXED-IN: 5.17

Test Plan:
Before:
{F6808620}

After:
{F6808621}

NOTE: The buttons stay highlighted after being pressed, but I'm trying to solve that in D21026

Reviewers: #plasma, #vdg, ngraham, davidedmundson

Reviewed By: #plasma, #vdg, ngraham, davidedmundson

Subscribers: broulik, davidedmundson, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D21027
parent db8fbc19
......@@ -18,7 +18,7 @@
*/
import QtQuick 2.1
import QtQuick.Controls 1.3 as QtControls
import QtQuick.Controls 2.5 as QQC2
import QtQuick.Layouts 1.1
import org.kde.draganddrop 2.0 as DragDrop
......@@ -50,13 +50,23 @@ PlasmaCore.SvgItem {
Plasmoid.backgroundHints: PlasmaCore.Types.NoBackground
//this isn't a frameSVG, the default SVG margins take up around 7% of the frame size, so we use that
// this isn't a frameSVG, the default SVG margins take up around 7% of the frame size, so we use that
readonly property real horizontalMargins: width * 0.07
readonly property real verticalMargins: height * 0.07
//note is of type Note
// note is of type Note
property QtObject note: noteManager.loadNote(plasmoid.configuration.noteId);
// define colors used for icons in ToolButtons and for text in TextArea.
// this is deliberately _NOT_ the theme color as we are over a known bright background!
// an unknown colour over a known colour is a bad move as you end up with white on yellow.
readonly property color textIconColor: {
if (plasmoid.configuration.color === "black" || plasmoid.configuration.color === "translucent-light") {
return "#dfdfdf";
}
return "#202020";
}
Timer {
id: forceFocusTimer
interval: 1
......@@ -172,12 +182,10 @@ PlasmaCore.SvgItem {
}
style: PlasmaStyle.TextAreaStyle {
//this is deliberately _NOT_ the theme color as we are over a known bright background
//an unknown colour over a known colour is a bad move as you end up with white on yellow
textColor: (plasmoid.configuration.color === "black" || plasmoid.configuration.color === "translucent-light") ? "#dfdfdf" : "#202020"
textColor: textIconColor
}
//update the note if the source changes, but only if the user isn't editing it currently
// update the note if the source changes, but only if the user isn't editing it currently
Binding {
target: mainTextArea
property: "text"
......@@ -250,33 +258,57 @@ PlasmaCore.SvgItem {
enabled: opacity > 0
visible: fontButtons.showFormatButtons
PlasmaComponents.ToolButton {
tooltip: i18nc("@info:tooltip", "Bold")
iconSource: "format-text-bold"
QQC2.ToolButton {
icon.name: "format-text-bold"
icon.color: textIconColor
icon.width: units.iconSizes.smallMedium
icon.height: icon.width
checked: documentHandler.bold
onClicked: documentHandler.bold = !documentHandler.bold
Accessible.name: tooltip
Accessible.name: boldTooltip.text
QQC2.ToolTip {
id: boldTooltip
text: i18nc("@info:tooltip", "Bold")
}
}
PlasmaComponents.ToolButton {
tooltip: i18nc("@info:tooltip", "Italic")
iconSource: "format-text-italic"
QQC2.ToolButton {
icon.name: "format-text-italic"
icon.color: textIconColor
icon.width: units.iconSizes.smallMedium
icon.height: icon.width
checked: documentHandler.italic
onClicked: documentHandler.italic = !documentHandler.italic
Accessible.name: tooltip
Accessible.name: italicTooltip.text
QQC2.ToolTip {
id: italicTooltip
text: i18nc("@info:tooltip", "Italic")
}
}
PlasmaComponents.ToolButton {
tooltip: i18nc("@info:tooltip", "Underline")
iconSource: "format-text-underline"
QQC2.ToolButton {
icon.name: "format-text-underline"
icon.color: textIconColor
icon.width: units.iconSizes.smallMedium
icon.height: icon.width
checked: documentHandler.underline
onClicked: documentHandler.underline = !documentHandler.underline
Accessible.name: tooltip
Accessible.name: underlineTooltip.text
QQC2.ToolTip {
id: underlineTooltip
text: i18nc("@info:tooltip", "Underline")
}
}
PlasmaComponents.ToolButton {
tooltip: i18nc("@info:tooltip", "Strikethrough")
iconSource: "format-text-strikethrough"
QQC2.ToolButton {
icon.name: "format-text-strikethrough"
icon.color: textIconColor
icon.width: units.iconSizes.smallMedium
icon.height: icon.width
checked: documentHandler.strikeOut
onClicked: documentHandler.strikeOut = !documentHandler.strikeOut
Accessible.name: tooltip
Accessible.name: strikethroughTooltip.text
QQC2.ToolTip {
id: strikethroughTooltip
text: i18nc("@info:tooltip", "Strikethrough")
}
}
}
......@@ -285,12 +317,18 @@ PlasmaCore.SvgItem {
Layout.fillHeight: true
}
PlasmaComponents.ToolButton {
QQC2.ToolButton {
id: settingsButton
tooltip: plasmoid.action("configure").text
iconSource: "configure"
icon.name: "configure"
icon.color: textIconColor
icon.width: units.iconSizes.smallMedium
icon.height: icon.width
onClicked: plasmoid.action("configure").trigger()
Accessible.name: tooltip
Accessible.name: settingsTooltip.text
QQC2.ToolTip {
id: settingsTooltip
text: plasmoid.action("configure").text
}
}
}
}
......@@ -308,8 +346,8 @@ PlasmaCore.SvgItem {
plasmoid.setAction("change_note_color_translucent-light", i18nc("@item:inmenu", "Translucent Light"));
plasmoid.setActionSeparator("separator0");
//plasmoid configuration doesn't check before emitting change signal
//explicit check is needed (at time of writing)
// plasmoid configuration doesn't check before emitting change signal
// explicit check is needed (at time of writing)
if (note.id != plasmoid.configuration.noteId) {
plasmoid.configuration.noteId = note.id;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment