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 on 2015-06-20

Merge from upstream

1053. By Riccardo Padovani on 2015-06-20

Set UrlsList limit property

1054. By Riccardo Padovani on 2015-06-20

Use conditional layout

1055. By Riccardo Padovani on 2015-06-20

Base the new landscape page on the new sections component

1056. By Riccardo Padovani on 2015-06-20

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

Subscribers

People subscribed via source and target branches

to status/vote changes: