Merge lp:~rpadovani/webbrowser-app/new-tab-landscape-mode into lp:webbrowser-app

Proposed by Riccardo Padovani
Status: Merged
Merged at revision: 1128
Proposed branch: lp:~rpadovani/webbrowser-app/new-tab-landscape-mode
Merge into: lp:webbrowser-app
Diff against target: 304 lines (+233/-23)
2 files modified
src/app/webbrowser/Browser.qml (+62/-23)
src/app/webbrowser/NewTabLandscapeView.qml (+171/-0)
To merge this branch: bzr merge lp:~rpadovani/webbrowser-app/new-tab-landscape-mode
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Needs Fixing
Ugo Riboni (community) Needs Fixing
Review via email: mp+261327@code.launchpad.net

Commit message

Add the landscape mode to new tab view

Description of the change

Add the landscape mode accordingly to design spec.

Sections have a slightly different style (no underlined text, no bold text) due the change in the sdk theme. I preferred to implement sections as they're implemented in the sdk instead following browser specs that probably are outdated

To post a comment you must log in.
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
Revision history for this message
Ugo Riboni (uriboni) wrote :

Thanks Riccardo for the work on this.

The bookmarks UrlList needs the limit property to be set on it, or it does not show anything. Design suggests using a limit of 10.

The UI Toolkit team is working on a new component called Sections that will allow you to easily implement the design for the switch between the Top Sites and Bookmarks sections.
You can find the work in this branch: lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar/

I pushed a branch here, based on yours, that uses the new Sections component: lp:~uriboni/webbrowser-app/new-tab-wide

Please base your branch on the use of Sections, since they will land in the UI toolkit soon.

Finally, the design for this feature calls for remembering the state so that we can go back to the last section that was active when creating a new tab after re-opening the browser.

And you should probably investigate the use of conditional layouts from the UITK to implement the switch between layouts.

review: Needs Fixing
1052. By Riccardo Padovani

Merge from upstream

1053. By Riccardo Padovani

Set UrlsList limit property

1054. By Riccardo Padovani

Use conditional layout

1055. By Riccardo Padovani

Base the new landscape page on the new sections component

1056. By Riccardo Padovani

Save which section in landscape view user used last time

Revision history for this message
Riccardo Padovani (rpadovani) wrote :

Thanks for the review!

> The UI Toolkit team is working on a new component called Sections that will
> allow you to easily implement the design for the switch between the Top Sites
> and Bookmarks sections.
> You can find the work in this branch: lp:~tpeeters/ubuntu-ui-
> toolkit/100-SectionBar/

This is awesome, thanks for pointing it to me, and thanks for your implementation, I used it in my branch!

> And you should probably investigate the use of conditional layouts from the
> UITK to implement the switch between layouts.

I never used them, hope my implementation is good.

