Merge lp:~rpadovani/webbrowser-app/fixBookmarkDesign into lp:webbrowser-app
- fixBookmarkDesign
- Merge into trunk
Status: | Merged |
---|---|
Approved by: | Olivier Tilloy |
Approved revision: | 882 |
Merged at revision: | 912 |
Proposed branch: | lp:~rpadovani/webbrowser-app/fixBookmarkDesign |
Merge into: | lp:webbrowser-app |
Diff against target: |
239 lines (+102/-66) 3 files modified
src/app/webbrowser/HistorySectionDelegate.qml (+3/-1) src/app/webbrowser/HistoryView.qml (+98/-64) src/app/webbrowser/upstreamcomponents/ListItemWithActions.qml (+1/-1) |
To merge this branch: | bzr merge lp:~rpadovani/webbrowser-app/fixBookmarkDesign |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
PS Jenkins bot | continuous-integration | Needs Fixing | |
Olivier Tilloy | Approve | ||
Review via email: mp+247512@code.launchpad.net |
Commit message
Fixed design of multiselection in history view
Description of the change
Fixed design of multiselection in history view
PS Jenkins bot (ps-jenkins) wrote : | # |
Olivier Tilloy (osomon) wrote : | # |
After applying the change, this is how it looks on my desktop (utopic): http://
There are a few things that need adjusting still, wrt the visual spec:
- icons in the top toolbar are scaled up, they shouldn’t be
- icons in the top toolbar need to have a left and right margin to be aligned with the rest of the items on screen
- the horizontal line that underlines each section header should be aligned to the left with the checkboxes, and to the right it should have a 2GU margin
- the text of the section headers should also be aligned to the left with the checkboxes (i.e. a 2GU left margin)
- there should be 2GUs between the horizontal line and the first item in a section (there currently is only one)
- there should be 2.5GUs between the last item in a section and the text of the following header
Riccardo Padovani (rpadovani) wrote : | # |
> After applying the change, this is how it looks on my desktop (utopic):
> http://
>
> There are a few things that need adjusting still, wrt the visual spec:
> - icons in the top toolbar are scaled up, they shouldn’t be
Sorry about this, I'm on vivid and it works well, I think it's due this commit[0] in the sdk, probably hasn't been backported yet. Anyway, I reworked the Icon, so now should be ok.
> - icons in the top toolbar need to have a left and right margin to be aligned
> with the rest of the items on screen
Fixed
> - the horizontal line that underlines each section header should be aligned
> to the left with the checkboxes, and to the right it should have a 2GU margin
fixed
> - the text of the section headers should also be aligned to the left with the
> checkboxes (i.e. a 2GU left margin)
fixed
> - there should be 2GUs between the horizontal line and the first item in a
> section (there currently is only one)
Fixed
> - there should be 2.5GUs between the last item in a section and the text of
> the following header
About this, I didn't find any way to find if a section it's the first, so I set a negative margin to the listview to compensate the topmargin the first section has. There is a better way to implement that?
[0]https:/
- 876. By Riccardo Padovani
-
addressed osomon's comments
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:876
http://
Executed test runs:
UNSTABLE: http://
UNSTABLE: http://
FAILURE: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
Francis Ginther (fginther) wrote : | # |
The jenkins node for the amd64 build failed, I've restarted a new ci run.
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:876
http://
Executed test runs:
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
Riccardo Padovani (rpadovani) wrote : | # |
The failure seems unrelated to the branch (maybe is due [0]?).
Anyway, if [1] lands the test shouldn't fail again.
[0] https:/
[1] https:/
Olivier Tilloy (osomon) wrote : | # |
The test failure is unrelated indeed.
This looks much better now. A bunch of additional minor remarks:
- When in multi-selection mode, the checkbox is shifted a bit to the right (between 0.5 and 1 GU), and is not aligned with the section header
- According to the visual spec, the background of the toolbar seems to be white
- When in multi-selection mode, scrolling the list up makes it overlap with the toolbar. Can the toolbar be made to appear on top of the list?
- When an entry is selected, it’s highlighted, but it’s not in the visual spec
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:876
http://
Executed test runs:
SUCCESS: http://
FAILURE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
FAILURE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
Riccardo Padovani (rpadovani) wrote : | # |
> This looks much better now. A bunch of additional minor remarks:
>
> - When in multi-selection mode, the checkbox is shifted a bit to the right
> (between 0.5 and 1 GU), and is not aligned with the section header
Wow, I didn't notice this! I spend some time to understand the difference, but I fixed it now
> - According to the visual spec, the background of the toolbar seems to be
> white
Fixed
>
> - When in multi-selection mode, scrolling the list up makes it overlap with
> the toolbar. Can the toolbar be made to appear on top of the list?
Fixed
> - When an entry is selected, it’s highlighted, but it’s not in the visual
> spec
I fixed that, but there is a little color change, because you asked[0] a response when there user click on something, so there is a color change on mouseArea.pressed.
Atm, I don't have an idea to avoid this color change... Suggestions?
[0]https:/
- 877. By Riccardo Padovani
-
Addressed some issues raised by oSoMoN
Olivier Tilloy (osomon) wrote : | # |
That looks great now, very close to the visual design spec.
For the implementation of the buttons in the topBar, couldn’t you use the ToolbarButton standard component (http://
If not, you should probably make them an AbstractButton that contains both Icon and a Label (instead of Text), and have the font size defined by the 'fontSize' property (http://
- 878. By Riccardo Padovani
-
refactoring topbar in history page
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:877
http://
Executed test runs:
UNSTABLE: http://
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
- 879. By Riccardo Padovani
-
Fixing actions
Riccardo Padovani (rpadovani) wrote : | # |
You're totally right, now the code is cleaner!
But, for some reasons, onTriggered doesn't work, so I had to use MouseArea... Hope it's good in any case!
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:879
http://
Executed test runs:
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
Olivier Tilloy (osomon) wrote : | # |
Ah, sorry for suggesting the use of ToolbarButton, it is apparently deprecated (or meant to be anyway, I don’t see any reference to it being obsolete in the online docs, but I clearly remember a conversation with the UITK folks in which they said it shouldn’t be used anymore).
I now remember that I wrote a custom ToolbarAction component (src/app/
See how to use it here: http://
- 880. By Riccardo Padovani
-
Replaced ToolbarButton with ToolbarAction
Riccardo Padovani (rpadovani) wrote : | # |
Updated :-)
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:880
http://
Executed test runs:
UNSTABLE: http://
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
Olivier Tilloy (osomon) wrote : | # |
Thanks!
Sorry if it looks like I’m picking nits here, but the anchor changes in ListItemWithAct
- 881. By Riccardo Padovani
-
Removed modifications from ListItemWithAct
ions.qml
Riccardo Padovani (rpadovani) wrote : | # |
No, you're totally right, I shouldn't modify upstream component if isn't strictly needed (as for color).
I removed the anchors edit and implemented it in HistoryView.qml
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:881
http://
Executed test runs:
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
Olivier Tilloy (osomon) wrote : | # |
That looks great now, thanks!
One last tiny suggestion, and it will be good to merge: in topBar, the item that contains the actions doesn’t need to be a Rectangle, as it has nothing to actually draw, it could be replaced by an Item. And instead of setting its width and height, just use anchors.
- 882. By Riccardo Padovani
-
Addressed osomon's comment about anchors and rectangle/item
Riccardo Padovani (rpadovani) wrote : | # |
Done :-)
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:882
http://
Executed test runs:
SUCCESS: http://
FAILURE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
FAILURE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:882
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
FAILURE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
Click here to trigger a rebuild:
http://
Preview Diff
1 | === modified file 'src/app/webbrowser/HistorySectionDelegate.qml' |
2 | --- src/app/webbrowser/HistorySectionDelegate.qml 2014-10-15 19:14:09 +0000 |
3 | +++ src/app/webbrowser/HistorySectionDelegate.qml 2015-02-25 07:53:54 +0000 |
4 | @@ -21,13 +21,14 @@ |
5 | import Ubuntu.Components.ListItems 1.0 as ListItem |
6 | |
7 | Item { |
8 | - height: units.gu(3) |
9 | + height: units.gu(6.5) |
10 | |
11 | Label { |
12 | anchors { |
13 | left: parent.left |
14 | right: parent.right |
15 | top: parent.top |
16 | + topMargin: units.gu(2.5) |
17 | } |
18 | height: units.gu(2) |
19 | |
20 | @@ -57,6 +58,7 @@ |
21 | left: parent.left |
22 | right: parent.right |
23 | bottom: parent.bottom |
24 | + bottomMargin: units.gu(1) |
25 | } |
26 | } |
27 | } |
28 | |
29 | === modified file 'src/app/webbrowser/HistoryView.qml' |
30 | --- src/app/webbrowser/HistoryView.qml 2014-11-12 11:04:34 +0000 |
31 | +++ src/app/webbrowser/HistoryView.qml 2015-02-25 07:53:54 +0000 |
32 | @@ -35,68 +35,6 @@ |
33 | color: "#f6f6f6" |
34 | } |
35 | |
36 | - Item { |
37 | - id: topBar |
38 | - visible: domainsListView.isInSelectionMode |
39 | - |
40 | - onVisibleChanged: visible ? topBarOpenAnimation.start() : topBarCloseAnimation.start() |
41 | - |
42 | - anchors { left: parent.left; right: parent.right; top: parent.top } |
43 | - |
44 | - Icon { |
45 | - name: "close" |
46 | - anchors { |
47 | - top: parent.top; |
48 | - bottom: parent.bottom; |
49 | - left: parent.left; |
50 | - margins: units.gu(1) |
51 | - } |
52 | - width: height |
53 | - MouseArea { |
54 | - anchors.fill: parent |
55 | - onClicked: domainsListView.cancelSelection() |
56 | - } |
57 | - } |
58 | - Icon { |
59 | - name: "select" |
60 | - anchors { |
61 | - top: parent.top; |
62 | - bottom: parent.bottom; |
63 | - right: deleteIcon.left; |
64 | - margins: units.gu(1) |
65 | - } |
66 | - width: height |
67 | - MouseArea { |
68 | - anchors.fill: parent |
69 | - onClicked: { |
70 | - if (domainsListView.selectedItems.count === domainsListView.count) { |
71 | - domainsListView.clearSelection() |
72 | - } else { |
73 | - domainsListView.selectAll() |
74 | - } |
75 | - } |
76 | - } |
77 | - } |
78 | - Icon { |
79 | - id: deleteIcon |
80 | - enabled: domainsListView.selectedItems.count > 0 |
81 | - name: "delete" |
82 | - anchors { |
83 | - top: parent.top; |
84 | - bottom: parent.bottom; |
85 | - right: parent.right; |
86 | - margins: units.gu(1) |
87 | - } |
88 | - width: height |
89 | - MouseArea { |
90 | - anchors.fill: parent |
91 | - onClicked: { |
92 | - domainsListView.endSelection() |
93 | - } |
94 | - } |
95 | - } |
96 | - } |
97 | - |
98 | UbuntuNumberAnimation { |
99 | id: topBarOpenAnimation |
100 | target: topBar |
101 | @@ -123,7 +61,8 @@ |
102 | left: parent.left |
103 | right: parent.right |
104 | bottom: toolbar.top |
105 | - margins: units.gu(2) |
106 | + topMargin: units.gu(-0.5) // topMargin 2 - firstSection.topMargin 2.5 |
107 | + rightMargin: units.gu(2) |
108 | } |
109 | |
110 | listModel: HistoryDomainListChronologicalModel { |
111 | @@ -136,7 +75,9 @@ |
112 | |
113 | section.property: "lastVisitDate" |
114 | section.delegate: HistorySectionDelegate { |
115 | - width: parent.width |
116 | + width: parent.width - units.gu(2) |
117 | + anchors.left: parent.left |
118 | + anchors.leftMargin: units.gu(2) |
119 | } |
120 | |
121 | onSelectionDone: { |
122 | @@ -163,6 +104,16 @@ |
123 | removalAnimation.start() |
124 | } |
125 | |
126 | + anchors { |
127 | + left: parent.left |
128 | + // we need to move left the favicon to align the favicon to |
129 | + // other elements. Favicon has a container bigger than it. |
130 | + // units.gu(3) it's the size of the favicon container |
131 | + // units.dp(16) it's the size of the favicon |
132 | + // the favicon is hCentered in the container |
133 | + leftMargin: selectionMode ? - (units.gu(3) - units.dp(16)) / 2 : 0 |
134 | + } |
135 | + |
136 | selectionMode: domainsListView.isInSelectionMode |
137 | selected: domainsListView.isSelected(urlDelegate) |
138 | |
139 | @@ -299,4 +250,87 @@ |
140 | } |
141 | } |
142 | } |
143 | + |
144 | + Item { |
145 | + id: topBar |
146 | + visible: domainsListView.isInSelectionMode |
147 | + |
148 | + onVisibleChanged: visible ? topBarOpenAnimation.start() : topBarCloseAnimation.start() |
149 | + |
150 | + anchors { left: parent.left; right: parent.right; top: parent.top } |
151 | + |
152 | + Rectangle { |
153 | + width: parent.width |
154 | + height: parent.height + units.gu(1.5) |
155 | + color: "white" |
156 | + } |
157 | + |
158 | + Item { |
159 | + anchors { |
160 | + top: parent.top |
161 | + left: parent.left |
162 | + leftMargin: units.gu(2) |
163 | + bottom: parent.bottom |
164 | + right: parent.right |
165 | + rightMargin: units.gu(2) |
166 | + } |
167 | + |
168 | + ToolbarAction { |
169 | + iconName: "back" |
170 | + text: i18n.tr("Cancel") |
171 | + |
172 | + MouseArea { |
173 | + anchors.fill: parent |
174 | + onClicked: domainsListView.cancelSelection() |
175 | + } |
176 | + |
177 | + anchors.left: parent.left |
178 | + |
179 | + height: parent.height |
180 | + width: height |
181 | + } |
182 | + |
183 | + ToolbarAction { |
184 | + iconName: "select" |
185 | + text: i18n.tr("Select all") |
186 | + |
187 | + MouseArea { |
188 | + anchors.fill: parent |
189 | + onClicked: { |
190 | + if (domainsListView.selectedItems.count === domainsListView.count) { |
191 | + domainsListView.clearSelection() |
192 | + } else { |
193 | + domainsListView.selectAll() |
194 | + } |
195 | + } |
196 | + } |
197 | + |
198 | + anchors { |
199 | + right: deleteButton.left |
200 | + rightMargin: units.gu(2) |
201 | + } |
202 | + |
203 | + height: parent.height |
204 | + width: height |
205 | + } |
206 | + |
207 | + ToolbarAction { |
208 | + id: deleteButton |
209 | + |
210 | + iconName: "delete" |
211 | + text: i18n.tr("Delete") |
212 | + enabled: domainsListView.selectedItems.count > 0 |
213 | + |
214 | + MouseArea { |
215 | + anchors.fill: parent |
216 | + onClicked: domainsListView.endSelection() |
217 | + } |
218 | + |
219 | + anchors.right: parent.right |
220 | + |
221 | + height: parent.height |
222 | + width: height |
223 | + } |
224 | + } |
225 | + } |
226 | } |
227 | |
228 | === modified file 'src/app/webbrowser/upstreamcomponents/ListItemWithActions.qml' |
229 | --- src/app/webbrowser/upstreamcomponents/ListItemWithActions.qml 2014-10-17 10:30:33 +0000 |
230 | +++ src/app/webbrowser/upstreamcomponents/ListItemWithActions.qml 2015-02-25 07:53:54 +0000 |
231 | @@ -219,7 +219,7 @@ |
232 | } |
233 | |
234 | width: parent.width |
235 | - color: root.selected || (mouseArea.pressed && swipeState === "Normal" )? root.selectedColor : root.color |
236 | + color: mouseArea.pressed && swipeState === "Normal" ? root.selectedColor : root.color |
237 | |
238 | Loader { |
239 | id: selectionIcon |
FAILED: Continuous integration, rev:875 jenkins. qa.ubuntu. com/job/ webbrowser- app-ci/ 1389/ jenkins. qa.ubuntu. com/job/ generic- deb-autopilot- vivid-touch/ 971 jenkins. qa.ubuntu. com/job/ generic- mediumtests- vivid/446 jenkins. qa.ubuntu. com/job/ webbrowser- app-vivid- amd64-ci/ 147 jenkins. qa.ubuntu. com/job/ webbrowser- app-vivid- armhf-ci/ 147 jenkins. qa.ubuntu. com/job/ webbrowser- app-vivid- armhf-ci/ 147/artifact/ work/output/ *zip*/output. zip jenkins. qa.ubuntu. com/job/ webbrowser- app-vivid- i386-ci/ 147 jenkins. qa.ubuntu. com/job/ generic- deb-autopilot- runner- vivid-mako/ 860 jenkins. qa.ubuntu. com/job/ generic- mediumtests- builder- vivid-armhf/ 969 jenkins. qa.ubuntu. com/job/ generic- mediumtests- builder- vivid-armhf/ 969/artifact/ work/output/ *zip*/output. zip s-jenkins. ubuntu- ci:8080/ job/touch- flash-device/ 17414 jenkins. qa.ubuntu. com/job/ autopilot- testrunner- otto-vivid/ 367 jenkins. qa.ubuntu. com/job/ generic- mediumtests- builder- vivid-amd64/ 538 jenkins. qa.ubuntu. com/job/ generic- mediumtests- builder- vivid-amd64/ 538/artifact/ work/output/ *zip*/output. zip
http://
Executed test runs:
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild: s-jenkins. ubuntu- ci:8080/ job/webbrowser- app-ci/ 1389/rebuild
http://