CSS tweaks to match mockups better

- add some spacing between buttons
- move controls closer to the workspaces view (we'll need that space
  for the message tray)
- fix the look of the scrollbar background
- adjust sizes of theme images
- some general CSS cleanup

https://bugzilla.gnome.org/show_bug.cgi?id=607872

data/theme/gnome-shell.css

@@ -138,21 +138,22 @@ StTooltip {
 }
 
 .workspaces-bar {
-    height: 60px;
+    height: 48px;
+}
+
+.workspaces-bar StBoxLayout {
+    spacing: 5px;
 }
 
 .workspace-indicator {
     width: 24px;
-    height: 15px;
+    height: 16px;
     background: rgba(155,155,155,0.8);
-    border-spacing: 15px;
+    border-spacing: 16px;
 }
 
-.workspace-indicator-active {
+.workspace-indicator.active {
-    width: 24px;
-    height: 15px;
     background: rgba(255,255,255,0.8);
-    border-spacing: 15px;
 }
 
 .window-caption {
@@ -172,54 +173,42 @@ StTooltip {
     -shell-close-overlap: 16px;
 }
 
-.single-view-add {
+.workspace-controls {
+    width: 24px;
+    height: 16px;
+}
+
+.workspace-controls.add {
     background-image: url("add-workspace.svg");
-    width: 24px;
-    height: 15px;
 }
 
-.single-view-remove {
+.workspace-controls.remove {
     background-image: url("remove-workspace.svg");
-    width: 24px;
-    height: 15px;
 }
 
-.switch-view-single {
+.workspace-controls.switch-single {
     background-image: url("single-view.svg");
-    width: 24px;
-    height: 15px;
 }
 
-.switch-view-mosaic {
+.workspace-controls.switch-mosaic {
     background-image: url("mosaic-view.svg");
-    width: 24px;
-    height: 15px;
 }
 
-.switch-view-single:checked {
+.workspace-controls.switch-single:checked {
     background-image: url("single-view-active.svg");
-    width: 24px;
-    height: 15px;
 }
 
-.switch-view-mosaic:checked {
+.workspace-controls.switch-mosaic:checked {
     background-image: url("mosaic-view-active.svg");
-    width: 24px;
-    height: 15px;
-}
-
-.scroll-separator {
-    width: 9px;
-    height: 15px;
 }
 
 #SwitchScroll {
-    height: 15px;
+    height: 16px;
 }
 
 #SwitchScroll StBin{
     border: 1px solid rgba(128,128,128,0.40);
-    border-radius: 5px;
+    border-radius: 8px;
 }
 
 #SwitchScroll StButton#hhandle {

data/theme/single-view-active.svg

@@ -9,8 +9,8 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="23"
+   width="24"
-   height="15"
+   height="16"
    id="svg6446"
    version="1.1"
    inkscape:version="0.47pre4 r22446"
@@ -73,8 +73,8 @@
        rx="0.49999979"
        y="17.483809"
        x="0.53483802"
-       height="14"
+       height="15"
-       width="22"
+       width="23"
        id="rect5304"
        style="fill:#cccccc;fill-opacity:1;stroke:#cccccc;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
   </g>

data/theme/single-view.svg

@@ -9,8 +9,8 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="23"
+   width="24"
-   height="15"
+   height="16"
    id="svg6446"
    version="1.1"
    inkscape:version="0.47pre4 r22446"
@@ -73,8 +73,8 @@
        rx="0.49999979"
        y="17.483809"
        x="0.53483802"
-       height="14"
+       height="15"
-       width="22"
+       width="23"
        id="rect5304"
        style="fill:#626262;fill-opacity:1;stroke:#cccccc;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
   </g>

js/ui/overview.js

@@ -232,7 +232,7 @@ Overview.prototype = {
         // place the 'Add Workspace' button in the bottom row of the grid
         this._workspacesBarX = this._workspacesX;
         this._workspacesBarWidth = primary.width - this._workspacesBarX - WORKSPACE_GRID_PADDING;
-        this._workspacesBarY = primary.height - displayGridRowHeight + 5;
+        this._workspacesBarY = primary.height - displayGridRowHeight;
 
         // The parent (this._group) is positioned at the top left of the primary monitor
         // while this._backOver occupies the entire screen.

js/ui/workspacesView.js

@@ -418,7 +418,7 @@ MosaicView.prototype = {
     createControllerBar: function() {
         let actor = new St.BoxLayout({ 'pack-start': true });
         let bin = new St.Bin();
-        let addButton = new St.Button({ style_class: "single-view-add" });
+        let addButton = new St.Button({ style_class: "workspace-controls add" });
         this._addButton = addButton;
         addButton.connect('clicked', Lang.bind(this, this._addNewWorkspace));
         addButton._delegate = addButton;
@@ -430,7 +430,7 @@ MosaicView.prototype = {
         bin.set_alignment(St.Align.END, St.Align.START);
 
         bin = new St.Bin();
-        let removeButton = new St.Button({ style_class: "single-view-remove" });
+        let removeButton = new St.Button({ style_class: "workspace-controls remove" });
         this._removeButton = removeButton;
         removeButton.connect('clicked', Lang.bind(this, function() {
             if (this._workspaces.length <= 1)
@@ -657,7 +657,7 @@ SingleView.prototype = {
         }));
         this._scroll.adjustment = adj;
 
-        let addButton = new St.Button({ style_class: "single-view-add" });
+        let addButton = new St.Button({ style_class: "workspace-controls add" });
         this._addButton = addButton;
         addButton.connect('clicked', Lang.bind(this, this._addNewWorkspace));
         addButton._delegate = addButton;
@@ -666,7 +666,7 @@ SingleView.prototype = {
         });
         actor.add(addButton, {x_align: St.Align.END, y_align: St.Align.START, 'y-fill': false});
 
-        let removeButton = new St.Button({ style_class: "single-view-remove" });
+        let removeButton = new St.Button({ style_class: "workspace-controls remove" });
         this._removeButton = removeButton;
         removeButton.connect('clicked', Lang.bind(this, function() {
             if (this._workspaces.length <= 1)
@@ -684,22 +684,15 @@ SingleView.prototype = {
                                   'x-fill': true,
                                   'y-fill': false,
                                   y_align: St.Align.START });
-        // backward-stepper/forward-stepper has const width (= height)
-        let separator = new St.Button({ style_class: 'scroll-separator' });
-        actor.add(separator, {});
-
         actor.add(panel, {expand: true, 'x-fill': true, 'y-fill': true});
 
-        separator = new St.Button({ style_class: 'scroll-separator' });
-        actor.add(separator, {});
-
         return actor;
     },
 
     _addIndicatorClone: function(i, active) {
         let actor = new St.Button({ style_class: 'workspace-indicator' });
         if (active) {
-            actor.style_class = 'workspace-indicator-active';
+            actor.style_class = 'workspace-indicator active';
         }
         actor.connect('button-release-event', Lang.bind(this, function() {
             if (this._workspaces[i] != undefined)
@@ -870,14 +863,14 @@ WorkspacesViewSwitch.prototype = {
     createControlsBar: function() {
         let actor = new St.BoxLayout();
 
-        this._mosaicViewButton = new St.Button({ style_class: "switch-view-mosaic" });
+        this._mosaicViewButton = new St.Button({ style_class: "workspace-controls switch-mosaic" });
         this._mosaicViewButton.set_toggle_mode(true);
         this._mosaicViewButton.connect('clicked', Lang.bind(this, function() {
             this._setView(WorkspacesViewType.MOSAIC);
         }));
         actor.add(this._mosaicViewButton, {'y-fill' : false, 'y-align' : St.Align.START});
 
-        this._singleViewButton = new St.Button({ style_class: "switch-view-single" });
+        this._singleViewButton = new St.Button({ style_class: "workspace-controls switch-single" });
         this._singleViewButton.set_toggle_mode(true);
         this._singleViewButton.connect('clicked', Lang.bind(this, function() {
             this._setView(WorkspacesViewType.SINGLE);