Thanks again!

Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'src/app/webbrowser/Browser.qml'
--- src/app/webbrowser/Browser.qml 2015-06-18 08:12:33 +0000
+++ src/app/webbrowser/Browser.qml 2015-06-20 09:58:29 +0000
@@ -20,6 +20,7 @@
20import QtQuick.Window 2.020import QtQuick.Window 2.0
21import Qt.labs.settings 1.021import Qt.labs.settings 1.0
22import com.canonical.Oxide 1.5 as Oxide22import com.canonical.Oxide 1.5 as Oxide
23import Ubuntu.Layouts 1.0
23import Ubuntu.Components 1.124import Ubuntu.Components 1.1
24import Ubuntu.Components.Popups 1.025import Ubuntu.Components.Popups 1.0
25import webbrowserapp.private 0.126import webbrowserapp.private 0.1
@@ -98,12 +99,14 @@
98 property string searchEngine: settingsDefaults.searchEngine99 property string searchEngine: settingsDefaults.searchEngine
99 property string allowOpenInBackgroundTab: settingsDefaults.allowOpenInBackgroundTab100 property string allowOpenInBackgroundTab: settingsDefaults.allowOpenInBackgroundTab
100 property bool restoreSession: settingsDefaults.restoreSession101 property bool restoreSession: settingsDefaults.restoreSession
102 property int selectedIndexNewTabViewLandscape: settingsDefaults.selectedIndexNewTabViewLandscape
101103
102 function restoreDefaults() {104 function restoreDefaults() {
103 homepage = settingsDefaults.homepage105 homepage = settingsDefaults.homepage
104 searchEngine = settingsDefaults.searchEngine106 searchEngine = settingsDefaults.searchEngine
105 allowOpenInBackgroundTab = settingsDefaults.allowOpenInBackgroundTab107 allowOpenInBackgroundTab = settingsDefaults.allowOpenInBackgroundTab
106 restoreSession = settingsDefaults.restoreSession108 restoreSession = settingsDefaults.restoreSession
109 selectedIndexNewTabViewLandscape = settingsDefaults.selectedIndexNewTabViewLandscape
107 }110 }
108 }111 }
109112
@@ -114,6 +117,7 @@
114 readonly property string searchEngine: "google"117 readonly property string searchEngine: "google"
115 readonly property string allowOpenInBackgroundTab: "default"118 readonly property string allowOpenInBackgroundTab: "default"
116 readonly property bool restoreSession: true119 readonly property bool restoreSession: true
120 readonly property int selectedIndexNewTabViewLandscape: 0
117 }121 }
118122
119 Item {123 Item {
@@ -209,35 +213,70 @@
209 }213 }
210 }214 }
211215
212 sourceComponent: browser.incognito ? newPrivateTabViewComponent : newTabViewComponent216 sourceComponent: newTabViewComponent
213217
214 Component {218 Component {
215 id: newTabViewComponent219 id: newTabViewComponent
216220
217 NewTabView {221 Layouts {
218 historyModel: browser.historyModel222 id: newTabViewLayouts
219 bookmarksModel: browser.bookmarksModel223
220 settingsObject: settings224 anchors.fill: parent
221 onBookmarkClicked: {225
222 chrome.requestedUrl = url226 layouts: [
223 currentWebview.url = url227 ConditionalLayout {
224 currentWebview.forceActiveFocus()228 name: "newTabView"
225 }229 when: !browser.incognito && Screen.orientation == Screen.primaryOrientation
226 onBookmarkRemoved: browser.bookmarksModel.remove(url)230
227 onHistoryEntryClicked: {231 NewTabView {
228 chrome.requestedUrl = url232 anchors.fill: parent
229 currentWebview.url = url233 historyModel: browser.historyModel
230 currentWebview.forceActiveFocus()234 bookmarksModel: browser.bookmarksModel
231 }235 settingsObject: settings
236 onBookmarkClicked: {
237 chrome.requestedUrl = url
238 currentWebview.url = url
239 currentWebview.forceActiveFocus()
240 }
241 onBookmarkRemoved: browser.bookmarksModel.remove(url)
242 onHistoryEntryClicked: {
243 chrome.requestedUrl = url
244 currentWebview.url = url
245 currentWebview.forceActiveFocus()
246 }
247 }
248 },
249 ConditionalLayout {
250 name: "newTabLandscapeView"
251 when: !browser.incognito && Screen.orientation != Screen.primaryOrientation
252
253 NewTabLandscapeView {
254 anchors.fill: parent
255 historyModel: browser.historyModel
256 bookmarksModel: browser.bookmarksModel
257 settingsObject: settings
258 onBookmarkClicked: {
259 chrome.requestedUrl = url
260 currentWebview.url = url
261 currentWebview.forceActiveFocus()
262 }
263 onBookmarkRemoved: browser.bookmarksModel.remove(url)
264 onHistoryEntryClicked: {
265 chrome.requestedUrl = url
266 currentWebview.url = url
267 currentWebview.forceActiveFocus()
268 }
269 }
270 },
271 ConditionalLayout {
272 name: "newPrivateTabView"
273 when: browser.incognito
274
275 NewPrivateTabView { anchors.fill: parent }
276 }
277 ]
232 }278 }
233 }279 }
234
235 Component {
236 id: newPrivateTabViewComponent
237
238 NewPrivateTabView { }
239 }
240 asynchronous: true
241 }280 }
242281
243 SearchEngine {282 SearchEngine {
244283
=== added file 'src/app/webbrowser/NewTabLandscapeView.qml'
--- src/app/webbrowser/NewTabLandscapeView.qml 1970-01-01 00:00:00 +0000
+++ src/app/webbrowser/NewTabLandscapeView.qml 2015-06-20 09:58:29 +0000
@@ -0,0 +1,171 @@
1/*
2 * Copyright 2015 Canonical Ltd.
3 *
4 * This file is part of webbrowser-app.
5 *
6 * webbrowser-app is free software; you can redistribute it and/or modify
7 * it under the terms of the GNU General Public License as published by
8 * the Free Software Foundation; version 3.
9 *
10 * webbrowser-app is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details.
14 *
15 * You should have received a copy of the GNU General Public License
16 * along with this program. If not, see <http://www.gnu.org/licenses/>.
17 */
18
19import QtQuick 2.0
20import Qt.labs.settings 1.0
21import Ubuntu.Components 1.3
22import webbrowserapp.private 0.1
23import ".."
24
25Item {
26 id: newTabViewLandscape
27
28 property QtObject bookmarksModel
29 property alias historyModel: historyTimeframeModel.sourceModel
30 property Settings settingsObject
31 property alias selectedIndex: sections.selectedIndex
32
33 signal bookmarkClicked(url url)
34 signal bookmarkRemoved(url url)
35 signal historyEntryClicked(url url)
36
37 TopSitesModel {
38 id: topSitesModel
39 sourceModel: HistoryTimeframeModel {
40 id: historyTimeframeModel
41 }
42 }
43
44 Rectangle {
45 anchors.fill: parent
46 color: "#f6f6f6"
47 }
48
49 Sections {
50 id: sections
51
52 anchors {
53 horizontalCenter: parent.horizontalCenter
54 top: parent.top
55 }
56
57 actions: [
58 Action { text: i18n.tr("Top Sites") },
59 Action { text: i18n.tr("Bookmarks") }
60 ]
61 }
62
63 Binding {
64 target: sections
65 property: "selectedIndex"
66 value: settingsObject.selectedIndexNewTabViewLandscape
67 }
68
69 Flickable {
70 anchors {
71 top: sections.bottom
72 bottom: parent.bottom
73 left: parent.left
74 right: parent.right
75 }
76 contentHeight: contentColumn.height
77
78 clip: true
79
80 Column {
81 id: contentColumn
82 anchors {
83 left: parent.left
84 right: parent.right
85 }
86 height: childrenRect.height
87
88 Column {
89 id: bookmarksColumn
90 anchors {
91 left: parent.left
92 right: parent.right
93 }
94
95 visible: newTabViewLandscape.selectedIndex === 1
96
97 height: childrenRect.height
98 spacing: 0
99
100 UrlDelegate {
101 objectName: "homepageBookmark"
102 anchors {
103 left: parent.left
104 right: parent.right
105 }
106 height: units.gu(5)
107
108 title: i18n.tr('Homepage')
109
110 leadingActions: null
111
112 url: newTabViewLandscape.settingsObject.homepage
113 onClicked: newTabViewLandscape.bookmarkClicked(url)
114 }
115
116 UrlsList {
117 objectName: "bookmarksList"
118 anchors {
119 left: parent.left
120 right: parent.right
121 }
122
123 spacing: 0
124 limit: 10
125
126 model: newTabViewLandscape.bookmarksModel
127
128 onUrlClicked: newTabViewLandscape.bookmarkClicked(url)
129 onUrlRemoved: newTabViewLandscape.bookmarkRemoved(url)
130 }
131 }
132
133 Label {
134 objectName: "notopsites"
135
136 height: units.gu(11)
137 anchors {
138 left: parent.left
139 right: parent.right
140 }
141 visible: topSitesModel.count == 0 && newTabViewLandscape.selectedIndex === 0
142
143 horizontalAlignment: Text.AlignHCenter
144 verticalAlignment: Text.AlignVCenter
145
146 text: i18n.tr("You haven't visited any site yet")
147 color: "#5d5d5d"
148 }
149
150 UrlsList {
151 objectName: "topSitesList"
152 anchors {
153 left: parent.left
154 right: parent.right
155 }
156
157 opacity: internal.seeMoreBookmarksView ? 0.0 : 1.0
158 Behavior on opacity { UbuntuNumberAnimation {} }
159 visible: newTabViewLandscape.selectedIndex === 0
160
161 limit: 10
162 spacing: 0
163
164 model: topSitesModel
165
166 onUrlClicked: newTabViewLandscape.historyEntryClicked(url)
167 onUrlRemoved: newTabViewLandscape.historyModel.hide(url)
168 }
169 }
170 }
171}

Subscribers

People subscribed via source and target branches

to status/vote changes: