Merge lp:~c-lobrano/ubuntu-themes/pathbar-review into lp:ubuntu-themes

Proposed by Carlo Lobrano on 2018-04-08
Status: Merged
Approved by: Marco Trevisan (Treviño) on 2018-04-20
Approved revision: 621
Merged at revision: 622
Proposed branch: lp:~c-lobrano/ubuntu-themes/pathbar-review
Merge into: lp:ubuntu-themes
Diff against target: 186 lines (+91/-20)
3 files modified
Ambiance/gtk-3.20/gtk-widgets.css (+44/-12)
Radiance/gtk-3.20/gtk-widgets-radiance.css (+1/-2)
Radiance/gtk-3.20/gtk-widgets.css (+46/-6)
To merge this branch: bzr merge lp:~c-lobrano/ubuntu-themes/pathbar-review
Reviewer Review Type Date Requested Status
Marco Trevisan (Treviño) 2018-04-08 Approve on 2018-04-20
Review via email: mp+342836@code.launchpad.net

Commit message

Ambiance, Radiance: Review of pathbar and stackswitcher buttons

In order to solve inconsistencies in Nautilus Path bar and in stackswitcher buttons:

Changed checked state:
- from background color change to light "3D pressed button effect"

Changed disabled state: background is now the same as enabled button, but
- label is dimmed (as it was before)
- borders are dimmed

Change proposed and designed at https://github.com/CanonicalLtd/desktop-design/issues/28

To post a comment you must log in.
Marco Trevisan (Treviño) (3v1n0) wrote :

Couple of things here:
 1. Maybe a bit more inner shadow would be nicer, but not sure... There was some discussion already in github, but maybe somethin more closer to the mockup
 2. Could you provide an .svg too for the generated borders .png?

Cheers

Carlo Lobrano (c-lobrano) wrote :

Hi Marco,

right, I misunderstood the discussion on github, I'll increase the shadow.
About the borders, do you need both .svg and .png, is that right? Which one will be used?

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

PNGs have to be used, but the .svg should be included in the source code in case we need to edit it quickly or in case we need to regenerate it for bigger scaling.

Carlo Lobrano (c-lobrano) wrote :

At this link there are some variations I tried

https://paper.dropbox.com/doc/UT-pathbar-XbMB0Y4jGlv0YgKfOlw09

It is a full list of the attempts I tracked, so the firsts are probably not what you meant, but the last 3 might

Carlo Lobrano (c-lobrano) wrote :

Hi Trevinho, sorry for the late reply. I should be able to check it on
Thursday, hope it is not too late

Il lun 16 apr 2018, 23:01 Marco Trevisan (Treviño) <mail@3v1n0.net> ha
scritto:

> I guess this is the best compromise:
>
>
> https://photos-6.dropbox.com/t/2/AAC_6sGju6e4ivZWkTfAiMyMRrbxxHkox8ZCimGaOVpnkQ/12/489501/png/2048x1/5/1523926800/0/10/image.png/_/png%2520https%253A%252F%252Fd2mxuefqeaa7sj.cloudfront.net%252Fs_68309CEF1ACE56932BF20E99D6B8C0AA9D907E677135141F9D2031A1C215D473_1523392306594_file.png
>
> The 6th from the start (commented there too).
>
> Any chance for the .svg's? Anyway I'd prefer to land this this week... :)
> --
>
> https://code.launchpad.net/~c-lobrano/ubuntu-themes/pathbar-review/+merge/342836
> You are the owner of lp:~c-lobrano/ubuntu-themes/pathbar-review.
>

621. By Carlo Lobrano on 2018-04-19

Ambiance, Radiance: updated pressed effect according to code review

Carlo Lobrano (c-lobrano) wrote :

Updated .css of Ambiance and Radiance with proposed mockup, but I need to ask for help about svg. I tried with both inkscape and online converters but the result was not good

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

Ok, that's fine for now... How these png where generated though?

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

Anyway speaking of the fix itself I think it's a good improvement, so let's go with this.

If we can have someone to create SVGs also would be cool (there are already svg borders in the source code that can be reused).

Cheers

review: Approve
Carlo Lobrano (c-lobrano) wrote :

> How these png where generated though?

I think Mads started from other png

> If we can have someone to create SVGs also would be cool (there are already svg borders in the source code that can be reused).

I will look at that, thank you :)

MadsRH (madsrh) wrote :

> ...there are already svg borders in the source code that can be reused

