Merge lp:~3v1n0/ubuntu-themes/list-theming into lp:ubuntu-themes

Proposed by Marco Trevisan (Treviño) on 2018-03-07
Status: Merged
Approved by: Andrea Azzarone on 2018-03-22
Approved revision: 609
Merged at revision: 602
Proposed branch: lp:~3v1n0/ubuntu-themes/list-theming
Merge into: lp:ubuntu-themes
Diff against target: 541 lines (+249/-23)
2 files modified
Ambiance/gtk-3.20/gtk-widgets.css (+123/-12)
Radiance/gtk-3.20/gtk-widgets.css (+126/-11)
To merge this branch: bzr merge lp:~3v1n0/ubuntu-themes/list-theming
Reviewer Review Type Date Requested Status
Andrea Azzarone (community) 2018-03-13 Approve on 2018-03-22
Daniel van Vugt 2018-03-07 Abstain on 2018-03-22
Ubuntu Artwork Packagers 2018-03-13 Pending
Review via email: mp+341003@code.launchpad.net

Commit message

list, row: set padding, use white bg and hover effect on activatable

Also in sidebar show frames around sidebar but avoid double ones

Description of the change

To post a comment you must log in.
Daniel van Vugt (vanvugt) wrote :

This seems to break the list in Settings a bit:

(1) Alternating background (every second item) is the same colour as the selection.

(2) Text colour is white on light grey (unreadable).

And pre-existing bugs should be fixed but aren't:

(3) Some list items (like the monitor name in Settings > Color) never highlight. Works in Adwaita.

(4) List in bubble menus (Settings > Displays > Resolution etc) are a mixture of grey and white backgrounds.

(5) The background area around the Settings > Color > 'Add profile' and 'Calibrate' buttons is still missing in Ambiance (but not in Adwaita).

---
So this feels like more of a step backwards. Maybe try fixing each issue in separate smaller branches?

review: Needs Fixing
Daniel van Vugt (vanvugt) wrote :

(3) I mean the hover effect is missing in Settings > Color

lp:~3v1n0/ubuntu-themes/list-theming updated on 2018-03-21
604. By Marco Trevisan (Treviño) on 2018-03-21

Ambiance: use darker color in hover for zebra-stripped lists

605. By Marco Trevisan (Treviño) on 2018-03-21

Radiance: add zebra-stripping (as in Ambiance)

606. By Marco Trevisan (Treviño) on 2018-03-21

Ambiance, Radiance: just apply opacity to dimmed/disabled text child of selected items

607. By Marco Trevisan (Treviño) on 2018-03-21

Ambiance, Radiance: apply .inline-toolbar to all widget kinds

608. By Marco Trevisan (Treviño) on 2018-03-21

Ambiance, Radiance: use flat background for .inline-toolbar's in stack's

Marco Trevisan (Treviño) (3v1n0) wrote :

As also said on IRC, g-c-c is the worse example where to test such changes, as it embeds a theme change which would override these changes.

So these fixes should be landed together with the debdiff included here:
 https://bugs.launchpad.net/ubuntu/+source/gnome-control-center/+bug/1757471

> (1) Alternating background (every second item) is the same colour as the
> selection.

Thank for pointing out, I've fixed this case. Now we use a darker hover color when using the zebra-lists.

> (2) Text colour is white on light grey (unreadable).

Fixed.

> And pre-existing bugs should be fixed but aren't:
>
> (3) Some list items (like the monitor name in Settings > Color) never
> highlight. Works in Adwaita.
> (3) I mean the hover effect is missing in Settings > Color

This is fixed here, but the theme override won't show it.

> (4) List in bubble menus (Settings > Displays > Resolution etc) are a mixture
> of grey and white backgrounds.

Works here. Again, after removing the g-c-c patch.

> (5) The background area around the Settings > Color > 'Add profile' and
> 'Calibrate' buttons is still missing in Ambiance (but not in Adwaita).

Thanks, this is a different part of the theme which wasn't covered at all.
I've fixed this too.

lp:~3v1n0/ubuntu-themes/list-theming updated on 2018-03-22
609. By Marco Trevisan (Treviño) on 2018-03-22

Ambiance, Radiance: use darker separator color in zebra-stripped lists

