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 {
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;
}

155
js/ui/panel.js
View File

@ -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.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 Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
y_align: Big.BoxAlignment.CENTER });
this.actor.append(this._startupBox, Big.BoxPackFlags.NONE);
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;