mobile/UI: improve theming of title bar

We do theming very differently from what Kirigami intended. Mostly
that's because our code predates theirs. But also because Kirigami wants
and app to simply use an OS theme - whereas we want to be able to
provide different looks, independent from the OS theme.
Ideally we'd still use the existing methods to change the colors and
sizes of Kirigami UI elements, but for now this hack helps improve
readability of the title bar.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Dirk Hohndel 2020-12-18 10:26:48 -08:00
parent 00cb5dd834
commit 6a5f83d7da

View file

@ -1,34 +1,44 @@
From 766da540c8859cc0983b73726dab3ce743109c16 Mon Sep 17 00:00:00 2001
From 59e39f536be6a646b93ad6403aa375ec7ec4181b Mon Sep 17 00:00:00 2001
From: Dirk Hohndel <dirk@hohndel.org>
Date: Thu, 3 Dec 2020 13:51:36 -0800
Subject: [PATCH 07/11] breadcrumbs: deal with incorrect height of title bar
Subject: [PATCH 7/11] improve the title bar visual
I can see that the Kirigami developers have made changes here, but
this still doesn't work without that invisible element.
Subsurface doesn't do theming the way Kirigami intends us to do this.
Part of the reason is that our original approach pre-dates Kirigami
doing this at all, part of it is that we want to allow theme changes
independent from the OS which doesn't seem to be something that the
Kirigami developers have considered.
I'm sure we could do a better job using what is available in Kirigami,
this seems a little brute force, but it works.
This also hardcodes our background color for the title bar as that
theming always goes wrong.
This commit hard codes some colors to use the ones from the Subsurface
theme (which is of course the wrong thing to do for a generic library),
makes sure we find the icons, and makes sure that size of the title bar
stays correct.
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
---
.../globaltoolbar/PageRowGlobalToolBarUI.qml | 18 +++++++++++++++---
.../globaltoolbar/PageRowGlobalToolBarUI.qml | 22 +++++++++++++++----
src/controls/templates/private/BackButton.qml | 1 +
.../templates/private/ForwardButton.qml | 1 +
3 files changed, 17 insertions(+), 3 deletions(-)
3 files changed, 20 insertions(+), 4 deletions(-)
diff --git a/src/controls/private/globaltoolbar/PageRowGlobalToolBarUI.qml b/src/controls/private/globaltoolbar/PageRowGlobalToolBarUI.qml
index 4404faae..e0b26e88 100644
index 4404faae..afbfce89 100644
--- a/src/controls/private/globaltoolbar/PageRowGlobalToolBarUI.qml
+++ b/src/controls/private/globaltoolbar/PageRowGlobalToolBarUI.qml
@@ -28,6 +28,7 @@ Kirigami.AbstractApplicationHeader {
preferredHeight: globalToolBar.preferredHeight
@@ -29,12 +29,23 @@ Kirigami.AbstractApplicationHeader {
maximumHeight: globalToolBar.maximumHeight
separatorVisible: globalToolBar.separatorVisible
+ background: Rectangle { color: subsurfaceTheme.primaryColor }
Kirigami.Theme.textColor: currentItem ? currentItem.Kirigami.Theme.textColor : parent.Kirigami.Theme.textColor
- Kirigami.Theme.textColor: currentItem ? currentItem.Kirigami.Theme.textColor : parent.Kirigami.Theme.textColor
+ // provide consistent color for the Subsurface title bar - I couldn't figure
+ // how to do this without modifying Kirigami itself
+ Kirigami.Theme.backgroundColor: subsurfaceTheme.primaryColor
+ Kirigami.Theme.textColor: subsurfaceTheme.primaryTextColor
@@ -35,6 +36,14 @@ Kirigami.AbstractApplicationHeader {
RowLayout {
anchors.fill: parent
spacing: 0
@ -43,7 +53,7 @@ index 4404faae..e0b26e88 100644
Item {
id: leftHandleAnchor
visible: (typeof applicationWindow() !== "undefined" && applicationWindow().globalDrawer && applicationWindow().globalDrawer.enabled && applicationWindow().globalDrawer.handleVisible &&
@@ -67,6 +76,7 @@ Kirigami.AbstractApplicationHeader {
@@ -67,6 +78,7 @@ Kirigami.AbstractApplicationHeader {
Layout.fillHeight: true
Layout.leftMargin: leftHandleAnchor.visible ? Kirigami.Units.smallSpacing : 0
@ -51,7 +61,7 @@ index 4404faae..e0b26e88 100644
visible: (globalToolBar.showNavigationButtons != Kirigami.ApplicationHeaderStyle.NoNavigationButtons || root.layers.depth > 0) && (globalToolBar.actualStyle != Kirigami.ApplicationHeaderStyle.None)
@@ -76,16 +86,18 @@ Kirigami.AbstractApplicationHeader {
@@ -76,16 +88,18 @@ Kirigami.AbstractApplicationHeader {
id: backButton
Layout.leftMargin: leftHandleAnchor.visible ? 0 : Kirigami.Units.smallSpacing
Layout.preferredWidth: height
@ -72,7 +82,7 @@ index 4404faae..e0b26e88 100644
}
Loader {
@@ -124,6 +136,6 @@ Kirigami.AbstractApplicationHeader {
@@ -124,6 +138,6 @@ Kirigami.AbstractApplicationHeader {
Layout.preferredWidth: height
}
}