From a8aa0c085f70282e0cc08d65312a68f58e977dde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Sat, 23 Jan 2010 11:22:38 +0100 Subject: [PATCH] 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 | 53 ++++++++++++------------------- data/theme/single-view-active.svg | 8 ++--- data/theme/single-view.svg | 8 ++--- js/ui/overview.js | 2 +- js/ui/workspacesView.js | 21 ++++-------- 5 files changed, 37 insertions(+), 55 deletions(-) diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 5828beba1..656f1bc12 100644 --- a/data/theme/gnome-shell.css +++ b/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 { - width: 24px; - height: 15px; +.workspace-indicator.active { 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 { diff --git a/data/theme/single-view-active.svg b/data/theme/single-view-active.svg index d7350ac5b..4bbdf1b3c 100644 --- a/data/theme/single-view-active.svg +++ b/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" - height="15" + width="24" + 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" - width="22" + height="15" + 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" /> diff --git a/data/theme/single-view.svg b/data/theme/single-view.svg index c053e4f3d..72812b152 100644 --- a/data/theme/single-view.svg +++ b/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" - height="15" + width="24" + 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" - width="22" + height="15" + 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" /> diff --git a/js/ui/overview.js b/js/ui/overview.js index 3ec61a138..d0859283c 100644 --- a/js/ui/overview.js +++ b/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. diff --git a/js/ui/workspacesView.js b/js/ui/workspacesView.js index d96f713b0..a93c87b9f 100644 --- a/js/ui/workspacesView.js +++ b/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);