[Gtk-3.20] Refactor toolbar code. Fixes #486

Now that out button code has changed, it is necessary to refactor & restructure toolbar code to keep things synchronized.

Author: megax

gtk-3.20/scss/apps/_nemo.scss

@@ -28,18 +28,6 @@
 
             .linked > button { @include linked_button($bg_color); }
 
-            combobox button {
-                padding: $spacing - 1px;
-
-                &.text-button {
-                    padding: $spacing;
-                }
-
-                &.image-button {
-                    padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing;
-                }
-            }
-
             separator, separator:disabled {
                 color: shade($bg_color, ($contrast + .1));
                 border-color: currentColor;

gtk-3.20/scss/apps/_unity.scss

@@ -27,8 +27,8 @@
         .top {
             border: 1px solid $wm_border_focused;
             border-bottom: 0;
-            border-radius: 2px 2px 0 0;
-            padding: 1px ($spacing * 2) 0;
+            border-radius: $roundness $roundness 0 0;
+            padding: 1px ($spacing + 3px) 0 ($spacing + 3px);
             background-color: $titlebar_bg_color;
             color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
             text-shadow: none;
@@ -40,9 +40,9 @@
         }
 
         .left, .right, .bottom {
-            background-color: $wm_border_focused;
+            background-color: $titlebar_bg_color;
 
-            &:backdrop { background-color: $wm_border_unfocused; }
+            &:backdrop { background-color: mix(shade($titlebar_bg_color, .7), $titlebar_fg_color, .21); }
         }
     }
 

gtk-3.20/scss/widgets/_toolbar.scss

@@ -9,7 +9,6 @@
     @include linear-gradient($bg);
     @include border($bg);
 
