brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[panel] Port to CSS

Browse Source 
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
This commit is contained in:
Colin Walters 2009-11-17 17:46:20 -05:00
parent 73cd9513bd
commit 1d2dc09ede
2 changed files with 90 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
data/theme/gnome-shell.css
View File

@ -70,17 +70,54 @@ StTooltip {
/* Panel */ /* 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 { .panel-button {
padding: 4px 12px 3px; padding: 4px 12px 3px;
border-radius: 5px; border-radius: 5px;
font: 16px sans-serif; font: 16px sans-serif;
color: white;
} }
.panel-button:active, .panel-button:checked { .panel-button:active, .panel-button:checked {
background-color: #314a6c; background-color: #314a6c;
} }
#panelStatus {
spacing: 4px;
}
/* Overlay */ /* Overlay */
.workspaces { .workspaces {
@ -331,16 +368,6 @@ StTooltip {
spacing: 4px; spacing: 4px;
} }
/* Panel */
#panelActivities {
color: #ffffff;
}
#panelActivities:pressed {
background-color: rgba(50,76,111,0.98);
}
/* Calendar popup */ /* Calendar popup */
#calendarPopup { #calendarPopup {
@ -426,9 +453,3 @@ StTooltip {
background: rgba(255,255,255,0.33); background: rgba(255,255,255,0.33);
} }
/* Status Menu */
#StatusMenu {
spacing: 4px;
font: 16px sans-serif;
color: white;
}

149
js/ui/panel.js
View File

