/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */ const Clutter = imports.gi.Clutter; const Mainloop = imports.mainloop; const Meta = imports.gi.Meta; const Shell = imports.gi.Shell; const Tidy = imports.gi.Tidy; const Button = imports.ui.button; const Main = imports.ui.main; 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(0xccbbaaff); function Panel() { this._init(); } Panel.prototype = { _init : function() { let global = Shell.Global.get(); this._group = new Clutter.Group(); let background = new Clutter.Rectangle({ color: PANEL_BACKGROUND_COLOR, reactive: true, width: global.screen_width+2, height: PANEL_HEIGHT+1, border_width: 1}); background.set_position(-1, -1); this._group.add_actor(background); this.button = new Button.Button("Activities", PANEL_BACKGROUND_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR, true, null, PANEL_HEIGHT-1); this._group.add_actor(this.button.button); this._grid = new Tidy.Grid({ height: TRAY_HEIGHT, valign: 0.5, end_align: true, column_gap: 2 }) this._group.add_actor(this._grid); this._clock = new Clutter.Label({ font_name: "Sans Bold 16px", 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({ bg_color: PANEL_BACKGROUND_COLOR }); let me = this; // 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) { me._grid.add_actor(icon); /* bump the clock back to the end */ me._grid.remove_actor(me._clock); me._grid.add_actor(me._clock); me._grid.move_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST); }); this._traymanager.connect('tray-icon-removed', function(o, icon) { me._grid.remove_actor(icon); me._grid.move_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST); }); this._traymanager.manage_stage(global.stage); // 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(); else Main.show_overlay(); return true; }); this._setStruts(); global.screen.connect('notify::n-workspaces', function() { me._setStruts(); }); global.stage.add_actor(this._group); // Start the clock this._updateClock(); }, // Struts determine the area along each side of the screen that is reserved // and not available to applications _setStruts: function() { let global = Shell.Global.get(); let struts = [ new Meta.Strut({ rect: { x: 0, y: 0, width: global.screen_width, height: PANEL_HEIGHT }, side: Meta.Direction.TOP }) ]; let screen = global.screen; for (let i = 0; i < screen.n_workspaces; i++) { let workspace = screen.get_workspace_by_index(i); workspace.set_builtin_struts(struts); } }, _updateClock: function() { let me = this; let display_date = new Date(); let msec_remaining = 60000 - (1000 * display_date.getSeconds() + display_date.getMilliseconds()); if (msec_remaining < 500) { display_date.setMinutes(display_date.getMinutes() + 1); msec_remaining += 60000; } this._clock.set_text(display_date.toLocaleFormat("%H:%M")); Mainloop.timeout_add(msec_remaining, function() { me._updateClock(); return false; }); }, overlayHidden: function() { this.button.release(); } };