-    padding: $spacing * 2;
     color: $fg;
 
     &:disabled {
@@ -33,86 +32,94 @@
     .linked > button { @include linked_button($bg); }
 
     combobox, button {
-        padding: $spacing - 1px;
+        padding: $spacing;
 
         &.text-button { padding: $spacing; }
 
-        &.image-button { padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; }
+        &.image-button { padding: $spacing; }
     }
 
-    // toolbar separators
-    &.horizontal separator { margin: 0 ($spacing + 2px) 1px ($spacing + 2px); }
-
-    &.vertical separator { margin: ($spacing + 2px) 1px ($spacing + 2px) 0; }
+    separator {
+        &, &:disabled {
+            color: shade($bg, ($contrast - .2));
+            border-color: currentColor;
 
-    separator, separator:disabled {
-        color: shade($bg, ($contrast - .2));
-        border-color: currentColor;
-
-        -GtkWidget-window-dragging: true;
+            -GtkWidget-window-dragging: true;
+        }
     }
-
-    .menubar, menubar { -GtkToolbar-button-relief: normal; }
 }
 
-@include exports("toolbar") {
-    toolbar {
-        @include toolbar($toolbar_bg_color, $toolbar_fg_color);
+@mixin inline-toolbar($bg, $fg) {
+    background-image: none;
+    border-width: 0 1px 1px;
+    border-style: solid;
+    border-color: $borders_color;
+    background-color: mix($borders_color, $bg_color, .7);
+
+    &:backdrop {
+        border-color: $backdrop_borders_color;
+        background-color: $backdrop_dark_fill;
+        transition: 200ms ease-out;
+    }
 
-        border-style: none;
+    button { @include button($toolbar_bg_color, $toolbar_fg_color); }
 
-        &.inline-toolbar {
-            background-image: none;
-            border-width: 0 1px 1px;
-            border-style: solid;
-            border-color: $borders_color;
-            background-color: mix($borders_color, $bg_color, .7);
+    toolbutton,
+    toolbutton:backdrop {
+        > button.flat { @extend %linked_middle; }
 
-            &:backdrop {
-                border-color: $backdrop_borders_color;
-                background-color: $backdrop_dark_fill;
-                transition: 200ms ease-out;
-            }
+        &:first-child > button.flat { @extend %linked_button:first-child; }
 
-            button { @include button($toolbar_bg_color, $toolbar_fg_color); }
+        &:last-child > button.flat { @extend %linked_button:last-child; }
 
-            toolbutton,
-            toolbutton:backdrop {
-                > button.flat { @extend %linked_middle; }
+        &:only-child > button.flat { @extend %linked_button:only-child; }
+    }
+}
 
-                &:first-child > button.flat { @extend %linked_button:first-child; }
+@include exports("toolbar_extends") {
+    %toolbar {
+        padding: $spacing - 1px;
+        border-style: none;
 
-                &:last-child > button.flat { @extend %linked_button:last-child; }
+        // toolbar separators
+        &.horizontal separator { margin: 0 ($spacing + 2px) 1px; }
 
-                &:only-child > button.flat { @extend %linked_button:only-child; }
-            }
-        }
+        &.vertical separator { margin: ($spacing + 2px) 1px ($spacing + 2px) 0; }
     }
 
-    headerbar {
-        @include toolbar($titlebar_bg_color, $titlebar_fg_color);
-
+    %headerbar {
         border-width: 0 0 1px;
         border-style: solid;
 
+        // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
+        entry,
+        spinbutton,
+        separator,
+        switch,
+        button { // Size height
+            margin-top: $spacing + 3px;
+            margin-bottom: $spacing + 3px;
+        }
+
+        switch { // Size height
+            margin-top: $spacing + 1px;
+            margin-bottom: $spacing + 1px;
+        }
+
         window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
         window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: $roundness; } }
 
         window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: $roundness; } }
     }
 
-    .background:not(.tiled):not(.maximized) .titlebar {
-        &:backdrop, & {
-            border-top-left-radius: $roundness;
-            border-top-right-radius: $roundness;
-        }
-    }
-
-    .titlebar {
+    %titlebar { // Default headerbar and titlebar code.
+        @include toolbar($titlebar_bg_color, $titlebar_fg_color);
         @include linear-gradient($titlebar_bg_color);
 
         border-radius: $roundness $roundness 0 0;
         color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
+        padding: 0 $spacing;
+        min-height: 42px;
 
         &:backdrop {
             @include linear-gradient($titlebar_bg_color);
@@ -121,24 +128,32 @@
             text-shadow: none;
         }
 
-        &.default-decoration {
-            border: 0;
+        &.default-decoration { // Default titlebar (old metacity)
+            min-height: 24px;
             box-shadow: none;
+            border: 0;
+
+            button.titlebutton {
+                min-height: 16px;
+                min-width: 16px;
+                margin: 0;
+                padding: 0;
+            }
         }
 
-        .tiled &, .maximized & { border-radius: 0; }
+        .tiled &,
+        .maximized & { &:backdrop, & { border-radius: 0; } } // squared corners when the window is maximized or tiled
 
         .title { font-weight: bold; }
 
-        separator.titlebutton { margin-left: $spacing * 2; }
+        separator.titlebutton { margin-left: $spacing; }
 
         button.titlebutton + separator.titlebutton {
             margin-left: 0;
-            margin-right: $spacing * 2;
+            margin-right: $spacing;
         }
 
         button.titlebutton {
-            padding: $spacing;
             border: 0;
             background-image: none;
             background-color: transparent;
@@ -167,3 +182,41 @@
         }
     }
 }
+
+@include exports("toolbar") {
+    toolbar {
+        @include toolbar($toolbar_bg_color, $toolbar_fg_color);
+
+        @extend %toolbar;
+
+        &.inline-toolbar { @include inline-toolbar($toolbar_bg_color, $toolbar_fg_color); }
+    }
+
+    headerbar {
+        @extend %titlebar;
+        @extend %headerbar;
+    }
+
+    .titlebar:not(headerbar) {
+        window.csd > & {
+            // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
+            padding: 0;
+            background-color: transparent;
+            background-image: none;
+            border-style: none;
+            border-color: transparent;
+            box-shadow: none;
+        }
+
+        > separator { background-color: shade($titlebar_bg_color, .88); }  // $borders_color
+
+        @extend %titlebar;
+    }
+
+    .background:not(.tiled):not(.maximized) .titlebar {
+        &:backdrop, & {
+            border-top-left-radius: $roundness;
+            border-top-right-radius: $roundness;
+        }
+    }
+}