@Marco Trevisan could you point me to the SVG? Should this be located in the gtk-3.0 assets folder?

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== added file 'Ambiance/gtk-3.0/assets/button-toolbar-disabled.png'
2Binary files Ambiance/gtk-3.0/assets/button-toolbar-disabled.png 1970-01-01 00:00:00 +0000 and Ambiance/gtk-3.0/assets/button-toolbar-disabled.png 2018-04-19 09:54:49 +0000 differ
3=== added file 'Ambiance/gtk-3.0/assets/button-toolbar-disabled@2.png'
4Binary files Ambiance/gtk-3.0/assets/button-toolbar-disabled@2.png 1970-01-01 00:00:00 +0000 and Ambiance/gtk-3.0/assets/button-toolbar-disabled@2.png 2018-04-19 09:54:49 +0000 differ
5=== added file 'Ambiance/gtk-3.0/assets/radiance-button-toolbar-disabled.png'
6Binary files Ambiance/gtk-3.0/assets/radiance-button-toolbar-disabled.png 1970-01-01 00:00:00 +0000 and Ambiance/gtk-3.0/assets/radiance-button-toolbar-disabled.png 2018-04-19 09:54:49 +0000 differ
7=== added file 'Ambiance/gtk-3.0/assets/radiance-button-toolbar-disabled@2.png'
8Binary files Ambiance/gtk-3.0/assets/radiance-button-toolbar-disabled@2.png 1970-01-01 00:00:00 +0000 and Ambiance/gtk-3.0/assets/radiance-button-toolbar-disabled@2.png 2018-04-19 09:54:49 +0000 differ
9=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
10--- Ambiance/gtk-3.20/gtk-widgets.css 2018-03-28 06:27:00 +0000
11+++ Ambiance/gtk-3.20/gtk-widgets.css 2018-04-19 09:54:49 +0000
12@@ -579,7 +579,7 @@
13 color: @link_color;
14 }
15
16-button separator {
17+button separator {
18 color: shade(@bg_color, 1.30);
19 }
20
21@@ -3029,12 +3029,47 @@
22 url("assets/backdrop-button-toolbar@2.png"));
23 }
24
25-.primary-toolbar button:active,
26-headerbar button:active {
27- background-image: -gtk-gradient (linear, left top, left bottom,
28- from (shade (@dark_bg_color, 0.95)),
29- to (shade (@dark_bg_color, 1.0)));
30- text-shadow: 0 -1px shade (@dark_bg_color, 0.6);
31+headerbar .linked button.text-button:checked {
32+ background-color: @dark_bg_color;
33+ border-image: none;
34+ box-shadow: inset 2px 0px 2px -1px shade(@dark_bg_color, 0.5),
35+ inset 0px 2px 2px -1px shade(@dark_bg_color, 0.5),
36+ inset 0px -2px 2px -1px shade(@dark_bg_color, 1.4),
37+ inset -2px 0px 2px -1px shade(@dark_bg_color, 1.4);
38+
39+ margin-bottom: 1px;
40+ margin-top: 1px;
41+}
42+
43+headerbar .linked button.slider-button:first-child:disabled {
44+ box-shadow: inset -1px 0 shade (@dark_bg_color, 0.9);
45+}
46+
47+headerbar stackswitcher.horizontal button.text-button:checked {
48+ background-color: @dark_bg_color;
49+ border-color: @dark_bg_color;
50+ border-image: none;
51+ border-style: solid none;
52+ border-width: 1px 0;
53+ box-shadow: inset 2px 0px 2px -1px shade(@dark_bg_color, 0.5),
54+ inset 0px 1px 2px -1px shade(@dark_bg_color, 0.5),
55+ inset 0px -2px 2px -1px shade(@dark_bg_color, 1.4),
56+ inset -2px 0px 2px -1px shade(@dark_bg_color, 1.4);
57+ margin: 1px 0;
58+}
59+
60+headerbar stackswitcher.horizontal button.text-button:first-child:checked {
61+ border-radius: 6px 0 0 6px;
62+ border-style: solid none solid solid;
63+ border-width: 1px 0 1px 1px;
64+ padding-right: 8px;
65+}
66+
67+headerbar stackswitcher.horizontal button.text-button:last-child:checked {
68+ border-style: solid solid solid none;
69+ border-width: 1px 1px 1px 0;
70+ border-radius: 0 6px 6px 0;
71+ padding-left: 8px;
72 }
73
74 .primary-toolbar button:checked:disabled,
75@@ -3046,11 +3081,8 @@
76
77 .primary-toolbar button:disabled,
78 headerbar button:disabled {
79- background-image: -gtk-gradient (linear, left top, left bottom,
80- from (shade (@dark_bg_color, 1.01)),
81- to (shade (@dark_bg_color, 0.99)));
82- border-image-source: -gtk-scaled(url("assets/button-toolbar.png"),
83- url("assets/button-toolbar@2.png"));
84+ border-image-source: -gtk-scaled(url("assets/button-toolbar-disabled.png"),
85+ url("assets/button-toolbar-disabled@2.png"));
86 }
87
88 .primary-toolbar button.flat:disabled {
89
90=== modified file 'Radiance/gtk-3.20/gtk-widgets-radiance.css'
91--- Radiance/gtk-3.20/gtk-widgets-radiance.css 2017-05-08 17:05:56 +0000
92+++ Radiance/gtk-3.20/gtk-widgets-radiance.css 2018-04-19 09:54:49 +0000
93@@ -96,8 +96,7 @@
94 .primary-toolbar button:disabled,
95 headerbar button:hover,
96 headerbar button:backdrop:hover,
97-headerbar button:active,
98-headerbar button:disabled {
99+headerbar button:active {
100 background-image: -gtk-gradient (linear, left top, left bottom,
101 from (shade (@dark_bg_color, 1.03)),
102 to (shade (@dark_bg_color, 0.96)));
103
104=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
105--- Radiance/gtk-3.20/gtk-widgets.css 2018-03-28 06:27:00 +0000
106+++ Radiance/gtk-3.20/gtk-widgets.css 2018-04-19 09:54:49 +0000
107@@ -2936,7 +2936,6 @@
108 .primary-toolbar button,
109 .titlebar button,
110 headerbar button,
111-headerbar button:disabled,
112 .primary-toolbar button.flat:hover {
113 background: transparent;
114 border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar.png"),
115@@ -2945,6 +2944,12 @@
116 color: @dark_fg_color;
117 }
118
119+.primary-toolbar button:disabled,
120+headerbar button:disabled {
121+ border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar-disabled.png"),
122+ url("assets/radiance-button-toolbar-disabled@2.png"));
123+}
124+
125 .primary-toolbar button,
126 headerbar button *,
127 headerbar button:disabled * {
128@@ -3021,6 +3026,44 @@
129 url("assets/radiance-backdrop-button-toolbar@2.png"));
130 }
131
132+headerbar .linked button.text-button:checked {
133+ background-color: shade(@dark_bg_color, 0.8);
134+ border-image: none;
135+ box-shadow: inset 2px 0px 2px -1px shade(@dark_bg_color, 0.9),
136+ inset 0px 2px 2px -1px shade(@dark_bg_color, 0.9),
137+ inset 0px -2px 2px -1px shade(@dark_bg_color, 1.2),
138+ inset -2px 0px 2px -1px shade(@dark_bg_color, 1.2);
139+ margin-bottom: 1px;
140+ margin-top: 1px;
141+}
142+
143+headerbar stackswitcher.horizontal button.text-button:checked {
144+ background-color: @dark_bg_color;
145+ border-color: shade(@dark_bg_color, 0.8);
146+ border-image: none;
147+ border-style: solid none;
148+ border-width: 1px 0;
149+ box-shadow: inset 2px 0px 2px -1px shade(@dark_bg_color, 0.9),
150+ inset 0px 2px 2px -1px shade(@dark_bg_color, 0.9),
151+ inset 0px -2px 2px -1px shade(@dark_bg_color, 1.2),
152+ inset -2px 0px 2px -1px shade(@dark_bg_color, 1.2);
153+ margin: 1px 0;
154+}
155+
156+headerbar stackswitcher.horizontal button.text-button:first-child:checked {
157+ border-radius: 6px 0 0 6px;
158+ border-style: solid none solid solid;
159+ border-width: 1px 0 1px 1px;
160+ padding-right: 8px;
161+}
162+
163+headerbar stackswitcher.horizontal button.text-button:last-child:checked {
164+ border-style: solid solid solid none;
165+ border-width: 1px 1px 1px 0;
166+ border-radius: 0 6px 6px 0;
167+ padding-left: 8px;
168+}
169+
170 .primary-toolbar button:active,
171 headerbar button:active {
172 background-image: -gtk-gradient (linear, left top, left bottom,
173@@ -3038,11 +3081,8 @@
174
175 .primary-toolbar button:disabled,
176 headerbar button:disabled {
177- background-image: -gtk-gradient (linear, left top, left bottom,
178- from (shade (@dark_bg_color, 1.01)),
179- to (shade (@dark_bg_color, 0.99)));
180- border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar.png"),
181- url("assets/radiance-button-toolbar@2.png"));
182+ border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar-disabled.png"),
183+ url("assets/radiance-button-toolbar-disabled@2.png"));
184 }
185
186 .primary-toolbar button.flat:disabled {

Subscribers

People subscribed via source and target branches