From 96963520dad46a5fb77addb1ff383e03097d70f7 Mon Sep 17 00:00:00 2001
From: Owen Taylor <otaylor@src.gnome.org>
Date: Fri, 31 Oct 2008 18:09:20 +0000
Subject: [PATCH] Add a very simple first-pass top panel

Add a top panel with a label "Activities" you can click on and
a HH:MM:SS clock. (A little more and we'll be caught up to gnome-0.9.)

svn path=/trunk/; revision=10
---
 js/ui/main.js  | 15 +++++------
 js/ui/panel.js | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+), 8 deletions(-)
 create mode 100644 js/ui/panel.js

diff --git a/js/ui/main.js b/js/ui/main.js
index dfc9f9d38..e4e0f9b20 100644
--- a/js/ui/main.js
+++ b/js/ui/main.js
@@ -1,13 +1,12 @@
+/* -*- mode: js2; js2-basic-offset: 4; -*- */
+
 const Shell = imports.gi.Shell;
 const Clutter = imports.gi.Clutter;
 
-function start() {
-    let global = Shell.global_get();
+const Panel = imports.ui.panel;
 
-    let message = new Clutter.Label({font_name: "Sans Bold 64px", text: "DRAFT"});
-    message.set_opacity(75);
-    message.set_anchor_point_from_gravity (Clutter.Gravity.CENTER);
-    message.set_rotation(Clutter.RotateAxis.Z_AXIS, - 45, 0, 0, 0);
-    message.set_position(global.screen_width / 2, global.screen_height / 2);
-    global.overlay_group.add_actor(message);
+let panel = null;
+
+function start() {
+    panel = new Panel.Panel();
 }
diff --git a/js/ui/panel.js b/js/ui/panel.js
new file mode 100644
index 000000000..6b1a92840
--- /dev/null
+++ b/js/ui/panel.js
@@ -0,0 +1,69 @@
+/* -*- mode: js2; js2-basic-offset: 4; -*- */
+
+const Mainloop = imports.mainloop;
+
+const Shell = imports.gi.Shell;
+const Clutter = imports.gi.Clutter;
+
+const PANEL_HEIGHT = 32;
+const PANEL_BACKGROUND_COLOR = new Clutter.Color();
+PANEL_BACKGROUND_COLOR.from_pixel(0xeeddccff);
+
+function Panel() {
+    this._init();
+}
+
+Panel.prototype = {
+    _init : function() {
+	let global = Shell.global_get();
+
+	global.set_stage_input_area(0, 0, global.screen_width, PANEL_HEIGHT);
+
+	this._group = new Clutter.Group();
+
+	let background = new Clutter.Rectangle({ color: PANEL_BACKGROUND_COLOR,
+						 reactive: true,
+					         width: global.screen_width,
+					         height: PANEL_HEIGHT });
+	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._clock = new Clutter.Label({ font_name: "Sans Bold 16px",
+					  text: "" });
+	this._clock.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
+	this._clock.set_position(global.screen_width - 5, 5);
+	this._group.add_actor(this._clock);
+
+	message.connect('button-press-event',
+	    function(o, event) {
+		log('Clicked!');
+		return true;
+            });
+
+	global.stage.add_actor(this._group);
+
+	this._updateClock();
+	this._startClock();
+    },
+
+    _startClock: function() {
+	let me = this;
+	Mainloop.timeout_add_seconds(1,
+	    function() {
+		me._updateClock();
+		return true;
+	    });
+    },
+
+    _updateClock: function() {
+	this._clock.set_text(new Date().toLocaleFormat("%H:%M:%S"));
+	this._clock.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
+
+	return true;
+    }
+};