diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index cc5212f6e..8b4263064 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 9ae999b8e..a07075d41 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.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;