[gnome-shell] CSS tweaks to match mockups better
- From: Colin Walters <walters src gnome org>
- To: svn-commits-list gnome org
- Cc:
- Subject: [gnome-shell] CSS tweaks to match mockups better
- Date: Mon, 1 Feb 2010 15:15:54 +0000 (UTC)
commit a8aa0c085f70282e0cc08d65312a68f58e977dde
Author: Florian Müllner <fmuellner src gnome org>
Date: Sat Jan 23 11:22:38 2010 +0100
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 5828beb..656f1bc 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 {
- background-image: url("add-workspace.svg");
+.workspace-controls {
width: 24px;
- height: 15px;
+ height: 16px;
}
-.single-view-remove {
+.workspace-controls.add {
+ background-image: url("add-workspace.svg");
+}
+
+.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 d7350ac..4bbdf1b 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" />
</g>
diff --git a/data/theme/single-view.svg b/data/theme/single-view.svg
index c053e4f..72812b1 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" />
</g>
diff --git a/js/ui/overview.js b/js/ui/overview.js
index 3ec61a1..d085928 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 d96f713..a93c87b 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);
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