Daniel van Vugt (vanvugt) :
review: Abstain
Andrea Azzarone (azzar1) wrote :

gnome-control-center (after removing the patch) works fine here.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
2--- Ambiance/gtk-3.20/gtk-widgets.css 2018-01-22 12:01:07 +0000
3+++ Ambiance/gtk-3.20/gtk-widgets.css 2018-03-22 02:10:57 +0000
4@@ -551,6 +551,44 @@
5 border-top-color: shade (@backdrop_selected_bg_color, 0.9);
6 }
7
8+stacksidebar row {
9+ padding: 10px 4px;
10+}
11+
12+stacksidebar row > label {
13+ padding-left: 6px;
14+ padding-right: 6px;
15+}
16+
17+stacksidebar row.needs-attention > label {
18+ background-size: 6px 6px, 0 0;
19+}
20+
21+list row {
22+ border-image: none;
23+}
24+
25+list row:selected,
26+list row:selected:backdrop {
27+ background-image: none;
28+ border: none;
29+}
30+
31+list row.activatable:hover,
32+list row.has-open-popup {
33+ background-color: shade (@base_color, 0.965);
34+}
35+
36+list row.activatable:hover:selected,
37+list row.has-open-popup:selected {
38+ background-color: shade (alpha (@selected_bg_color, 0.9), 0.965);
39+}
40+
41+list row.activatable:selected:backdrop:hover,
42+list row.has-open-popup:selected:backdrop {
43+ background-color: shade (alpha (@backdrop_selected_bg_color, 0.9), 0.965);
44+}
45+
46 /*******************
47 * check and radio *
48 *******************/
49@@ -588,6 +626,7 @@
50 background: none;
51 }
52
53+list separator,
54 menu radio * {
55 box-shadow: none;
56 }
57@@ -796,7 +835,8 @@
58 /*********
59 * frame *
60 *********/
61-.frame {
62+.frame,
63+frame > border {
64 border-radius: 3px;
65 border-width: 1px;
66 border-style: solid;
67@@ -820,7 +860,8 @@
68 background: none;
69 }
70
71-.frame.flat, frame border.flat {
72+frame > border.flat,
73+.frame.flat {
74 border: none;
75 }
76
77@@ -837,7 +878,8 @@
78 * iconview *
79 ************/
80
81-.view {
82+.view,
83+list {
84 background-color: @base_color;
85 color: @text_color;
86 }
87@@ -1030,7 +1072,7 @@
88 .menubar {
89 -GtkWidget-window-dragging: true;
90
91- background-color: @dark_bg_color;
92+ background-color: shade (@dark_bg_color, 1.10);
93 background-image: none;
94 border-width: 0;
95
96@@ -1892,8 +1934,14 @@
97 border-right-color: alpha (shade (@bg_color, 1.26), 0.6);
98 }
99
100+list separator {
101+ border: 0;
102+ background: shade (@bg_color, 0.92);
103+}
104+
105 treeview.view separator,
106 treeview separator,
107+list separator,
108 separator,
109 separator:hover {
110 color: shade (@bg_color, 0.92);
111@@ -1951,7 +1999,8 @@
112
113 filechooser box.search-bar,
114 #pathbarbox,
115-placessidebar.sidebar {
116+placessidebar.sidebar,
117+placessidebar.sidebar list {
118 background-color: shade (@bg_color, 0.95);
119
120 color: @fg_color;
121@@ -1960,21 +2009,32 @@
122
123 filechooser:backdrop box.search-bar,
124 #pathbarbox:backdrop,
125-placessidebar.sidebar:backdrop {
126+.sidebar list:backdrop,
127+placessidebar.sidebar:backdrop,
128+placessidebar.sidebar list:backdrop {
129 color: mix (@fg_color, shade (@bg_color, 0.95), 0.2);
130 text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.02);
131 }
132
133-placessidebar.sidebar row {
134+placessidebar.sidebar row,
135+placessidebar.sidebar list row,
136+.sidebar list {
137 min-height: 30px;
138 }
139
140-placessidebar.sidebar row:selected {
141+placessidebar.sidebar list row.activatable:hover:not(:selected),
142+placessidebar.sidebar list row.has-open-popup {
143+ background-color: shade (shade (@bg_color, 0.95), 0.965);
144+}
145+
146+placessidebar.sidebar row:selected,
147+placessidebar.sidebar list row:selected {
148 color: @selected_fg_color;
149 text-shadow: 0 1px shade (@selected_bg_color, 0.7);
150 }
151
152-placessidebar.sidebar row:selected:backdrop {
153+placessidebar.sidebar row:selected:backdrop,
154+placessidebar.sidebar list row:selected:backdrop {
155 background-image: -gtk-gradient (linear, left top, left bottom,
156 from (shade (shade (@bg_color, 0.95), 0.94)),
157 to (shade (shade (@bg_color, 0.95), 0.86)));
158@@ -1984,11 +2044,39 @@
159 text-shadow: 0 1px shade (shade (@bg_color, 0.95), 0.96);
160 }
161
162-placessidebar.sidebar .sidebar-icon {
163+placessidebar.sidebar .sidebar-icon,
164+placessidebar.sidebar list .sidebar-icon {
165 padding-left: 10px;
166 padding-right: 10px;
167 }
168
169+.sidebar,
170+paned .sidebar.left,
171+paned .sidebar.right,
172+paned .sidebar.left:dir(rtl),
173+paned .sidebar:dir(rtl),
174+paned .sidebar:dir(ltr),
175+paned .sidebar {
176+ border-style: none;
177+ background-color: transparent;
178+}
179+
180+stacksidebar.sidebar:dir(ltr) list,
181+stacksidebar.sidebar.left list,
182+stacksidebar.sidebar.left:dir(rtl) list,
183+.sidebar:dir(ltr),
184+.sidebar.left,
185+.sidebar.left:dir(rtl) {
186+ border-right: 1px solid shade (@bg_color, 0.82);
187+ border-left-style: none;
188+}
189+
190+stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl),
191+stacksidebar.sidebar.right list .sidebar:dir(rtl),
192+.sidebar.right {
193+ border-left: 1px solid shade (@bg_color, 0.82);
194+ border-right-style: none;
195+}
196
197 /**************
198 * spinbutton *
199@@ -2885,7 +2973,7 @@
200 }
201
202 /* inline-toolbar */
203-.inline-toolbar.toolbar {
204+.inline-toolbar {
205 -GtkToolbar-button-relief: normal;
206
207 border-right-color: shade (@bg_color, 0.86);
208@@ -2904,6 +2992,11 @@
209 padding: 3px 4px 4px 4px;
210 }
211
212+stack .inline-toolbar {
213+ background-color: shade (#f2f1ef, 0.97);
214+ background-image: none;
215+}
216+
217 .inline-toolbar.toolbar button {
218 padding: 4px;
219
220@@ -3037,11 +3130,20 @@
221 background-image: none;
222 }
223
224-.view row:nth-child(odd) {
225+.view row:nth-child(odd):not(:selected) {
226 /* zebra stripping, see LP#945430 */
227 background-color: shade (@base_color, 0.965);
228 }
229
230+.view row.activatable:hover,
231+.view row.has-open-popup {
232+ background-color: shade (@base_color, 0.92);
233+}
234+
235+.view row ~ separator {
236+ background-color: shade (@bg_color, 0.83);
237+}
238+
239 treeview.view {
240 border-width: 1px;
241 border-color: @selected_bg_color;
242@@ -3308,6 +3410,13 @@
243 /*****************************************************************************
244 * states [please keep this section at the end of the file (CSS precedence)] *
245 *****************************************************************************/
246+*:selected *:disabled:not(:backdrop),
247+*:selected .dim-label:not(:backdrop) {
248+ color: inherit;
249+ opacity: 0.65;
250+ text-shadow: none;
251+}
252+
253 .dim-label,
254 *:disabled {
255 color: shade (@bg_color, 0.6);
256@@ -3320,6 +3429,7 @@
257 label selection:hover,
258 entry selection,
259 .view text selection,
260+list row:selected,
261 *:selected,
262 *:selected:focus {
263 background-color: alpha (@selected_bg_color, 0.9);
264@@ -3329,6 +3439,7 @@
265
266 entry selection:backdrop,
267 .view text selection:backdrop,
268+list row:selected:backdrop,
269 *:selected:backdrop,
270 *:selected:focus:backdrop {
271 background-color: alpha (@backdrop_selected_bg_color, 0.9);
272
273=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
274--- Radiance/gtk-3.20/gtk-widgets.css 2018-01-22 12:01:07 +0000
275+++ Radiance/gtk-3.20/gtk-widgets.css 2018-03-22 02:10:57 +0000
276@@ -553,6 +553,44 @@
277 color: @backdrop_selected_fg_color;
278 }
279
280+stacksidebar row {
281+ padding: 10px 4px;
282+}
283+
284+stacksidebar row > label {
285+ padding-left: 6px;
286+ padding-right: 6px;
287+}
288+
289+stacksidebar row.needs-attention > label {
290+ background-size: 6px 6px, 0 0;
291+}
292+
293+list row {
294+ border-image: none;
295+}
296+
297+list row:selected,
298+list row:selected:backdrop {
299+ background-image: none;
300+ border: none;
301+}
302+
303+list row.activatable:hover,
304+list row.has-open-popup {
305+ background-color: shade (@base_color, 0.965);
306+}
307+
308+list row.activatable:hover:selected,
309+list row.has-open-popup:selected {
310+ background-color: shade (alpha (@selected_bg_color, 0.9), 0.965);
311+}
312+
313+list row.activatable:selected:backdrop:hover,
314+list row.has-open-popup:selected:backdrop {
315+ background-color: shade (alpha (@backdrop_selected_bg_color, 0.9), 0.965);
316+}
317+
318 /*******************
319 * check and radio *
320 *******************/
321@@ -590,6 +628,7 @@
322 background: none;
323 }
324
325+list separator,
326 menu radio * {
327 box-shadow: none;
328 }
329@@ -807,7 +846,8 @@
330 /*********
331 * frame *
332 *********/
333-.frame {
334+.frame,
335+frame > border {
336 border-radius: 3px;
337 border-width: 1px;
338 border-style: solid;
339@@ -831,7 +871,8 @@
340 background: none;
341 }
342
343-.frame.flat, frame border.flat {
344+frame > border.flat,
345+.frame.flat {
346 border: none;
347 }
348
349@@ -848,7 +889,8 @@
350 * iconview *
351 ************/
352
353-.view {
354+.view,
355+list {
356 background-color: @base_color;
357 color: @text_color;
358 }
359@@ -1041,7 +1083,7 @@
360 .menubar {
361 -GtkWidget-window-dragging: true;
362
363- background-color: @dark_bg_color;
364+ background-color: shade (@dark_bg_color, 1.10);
365 background-image: none;
366 border-width: 0;
367
368@@ -1893,8 +1935,14 @@
369 border-right-color: alpha (shade (@bg_color, 1.26), 0.6);
370 }
371
372+list separator {
373+ border: 0;
374+ background: shade (@bg_color, 0.92);
375+}
376+
377 treeview.view separator,
378 treeview separator,
379+list separator,
380 separator,
381 separator:hover {
382 color: shade (@bg_color, 0.92);
383@@ -1952,7 +2000,8 @@
384
385 filechooser box.search-bar,
386 #pathbarbox,
387-placessidebar.sidebar {
388+placessidebar.sidebar,
389+placessidebar.sidebar list {
390 background-color: shade (@bg_color, 0.95);
391
392 color: @fg_color;
393@@ -1961,21 +2010,32 @@
394
395 filechooser:backdrop box.search-bar,
396 #pathbarbox:backdrop,
397-placessidebar.sidebar:backdrop {
398+.sidebar list:backdrop,
399+placessidebar.sidebar:backdrop,
400+placessidebar.sidebar list:backdrop {
401 color: mix (@fg_color, shade (@bg_color, 0.95), 0.2);
402 text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.02);
403 }
404
405-placessidebar.sidebar row {
406+placessidebar.sidebar row,
407+placessidebar.sidebar list row,
408+.sidebar list {
409 min-height: 30px;
410 }
411
412-placessidebar.sidebar row:selected {
413+placessidebar.sidebar list row.activatable:hover:not(:selected),
414+placessidebar.sidebar list row.has-open-popup {
415+ background-color: shade (shade (@bg_color, 0.95), 0.965);
416+}
417+
418+placessidebar.sidebar row:selected,
419+placessidebar.sidebar list row:selected {
420 color: @selected_fg_color;
421 text-shadow: 0 1px shade (@selected_bg_color, 0.7);
422 }
423
424-placessidebar.sidebar row:selected:backdrop {
425+placessidebar.sidebar row:selected:backdrop,
426+placessidebar.sidebar list row:selected:backdrop {
427 background-image: -gtk-gradient (linear, left top, left bottom,
428 from (shade (shade (@bg_color, 0.95), 0.94)),
429 to (shade (shade (@bg_color, 0.95), 0.86)));
430@@ -1985,11 +2045,39 @@
431 text-shadow: 0 1px shade (shade (@bg_color, 0.95), 0.96);
432 }
433
434-placessidebar.sidebar .sidebar-icon {
435+placessidebar.sidebar .sidebar-icon,
436+placessidebar.sidebar list .sidebar-icon {
437 padding-left: 10px;
438 padding-right: 10px;
439 }
440
441+.sidebar,
442+paned .sidebar.left,
443+paned .sidebar.right,
444+paned .sidebar.left:dir(rtl),
445+paned .sidebar:dir(rtl),
446+paned .sidebar:dir(ltr),
447+paned .sidebar {
448+ border-style: none;
449+ background-color: transparent;
450+}
451+
452+stacksidebar.sidebar:dir(ltr) list,
453+stacksidebar.sidebar.left list,
454+stacksidebar.sidebar.left:dir(rtl) list,
455+.sidebar:dir(ltr),
456+.sidebar.left,
457+.sidebar.left:dir(rtl) {
458+ border-right: 1px solid shade (@bg_color, 0.82);
459+ border-left-style: none;
460+}
461+
462+stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl),
463+stacksidebar.sidebar.right list .sidebar:dir(rtl),
464+.sidebar.right {
465+ border-left: 1px solid shade (@bg_color, 0.82);
466+ border-right-style: none;
467+}
468
469 /**************
470 * spinbutton *
471@@ -2889,7 +2977,7 @@
472 }
473
474 /* inline-toolbar */
475-.inline-toolbar.toolbar {
476+.inline-toolbar {
477 -GtkToolbar-button-relief: normal;
478
479 border-right-color: shade (@bg_color, 0.86);
480@@ -2908,6 +2996,11 @@
481 padding: 3px 4px 4px 4px;
482 }
483
484+stack .inline-toolbar {
485+ background-color: shade (#f2f1ef, 0.97);
486+ background-image: none;
487+}
488+
489 .inline-toolbar.toolbar button {
490 padding: 4px;
491
492@@ -3041,6 +3134,19 @@
493 background-image: none;
494 }
495
496+.view row:nth-child(odd):not(:selected) {
497+ background-color: shade (@base_color, 0.965);
498+}
499+
500+.view row.activatable:hover,
501+.view row.has-open-popup {
502+ background-color: shade (@base_color, 0.92);
503+}
504+
505+.view row ~ separator {
506+ background-color: shade (@bg_color, 0.83);
507+}
508+
509 treeview.view {
510 border-width: 1px;
511 border-color: @selected_bg_color;
512@@ -3307,6 +3413,13 @@
513 /*****************************************************************************
514 * states [please keep this section at the end of the file (CSS precedence)] *
515 *****************************************************************************/
516+ *:selected *:disabled:not(:backdrop),
517+ *:selected .dim-label:not(:backdrop) {
518+ color: inherit;
519+ opacity: 0.65;
520+ text-shadow: none;
521+}
522+
523 *:disabled {
524 color: shade (@bg_color, 0.6);
525 text-shadow: 0 1px alpha (shade (@bg_color, 1.25), 0.5);
526@@ -3318,6 +3431,7 @@
527 label selection:hover,
528 entry selection,
529 .view text selection,
530+list row:selected,
531 *:selected,
532 *:selected:focus {
533 background-color: alpha (@selected_bg_color, 0.9);
534@@ -3327,6 +3441,7 @@
535
536 entry selection:backdrop,
537 .view text selection:backdrop,
538+list row:selected:backdrop,
539 *:selected:backdrop,
540 *:selected:focus:backdrop {
541 background-color: alpha (@backdrop_selected_bg_color, 0.9);

Subscribers

People subscribed via source and target branches