[gnome-shell] [panel] Port to CSS
- From: Colin Walters <walters src gnome org>
- To: svn-commits-list gnome org
- Cc:
- Subject: [gnome-shell] [panel] Port to CSS
- Date: Mon, 23 Nov 2009 19:35:19 +0000 (UTC)
commit 1d2dc09ede3df406ea83810811f011898b481f1f
Author: Colin Walters <walters verbum org>
Date: Tue Nov 17 17:46:20 2009 -0500
[panel] Port to CSS
With some tweaks from JP St. Pierre to center things in case we ever
have a larger panel.
https://bugzilla.gnome.org/show_bug.cgi?id=602131
data/theme/gnome-shell.css | 55 +++++++++++-----
js/ui/panel.js | 157 +++++++++++++++-----------------------------
2 files changed, 91 insertions(+), 121 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index cc5212f..8b42630 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -70,17 +70,54 @@ StTooltip {
/* Panel */
+#panel {
+ color: #ffffff;
+ font-size: 16px;
+ background-gradient-direction: vertical;
+ background-gradient-start: #161616;
+ background-gradient-end: #000000;
+}
+
+#panelLeft, #panelCenter, #panelRight {
+ spacing: 4px;
+}
+
+#panelLeft {
+ padding-right: 4px;
+}
+
+#panelRight {
+ padding-left: 4px;
+}
+
+.panel-button:pressed {
+ background-color: rgba(50,76,111,0.98);
+ border-radius: 4px;
+}
+
+#appMenu {
+ spacing: 4px;
+}
+
+.app-menu-icon {
+ width: 24px;
+ height: 24px;
+}
+
.panel-button {
padding: 4px 12px 3px;
border-radius: 5px;
font: 16px sans-serif;
- color: white;
}
.panel-button:active, .panel-button:checked {
background-color: #314a6c;
}
+#panelStatus {
+ spacing: 4px;
+}
+
/* Overlay */
.workspaces {
@@ -331,16 +368,6 @@ StTooltip {
spacing: 4px;
}
-/* Panel */
-
-#panelActivities {
- color: #ffffff;
-}
-
-#panelActivities:pressed {
- background-color: rgba(50,76,111,0.98);
-}
-
/* Calendar popup */
#calendarPopup {
@@ -426,9 +453,3 @@ StTooltip {
background: rgba(255,255,255,0.33);
}
-/* Status Menu */
-#StatusMenu {
- spacing: 4px;
- font: 16px sans-serif;
- color: white;
-}
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 9ae999b..a07075d 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -18,36 +18,11 @@ const Main = imports.ui.main;
const StatusMenu = imports.ui.statusMenu;
const PANEL_HEIGHT = 26;
-const TRAY_HEIGHT = PANEL_HEIGHT - 1;
const DEFAULT_PADDING = 4;
const PANEL_ICON_SIZE = 24;
-const BACKGROUND_TOP = new Clutter.Color();
-BACKGROUND_TOP.from_pixel(0x161616ff);
-const BACKGROUND_BOTTOM = new Clutter.Color();
-BACKGROUND_BOTTOM.from_pixel(0x000000ff);
-
-const PANEL_FOREGROUND_COLOR = new Clutter.Color();
-PANEL_FOREGROUND_COLOR.from_pixel(0xffffffff);
-const SN_BACKGROUND_COLOR = new Clutter.Color();
-SN_BACKGROUND_COLOR.from_pixel(0xffff00a0);
-
-const TRANSPARENT_COLOR = new Clutter.Color();
-TRANSPARENT_COLOR.from_pixel(0x00000000);
-
-// Don't make the mouse hover effect visible to the user for a menu feel.
-const PANEL_BUTTON_COLOR = new Clutter.Color();
-PANEL_BUTTON_COLOR.from_pixel(0x00000000);
-
-// Lighten pressed buttons; darkening has no effect on a black background.
-const PRESSED_BUTTON_BACKGROUND_COLOR = new Clutter.Color();
-PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0x324c6ffa);
-
-const DEFAULT_FONT = 'Sans 16px';
-
-const TRAY_PADDING = 0;
// See comments around _recomputeTraySize
const TRAY_SPACING = 14;
const TRAY_SPACING_MIN = 8;
@@ -83,24 +58,14 @@ AppPanelMenu.prototype = {
this._activeSequence = null;
this._startupSequences = {};
- this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- spacing: DEFAULT_PADDING,
- y_align: Big.BoxAlignment.CENTER });
- this._iconBox = new Big.Box({ width: PANEL_ICON_SIZE, height: PANEL_ICON_SIZE,
- x_align: Big.BoxAlignment.CENTER,
- y_align: Big.BoxAlignment.CENTER });
- this.actor.append(this._iconBox, Big.BoxPackFlags.NONE);
- let labelBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
- y_align: Big.BoxAlignment.CENTER });
- this._label = new Clutter.Text({ font_name: DEFAULT_FONT,
- color: PANEL_FOREGROUND_COLOR,
- text: "" });
- labelBox.append(this._label, Big.BoxPackFlags.EXPAND);
- this.actor.append(labelBox, Big.BoxPackFlags.NONE);
-
- this._startupBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- y_align: Big.BoxAlignment.CENTER });
- this.actor.append(this._startupBox, Big.BoxPackFlags.NONE);
+ this.actor = new St.BoxLayout({ name: 'appMenu' });
+ this._iconBox = new St.Bin({ name: 'appMenuIcon' });
+ this.actor.add(this._iconBox);
+ this._label = new St.Label();
+ this.actor.add(this._label, { expand: true, y_fill: false });
+
+ this._startupBox = new St.BoxLayout();
+ this.actor.add(this._startupBox);
Main.overview.connect('hiding', Lang.bind(this, function () {
this.actor.opacity = 255;
@@ -144,19 +109,20 @@ AppPanelMenu.prototype = {
this._focusedApp = focusedApp;
this._activeSequence = lastSequence;
- this._iconBox.remove_all();
+ if (this._iconBox.child != null)
+ this._iconBox.child.destroy();
this._iconBox.hide();
this._label.set_text('');
if (this._focusedApp != null) {
let icon = this._focusedApp.create_icon_texture(PANEL_ICON_SIZE);
- this._iconBox.append(icon, Big.BoxPackFlags.NONE);
+ this._iconBox.set_child(icon);
this._iconBox.show();
let appName = this._focusedApp.get_name();
// Use _set_text to work around http://bugzilla.openedhand.com/show_bug.cgi?id=1851
this._label.set_text(appName);
} else if (this._activeSequence != null) {
let icon = this._activeSequence.create_icon(PANEL_ICON_SIZE);
- this._iconBox.append(icon, Big.BoxPackFlags.NONE);
+ this._iconBox.set_child(icon);
this._iconBox.show();
this._label.set_text(this._activeSequence.get_name());
}
@@ -174,32 +140,17 @@ function Panel() {
Panel.prototype = {
_init : function() {
- this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL
- });
+ this.actor = new St.BoxLayout({ name: 'panel' });
this.actor._delegate = this;
- let backgroundGradient = Shell.create_vertical_gradient(BACKGROUND_TOP,
- BACKGROUND_BOTTOM);
- this.actor.connect('notify::allocation', Lang.bind(this, function () {
- let [width, height] = this.actor.get_size();
- backgroundGradient.set_size(width, height);
- }));
- this.actor.add_actor(backgroundGradient);
-
- this._leftBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- y_align: Big.BoxAlignment.CENTER,
- spacing: DEFAULT_PADDING,
- padding_right: DEFAULT_PADDING });
- this._centerBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- y_align: Big.BoxAlignment.CENTER });
- this._rightBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- y_align: Big.BoxAlignment.CENTER,
- padding_left: DEFAULT_PADDING });
+ this._leftBox = new St.BoxLayout({ name: 'panelLeft' });
+ this._centerBox = new St.BoxLayout({ name: 'panelCenter' });
+ this._rightBox = new St.BoxLayout({ name: 'panelRight' });
/* This box container ensures that the centerBox is positioned in the *absolute*
* center, but can be pushed aside if necessary. */
this._boxContainer = new Shell.GenericContainer();
- this.actor.append(this._boxContainer, Big.BoxPackFlags.EXPAND);
+ this.actor.add(this._boxContainer, { expand: true });
this._boxContainer.add_actor(this._leftBox);
this._boxContainer.add_actor(this._centerBox);
this._boxContainer.add_actor(this._rightBox);
@@ -274,11 +225,13 @@ Panel.prototype = {
/* Button on the left side of the panel. */
/* Translators: If there is no suitable word for "Activities" in your language, you can use the word for "Overview". */
let label = new St.Label({ text: _("Activities") });
- this.button = new St.Clickable({ name: 'panelActivities' });
+ this.button = new St.Clickable({ name: 'panelActivities',
+ style_class: 'panel-button',
+ reactive: true });
this.button.set_child(label);
this.button.height = PANEL_HEIGHT;
- this._leftBox.append(this.button, Big.BoxPackFlags.NONE);
+ this._leftBox.add(this.button);
// We use this flag to mark the case where the user has entered the
// hot corner and has not left both the hot corner and a surrounding
@@ -286,12 +239,16 @@ Panel.prototype = {
// multiple times due to an accidental jitter.
this._hotCornerEntered = false;
- this._hotCornerEnvirons = new Clutter.Rectangle({ width: 3,
+ this._hotCornerEnvirons = new Clutter.Rectangle({ x: 0,
+ y: 0,
+ width: 3,
height: 3,
opacity: 0,
reactive: true });
- this._hotCorner = new Clutter.Rectangle({ width: 1,
+ this._hotCorner = new Clutter.Rectangle({ x: 0,
+ y: 0,
+ width: 1,
height: 1,
opacity: 0,
reactive: true });
@@ -315,23 +272,23 @@ Panel.prototype = {
this._hotCorner.connect('leave-event',
Lang.bind(this, this._onHotCornerLeft));
- this._leftBox.append(this._hotCornerEnvirons, Big.BoxPackFlags.FIXED);
- this._leftBox.append(this._hotCorner, Big.BoxPackFlags.FIXED);
+ this._leftBox.add(this._hotCornerEnvirons);
+ this._leftBox.add(this._hotCorner);
let appMenu = new AppPanelMenu();
- this._leftBox.append(appMenu.actor, Big.BoxPackFlags.NONE);
+ this._leftBox.add(appMenu.actor);
/* center */
let clockButton = new St.Button({ style_class: "panel-button",
- toggle_mode: true });
- this._centerBox.append(clockButton, Big.BoxPackFlags.NONE);
+ toggle_mode: true,
+ x_fill: true,
+ y_fill: true });
+ this._centerBox.add(clockButton, { y_fill: false });
clockButton.connect('clicked', Lang.bind(this, this._toggleCalendar));
- this._clock = new Clutter.Text({ font_name: DEFAULT_FONT,
- color: PANEL_FOREGROUND_COLOR,
- text: "" });
- clockButton.add_actor(this._clock);
+ this._clock = new St.Label();
+ clockButton.set_child(this._clock);
this._calendarPopup = null;
@@ -340,11 +297,10 @@ Panel.prototype = {
// The tray icons live in trayBox within trayContainer.
// The trayBox is hidden when there are no tray icons.
let trayContainer = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
- y_align: Big.BoxAlignment.START });
- this._rightBox.append(trayContainer, Big.BoxPackFlags.NONE);
+ y_align: Big.BoxAlignment.CENTER });
+ this._rightBox.add(trayContainer);
let trayBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- height: TRAY_HEIGHT,
- padding: TRAY_PADDING,
+ height: PANEL_ICON_SIZE,
spacing: TRAY_SPACING });
this._trayBox = trayBox;
@@ -373,37 +329,30 @@ Panel.prototype = {
}));
this._traymanager.manage_stage(global.stage);
- let statusbox = new Big.Box();
let statusmenu = this._statusmenu = new StatusMenu.StatusMenu();
- statusbox.append(this._statusmenu.actor, Big.BoxPackFlags.NONE);
- let statusbutton = new Button.Button(statusbox,
- PANEL_BUTTON_COLOR,
- PRESSED_BUTTON_BACKGROUND_COLOR,
- PANEL_FOREGROUND_COLOR);
- statusbutton.actor.height = PANEL_HEIGHT;
- statusbutton.actor.connect('button-press-event', function (b, e) {
- if (e.get_button() == 1 && e.get_click_count() == 1) {
- statusmenu.toggle(e);
- // The statusmenu might not pop up if it couldn't get a pointer grab
- if (statusmenu.isActive())
- statusbutton.actor.active = true;
- return true;
- } else {
- return false;
- }
+ let statusbutton = new St.Clickable({ name: 'panelStatus',
+ style_class: 'panel-button',
+ reactive: true });
+ statusbutton.set_child(statusmenu.actor);
+ statusbutton.height = PANEL_HEIGHT;
+ statusbutton.connect('clicked', function (b, event) {
+ statusmenu.toggle(event);
+ // The statusmenu might not pop up if it couldn't get a pointer grab
+ if (statusmenu.isActive())
+ statusbutton.active = true;
+ return true;
});
- this._rightBox.append(statusbutton.actor, Big.BoxPackFlags.NONE);
+ this._rightBox.add(statusbutton);
// We get a deactivated event when the popup disappears
this._statusmenu.connect('deactivated', function (sm) {
- statusbutton.actor.active = false;
+ statusbutton.active = false;
});
// TODO: decide what to do with the rest of the panel in the Overview mode (make it fade-out, become non-reactive, etc.)
// We get into the Overview mode on button-press-event as opposed to button-release-event because eventually we'll probably
// have the Overview act like a menu that allows the user to release the mouse on the activity the user wants
// to switch to.
- this.button.connect('clicked', Lang.bind(this, function(b) {
- let event = Clutter.get_current_event();
+ this.button.connect('clicked', Lang.bind(this, function(b, event) {
if (!Main.overview.animationInProgress) {
this._maybeToggleOverviewOnClick();
return true;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
