Merge lp:~ahayzen/webbrowser-app/browser-colour-update-001 into lp:webbrowser-app/staging

Proposed by Andrew Hayzen
Status: Work in progress
Proposed branch: lp:~ahayzen/webbrowser-app/browser-colour-update-001
Merge into: lp:webbrowser-app/staging
Diff against target: 1026 lines (+244/-131)
29 files modified
src/app/ChromeBase.qml (+6/-3)
src/app/ChromeButton.qml (+3/-2)
src/app/Favicon.qml (+1/-0)
src/app/webbrowser/AddressBar.qml (+8/-2)
src/app/webbrowser/BookmarksFoldersViewWide.qml (+1/-1)
src/app/webbrowser/Browser.qml (+25/-5)
src/app/webbrowser/Chrome.qml (+17/-15)
src/app/webbrowser/Highlight.js (+1/-1)
src/app/webbrowser/IncognitoPalette.qml (+36/-0)
src/app/webbrowser/IndeterminateProgressBar.qml (+1/-1)
src/app/webbrowser/ListViewHighlight.qml (+2/-2)
src/app/webbrowser/NavigationBar.qml (+4/-4)
src/app/webbrowser/NewTabView.qml (+7/-3)
src/app/webbrowser/NewTabViewWide.qml (+5/-3)
src/app/webbrowser/PublicPalette.qml (+32/-0)
src/app/webbrowser/Suggestion.qml (+26/-54)
src/app/webbrowser/Suggestions.qml (+8/-5)
src/app/webbrowser/TabChrome.qml (+0/-1)
src/app/webbrowser/TabItem.qml (+8/-9)
src/app/webbrowser/TabsBar.qml (+23/-10)
src/app/webbrowser/ToolbarAction.qml (+1/-1)
src/app/webbrowser/UrlDelegate.qml (+2/-2)
src/app/webbrowser/UrlDelegateWide.qml (+2/-2)
src/app/webbrowser/UrlPreviewDelegate.qml (+1/-0)
src/app/webbrowser/assets/tab-active-private@27.sci (+5/-0)
src/app/webbrowser/assets/tab-hover-private@27.sci (+5/-0)
src/app/webbrowser/assets/tab-non-active-desktop@27.sci (+0/-5)
src/app/webbrowser/assets/tab-non-active-private@27.sci (+5/-0)
src/app/webbrowser/webbrowser-app.qml (+9/-0)
To merge this branch: bzr merge lp:~ahayzen/webbrowser-app/browser-colour-update-001
Reviewer Review Type Date Requested Status
Olivier Tilloy Needs Fixing
Review via email: mp+310173@code.launchpad.net

Commit message

* Various colour updates and improvements to theming
* Create Incognito and Public palettes for private vs public browsing and use in the chrome
* Correctly show divider between chrome and content when not showing the new tab view
* Reduce the tab bar height and height above as per design
* Update Suggestions to use new ListItem and ListItemLayout to match design
* Until bug 1638337 is fixed, set a background colour in the suggestion list items

Description of the change

* Various colour updates and improvements to theming
* Create Incognito and Public palettes for private vs public browsing and use in the chrome
* Correctly show divider between chrome and content when not showing the new tab view
* Reduce the tab bar height and height above as per design
* Update Suggestions to use new ListItem and ListItemLayout to match design
* Until bug 1638337 is fixed, set a background colour in the suggestion list items

To post a comment you must log in.
1569. By Andrew Hayzen

* Various tidyups

Revision history for this message
Olivier Tilloy (osomon) wrote :

Disclaimer: only tested on desktop so far, up-to-date xenial+overlay.

The pressed state of items in the drawer menu looks very dark to me, is that intended?

The divider between tabs in the tabs bar looks plain black, it looks too dark to me, is that intended?

When hovering over a tab in the tabs bar, it looks awkward that the divider between it and the next/prev tab remains visible, is that intended?

The progress bar and the horizontal line at the bottom of the chrome are stacked, and this makes the progress bar look taller, which I find disturbing to the eye. Maybe anchor the bottom of the progress bar to the bottom of the line?

There’s no hovered and pressed states for the + button at the right of the top bar to open a new tab. Should we add them?

The reference to pad.lv/1638337 in Suggestion.qml looks like it’s the wrong bug number?

Revision history for this message
Olivier Tilloy (osomon) wrote :

This branch needs updating as it now has conflicts when merged into lp:webbrowser-app/staging.

review: Needs Fixing
Revision history for this message
Andrew Hayzen (ahayzen) wrote :

Yup this needs restarting or refactoring :-) I will mark as WIP for now.

Unmerged revisions

1569. By Andrew Hayzen

* Various tidyups

1568. By Andrew Hayzen

* Ensure that in private browser correct colour is used for stock_website icon

1567. By Andrew Hayzen

* Merge of lp:webbrowser-app/staging

1566. By Andrew Hayzen

* Correcrtly show divider between chrome and content when not showing the new tab view
* Reduce the tab bar height even further as per design
* Until bug 1638337 is fixed, set a background colour in the suggestion list items

1565. By Andrew Hayzen

* Narrow mode tab colour fixed
* Suggestion now used new ListItem and ListItemLayout to match design
* Reduce height above tab to match design
* Fix Done button text in narrow mode to have correct colour of text

1564. By Andrew Hayzen

