Rooba
/
perkeep
mirror of https://github.com/perkeep/perkeep.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

newui: Adds a toolbar class with bigger/smaller buttons; they do nothing yet 

Change-Id: I8e053062e832239f6c34769faa71b84ab174684b
This commit is contained in:
Brett Slatkin 2012-12-23 17:27:31 -08:00
parent 511eb7c6d4
commit 80171f6692
7 changed files with 178 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
server/camlistored/newui/blob_item_container_test.html
View File

@ -4,6 +4,7 @@
<script src="closure/goog/base.js"></script>
<script src="./deps.js"></script>
<script>
goog.require('goog.events');
goog.require('goog.testing.net.XhrIo');
goog.require('camlistore.ServerConnection');
goog.require('camlistore.BlobItemContainer');

10
server/camlistored/newui/create_item.js
View File

@ -12,9 +12,6 @@ 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}
@ -52,11 +49,11 @@ camlistore.CreateItem.prototype.decorateInternal = function(element) {
var plusEl = this.dom_.createDom('a', 'cam-createitem-link');
plusEl.href = 'javascript:void(0)';
this.dom_.setTextContent(plusEl, "+")
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_.setTextContent(titleEl, 'Drag & drop files or click');
this.dom_.appendChild(el, titleEl);
};
@ -73,7 +70,6 @@ camlistore.CreateItem.prototype.disposeInternal = function() {
*/
camlistore.CreateItem.prototype.enterDocument = function() {
camlistore.CreateItem.superClass_.enterDocument.call(this);
// Add event handlers here
};
@ -83,5 +79,5 @@ camlistore.CreateItem.prototype.enterDocument = function() {
*/
camlistore.CreateItem.prototype.exitDocument = function() {
camlistore.CreateItem.superClass_.exitDocument.call(this);
// Clear event handlers here
this.eh_.removeAll();
};

3
server/camlistored/newui/index.html
View File

@ -11,6 +11,9 @@
<link rel="stylesheet" href="blob_item_container.css" type="text/css">
<link rel="stylesheet" href="create_item.css" type="text/css">
<link rel="stylesheet" href="index.css" type="text/css">
<link rel="stylesheet" href="toolbar.css" type="text/css">
<link rel="stylesheet" href="closure/goog/css/common.css" type="text/css">
<link rel="stylesheet" href="closure/goog/css/toolbar.css" type="text/css">
</head>
<body>
<script>

11
server/camlistored/newui/index.js
View File

@ -12,6 +12,8 @@ goog.require('goog.ui.Component');
goog.require('camlistore.BlobItemContainer');
goog.require('camlistore.BlobItemContainer.EventType');
goog.require('camlistore.ServerConnection');
goog.require('camlistore.Toolbar');
goog.require('camlistore.Toolbar.EventType');
/**
@ -42,9 +44,15 @@ camlistore.IndexPage = function(config, opt_domHelper) {
* @private
*/
this.blobItemContainer_ = new camlistore.BlobItemContainer(
this.connection_);
this.connection_, opt_domHelper);
this.blobItemContainer_.setHasCreateItem(true);
/**
* @type {camlistore.Toolbar}
* @private
*/
this.toolbar_ = new camlistore.Toolbar(opt_domHelper);
/**
* @type {goog.events.EventHandler}
* @private
@ -77,6 +85,7 @@ camlistore.IndexPage.prototype.decorateInternal = function(element) {
this.dom_.setTextContent(titleEl, this.config_.ownerName + '\'s Vault');
this.dom_.appendChild(el, titleEl);
this.addChild(this.toolbar_, true);
this.addChild(this.blobItemContainer_, true);
};

11
server/camlistored/newui/toolbar.css Normal file
View File

@ -0,0 +1,11 @@
.cam-toolbar-magnify {
display: block;
vertical-align: middle;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.cam-toolbar-magnify .goog-toolbar-button-inner-box {
width: 20px;
}

119
server/camlistored/newui/toolbar.js Normal file
View File

@ -0,0 +1,119 @@
/**
* @fileoverview TODO
*
*/
goog.provide('camlistore.Toolbar');
goog.provide('camlistore.Toolbar.EventType');
goog.require('goog.dom');
goog.require('goog.dom.classes');
goog.require('goog.events.EventHandler');
goog.require('goog.events.EventType');
goog.require('goog.ui.Toolbar');
goog.require('goog.ui.ToolbarButton');
/**
* @param {goog.dom.DomHelper=} opt_domHelper DOM helper to use.
*
* @extends {goog.ui.Toolbar}
* @constructor
*/
camlistore.Toolbar = function(opt_domHelper) {
goog.base(this, opt_domHelper);
/**
* @type {goog.ui.ToolbarButton}
* @private
*/
this.biggerButton_ = new goog.ui.ToolbarButton('+');
this.biggerButton_.addClassName('cam-toolbar-magnify');
/**
* @type {goog.ui.ToolbarButton}
* @private
*/
this.smallerButton_ = new goog.ui.ToolbarButton('\u2212');
this.smallerButton_.addClassName('cam-toolbar-magnify');
/**
* @type {goog.events.EventHandler}
* @private
*/
this.eh_ = new goog.events.EventHandler(this);
};
goog.inherits(camlistore.Toolbar, goog.ui.Toolbar);
/**
* @enum {string}
*/
camlistore.Toolbar.EventType = {
BIGGER: 'Camlistore_Toolbar_Bigger',
SMALLER: 'Camlistore_Toolbar_Smaller'
};
/**
* Creates an initial DOM representation for the component.
*/
camlistore.Toolbar.prototype.createDom = function() {
this.decorateInternal(this.dom_.createElement('div'));
};
/**
* Decorates an existing HTML DIV element.
* @param {Element} element The DIV element to decorate.
*/
camlistore.Toolbar.prototype.decorateInternal = function(el) {
camlistore.Toolbar.superClass_.decorateInternal.call(this, el);
this.addChild(this.biggerButton_, true);
this.addChild(this.smallerButton_, true);
};
/** @override */
camlistore.Toolbar.prototype.disposeInternal = function() {
camlistore.Toolbar.superClass_.disposeInternal.call(this);
this.eh_.dispose();
};
/**
* Called when component's element is known to be in the document.
*/
camlistore.Toolbar.prototype.enterDocument = function() {
camlistore.Toolbar.superClass_.enterDocument.call(this);
this.eh_.listen(
this.biggerButton_.getElement(),
goog.events.EventType.CLICK,
goog.bind(this.dispatch_, this, camlistore.Toolbar.EventType.BIGGER));
this.eh_.listen(
this.smallerButton_.getElement(),
goog.events.EventType.CLICK,
goog.bind(this.dispatch_, this, camlistore.Toolbar.EventType.SMALLER));
};
/**
* @param {camlistore.Toolbar.EventType} eventType Type of event to dispatch.
*/
camlistore.Toolbar.prototype.dispatch_ = function(eventType) {
this.dispatchEvent(eventType);
};
/**
* Called when component's element is known to have been removed from the
* document.
*/
camlistore.Toolbar.prototype.exitDocument = function() {
camlistore.Toolbar.superClass_.exitDocument.call(this);
// Clear event handlers here
};

31
server/camlistored/newui/toolbar_test.html Normal file
View File

@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<script src="closure/goog/base.js"></script>
<script src="./deps.js"></script>
<script>
goog.require('goog.events');
goog.require('camlistore.Toolbar');
goog.require('camlistore.Toolbar.EventType');
</script>
<link rel="stylesheet" href="toolbar.css" type="text/css">
<link rel="stylesheet" href="closure/goog/css/common.css" type="text/css">
<link rel="stylesheet" href="closure/goog/css/toolbar.css" type="text/css">
</head>
<body>
<script>
var x = new camlistore.Toolbar();
x.render(document.body);
goog.events.listen(
x, camlistore.Toolbar.EventType.BIGGER, function() {
console.log('Bigger');
});
goog.events.listen(
x, camlistore.Toolbar.EventType.SMALLER, function() {
console.log('Smaller');
});
</script>
</body>
</html>