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

Add a button object that highlights a button area when it is moused over and transitions it to a different color when the button is pressed in. Use this button object for the panel's "Activities" button.

Browse Source 
Add some comments, TODO items, and type fixes to the code.

svn path=/trunk/; revision=52
This commit is contained in:
Marina Zhurakhinskaya
2008-11-15 00:44:11 +00:00
parent ab0f4df2b4
commit 679365f1c1
4 changed files with 138 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
js/ui/panel.js
View File

@ -5,6 +5,7 @@ const Mainloop = imports.mainloop;
const Shell = imports.gi.Shell;
const Clutter = imports.gi.Clutter;
const Tidy = imports.gi.Tidy;
const Button = imports.ui.button;
const Main = imports.ui.main;
@ -12,6 +13,8 @@ const PANEL_HEIGHT = 32;
const TRAY_HEIGHT = 24;
const PANEL_BACKGROUND_COLOR = new Clutter.Color();
PANEL_BACKGROUND_COLOR.from_pixel(0xeeddccff);
const PRESSED_BUTTON_BACKGROUND_COLOR = new Clutter.Color();
PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0xddccbbff);
function Panel() {
this._init();
@ -31,11 +34,9 @@ Panel.prototype = {
background.set_position(-1, -1);
this._group.add_actor(background);
let message = new Clutter.Label({ font_name: "Sans Bold 16px",
text: "Activities",
reactive: true });
message.set_position(5, 5);
this._group.add_actor(message);
this.button = new Button.Button("Activities", PANEL_BACKGROUND_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR, true, null, PANEL_HEIGHT);
this._group.add_actor(this.button.button);
this._grid = new Tidy.Grid({ height: TRAY_HEIGHT,
valign: 0.5,
@ -47,12 +48,16 @@ Panel.prototype = {
text: "" });
this._grid.add_actor(this._clock);
// Setting the anchor point at top right (north east) makes that portion of the
// grid positioned at the position specified below.
this._grid.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
this._grid.set_position(global.screen_width - 2, (PANEL_HEIGHT - TRAY_HEIGHT) / 2);
this._traymanager = new Shell.TrayManager();
let panel = this;
this._traymanager.connect('tray-icon-added',
// the anchor point needs to be updated each time the height/width of the content might have changed, because
// it doesn't get updated on its own
this._traymanager.connect('tray-icon-added',
function(o, icon) {
panel._grid.add_actor(icon);
/* bump the clock back to the end */
@ -67,7 +72,11 @@ Panel.prototype = {
});
this._traymanager.manage_stage(global.stage);
message.connect('button-press-event',
// TODO: decide what to do with the rest of the panel in the overlay mode (make it fade-out, become non-reactive, etc.)
// We get into the overlay mode on button-press-event as opposed to button-release-event because eventually we'll probably
// have the overlay act like a menu that allows the user to release the mouse on the activity the user wants
// to switch to.
this.button.button.connect('button-press-event',
function(o, event) {
if (Main.overlay.visible)
Main.hide_overlay();
@ -85,6 +94,7 @@ Panel.prototype = {
_startClock: function() {
let me = this;
// TODO: this makes the clock updated every 60 seconds, but not necessarily on the minute, so it is inaccurate
Mainloop.timeout_add_seconds(60,
function() {
me._updateClock();
@ -95,5 +105,9 @@ Panel.prototype = {
_updateClock: function() {
this._clock.set_text(new Date().toLocaleFormat("%H:%M"));
return true;
},
overlayHidden: function() {
this.button.release();
}
};