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

[Carlo Lobrano]

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

[Marco Trevisan (Treviño) (3v1n0)]

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)]

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)]

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)]

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

[Marco Trevisan (Treviño) (3v1n0)]

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... :)

[Carlo Lobrano (c-lobrano)]

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) <[e-mail]> 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.
>

[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)]

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)]

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

[Marco Trevisan (Treviño) (3v1n0)]

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)]

> 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)]

> ...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?

=== added file 'Ambiance/gtk-3.0/assets/button-toolbar-disabled.png'
Binary 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
=== added file 'Ambiance/gtk-3.0/assets/[e-mail]'
Binary files Ambiance/gtk-3.0/assets/[e-mail]	1970-01-01 00:00:00 +0000 and Ambiance/gtk-3.0/assets/[e-mail]	2018-04-19 09:54:49 +0000 differ
=== added file 'Ambiance/gtk-3.0/assets/radiance-button-toolbar-disabled.png'
Binary 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
=== added file 'Ambiance/gtk-3.0/assets/[e-mail]'
Binary files Ambiance/gtk-3.0/assets/[e-mail]	1970-01-01 00:00:00 +0000 and Ambiance/gtk-3.0/assets/[e-mail]	2018-04-19 09:54:49 +0000 differ
=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
--- Ambiance/gtk-3.20/gtk-widgets.css	2018-03-28 06:27:00 +0000
+++ Ambiance/gtk-3.20/gtk-widgets.css	2018-04-19 09:54:49 +0000
@@ -579,7 +579,7 @@
   color: @link_color;
 }
 
-button separator { 
+button separator {
     color: shade(@bg_color, 1.30);
 }
 
@@ -3029,12 +3029,47 @@
                                      url("assets/[e-mail]"));
 }
 
-.primary-toolbar button:active,
-headerbar button:active {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (@dark_bg_color, 0.95)),
-                                     to (shade (@dark_bg_color, 1.0)));
-    text-shadow: 0 -1px shade (@dark_bg_color, 0.6);
+headerbar .linked button.text-button:checked {
+    background-color: @dark_bg_color;
+    border-image: none;
+    box-shadow: inset  2px  0px 2px -1px shade(@dark_bg_color, 0.5),
+                inset  0px  2px 2px -1px shade(@dark_bg_color, 0.5),
+                inset  0px -2px 2px -1px shade(@dark_bg_color, 1.4),
+                inset -2px  0px 2px -1px shade(@dark_bg_color, 1.4);
+
+    margin-bottom: 1px;
+    margin-top: 1px;
+}
+
+headerbar .linked button.slider-button:first-child:disabled {
+    box-shadow: inset -1px 0 shade (@dark_bg_color, 0.9);
+}
+
+headerbar stackswitcher.horizontal button.text-button:checked {
+    background-color: @dark_bg_color;
+    border-color: @dark_bg_color;
+    border-image: none;
+    border-style: solid none;
+    border-width: 1px 0;
+    box-shadow: inset  2px  0px 2px -1px shade(@dark_bg_color, 0.5),
+                inset  0px  1px 2px -1px shade(@dark_bg_color, 0.5),
+                inset  0px -2px 2px -1px shade(@dark_bg_color, 1.4),
+                inset -2px  0px 2px -1px shade(@dark_bg_color, 1.4);
+    margin: 1px 0;
+}
+
+headerbar stackswitcher.horizontal button.text-button:first-child:checked {
+    border-radius: 6px 0 0 6px;
+    border-style: solid none solid solid;
+    border-width: 1px 0 1px 1px;
+    padding-right: 8px;
+}
+
+headerbar stackswitcher.horizontal button.text-button:last-child:checked {
+    border-style: solid solid solid none;
+    border-width: 1px 1px 1px 0;
+    border-radius: 0 6px 6px 0;
+    padding-left: 8px;
 }
 
 .primary-toolbar button:checked:disabled,
@@ -3046,11 +3081,8 @@
 
 .primary-toolbar button:disabled,
 headerbar button:disabled {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (@dark_bg_color, 1.01)),