* Updates to theming to use theme.palette in many places and change styling of private browsing tabs

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'src/app/ChromeBase.qml'
2--- src/app/ChromeBase.qml 2016-11-03 10:43:34 +0000
3+++ src/app/ChromeBase.qml 2016-11-07 11:12:38 +0000
4@@ -30,6 +30,8 @@
5 property alias loading: progressBar.visible
6 property alias loadProgress: progressBar.value
7
8+ property bool newTabViewShown: false
9+
10 states: [
11 State {
12 name: "shown"
13@@ -41,16 +43,17 @@
14 id: backgroundRect
15
16 anchors.fill: parent
17- color: Theme.palette.normal.background
18+ color: theme.palette.normal.background
19
20 Rectangle {
21 anchors {
22 left: parent.left
23 right: parent.right
24- bottom: parent.bottom
25+ top: parent.bottom
26 }
27 height: units.dp(1)
28- color: "#dedede"
29+ color: theme.palette.normal.base
30+ visible: !newTabViewShown
31 }
32 }
33
34
35=== modified file 'src/app/ChromeButton.qml'
36--- src/app/ChromeButton.qml 2016-07-01 08:52:37 +0000
37+++ src/app/ChromeButton.qml 2016-11-07 11:12:38 +0000
38@@ -26,19 +26,20 @@
39
40 Rectangle {
41 anchors.fill: parent
42- color: Theme.palette.selected.background
43+ color: theme.palette.selected.background
44 visible: parent.pressed
45 }
46
47 Icon {
48 id: icon
49 anchors.centerIn: parent
50+ color: theme.palette.normal.backgroundText
51 width: parent.iconSize
52 height: width
53 asynchronous: true
54 }
55
56- opacity: enabled ? 1.0 : 0.3
57+ opacity: enabled ? 1.0 : 0.4
58
59 Behavior on width {
60 UbuntuNumberAnimation {}
61
62=== modified file 'src/app/Favicon.qml'
63--- src/app/Favicon.qml 2016-07-01 08:52:37 +0000
64+++ src/app/Favicon.qml 2016-11-07 11:12:38 +0000
65@@ -44,6 +44,7 @@
66
67 Icon {
68 anchors.fill: parent
69+ color: theme.palette.normal.backgroundText
70 name: "stock_website"
71 visible: parent.fallbackIcon &&
72 ((image.status !== Image.Ready) || !image.source.toString())
73
74=== modified file 'src/app/webbrowser/AddressBar.qml'
75--- src/app/webbrowser/AddressBar.qml 2016-07-01 08:52:37 +0000
76+++ src/app/webbrowser/AddressBar.qml 2016-11-07 11:12:38 +0000
77@@ -43,7 +43,7 @@
78 property bool showFavicon: true
79 property bool findInPageMode: false
80 property var findController: null
81- property color fgColor: Theme.palette.normal.baseText
82+ property color fgColor: theme.palette.normal.foregroundText
83
84 property var securityStatus: null
85
86@@ -71,6 +71,12 @@
87
88 anchors.fill: parent
89
90+ StyleHints {
91+ // Set the borderColor to be the foregroundText with 40% opacity
92+ // 0.4 * 255 = 102 102 // 16 = 6 102 % 16 = 6 #66
93+ borderColor: "#66" + theme.palette.normal.foregroundText.toString().slice(1)
94+ }
95+
96 primaryItem: Item {
97 id: icons
98
99@@ -107,7 +113,7 @@
100 visible: addressbar.editing || addressbar.loading || !addressbar.text
101
102 enabled: addressbar.text
103- opacity: enabled ? 1.0 : 0.3
104+ opacity: enabled ? 1.0 : 0.4
105 asynchronous: true
106
107 readonly property bool reload: addressbar.activeFocus && addressbar.text &&
108
109=== modified file 'src/app/webbrowser/BookmarksFoldersViewWide.qml'
110--- src/app/webbrowser/BookmarksFoldersViewWide.qml 2016-08-25 09:51:33 +0000
111+++ src/app/webbrowser/BookmarksFoldersViewWide.qml 2016-11-07 11:12:38 +0000
112@@ -103,7 +103,7 @@
113
114 fontSize: "small"
115 text: isAllBookmarksFolder ? i18n.tr("All Bookmarks") : folderItem.name
116- color: (isActiveFolder && !folders.activeFocus) ? theme.palette.normal.positionText : theme.palette.normal.backgroundSecondaryText
117+ color: isActiveFolder ? theme.palette.selected.positionText : theme.palette.normal.backgroundText
118 }
119
120 onClicked: folders.currentIndex = index
121
122=== modified file 'src/app/webbrowser/Browser.qml'
123--- src/app/webbrowser/Browser.qml 2016-11-03 14:23:40 +0000
124+++ src/app/webbrowser/Browser.qml 2016-11-07 11:12:38 +0000
125@@ -342,6 +342,8 @@
126 visible: bottomEdgeHandle.dragging || tabslist.animating || (state == "shown")
127 onVisibleChanged: chrome.hidden = visible
128
129+ readonly property ThemeSettings theme: chrome.theme
130+
131 states: State {
132 name: "shown"
133 }
134@@ -372,12 +374,15 @@
135 }
136 }
137 chromeHeight: chrome.height
138+ incognito: browser.incognito
139 onScheduleTabSwitch: {
140 chrome.hidden = false
141 internal.nextTabIndex = index
142 }
143 onTabSelected: recentView.closeAndSwitchToTab(index)
144 onTabClosed: internal.closeTab(index)
145+
146+ readonly property ThemeSettings theme: parent.theme
147 }
148
149 Local.Toolbar {
150@@ -391,7 +396,9 @@
151 height: units.gu(7)
152 state: "hidden"
153
154- color: browser.incognito ? UbuntuColors.darkGrey : "#f6f6f6"
155+ readonly property ThemeSettings theme: parent.theme
156+
157+ color: theme.palette.normal.foreground
158
159 Button {
160 objectName: "doneButton"
161@@ -401,9 +408,16 @@
162 verticalCenter: parent.verticalCenter
163 }
164
165- strokeColor: browser.incognito? "#f6f6f6" : UbuntuColors.darkGrey
166-
167- text: i18n.tr("Done")
168+ theme: parent.theme
169+
170+ strokeColor: theme.palette.normal.foregroundText
171+
172+ // Text color is determined from background color so set from html
173+ text: "<font color='" + theme.palette.normal.foregroundText + "'>" + i18n.tr("Done") + "</font>"
174+
175+ StyleHints {
176+ defaultColor: theme.palette.normal.background
177+ }
178
179 onClicked: recentView.closeAndSwitchToTab(0)
180 }
181@@ -417,10 +431,12 @@
182 }
183 height: parent.height - units.gu(2)
184
185+ theme: parent.theme
186+
187 text: i18n.tr("New Tab")
188
189 iconName: browser.incognito ? "private-tab-new" : "add"
190- color: browser.incognito ? "#f6f6f6" : "#808080"
191+ color: theme.palette.normal.foregroundText
192
193 onClicked: {
194 recentView.reset()
195@@ -462,6 +478,7 @@
196
197 incognito: browser.incognito
198
199+ newTabViewShown: newTabViewLoader.active && newTabViewLoader.status === Loader.Ready
200 showTabsBar: browser.wide
201 showFaviconInAddressBar: !browser.wide
202
203@@ -601,6 +618,9 @@
204
205 searchTerms: chrome.text.split(/\s+/g).filter(function(term) { return term.length > 0 })
206
207+ // Suggestions isn't a StyledItem so manually add a theme the same as chrome
208+ theme: chrome.theme
209+
210 Keys.onUpPressed: chrome.focus = true
211 Keys.onEscapePressed: internal.resetFocus()
212
213
214=== modified file 'src/app/webbrowser/Chrome.qml'
215--- src/app/webbrowser/Chrome.qml 2016-11-02 11:41:02 +0000
216+++ src/app/webbrowser/Chrome.qml 2016-11-07 11:12:38 +0000
217@@ -47,7 +47,14 @@
218 signal requestNewTab(int index, bool makeCurrent)
219 signal tabClosed(int index)
220
221- backgroundColor: incognito ? UbuntuColors.darkGrey : "#ffffff"
222+ theme: ThemeSettings {
223+ // Change the theme name as well as overriding the palette otherwise
224+ // it affects all instances of the component using the theme!
225+ name: incognito ? "Ubuntu.Components.Themes.SuruDark" : "Ubuntu.Components.Themes.Ambiance"
226+ palette: incognito ? incognitoPalette : publicPalette
227+ }
228+
229+ backgroundColor: theme.palette.normal.background
230
231 implicitHeight: tabsBar.height + navigationBar.height + content.anchors.topMargin
232
233@@ -58,13 +65,13 @@
234 FocusScope {
235 id: content
236 anchors.fill: parent
237- anchors.topMargin: showTabsBar ? units.gu(1) : 0
238+ anchors.topMargin: showTabsBar ? units.gu(0.3) : 0
239
240 focus: true
241
242 Rectangle {
243 anchors.fill: navigationBar
244- color: (showTabsBar || !incognito) ? "#ffffff" : UbuntuColors.darkGrey
245+ color: theme.palette.normal.foreground
246 }
247
248 Loader {
249@@ -93,24 +100,19 @@
250 left: parent.left
251 right: parent.right
252 }
253- height: active ? (touchEnabled ? units.gu(4) : units.gu(3)) : 0
254+ height: active ? units.gu(3) : 0
255 }
256
257 NavigationBar {
258 id: navigationBar
259-
260- loading: chrome.loading
261- fgColor: "#111111"
262- iconColor: (incognito && !showTabsBar) ? "white" : fgColor
263-
264+ anchors {
265+ bottom: parent.bottom
266+ left: parent.left
267+ right: parent.right
268+ }
269 focus: true
270-
271- anchors {
272- bottom: parent.bottom
273- left: parent.left
274- right: parent.right
275- }
276 height: units.gu(6)
277+ loading: chrome.loading
278
279 onToggleBookmark: chrome.toggleBookmark()
280 }
281
282=== modified file 'src/app/webbrowser/Highlight.js'
283--- src/app/webbrowser/Highlight.js 2015-09-16 16:15:51 +0000
284+++ src/app/webbrowser/Highlight.js 2016-11-07 11:12:38 +0000
285@@ -18,7 +18,7 @@
286
287 function highlightTerms(text, terms) {
288 var termsRe
289- var highlight = '<font color="#752571">$&</font>'
290+ var highlight = '<b>$&</b>'
291 var searchTerms = []
292
293 function escapeTerm(term) {
294
295=== added file 'src/app/webbrowser/IncognitoPalette.qml'
296--- src/app/webbrowser/IncognitoPalette.qml 1970-01-01 00:00:00 +0000
297+++ src/app/webbrowser/IncognitoPalette.qml 2016-11-07 11:12:38 +0000
298@@ -0,0 +1,36 @@
299+/*
300+ * Copyright 2016 Canonical Ltd.
301+ *
302+ * This file is part of webbrowser-app.
303+ *
304+ * webbrowser-app is free software; you can redistribute it and/or modify
305+ * it under the terms of the GNU General Public License as published by
306+ * the Free Software Foundation; version 3.
307+ *
308+ * webbrowser-app is distributed in the hope that it will be useful,
309+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
310+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
311+ * GNU General Public License for more details.
312+ *
313+ * You should have received a copy of the GNU General Public License
314+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
315+ */
316+
317+import QtQuick 2.4
318+import Ubuntu.Components 1.3
319+import Ubuntu.Components.Themes 1.3
320+
321+Palette {
322+ normal: PaletteValues {
323+ background: "#3b3b3b"
324+ backgroundText: "#FFF"
325+ foreground: "#5d5d5d"
326+ foregroundText: "#FFFFFF"
327+ }
328+ selected: PaletteValues {
329+ backgroundText: UbuntuColors.blue
330+ foregroundText: UbuntuColors.blue
331+ field: normal.foreground
332+ fieldText: normal.foregroundText
333+ }
334+}
335
336=== modified file 'src/app/webbrowser/IndeterminateProgressBar.qml'
337--- src/app/webbrowser/IndeterminateProgressBar.qml 2016-05-23 13:25:46 +0000
338+++ src/app/webbrowser/IndeterminateProgressBar.qml 2016-11-07 11:12:38 +0000
339@@ -26,7 +26,7 @@
340 property bool indeterminateProgress: false
341
342 radius: width/3
343- color: Theme.palette.normal.base
344+ color: theme.palette.normal.base
345
346 Rectangle {
347 id: currentProgress
348
349=== modified file 'src/app/webbrowser/ListViewHighlight.qml'
350--- src/app/webbrowser/ListViewHighlight.qml 2016-04-15 11:27:13 +0000
351+++ src/app/webbrowser/ListViewHighlight.qml 2016-11-07 11:12:38 +0000
352@@ -26,8 +26,8 @@
353 width: units.dp(1)
354 color: ((ListView.view && !ListView.view.currentItem.enabled) ||
355 (GridView.view && !GridView.view.currentItem.enabled))
356- ? Theme.palette.disabled.focus
357- : Theme.palette.normal.focus
358+ ? theme.palette.disabled.focus
359+ : theme.palette.normal.focus
360 }
361 visible: hasKeyboard &&
362 ((ListView.view && ListView.view.activeFocus) ||
363
364=== modified file 'src/app/webbrowser/NavigationBar.qml'
365--- src/app/webbrowser/NavigationBar.qml 2016-09-28 07:51:22 +0000
366+++ src/app/webbrowser/NavigationBar.qml 2016-11-07 11:12:38 +0000
367@@ -38,8 +38,8 @@
368 property alias incognito: addressbar.incognito
369 property alias showFaviconInAddressBar: addressbar.showFavicon
370 readonly property alias bookmarkTogglePlaceHolder: addressbar.bookmarkTogglePlaceHolder
371- property color fgColor: Theme.palette.normal.baseText
372- property color iconColor: UbuntuColors.darkGrey
373+ property color fgColor: theme.palette.normal.foregroundText
374+ property color iconColor: theme.palette.normal.foregroundText
375 property real availableHeight
376
377 onFindInPageModeChanged: if (findInPageMode) addressbar.text = ""
378@@ -258,7 +258,7 @@
379
380 Rectangle {
381 anchors.fill: actionsListView
382- color: Theme.palette.normal.background
383+ color: theme.palette.normal.foreground
384
385 Rectangle {
386 anchors {
387@@ -319,7 +319,7 @@
388
389 Rectangle {
390 anchors.fill: parent
391- color: Theme.palette.selected.background
392+ color: theme.palette.selected.foreground
393 visible: parent.pressed
394 }
395
396
397=== modified file 'src/app/webbrowser/NewTabView.qml'
398--- src/app/webbrowser/NewTabView.qml 2016-06-06 09:09:47 +0000
399+++ src/app/webbrowser/NewTabView.qml 2016-11-07 11:12:38 +0000
400@@ -68,7 +68,7 @@
401
402 Rectangle {
403 anchors.fill: parent
404- color: "#f6f6f6"
405+ color: theme.palette.normal.background
406 }
407
408 Flickable {
409@@ -110,7 +110,7 @@
410
411 Icon {
412 id: starredIcon
413- color: "#dd4814"
414+ color: theme.palette.normal.backgroundTertiaryText
415 name: "starred"
416
417 height: units.gu(2)
418@@ -127,6 +127,7 @@
419 width: parent.width - starredIcon.width - moreButton.width - units.gu(3)
420 anchors.verticalCenter: moreButton.verticalCenter
421
422+ color: theme.palette.normal.backgroundTertiaryText
423 text: i18n.tr("Bookmarks")
424 fontSize: "small"
425 }
426@@ -138,7 +139,7 @@
427 anchors { top: parent.top; topMargin: units.gu(1) }
428 activeFocusOnPress: false
429
430- strokeColor: UbuntuColors.darkGrey
431+ strokeColor: theme.palette.normal.backgroundText
432 visible: internal.numberOfBookmarks > 4
433 text: internal.seeMoreBookmarksView ? i18n.tr("Less") : i18n.tr("More")
434
435@@ -178,6 +179,7 @@
436 right: parent.right
437 rightMargin: units.gu(2)
438 }
439+ color: theme.palette.normal.base
440 opacity: bookmarkListHeader.activeFocus ? 0 : 1
441 }
442
443@@ -323,6 +325,7 @@
444 opacity: internal.seeMoreBookmarksView ? 0.0 : 1.0
445 Behavior on opacity { UbuntuNumberAnimation {} }
446
447+ color: theme.palette.normal.backgroundTertiaryText
448 text: i18n.tr("Top sites")
449 fontSize: "small"
450 }
451@@ -337,6 +340,7 @@
452 right: parent.right
453 rightMargin: units.gu(2)
454 }
455+ color: theme.palette.normal.base
456 visible: topSitesHeader.visible
457 }
458
459
460=== modified file 'src/app/webbrowser/NewTabViewWide.qml'
461--- src/app/webbrowser/NewTabViewWide.qml 2016-02-25 11:04:24 +0000
462+++ src/app/webbrowser/NewTabViewWide.qml 2016-11-07 11:12:38 +0000
463@@ -18,6 +18,7 @@
464
465 import QtQuick 2.4
466 import Ubuntu.Components 1.3
467+import Ubuntu.Components.Styles 1.3
468 import webbrowserapp.private 0.1
469 import "."
470
471@@ -74,7 +75,7 @@
472 Rectangle {
473 anchors.fill: parent
474 visible: !inBookmarksView
475- color: "#fbfbfb"
476+ color: theme.palette.normal.background
477 }
478
479 UrlPreviewGrid {
480@@ -112,7 +113,7 @@
481 left: parent.left
482 right: parent.right
483 }
484- color: "#ffffff"
485+ color: theme.palette.normal.background
486 height: sections.height
487
488 Sections {
489@@ -125,6 +126,7 @@
490 }
491
492 selectedIndex: settingsObject.newTabDefaultSection
493+
494 onSelectedIndexChanged: {
495 settingsObject.newTabDefaultSection = selectedIndex
496 if (selectedIndex === 0) {
497@@ -148,7 +150,7 @@
498 top: parent.bottom
499 }
500 height: units.dp(1)
501- color: Qt.rgba(0, 0, 0, 0.1)
502+ color: theme.palette.normal.base // Qt.rgba(0, 0, 0, 0.1)
503 }
504 }
505 }
506
507=== added file 'src/app/webbrowser/PublicPalette.qml'
508--- src/app/webbrowser/PublicPalette.qml 1970-01-01 00:00:00 +0000
509+++ src/app/webbrowser/PublicPalette.qml 2016-11-07 11:12:38 +0000
510@@ -0,0 +1,32 @@
511+/*
512+ * Copyright 2016 Canonical Ltd.
513+ *
514+ * This file is part of webbrowser-app.
515+ *
516+ * webbrowser-app is free software; you can redistribute it and/or modify
517+ * it under the terms of the GNU General Public License as published by
518+ * the Free Software Foundation; version 3.
519+ *
520+ * webbrowser-app is distributed in the hope that it will be useful,
521+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
522+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
523+ * GNU General Public License for more details.
524+ *
525+ * You should have received a copy of the GNU General Public License
526+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
527+ */
528+
529+import QtQuick 2.4
530+import Ubuntu.Components 1.3
531+import Ubuntu.Components.Themes 1.3
532+
533+Palette {
534+ normal: PaletteValues {
535+ background: "#D9D9D9"
536+ foreground: "#FFF"
537+ }
538+ selected: PaletteValues {
539+ backgroundText: UbuntuColors.blue
540+ foregroundText: UbuntuColors.blue
541+ }
542+}
543
544=== modified file 'src/app/webbrowser/Suggestion.qml'
545--- src/app/webbrowser/Suggestion.qml 2016-07-01 08:52:37 +0000
546+++ src/app/webbrowser/Suggestion.qml 2016-11-07 11:12:38 +0000
547@@ -18,70 +18,42 @@
548
549 import QtQuick 2.4
550 import Ubuntu.Components 1.3
551-import Ubuntu.Components.ListItems 1.3 as ListItem
552-
553-// Not using ListItem.Subtitled because it’s not themable,
554-// and we want the subText to be on one line only.
555-ListItem.Base {
556- property alias title: label.text
557- property alias subtitle: subLabel.text
558+
559+ListItem {
560+ // FIXME: Change background colour until SDK keyNavigationFocus is fixed pad.lv/1638337
561+ color: selected ? theme.palette.normal.background : "transparent"
562+ height: listItemLayout.height + (divider.visible ? divider.height : 0)
563+
564 property alias icon: icon.name
565+ property alias subtitle: listItemLayout.subtitle
566+ property alias title: listItemLayout.title
567 property url url
568
569 signal activated(url url)
570
571- __height: Math.max(middleVisuals.height, units.gu(6))
572- // disable focus handling
573- activeFocusOnPress: false
574+ onClicked: activated(url)
575
576- Item {
577- id: middleVisuals
578- anchors {
579- left: parent.left
580- right: parent.right
581- verticalCenter: parent.verticalCenter
582- }
583- height: subLabel.visible ? label.height + subLabel.height : icon.height
584+ ListItemLayout {
585+ id: listItemLayout
586+ subtitle {
587+ color: selected ? theme.palette.normal.backgroundText : theme.palette.normal.foregroundText
588+ elide: Text.ElideRight
589+ wrapMode: Text.NoWrap
590+ }
591+ title {
592+ color: selected ? theme.palette.normal.backgroundText : theme.palette.normal.foregroundText
593+ elide: Text.ElideRight
594+ wrapMode: Text.NoWrap
595+ }
596
597 Icon {
598 id: icon
599- anchors {
600- verticalCenter: parent.verticalCenter
601- left: parent.left
602- }
603+ asynchronous: true
604+ color: selected ? theme.palette.normal.backgroundText : theme.palette.normal.foregroundText
605+ height: units.gu(2)
606+ SlotsLayout.position: SlotsLayout.Leading
607 width: units.gu(2)
608- height: units.gu(2)
609- color: UbuntuColors.darkGrey
610- asynchronous: true
611- }
612-
613- Label {
614- id: label
615- anchors {
616- top: subLabel.visible ? parent.top : undefined
617- verticalCenter: subLabel.visible ? undefined : parent.verticalCenter
618- left: icon.right
619- leftMargin: units.gu(2)
620- right: parent.right
621- }
622- color: selected ? "#DB4923" : UbuntuColors.darkGrey
623- elide: Text.ElideRight
624- }
625-
626- Label {
627- id: subLabel
628- anchors {
629- top: label.bottom
630- left: icon.right
631- leftMargin: units.gu(2)
632- right: parent.right
633- }
634- fontSize: "small"
635- elide: Text.ElideRight
636- visible: text !== ""
637- color: selected ? "#DB4923" : UbuntuColors.darkGrey
638 }
639 }
640-
641- onClicked: activated(url)
642 }
643+
644
645=== modified file 'src/app/webbrowser/Suggestions.qml'
646--- src/app/webbrowser/Suggestions.qml 2015-08-24 16:51:47 +0000
647+++ src/app/webbrowser/Suggestions.qml 2016-11-07 11:12:38 +0000
648@@ -31,13 +31,16 @@
649
650 signal activated(url url)
651
652+ property var theme
653+
654 Rectangle {
655 anchors.fill: parent
656 radius: units.gu(0.5)
657 border {
658- color: "#dedede"
659+ color: theme.palette.normal.base
660 width: 1
661 }
662+ color: theme.palette.normal.foreground
663 }
664
665 clip: true
666@@ -70,14 +73,14 @@
667 delegate: Suggestion {
668 objectName: "suggestionDelegate_" + index
669 width: suggestionsList.width
670- showDivider: index < model.length - 1
671
672- title: selected ? modelData.title : Highlight.highlightTerms(modelData.title, searchTerms)
673- subtitle: modelData.displayUrl ? (selected ? modelData.url :
674- Highlight.highlightTerms(modelData.url, searchTerms)) : ""
675+ title.text: Highlight.highlightTerms(modelData.title, searchTerms)
676+ subtitle.text: modelData.displayUrl ? Highlight.highlightTerms(modelData.url, searchTerms) : ""
677 icon: modelData.icon
678 selected: suggestionsList.activeFocus && ListView.isCurrentItem
679
680+ theme: suggestions.theme
681+
682 onActivated: suggestions.activated(modelData.url)
683 }
684 }
685
686=== modified file 'src/app/webbrowser/TabChrome.qml'
687--- src/app/webbrowser/TabChrome.qml 2016-07-01 08:52:37 +0000
688+++ src/app/webbrowser/TabChrome.qml 2016-11-07 11:12:38 +0000
689@@ -65,7 +65,6 @@
690
691 active: true
692 hoverable: false
693- fgColor: "#111111"
694
695 onSelected: tabChrome.selected()
696 onClosed: tabChrome.closed()
697
698=== modified file 'src/app/webbrowser/TabItem.qml'
699--- src/app/webbrowser/TabItem.qml 2016-10-10 09:13:53 +0000
700+++ src/app/webbrowser/TabItem.qml 2016-11-07 11:12:38 +0000
701@@ -36,10 +36,8 @@
702 property real dragMax: 0
703 readonly property bool dragging: mouseArea.drag.active
704
705- property color fgColor: Theme.palette.normal.baseText
706-
707 property bool touchEnabled: true
708-
709+
710 readonly property bool showCloseIcon: closeIcon.x > units.gu(1) + tabItem.width / 2
711
712 signal selected()
713@@ -50,9 +48,10 @@
714 id: tabImage
715 anchors.fill: parent
716 anchors.rightMargin: tabItem.rightMargin
717- source: "assets/tab-%1%2.sci".arg((active) ? "active" :
718+ source: "assets/tab-%1%2%3.sci".arg((active || !browser.wide) ? "active" :
719 (hoverArea.containsMouse ? "hover" : "non-active"))
720 .arg(touchEnabled ? "" : "-desktop")
721+ .arg(incognito ? "-private" : "")
722 asynchronous: true
723
724 Favicon {
725@@ -64,7 +63,7 @@
726 verticalCenter: parent.verticalCenter
727 }
728 shouldCache: !incognito
729-
730+
731 // Scale width and height of favicon when tabWidth becomes small
732 height: width
733 width: Math.min(units.dp(16), Math.min(tabItem.width - anchors.leftMargin * 2, tabItem.height))
734@@ -84,7 +83,7 @@
735 verticalAlignment: Text.AlignVCenter
736 clip: true
737 fontSize: "small"
738- color: tabItem.fgColor
739+ color: theme.palette.normal.backgroundText
740 }
741
742 Rectangle {
743@@ -95,8 +94,8 @@
744 gradient: Gradient {
745 GradientStop {
746 position: 0.0;
747- color: active ? "#ffffff" :
748- (hoverArea.containsMouse ? "#c5c5c5" : "#d2d2d2")
749+ color: active || !browser.wide ? theme.palette.normal.foreground :
750+ (hoverArea.containsMouse ? (incognito ? "#424242" : "#e7e7e7" ) : theme.palette.normal.background)
751 }
752 GradientStop { position: 0.33; color: "transparent" }
753 }
754@@ -162,7 +161,7 @@
755 anchors.verticalCenter: parent.verticalCenter
756 asynchronous: true
757 name: "close"
758- color: tabItem.fgColor
759+ color: theme.palette.normal.foregroundText
760 visible: tabItem.showCloseIcon
761 }
762 }
763
764=== modified file 'src/app/webbrowser/TabsBar.qml'
765--- src/app/webbrowser/TabsBar.qml 2016-10-05 11:03:05 +0000
766+++ src/app/webbrowser/TabsBar.qml 2016-11-07 11:12:38 +0000
767@@ -32,19 +32,19 @@
768
769 // Minimum size of the larger tab
770 readonly property real minActiveTabWidth: units.gu(10)
771-
772+
773 // When there is a larger tab, calc the smaller tab size
774 readonly property real nonActiveTabWidth: (tabsContainer.maxWidth - minActiveTabWidth) / Math.max(model.count - 1, 1)
775
776 // The size of the right margin of the tab
777 readonly property real rightMargin: units.dp(1)
778-
779+
780 // Whether there will be one larger tab or not
781 readonly property bool unevenTabWidth: tabWidth + rightMargin < minActiveTabWidth
782
783 property bool incognito: false
784
785- property color fgColor: Theme.palette.normal.baseText
786+ property color fgColor: theme.palette.normal.foregroundText
787
788 property bool touchEnabled: true
789
790@@ -83,7 +83,7 @@
791 height: units.gu(2)
792 anchors.centerIn: parent
793 name: "add"
794- color: incognito ? "white" : root.fgColor
795+ color: root.fgColor
796 }
797
798 onClicked: root.requestNewTab(root.model.count, true)
799@@ -142,7 +142,7 @@
800 readonly property int tabIndex: index
801
802 anchors.top: tabsContainer.top
803-
804+
805 width: getSize(index)
806 height: tabsContainer.height
807
808@@ -164,7 +164,6 @@
809 incognito: root.incognito
810 title: model.title ? model.title : (model.url.toString() ? model.url : i18n.tr("New tab"))
811 icon: model.icon
812- fgColor: root.fgColor
813
814 touchEnabled: root.touchEnabled
815
816@@ -180,7 +179,7 @@
817 property: "reordering"
818 value: dragging
819 }
820-
821+
822 Behavior on width { NumberAnimation { duration: 250 } }
823
824 Binding on x {
825@@ -204,7 +203,7 @@
826 return index * (tabWidth + rightMargin)
827 }
828 }
829-
830+
831 function getSize(index) {
832 if (unevenTabWidth) {
833 // Uneven tabs so use large or small depending which index
834@@ -217,7 +216,7 @@
835 return tabWidth + rightMargin
836 }
837 }
838-
839+
840 onXChanged: {
841 if (!dragging) return
842
843@@ -231,6 +230,20 @@
844 }
845
846 z: (root.model.currentIndex == index) ? 3 : 1 - index / root.model.count
847+
848+ Image {
849+ anchors {
850+ bottom: parent.bottom
851+ bottomMargin: units.gu(0.5)
852+ right: parent.right
853+ top: parent.top
854+ topMargin: units.gu(0.5)
855+ }
856+ source: "assets/tab-divider%1.png".arg(incognito ? "-private" : "")
857+
858+ width: units.gu(0.1)
859+ visible: index !== root.model.currentIndex && index + 1 !== root.model.currentIndex
860+ }
861 }
862 }
863
864@@ -241,7 +254,7 @@
865 }
866 width: root.width
867 height: units.dp(1)
868- color: "#cacaca"
869+ color: theme.palette.normal.base
870 z: 2
871 }
872 }
873
874=== modified file 'src/app/webbrowser/ToolbarAction.qml'
875--- src/app/webbrowser/ToolbarAction.qml 2016-07-01 08:52:37 +0000
876+++ src/app/webbrowser/ToolbarAction.qml 2016-11-07 11:12:38 +0000
877@@ -23,7 +23,7 @@
878 id: toolbarAction
879
880 property alias iconName: icon.name
881- property color color: Theme.palette.normal.baseText
882+ property color color: theme.palette.normal.baseText
883 property alias text: label.text
884
885 opacity: enabled ? 1.0 : 0.3
886
887=== modified file 'src/app/webbrowser/UrlDelegate.qml'
888--- src/app/webbrowser/UrlDelegate.qml 2016-05-23 02:52:50 +0000
889+++ src/app/webbrowser/UrlDelegate.qml 2016-11-07 11:12:38 +0000
890@@ -68,7 +68,7 @@
891 right: parent.right
892 }
893 fontSize: "x-small"
894- color: theme.palette.normal.backgroundSecondaryText
895+ color: theme.palette.normal.backgroundText
896 wrapMode: Text.Wrap
897 elide: Text.ElideRight
898 maximumLineCount: 1
899@@ -81,7 +81,7 @@
900 right: parent.right
901 }
902 fontSize: "xx-small"
903- color: theme.palette.normal.backgroundTertiaryText
904+ color: theme.palette.normal.backgroundSecondaryText
905 wrapMode: Text.Wrap
906 elide: Text.ElideRight
907 maximumLineCount: 1
908
909=== modified file 'src/app/webbrowser/UrlDelegateWide.qml'
910--- src/app/webbrowser/UrlDelegateWide.qml 2016-05-23 02:52:50 +0000
911+++ src/app/webbrowser/UrlDelegateWide.qml 2016-11-07 11:12:38 +0000
912@@ -54,7 +54,7 @@
913 id: title
914
915 fontSize: "x-small"
916- color: theme.palette.normal.backgroundSecondaryText
917+ color: theme.palette.normal.backgroundText
918 wrapMode: Text.Wrap
919 elide: Text.ElideRight
920 maximumLineCount: 1
921@@ -64,7 +64,7 @@
922 id: url
923
924 fontSize: "xx-small"
925- color: theme.palette.normal.backgroundTertiaryText
926+ color: theme.palette.normal.backgroundSecondaryText
927 wrapMode: Text.Wrap
928 elide: Text.ElideRight
929 maximumLineCount: 1
930
931=== modified file 'src/app/webbrowser/UrlPreviewDelegate.qml'
932--- src/app/webbrowser/UrlPreviewDelegate.qml 2016-06-07 17:37:16 +0000
933+++ src/app/webbrowser/UrlPreviewDelegate.qml 2016-11-07 11:12:38 +0000
934@@ -68,6 +68,7 @@
935 anchors.leftMargin: showFavicon ? units.gu(1) : 0
936 anchors.right: parent.right
937 anchors.top: parent.top
938+ color: theme.palette.normal.backgroundText
939 text: preview.title
940 elide: Text.ElideRight
941 fontSize: "small"
942
943=== modified file 'src/app/webbrowser/assets/tab-active-desktop@27.png'
944Binary files src/app/webbrowser/assets/tab-active-desktop@27.png 2016-01-26 18:12:08 +0000 and src/app/webbrowser/assets/tab-active-desktop@27.png 2016-11-07 11:12:38 +0000 differ
945=== added file 'src/app/webbrowser/assets/tab-active-private@27.png'
946Binary files src/app/webbrowser/assets/tab-active-private@27.png 1970-01-01 00:00:00 +0000 and src/app/webbrowser/assets/tab-active-private@27.png 2016-11-07 11:12:38 +0000 differ
947=== added file 'src/app/webbrowser/assets/tab-active-private@27.sci'
948--- src/app/webbrowser/assets/tab-active-private@27.sci 1970-01-01 00:00:00 +0000
949+++ src/app/webbrowser/assets/tab-active-private@27.sci 2016-11-07 11:12:38 +0000
950@@ -0,0 +1,5 @@
951+border.top: 0
952+border.bottom: 0
953+border.left: 16
954+border.right: 16
955+source: "tab-active-private@27.png"
956
957=== modified file 'src/app/webbrowser/assets/tab-active@27.png'
958Binary files src/app/webbrowser/assets/tab-active@27.png 2016-01-26 18:12:08 +0000 and src/app/webbrowser/assets/tab-active@27.png 2016-11-07 11:12:38 +0000 differ
959=== added file 'src/app/webbrowser/assets/tab-active@27.png.old'
960Binary files src/app/webbrowser/assets/tab-active@27.png.old 1970-01-01 00:00:00 +0000 and src/app/webbrowser/assets/tab-active@27.png.old 2016-11-07 11:12:38 +0000 differ
961=== added file 'src/app/webbrowser/assets/tab-divider-private@27.png'
962Binary files src/app/webbrowser/assets/tab-divider-private@27.png 1970-01-01 00:00:00 +0000 and src/app/webbrowser/assets/tab-divider-private@27.png 2016-11-07 11:12:38 +0000 differ
963=== added file 'src/app/webbrowser/assets/tab-divider@27.png'
964Binary files src/app/webbrowser/assets/tab-divider@27.png 1970-01-01 00:00:00 +0000 and src/app/webbrowser/assets/tab-divider@27.png 2016-11-07 11:12:38 +0000 differ
965=== added file 'src/app/webbrowser/assets/tab-hover-private@27.png'
966Binary files src/app/webbrowser/assets/tab-hover-private@27.png 1970-01-01 00:00:00 +0000 and src/app/webbrowser/assets/tab-hover-private@27.png 2016-11-07 11:12:38 +0000 differ
967=== added file 'src/app/webbrowser/assets/tab-hover-private@27.sci'
968--- src/app/webbrowser/assets/tab-hover-private@27.sci 1970-01-01 00:00:00 +0000
969+++ src/app/webbrowser/assets/tab-hover-private@27.sci 2016-11-07 11:12:38 +0000
970@@ -0,0 +1,5 @@
971+border.top: 0
972+border.bottom: 0
973+border.left: 16
974+border.right: 16
975+source: "tab-hover-private@27.png"
976
977=== modified file 'src/app/webbrowser/assets/tab-hover@27.png'
978Binary files src/app/webbrowser/assets/tab-hover@27.png 2016-01-26 18:12:08 +0000 and src/app/webbrowser/assets/tab-hover@27.png 2016-11-07 11:12:38 +0000 differ
979=== removed file 'src/app/webbrowser/assets/tab-non-active-desktop@27.png'
980Binary files src/app/webbrowser/assets/tab-non-active-desktop@27.png 2016-01-26 18:12:08 +0000 and src/app/webbrowser/assets/tab-non-active-desktop@27.png 1970-01-01 00:00:00 +0000 differ
981=== removed file 'src/app/webbrowser/assets/tab-non-active-desktop@27.sci'
982--- src/app/webbrowser/assets/tab-non-active-desktop@27.sci 2015-09-17 09:15:51 +0000
983+++ src/app/webbrowser/assets/tab-non-active-desktop@27.sci 1970-01-01 00:00:00 +0000
984@@ -1,5 +0,0 @@
985-border.top: 0
986-border.bottom: 0
987-border.left: 16
988-border.right: 16
989-source: "tab-non-active-desktop@27.png"
990
991=== added file 'src/app/webbrowser/assets/tab-non-active-private@27.sci'
992--- src/app/webbrowser/assets/tab-non-active-private@27.sci 1970-01-01 00:00:00 +0000
993+++ src/app/webbrowser/assets/tab-non-active-private@27.sci 2016-11-07 11:12:38 +0000
994@@ -0,0 +1,5 @@
995+border.top: 0
996+border.bottom: 0
997+border.left: 16
998+border.right: 16
999+source: "tab-non-active@27.png"
1000
1001=== modified file 'src/app/webbrowser/assets/tab-non-active@27.png'
1002Binary files src/app/webbrowser/assets/tab-non-active@27.png 2016-01-26 18:12:08 +0000 and src/app/webbrowser/assets/tab-non-active@27.png 2016-11-07 11:12:38 +0000 differ
1003=== modified file 'src/app/webbrowser/webbrowser-app.qml'
1004--- src/app/webbrowser/webbrowser-app.qml 2016-10-10 17:00:52 +0000
1005+++ src/app/webbrowser/webbrowser-app.qml 2016-11-07 11:12:38 +0000
1006@@ -20,6 +20,7 @@
1007 import QtQuick.Window 2.2
1008 import Qt.labs.settings 1.0
1009 import Ubuntu.Components 1.3
1010+import Ubuntu.Components.Themes 1.3
1011 import "."
1012 import ".."
1013 import webbrowsercommon.private 0.1
1014@@ -465,4 +466,12 @@
1015 PreviewManager.cleanUnusedPreviews(doNotCleanUrls)
1016 }
1017 }
1018+
1019+ property Palette incognitoPalette: IncognitoPalette {
1020+
1021+ }
1022+
1023+ property Palette publicPalette: PublicPalette {
1024+
1025+ }
1026 }

Subscribers

People subscribed via source and target branches