git.iko.soy/unity8
on xenial help sign in
Transition from fore/backgroundColor to StyleTool.
commit6c03f35764781e311fdc1aa28be1ab0f9e2bfcd9 authorMichał Sawicz <michal.sawicz@canonical.com> dateMon 7 Jul 2014, 00:16 (12 years ago) parentb127c93
19 files changed+85−67
compare with xenial
unifiedsplit
plugins/Dash/CardCreator.js+4−4 qml/Components/PageHeader.qml+20−13 qml/Dash/CardCarousel.qml+1−1 qml/Dash/CardFilterGrid.qml+1−1 qml/Dash/CardVerticalJournal.qml+1−1 qml/Dash/DashDepartments.qml+4−6 qml/Dash/DashDepartmentsList.qml+10−11 qml/Dash/DashRenderer.qml+5−6 qml/Dash/GenericScopeView.qml+11−10 qml/Dash/PreviewListView.qml+3 qml/Dash/Previews/Preview.qml+3 qml/Dash/Previews/PreviewWidgetFactory.qml+3 tests/mocks/Unity/fake_scope.cpp+3−1 tests/plugins/Dash/cardcreator/1.res+2−2 tests/plugins/Dash/cardcreator/2.res+3−3 tests/plugins/Dash/cardcreator/3.res+3−3 tests/plugins/Dash/cardcreator/4.res+3−3 tests/plugins/Dash/cardcreator/5.res+1−1 tests/qmltests/Components/tst_PageHeader.qml+4−1
plugins/Dash/CardCreator.js+4−4
@@ -289,7 +289,7 @@ function cardString(template, components) {
289289 property var cardData; \n\
290290 property var artShapeBorderSource: undefined; \n\
291291 property real fontScale: 1.0; \n\
292− property color foregroundColor: "grey"; \n\
292+ property var styleTool: Object({ foreground: "grey" }) \n\
293293 property int headerAlignment: Text.AlignLeft; \n\
294294 property int fixedHeaderHeight: -1; \n\
295295 property size fixedArtShapeSize: Qt.size(-1, -1); \n\
@@ -408,7 +408,7 @@ function cardString(template, components) {
408408 mascotCode = kMascotImageCode.arg(anchors).arg(mascotImageVisible);
409409 }
410410
411− var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < 0.7 ? "white" : root.foregroundColor';
411+ var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < 0.7 ? "white" : root.styleTool.foreground';
412412
413413 var titleSubtitleCode = "";
414414 if (hasTitle) {
@@ -420,7 +420,7 @@ function cardString(template, components) {
420420 } else if (hasBackground) {
421421 color = summaryColorWithBackground;
422422 } else {
423− color = 'root.foregroundColor';
423+ color = 'root.styleTool.foreground';
424424 }
425425
426426 var titleAnchors;
@@ -496,7 +496,7 @@ function cardString(template, components) {
496496 if (hasBackground) {
497497 color = summaryColorWithBackground;
498498 } else {
499− color = 'root.foregroundColor';
499+ color = 'root.styleTool.foreground';
500500 }
501501
502502 var summaryTopMargin = (hasMascot || hasSubtitle ? 'anchors.margins' : '0');
qml/Components/PageHeader.qml+20−13
@@ -27,7 +27,6 @@ Item {
2727
2828 property bool showBackButton: false
2929 property string title
30− property string imageSource
3130
3231 property bool searchEntryEnabled: false
3332 property ListModel searchHistory: SearchHistoryModel
@@ -35,13 +34,19 @@ Item {
3534 property bool searchInProgress: false
3635
3736 property alias bottomItem: bottomContainer.children
38− // TODO We should use foregroundColor for the icons
37+
38+ // TODO We should use foreground for the icons
3939 // of the toolbar but unfortunately Action does not have
4040 // the keyColor property as Icon does :-/
41− property color foregroundColor: "gray"
41+ property var styleTool: QtObject {
42+ readonly property color foreground: "grey"
43+ readonly property url headerLogo: ""
44+ }
4245
4346 signal backClicked()
4447
48+ onStyleToolChanged: refreshLogo()
49+
4550 function triggerSearch() {
4651 if (searchEntryEnabled) {
4752 headerContainer.showSearch = true;
@@ -82,15 +87,20 @@ Item {
8287 }
8388 }
8489
85− onImageSourceChanged: {
86− if (imageSource) {
90+ function refreshLogo() {
91+ if (styleTool.headerLogo != "") {
8792 header.contents = imageComponent.createObject();
88− } else {
93+ } else if (header.contents) {
8994 header.contents.destroy();
9095 header.contents = null;
9196 }
9297 }
9398
99+ Connections {
100+ target: styleTool
101+ onHeaderLogoChanged: root.refreshLogo()
102+ }
103+
94104 InverseMouseArea {
95105 anchors { fill: parent; margins: units.gu(1); bottomMargin: units.gu(3) + bottomContainer.height }
96106 visible: headerContainer.showSearch
@@ -216,7 +226,7 @@ Item {
216226 height: headerContainer.height
217227 contentHeight: height
218228 separatorSource: ""
219− textColor: root.foregroundColor
229+ textColor: root.styleTool.foreground
220230 property var styledItem: header
221231 property string title: root.title
222232 property var config: PageHeadConfiguration {
@@ -241,11 +251,8 @@ Item {
241251 }
242252
243253 property var contents: null
244− Component.onCompleted: {
245− if (root.imageSource) {
246− header.contents = imageComponent.createObject();
247− }
248− }
254+ Component.onCompleted: root.refreshLogo()
255+
249256 Component {
250257 id: imageComponent
251258
@@ -255,7 +262,7 @@ Item {
255262 Image {
256263 objectName: "titleImage"
257264 anchors.fill: parent
258− source: root.imageSource
265+ source: root.styleTool.headerLogo
259266 fillMode: Image.PreserveAspectFit
260267 horizontalAlignment: Image.AlignLeft
261268 sourceSize.height: height
qml/Dash/CardCarousel.qml+1−1
@@ -64,7 +64,7 @@ DashRenderer {
6464 item.fontScale = Qt.binding(function() { return carousel.fontScale; });
6565 item.showHeader = Qt.binding(function() { return loader.explicitlyScaled; });
6666 item.artShapeBorderSource = "none";
67− item.foregroundColor = Qt.binding(function() { return cardCarousel.foregroundColor; });
67+ item.styleTool = cardCarousel.styleTool;
6868 }
6969
7070 BorderImage {
qml/Dash/CardFilterGrid.qml+1−1
@@ -58,7 +58,7 @@ DashRenderer {
5858 item.template = Qt.binding(function() { return cardTool.template; });
5959 item.components = Qt.binding(function() { return cardTool.components; });
6060 item.headerAlignment = Qt.binding(function() { return cardTool.headerAlignment; });
61− item.foregroundColor = Qt.binding(function() { return genericFilterGrid.foregroundColor; });
61+ item.styleTool = genericFilterGrid.styleTool;
6262 }
6363 Connections {
6464 target: loader.item
qml/Dash/CardVerticalJournal.qml+1−1
@@ -75,7 +75,7 @@ DashRenderer {
7575 item.template = Qt.binding(function() { return cardTool.template; });
7676 item.components = Qt.binding(function() { return cardTool.components; });
7777 item.headerAlignment = Qt.binding(function() { return cardTool.headerAlignment; });
78− item.foregroundColor = Qt.binding(function() { return root.foregroundColor; });
78+ item.styleTool = root.styleTool;
7979 }
8080 Connections {
8181 target: loader.item
qml/Dash/DashDepartments.qml+4−6
@@ -29,8 +29,7 @@ AbstractButton {
2929
3030 property alias windowWidth: blackRect.width
3131 property alias windowHeight: blackRect.height
32− property color backgroundColor: "white"
33− property color foregroundColor: "gray"
32+ property var styleTool: { foreground: "grey" }
3433
3534 // Are we drilling down the tree or up?
3635 property bool isGoingBack: false
@@ -80,7 +79,7 @@ AbstractButton {
8079 anchors.margins: units.gu(2)
8180 verticalAlignment: Text.AlignVCenter
8281 text: root.currentDepartment ? root.currentDepartment.label : ""
83− color: root.foregroundColor
82+ color: root.styleTool.foreground
8483 }
8584
8685 Icon {
@@ -90,7 +89,7 @@ AbstractButton {
9089 name: showList ? "up" : "down"
9190 height: units.gu(2)
9291 width: height
93− color: root.foregroundColor
92+ color: root.styleTool.foreground
9493 }
9594
9695 // departmentListView is outside root
@@ -125,8 +124,7 @@ AbstractButton {
125124 objectName: "department" + index
126125 visible: height != 0
127126 width: departmentListView.width
128− backgroundColor: root.backgroundColor
129− foregroundColor: root.foregroundColor
127+ styleTool: root.styleTool
130128 property real desiredHeight: {
131129 if (root.showList) {
132130 if (department && department.loaded && x == departmentListView.contentX)
qml/Dash/DashDepartmentsList.qml+10−11
@@ -21,8 +21,7 @@ Item {
2121 id: root
2222 property var department: null
2323 property var currentDepartment: null
24− property color foregroundColor: "gray"
25− property color backgroundColor: "white"
24+ property var styleTool: Object({ foreground: "grey", background: "transparent" })
2625 signal enterDepartment(var newDepartmentId, bool hasChildren)
2726 signal goBackToParentClicked()
2827 signal allDepartmentClicked()
@@ -31,7 +30,7 @@ Item {
3130 implicitHeight: flickable.contentHeight
3231
3332 Rectangle {
34− color: root.backgroundColor
33+ color: Qt.colorEqual(root.styleTool.background, "transparent") ? "white" : root.styleTool.background
3534 anchors.fill: parent
3635 }
3736
@@ -83,7 +82,7 @@ Item {
8382 name: "back"
8483 height: units.gu(2)
8584 width: height
86− color: root.foregroundColor
85+ color: root.styleTool.foreground
8786 }
8887
8988 Label {
@@ -93,7 +92,7 @@ Item {
9392 leftMargin: units.gu(0.5)
9493 }
9594 text: department ? department.parentLabel : ""
96− color: root.foregroundColor
95+ color: root.styleTool.foreground
9796 }
9897
9998 Rectangle {
@@ -104,7 +103,7 @@ Item {
104103 leftMargin: units.gu(2)
105104 rightMargin: units.gu(2)
106105 }
107− color: root.foregroundColor
106+ color: root.styleTool.foreground
108107 opacity: 0.2
109108 height: units.dp(1)
110109 }
@@ -125,7 +124,7 @@ Item {
125124 }
126125 text: department ? (department.allLabel != "" ? department.allLabel : department.label) : ""
127126 font.bold: true
128− color: root.foregroundColor
127+ color: root.styleTool.foreground
129128 }
130129
131130 Rectangle {
@@ -136,7 +135,7 @@ Item {
136135 leftMargin: units.gu(2)
137136 rightMargin: units.gu(2)
138137 }
139− color: root.foregroundColor
138+ color: root.styleTool.foreground
140139 opacity: 0.2
141140 height: units.dp(1)
142141 }
@@ -161,7 +160,7 @@ Item {
161160 leftMargin: units.gu(2)
162161 }
163162 text: label
164− color: root.foregroundColor
163+ color: root.styleTool.foreground
165164 }
166165
167166 Icon {
@@ -173,7 +172,7 @@ Item {
173172 height: units.gu(2)
174173 width: height
175174 name: hasChildren ? "go-next" : "tick"
176− color: root.foregroundColor
175+ color: root.styleTool.foreground
177176 visible: hasChildren || isActive
178177 }
179178
@@ -185,7 +184,7 @@ Item {
185184 leftMargin: units.gu(2)
186185 rightMargin: units.gu(2)
187186 }
188− color: root.foregroundColor
187+ color: root.styleTool.foreground
189188 opacity: 0.1
190189 height: units.dp(1)
191190 visible: index != department.count - 1
qml/Dash/DashRenderer.qml+5−6
@@ -33,15 +33,14 @@ Item {
3333
3434 property real originY: 0
3535
36− property color foregroundColor: "gray"
37−
3836 // The model to renderer
3937 property var model
4038
41− /*!
42− \brief CardTool component.
43− */
44− property var cardTool: undefined
39+ /// CardTool component.
40+ property var cardTool: null
41+
42+ /// StyleTool component.
43+ property var styleTool: null
4544
4645 /// Emitted when the user clicked on an item
4746 /// @param index is the index of the clicked item
qml/Dash/GenericScopeView.qml+11−10
@@ -19,6 +19,7 @@ import Ubuntu.Components 0.1
1919import Utils 0.1
2020import Unity 0.2
2121import Unity.Application 0.1
22+import Dash 0.1
2223import "../Components"
2324import "../Components/ListItems" as ListItems
2425
@@ -33,9 +34,10 @@ FocusScope {
3334 property bool hasBackAction: false
3435 property bool enableHeightBehaviorOnNextCreation: false
3536 property var categoryView: categoryView
36− // TODO Should be taken from the theme
37− property color foregroundColor: scope && scope.customizations["foreground-color"] || "grey"
38− property color backgroundColor: scope && scope.customizations["background-color"] || "transparent"
37+
38+ property var styleTool: StyleTool {
39+ style: scope ? scope.customizations : {}
40+ }
3941
4042 signal backClicked()
4143
@@ -103,7 +105,7 @@ FocusScope {
103105
104106 Rectangle {
105107 anchors.fill: parent
106− color: scopeView.backgroundColor
108+ color: scopeView.styleTool.background
107109 visible: color != "transparent"
108110 }
109111
@@ -174,7 +176,7 @@ FocusScope {
174176 item.model = Qt.binding(function() { return results })
175177 }
176178 item.objectName = Qt.binding(function() { return categoryId })
177− item.foregroundColor = Qt.binding(function() { return scopeView.foregroundColor })
179+ item.styleTool = scopeView.styleTool;
178180 if (item.expandable) {
179181 var shouldFilter = categoryId != categoryView.expandedCategoryId;
180182 item.setFilter(shouldFilter, false /*animate*/);
@@ -314,7 +316,7 @@ FocusScope {
314316 property var delegate: categoryView.item(delegateIndex)
315317 width: categoryView.width
316318 text: section
317− textColor: foregroundColor
319+ textColor: styleTool.foreground
318320 image: {
319321 if (delegate && delegate.expandable)
320322 return delegate.filtered ? "graphics/header_handlearrow.png" : "graphics/header_handlearrow2.png"
@@ -335,8 +337,7 @@ FocusScope {
335337 showBackButton: scopeView.hasBackAction
336338 searchEntryEnabled: true
337339 searchInProgress: scopeView.scope ? scopeView.scope.searchInProgress : false
338− foregroundColor: scopeView.foregroundColor
339− imageSource: scopeView.scope && scopeView.scope.customizations["page-header"] && scopeView.scope.customizations["page-header"]["logo"] || ""
340+ styleTool: scopeView.styleTool
340341
341342 bottomItem: DashDepartments {
342343 scope: scopeView.scope
@@ -344,8 +345,7 @@ FocusScope {
344345 anchors.right: parent.right
345346 windowHeight: scopeView.height
346347 windowWidth: scopeView.width
347− foregroundColor: scopeView.foregroundColor
348− backgroundColor: scopeView.backgroundColor === Qt.rgba(0, 0, 0, 0) ? "white" : scopeView.backgroundColor
348+ styleTool: scopeView.styleTool
349349 }
350350
351351 onBackClicked: scopeView.backClicked()
@@ -357,6 +357,7 @@ FocusScope {
357357 objectName: "previewListView"
358358 visible: x != width
359359 scope: scopeView.scope
360+ styleTool: scopeView.styleTool
360361 width: parent.width
361362 height: parent.height
362363 anchors.left: categoryView.right
qml/Dash/PreviewListView.qml+3
@@ -24,6 +24,7 @@ Item {
2424 id: root
2525
2626 property var scope: null
27+ property var styleTool: null
2728
2829 property alias open: previewListView.open
2930 property alias model: previewListView.model
@@ -38,6 +39,7 @@ Item {
3839 title: scope ? scope.name : ""
3940 showBackButton: true
4041 searchEntryEnabled: false
42+ styleTool: root.styleTool
4143
4244 onBackClicked: root.open = false
4345 }
@@ -101,6 +103,7 @@ Item {
101103 var previewStack = root.scope.preview(result);
102104 return previewStack.getPreviewModel(0);
103105 }
106+ styleTool: root.styleTool
104107 }
105108
106109 MouseArea {
qml/Dash/Previews/Preview.qml+3
@@ -36,6 +36,9 @@ Item {
3636 //! \brief Should be set to true if this preview is currently displayed.
3737 property bool isCurrent: false
3838
39+ //! \brief The StyleTool component.
40+ property var styleTool: null
41+
3942 clip: true
4043
4144 Binding {
qml/Dash/Previews/PreviewWidgetFactory.qml+3
@@ -31,6 +31,9 @@ Loader {
3131 //! Widget data, forwarded to the widget as is.
3232 property var widgetData: null
3333
34+ //! The StyleTool component.
35+ property var styleTool: null
36+
3437 //! Set to true if the parent preview is displayed.
3538 property bool isCurrentPreview: false
3639
tests/mocks/Unity/fake_scope.cpp+3−1
@@ -14,6 +14,8 @@
1414 * along with this program. If not, see <http://www.gnu.org/licenses/>.
1515 */
1616
17+#include <QUrl>
18+
1719#include "fake_scope.h"
1820#include "fake_department.h"
1921#include "fake_resultsmodel.h"
@@ -163,7 +165,7 @@ QVariantMap Scope::customizations() const
163165 m["foreground-color"] = "blue";
164166 } else if (m_id == "MockScope5") {
165167 QVariantMap pageHeader;
166− pageHeader["logo"] = "../../tests/qmltests/Components/tst_PageHeader/logo-ubuntu-orange.svg";
168+ pageHeader["logo"] = QUrl("../../../tests/qmltests/Components/tst_PageHeader/logo-ubuntu-orange.svg");
167169 m["page-header"] = pageHeader;
168170 }
169171 return m;
tests/plugins/Dash/cardcreator/1.res+2−2
@@ -5,7 +5,7 @@ AbstractButton {
55 property var cardData;
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
8− property color foregroundColor: "grey";
8+ property var styleTool: Object({ foreground: "grey" })
99 property int headerAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
@@ -76,7 +76,7 @@ leftMargin: units.gu(1);
7676 wrapMode: Text.Wrap;
7777 maximumLineCount: 2;
7878 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
79− color: root.foregroundColor;
79+ color: root.styleTool.foreground;
8080 visible: showHeader ;
8181 text: root.title;
8282 font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
tests/plugins/Dash/cardcreator/2.res+3−3
@@ -5,7 +5,7 @@ AbstractButton {
55 property var cardData;
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
8− property color foregroundColor: "grey";
8+ property var styleTool: Object({ foreground: "grey" })
99 property int headerAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
@@ -88,7 +88,7 @@ Column {
8888 wrapMode: Text.Wrap;
8989 maximumLineCount: 2;
9090 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
91− color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < 0.7 ? "white" : root.foregroundColor;
91+ color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < 0.7 ? "white" : root.styleTool.foreground;
9292 visible: showHeader ;
9393 text: root.title;
9494 font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
@@ -103,7 +103,7 @@ Label {
103103 elide: Text.ElideRight;
104104 fontSize: "small";
105105 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
106− color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < 0.7 ? "white" : root.foregroundColor;
106+ color: backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < 0.7 ? "white" : root.styleTool.foreground;
107107 visible: titleLabel.visible && titleLabel.text;
108108 text: cardData && cardData["subtitle"] || "";
109109 font.weight: Font.Light;
tests/plugins/Dash/cardcreator/3.res+3−3
@@ -5,7 +5,7 @@ AbstractButton {
55 property var cardData;
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
8− property color foregroundColor: "grey";
8+ property var styleTool: Object({ foreground: "grey" })
99 property int headerAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
@@ -76,7 +76,7 @@ leftMargin: units.gu(1);
7676 wrapMode: Text.Wrap;
7777 maximumLineCount: 2;
7878 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
79− color: root.foregroundColor;
79+ color: root.styleTool.foreground;
8080 visible: showHeader ;
8181 text: root.title;
8282 font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
@@ -94,7 +94,7 @@ Label {
9494 elide: Text.ElideRight;
9595 fontSize: "small";
9696 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
97− color: root.foregroundColor;
97+ color: root.styleTool.foreground;
9898 visible: titleLabel.visible && titleLabel.text;
9999 text: cardData && cardData["subtitle"] || "";
100100 font.weight: Font.Light;
tests/plugins/Dash/cardcreator/4.res+3−3
@@ -5,7 +5,7 @@ AbstractButton {
55 property var cardData;
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
8− property color foregroundColor: "grey";
8+ property var styleTool: Object({ foreground: "grey" })
99 property int headerAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
@@ -69,7 +69,7 @@ data: [ Label {
6969 wrapMode: Text.Wrap;
7070 maximumLineCount: 2;
7171 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
72− color: root.foregroundColor;
72+ color: root.styleTool.foreground;
7373 visible: showHeader ;
7474 text: root.title;
7575 font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
@@ -84,7 +84,7 @@ Label {
8484 elide: Text.ElideRight;
8585 fontSize: "small";
8686 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
87− color: root.foregroundColor;
87+ color: root.styleTool.foreground;
8888 visible: titleLabel.visible && titleLabel.text;
8989 text: cardData && cardData["subtitle"] || "";
9090 font.weight: Font.Light;
tests/plugins/Dash/cardcreator/5.res+1−1
@@ -5,7 +5,7 @@ AbstractButton {
55 property var cardData;
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
8− property color foregroundColor: "grey";
8+ property var styleTool: Object({ foreground: "grey" })
99 property int headerAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
tests/qmltests/Components/tst_PageHeader.qml+4−1
@@ -213,7 +213,10 @@ Item {
213213
214214 searchEntryEnabled: true
215215 title: "%^$%^%^&%^&%^$%GHR%"
216− imageSource: showImageCheckBox.checked ? titleImageSource : ""
216+ styleTool: QtObject {
217+ readonly property color foreground: "grey"
218+ readonly property url headerLogo: showImageCheckBox.checked ? pageHeader.titleImageSource : ""
219+ }
217220 showBackButton: showBackButtonCheckBox.checked
218221
219222 property string titleImageSource: Qt.resolvedUrl("tst_PageHeader/logo-ubuntu-orange.svg")