From 83895835b0844e1d547c2261935a700935028216 Mon Sep 17 00:00:00 2001
From: Robert Sesek <rsesek@bluestatic.org>
Date: Mon, 6 Sep 2010 17:39:09 -0400
Subject: [PATCH] * Implement the basic UI of the Actor popup * Create the
 click handler for the Actor tiles

---
 web_frontend/actor.js   | 45 ++++++++++++++++++++++++++++++++++++++++-
 web_frontend/screen.css | 37 ++++++++++++++++++++++++++++++---
 2 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/web_frontend/actor.js b/web_frontend/actor.js
index 83a6d00..2c7553a 100644
--- a/web_frontend/actor.js
+++ b/web_frontend/actor.js
@@ -11,6 +11,7 @@ goog.provide('armadillo.Actor');
 
 goog.require('goog.array');
 goog.require('goog.dom');
+goog.require('goog.events');
 goog.require('goog.positioning.ClientPosition');
 goog.require('goog.positioning.Corner');
 goog.require('goog.ui.Popup');
@@ -33,6 +34,26 @@ goog.inherits(armadillo.Actor, goog.Disposable);
  */
 armadillo.Actor.actors_ = new Array();
 
+/**
+ * The different options that the Actor can perform.
+ */
+armadillo.Actor.options_ = {
+  OPEN : 'open',
+  MOVE : 'move',
+  RENAME : 'rename',
+  DELETE : 'delete'
+};
+
+/**
+ * String values for the options.
+ */
+armadillo.Actor.optionStrings_ = {
+  'open' : 'Open',
+  'move' : 'Move',
+  'rename' : 'Rename',
+  'delete' : 'Delete'  
+};
+
 /**
  * A global property that should be checked to see if an actor is present,
  * creating a modal session.
@@ -70,6 +91,7 @@ armadillo.Actor.prototype.show = function(x, y) {
   goog.dom.insertSiblingBefore(this.element_, firstBodyElement);
   this.popup_.setPinnedCorner(goog.positioning.Corner.TOP_LEFT);
   this.popup_.setPosition(new goog.positioning.ClientPosition(x, y));
+  this.popup_.setHideOnEscape(true);
   this.popup_.setVisible(true);
 };
 
@@ -86,6 +108,27 @@ armadillo.Actor.prototype.hide = function() {
  */
 armadillo.Actor.prototype.createElement_ = function() {
   var root = goog.dom.createDom('div', 'actor');
-  goog.dom.setTextContent(root, 'foo bar');
+  for (var option in armadillo.Actor.options_) {
+    var tile = goog.dom.createDom('div', 'tile');
+    var value = armadillo.Actor.options_[option];
+    var title = goog.dom.createDom('span', 'title',
+        armadillo.Actor.optionStrings_[value]);
+    goog.dom.appendChild(tile, title);
+    goog.dom.appendChild(root, tile);
+    tile.actorOption = value;
+    tile.actorListener = goog.events.listen(tile, goog.events.EventType.CLICK,
+        this.tileClickHandler_, false, this);
+  }
   return root;
 };
+
+/**
+ * Click handler for individual tiles.
+ * @param  {Event}  e
+ */
+armadillo.Actor.prototype.tileClickHandler_ = function(e) {
+  if (e.target.actorOption == armadillo.Actor.options_.DELETE) {
+    console.log("DELETE DELETE DELETE");
+  }
+  console.log('You clicked ' + e.target.actorOption);
+};
diff --git a/web_frontend/screen.css b/web_frontend/screen.css
index 31c4f9e..e0318f3 100644
--- a/web_frontend/screen.css
+++ b/web_frontend/screen.css
@@ -47,9 +47,40 @@ h1 {
 }
 
 .actor {
-  width: 3em;
-  height: 3em;
+  width: 8.3em;
+  height: 8.3em;
   position: absolute;
-  background-color: red;
   visibility: hidden;
+
+  background-color: rgb(77, 79, 83);
+
+  border-width: .3em;
+  border-color: rgb(77, 79, 83);
+  border-style: solid;
+}
+
+.actor .tile {
+  width: 4em;
+  height: 4em;
+  display: inline-block;
+  margin: .1em;
+
+  background: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(1, rgb(224,225,221)),
+      color-stop(0, rgb(173,175,175))
+  );
+  background: -moz-linear-gradient(
+      center bottom,
+      rgb(224,225,221) 100%,
+      rgb(173,175,175) 0%
+  );
+
+  text-align: center;
+}
+
+.actor .tile .title {
+  font-size: 0.7em;
 }
-- 
2.22.5