-                                     to (shade (@dark_bg_color, 0.99)));
-    border-image-source: -gtk-scaled(url("assets/button-toolbar.png"),
-                                     url("assets/[e-mail]"));
+    border-image-source: -gtk-scaled(url("assets/button-toolbar-disabled.png"),
+                                     url("assets/[e-mail]"));
 }
 
 .primary-toolbar button.flat:disabled {

=== modified file 'Radiance/gtk-3.20/gtk-widgets-radiance.css'
--- Radiance/gtk-3.20/gtk-widgets-radiance.css	2017-05-08 17:05:56 +0000
+++ Radiance/gtk-3.20/gtk-widgets-radiance.css	2018-04-19 09:54:49 +0000
@@ -96,8 +96,7 @@
 .primary-toolbar button:disabled,
 headerbar button:hover,
 headerbar button:backdrop:hover,
-headerbar button:active,
-headerbar button:disabled {
+headerbar button:active {
     background-image: -gtk-gradient (linear, left top, left bottom,
                                      from (shade (@dark_bg_color, 1.03)),
                                      to (shade (@dark_bg_color, 0.96)));

=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
--- Radiance/gtk-3.20/gtk-widgets.css	2018-03-28 06:27:00 +0000
+++ Radiance/gtk-3.20/gtk-widgets.css	2018-04-19 09:54:49 +0000
@@ -2936,7 +2936,6 @@
 .primary-toolbar button,
 .titlebar button,
 headerbar button,
-headerbar button:disabled,
 .primary-toolbar button.flat:hover {
     background: transparent;
     border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar.png"),
@@ -2945,6 +2944,12 @@
     color: @dark_fg_color;
 }
 
+.primary-toolbar button:disabled,
+headerbar button:disabled {
+    border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar-disabled.png"),
+                                     url("assets/[e-mail]"));
+}
+
 .primary-toolbar button,
 headerbar button *,
 headerbar button:disabled * {
@@ -3021,6 +3026,44 @@
                                      url("assets/[e-mail]"));
 }
 
+headerbar .linked button.text-button:checked {
+    background-color: shade(@dark_bg_color, 0.8);
+    border-image: none;
+    box-shadow: inset  2px  0px 2px -1px shade(@dark_bg_color, 0.9),
+                inset  0px  2px 2px -1px shade(@dark_bg_color, 0.9),
+                inset  0px -2px 2px -1px shade(@dark_bg_color, 1.2),
+                inset -2px  0px 2px -1px shade(@dark_bg_color, 1.2);
+    margin-bottom: 1px;
+    margin-top: 1px;
+}
+
+headerbar stackswitcher.horizontal button.text-button:checked {
+    background-color: @dark_bg_color;
+    border-color: shade(@dark_bg_color, 0.8);
+    border-image: none;
+    border-style: solid none;
+    border-width: 1px 0;
+    box-shadow: inset  2px  0px 2px -1px shade(@dark_bg_color, 0.9),
+                inset  0px  2px 2px -1px shade(@dark_bg_color, 0.9),
+                inset  0px -2px 2px -1px shade(@dark_bg_color, 1.2),
+                inset -2px  0px 2px -1px shade(@dark_bg_color, 1.2);
+    margin: 1px 0;
+}
+
+headerbar stackswitcher.horizontal button.text-button:first-child:checked {
+    border-radius: 6px 0 0 6px;
+    border-style: solid none solid solid;
+    border-width: 1px 0 1px 1px;
+    padding-right: 8px;
+}
+
+headerbar stackswitcher.horizontal button.text-button:last-child:checked {
+    border-style: solid solid solid none;
+    border-width: 1px 1px 1px 0;
+    border-radius: 0 6px 6px 0;
+    padding-left: 8px;
+}
+
 .primary-toolbar button:active,
 headerbar button:active {
     background-image: -gtk-gradient (linear, left top, left bottom,
@@ -3038,11 +3081,8 @@
 
 .primary-toolbar button:disabled,
 headerbar button:disabled {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (@dark_bg_color, 1.01)),
-                                     to (shade (@dark_bg_color, 0.99)));
-    border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar.png"),
-                                     url("assets/[e-mail]"));
+    border-image-source: -gtk-scaled(url("assets/radiance-button-toolbar-disabled.png"),
+                                     url("assets/[e-mail]"));
 }
 
 .primary-toolbar button.flat:disabled {