newui: start of a the creation plus button component.

Change-Id: I208c11be27f879b3ed476d4f2210fed12c8a0cc3
This commit is contained in:
Brad Fitzpatrick 2012-12-23 15:42:03 -08:00
parent 3f69a0eb7d
commit eaa22b2dbc
4 changed files with 108 additions and 0 deletions

View File

@ -0,0 +1,3 @@
.cam-createitem-link {
font-size: 30pt;
}

View File

@ -0,0 +1,86 @@
/**
* @fileoverview TODO
*
*/
goog.provide('camlistore.CreateItem');
goog.require('goog.dom');
goog.require('goog.dom.classes');
goog.require('goog.events.EventHandler');
goog.require('goog.events.EventType');
goog.require('goog.ui.Control');
/**
* @param {string} blobRef BlobRef for the item.
* @param {camlistore.ServerType.IndexerMetaBag} metaBag Maps blobRefs to
* metadata for this blob and related blobs.
* @param {goog.dom.DomHelper=} opt_domHelper DOM helper to use.
*
* @extends {goog.ui.Component}
* @constructor
*/
camlistore.CreateItem = function(opt_domHelper) {
goog.base(this, opt_domHelper);
/**
* @type {goog.events.EventHandler}
* @private
*/
this.eh_ = new goog.events.EventHandler(this);
};
goog.inherits(camlistore.CreateItem, goog.ui.Control);
/**
* Creates an initial DOM representation for the component.
*/
camlistore.CreateItem.prototype.createDom = function() {
this.decorateInternal(this.dom_.createElement('div'));
};
/**
* Decorates an existing HTML DIV element.
* @param {Element} element The DIV element to decorate.
*/
camlistore.CreateItem.prototype.decorateInternal = function(element) {
camlistore.CreateItem.superClass_.decorateInternal.call(this, element);
var el = this.getElement();
goog.dom.classes.add(el, 'cam-blobitem', 'cam-blobitem-150');
var plusEl = this.dom_.createDom('a', 'cam-createitem-link');
this.dom_.setTextContent(plusEl, "+")
this.dom_.appendChild(el, plusEl);
var titleEl = this.dom_.createDom('p', 'cam-createitem-thumbtitle');
this.dom_.setTextContent(titleEl, "Drag & drop files or click");
this.dom_.appendChild(el, titleEl);
};
/** @override */
camlistore.CreateItem.prototype.disposeInternal = function() {
camlistore.CreateItem.superClass_.disposeInternal.call(this);
this.eh_.dispose();
};
/**
* Called when component's element is known to be in the document.
*/
camlistore.CreateItem.prototype.enterDocument = function() {
camlistore.CreateItem.superClass_.enterDocument.call(this);
// Add event handlers here
};
/**
* Called when component's element is known to have been removed from the
* document.
*/
camlistore.CreateItem.prototype.exitDocument = function() {
camlistore.CreateItem.superClass_.exitDocument.call(this);
// Clear event handlers here
};

View File

@ -0,0 +1,18 @@
<!doctype html>
<html>
<head>
<script src="closure/goog/base.js"></script>
<script src="./deps.js"></script>
<script>
goog.require('camlistore.CreateItem');
</script>
<link rel="stylesheet" href="blob_item.css" type="text/css">
<link rel="stylesheet" href="create_item.css" type="text/css">
</head>
<body>
<script>
var x = new camlistore.CreateItem();
x.render(document.body);
</script>
</body>
</html>

View File

@ -8,6 +8,7 @@
goog.require('camlistore.IndexPage');
</script>
<link rel="stylesheet" href="blob_item.css" type="text/css">
<link rel="stylesheet" href="create_item.css" type="text/css">
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>