@ -18,36 +18,11 @@ const Main = imports.ui.main;
const StatusMenu = imports.ui.statusMenu; const StatusMenu = imports.ui.statusMenu;
const PANEL_HEIGHT = 26; const PANEL_HEIGHT = 26;
const TRAY_HEIGHT = PANEL_HEIGHT - 1;
const DEFAULT_PADDING = 4; const DEFAULT_PADDING = 4;
const PANEL_ICON_SIZE = 24; 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 // See comments around _recomputeTraySize
const TRAY_SPACING = 14; const TRAY_SPACING = 14;
const TRAY_SPACING_MIN = 8; const TRAY_SPACING_MIN = 8;
@ -83,24 +58,14 @@ AppPanelMenu.prototype = {
this._activeSequence = null; this._activeSequence = null;
this._startupSequences = {}; this._startupSequences = {};
this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, this.actor = new St.BoxLayout({ name: 'appMenu' });
spacing: DEFAULT_PADDING, this._iconBox = new St.Bin({ name: 'appMenuIcon' });
y_align: Big.BoxAlignment.CENTER }); this.actor.add(this._iconBox);
this._iconBox = new Big.Box({ width: PANEL_ICON_SIZE, height: PANEL_ICON_SIZE, this._label = new St.Label();
x_align: Big.BoxAlignment.CENTER, this.actor.add(this._label, { expand: true, y_fill: false });
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, this._startupBox = new St.BoxLayout();
y_align: Big.BoxAlignment.CENTER }); this.actor.add(this._startupBox);
this.actor.append(this._startupBox, Big.BoxPackFlags.NONE);
Main.overview.connect('hiding', Lang.bind(this, function () { Main.overview.connect('hiding', Lang.bind(this, function () {
this.actor.opacity = 255; this.actor.opacity = 255;
@ -144,19 +109,20 @@ AppPanelMenu.prototype = {
this._focusedApp = focusedApp; this._focusedApp = focusedApp;
this._activeSequence = lastSequence; this._activeSequence = lastSequence;
this._iconBox.remove_all(); if (this._iconBox.child != null)
this._iconBox.child.destroy();
this._iconBox.hide(); this._iconBox.hide();
this._label.set_text(''); this._label.set_text('');
if (this._focusedApp != null) { if (this._focusedApp != null) {
let icon = this._focusedApp.create_icon_texture(PANEL_ICON_SIZE); 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(); this._iconBox.show();
let appName = this._focusedApp.get_name(); let appName = this._focusedApp.get_name();
// Use _set_text to work around http://bugzilla.openedhand.com/show_bug.cgi?id=1851 // Use _set_text to work around http://bugzilla.openedhand.com/show_bug.cgi?id=1851
this._label.set_text(appName); this._label.set_text(appName);
} else if (this._activeSequence != null) { } else if (this._activeSequence != null) {
let icon = this._activeSequence.create_icon(PANEL_ICON_SIZE); 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._iconBox.show();
this._label.set_text(this._activeSequence.get_name()); this._label.set_text(this._activeSequence.get_name());
} }
@ -174,32 +140,17 @@ function Panel() {
Panel.prototype = { Panel.prototype = {
_init : function() { _init : function() {
this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL this.actor = new St.BoxLayout({ name: 'panel' });
});
this.actor._delegate = this; this.actor._delegate = this;
let backgroundGradient = Shell.create_vertical_gradient(BACKGROUND_TOP, this._leftBox = new St.BoxLayout({ name: 'panelLeft' });
BACKGROUND_BOTTOM); this._centerBox = new St.BoxLayout({ name: 'panelCenter' });
this.actor.connect('notify::allocation', Lang.bind(this, function () { this._rightBox = new St.BoxLayout({ name: 'panelRight' });
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 box container ensures that the centerBox is positioned in the *absolute* /* This box container ensures that the centerBox is positioned in the *absolute*
* center, but can be pushed aside if necessary. */ * center, but can be pushed aside if necessary. */
this._boxContainer = new Shell.GenericContainer(); 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._leftBox);
this._boxContainer.add_actor(this._centerBox); this._boxContainer.add_actor(this._centerBox);
this._boxContainer.add_actor(this._rightBox); this._boxContainer.add_actor(this._rightBox);
@ -274,11 +225,13 @@ Panel.prototype = {
/* Button on the left side of the panel. */ /* 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". */ /* 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") }); 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.set_child(label);
this.button.height = PANEL_HEIGHT; 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 // 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 // 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. // multiple times due to an accidental jitter.
this._hotCornerEntered = false; this._hotCornerEntered = false;
this._hotCornerEnvirons = new Clutter.Rectangle({ width: 3, this._hotCornerEnvirons = new Clutter.Rectangle({ x: 0,
y: 0,
width: 3,
height: 3, height: 3,
opacity: 0, opacity: 0,
reactive: true }); reactive: true });
this._hotCorner = new Clutter.Rectangle({ width: 1, this._hotCorner = new Clutter.Rectangle({ x: 0,
y: 0,
width: 1,
height: 1, height: 1,
opacity: 0, opacity: 0,
reactive: true }); reactive: true });
@ -315,23 +272,23 @@ Panel.prototype = {
this._hotCorner.connect('leave-event', this._hotCorner.connect('leave-event',
Lang.bind(this, this._onHotCornerLeft)); Lang.bind(this, this._onHotCornerLeft));
this._leftBox.append(this._hotCornerEnvirons, Big.BoxPackFlags.FIXED); this._leftBox.add(this._hotCornerEnvirons);
this._leftBox.append(this._hotCorner, Big.BoxPackFlags.FIXED); this._leftBox.add(this._hotCorner);
let appMenu = new AppPanelMenu(); let appMenu = new AppPanelMenu();
this._leftBox.append(appMenu.actor, Big.BoxPackFlags.NONE); this._leftBox.add(appMenu.actor);
/* center */ /* center */
let clockButton = new St.Button({ style_class: "panel-button", let clockButton = new St.Button({ style_class: "panel-button",
toggle_mode: true }); toggle_mode: true,
this._centerBox.append(clockButton, Big.BoxPackFlags.NONE); x_fill: true,
y_fill: true });
this._centerBox.add(clockButton, { y_fill: false });
clockButton.connect('clicked', Lang.bind(this, this._toggleCalendar)); clockButton.connect('clicked', Lang.bind(this, this._toggleCalendar));
this._clock = new Clutter.Text({ font_name: DEFAULT_FONT, this._clock = new St.Label();
color: PANEL_FOREGROUND_COLOR, clockButton.set_child(this._clock);
text: "" });
clockButton.add_actor(this._clock);
this._calendarPopup = null; this._calendarPopup = null;
@ -340,11 +297,10 @@ Panel.prototype = {
// The tray icons live in trayBox within trayContainer. // The tray icons live in trayBox within trayContainer.
// The trayBox is hidden when there are no tray icons. // The trayBox is hidden when there are no tray icons.
let trayContainer = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, let trayContainer = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
y_align: Big.BoxAlignment.START }); y_align: Big.BoxAlignment.CENTER });
this._rightBox.append(trayContainer, Big.BoxPackFlags.NONE); this._rightBox.add(trayContainer);
let trayBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, let trayBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
height: TRAY_HEIGHT, height: PANEL_ICON_SIZE,
padding: TRAY_PADDING,
spacing: TRAY_SPACING }); spacing: TRAY_SPACING });
this._trayBox = trayBox; this._trayBox = trayBox;
@ -373,37 +329,30 @@ Panel.prototype = {
})); }));
this._traymanager.manage_stage(global.stage); this._traymanager.manage_stage(global.stage);
let statusbox = new Big.Box();
let statusmenu = this._statusmenu = new StatusMenu.StatusMenu(); let statusmenu = this._statusmenu = new StatusMenu.StatusMenu();
statusbox.append(this._statusmenu.actor, Big.BoxPackFlags.NONE); let statusbutton = new St.Clickable({ name: 'panelStatus',
let statusbutton = new Button.Button(statusbox, style_class: 'panel-button',
PANEL_BUTTON_COLOR, reactive: true });
PRESSED_BUTTON_BACKGROUND_COLOR, statusbutton.set_child(statusmenu.actor);
PANEL_FOREGROUND_COLOR); statusbutton.height = PANEL_HEIGHT;
statusbutton.actor.height = PANEL_HEIGHT; statusbutton.connect('clicked', function (b, event) {
statusbutton.actor.connect('button-press-event', function (b, e) { statusmenu.toggle(event);
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 // The statusmenu might not pop up if it couldn't get a pointer grab
if (statusmenu.isActive()) if (statusmenu.isActive())
statusbutton.actor.active = true; statusbutton.active = true;
return true; return true;
} else {
return false;
}
}); });
this._rightBox.append(statusbutton.actor, Big.BoxPackFlags.NONE); this._rightBox.add(statusbutton);
// We get a deactivated event when the popup disappears // We get a deactivated event when the popup disappears
this._statusmenu.connect('deactivated', function (sm) { 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.) // 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 // 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 // have the Overview act like a menu that allows the user to release the mouse on the activity the user wants
// to switch to. // to switch to.
this.button.connect('clicked', Lang.bind(this, function(b) { this.button.connect('clicked', Lang.bind(this, function(b, event) {
let event = Clutter.get_current_event();
if (!Main.overview.animationInProgress) { if (!Main.overview.animationInProgress) {
this._maybeToggleOverviewOnClick(); this._maybeToggleOverviewOnClick();
return true; return true;