From 421142213af145d855793f8ffe5371812240c4a6 Mon Sep 17 00:00:00 2001 From: Robert Sesek Date: Sun, 14 Nov 2010 19:15:43 -0500 Subject: [PATCH] Move the move/rename dialog into the Actor UI to reudce modal feelings. --- web_frontend/actor.js | 63 +++++++++++++++++++++++++++--------- web_frontend/path_control.js | 6 ++-- web_frontend/screen.css | 2 -- 3 files changed, 50 insertions(+), 21 deletions(-) diff --git a/web_frontend/actor.js b/web_frontend/actor.js index aeb11d4..697a23d 100644 --- a/web_frontend/actor.js +++ b/web_frontend/actor.js @@ -17,6 +17,7 @@ goog.require('goog.dom'); goog.require('goog.events'); goog.require('goog.events.EventHandler'); goog.require('goog.style'); +goog.require('goog.ui.Button'); goog.require('goog.ui.Container'); goog.require('goog.ui.Dialog'); @@ -47,6 +48,12 @@ armadillo.Actor = function(file, opt_domHelper) { * @type {goog.Disposable} */ this.actionObject_ = null; + + /** + * Controls for the current action. + * @type {goog.ui.Control} + */ + this.controlContainer_ = null; } goog.inherits(armadillo.Actor, goog.ui.Container); @@ -81,6 +88,10 @@ armadillo.Actor.prototype.disposeInternal = function() { this.eh_.dispose(); + if (this.controlContainer_) + this.controlContainer_.dispose(); + this.controlContainer_ = null; + // Remove the actor display element. goog.dom.removeNode(this.element_); this.element_ = null; @@ -112,6 +123,8 @@ armadillo.Actor.prototype.decorateInternal = function(element) { this.addChild(tile, true); } } + this.controlContainer_ = new goog.ui.Control(); + this.addChild(this.controlContainer_, true); }; /** @@ -145,6 +158,8 @@ armadillo.Actor.prototype.createTile_ = function(option) { */ armadillo.Actor.prototype.tileClickHandler_ = function(e) { var option = e.target.actorOption; + this.controlContainer_.removeChildren(true); + this.controlContainer_.setVisible(true); if (option == armadillo.Actor.options_.OPEN) { // TODO: assert that this.file_.isDirectory(). app.navigate(this.file_.getName()); @@ -163,25 +178,14 @@ armadillo.Actor.prototype.tileClickHandler_ = function(e) { * @private */ armadillo.Actor.prototype.performMove_ = function() { - this.actionObject_ = this.createActionDialog_(); - this.actionObject_.setTitle('Move File'); - var editor = new armadillo.PathControl(this.file_.getFullPath(), true); - this.actionObject_.addChild(editor, true); + this.controlContainer_.addChild(editor, true); - var closeCallback = function(e) { - if (e.key != goog.ui.Dialog.DefaultButtonKeys.CANCEL) { - var newPath = editor.getPath(); - this.file_.move(newPath); - } + var okCallback = function(e) { + var newPath = editor.getPath(); + this.file_.move(newPath); }; - // Will be removed when the event source closes. - this.eh_.listen(this.actionObject_, goog.ui.Dialog.SELECT_EVENT, - closeCallback, false, this); - - this.actionObject_.setVisible(true); - var position = goog.style.getPosition(this.actionObject_.getElement()); - goog.style.setPosition(this.actionObject_.getElement(), position.x, '10%'); + this.createOkCancel_(goog.bind(okCallback, this), null); }; /** @@ -235,6 +239,33 @@ armadillo.Actor.prototype.createActionDialog_ = function() { return confirm; }; +/** + * Creates two buttons: one for OK one for Cancel and attahes them to the + * |controlContainer_|. + * @param {function(Event)?} okCallback + * @param {function(Event)?} cancelCallback + */ +armadillo.Actor.prototype.createOkCancel_ = function(okCallback, cancelCallback) { + var ok = new goog.ui.Button('OK'); + if (okCallback) + this.eh_.listen(ok, goog.ui.Component.EventType.ACTION, okCallback); + var cancel = new goog.ui.Button('Cancel'); + if (!cancelCallback) + cancelCallback = goog.bind(this.defaultCancelCallback_, this); + this.eh_.listen(cancel, goog.ui.Component.EventType.ACTION, cancelCallback); + this.controlContainer_.addChild(ok, true); + this.controlContainer_.addChild(cancel, true); +}; + +/** + * The default cancel callback for the above createOkCancel_(). + * @param {event} e + * @private + */ +armadillo.Actor.prototype.defaultCancelCallback_ = function(e) { + this.controlContainer_.removeChildren(true); +}; + /** * Tile Control Renderer * @constructor diff --git a/web_frontend/path_control.js b/web_frontend/path_control.js index fec69d4..525aa1c 100644 --- a/web_frontend/path_control.js +++ b/web_frontend/path_control.js @@ -11,7 +11,7 @@ goog.provide('armadillo.PathControl'); goog.provide('armadillo.PathControl.NameControlRenderer_'); goog.require('goog.array'); -goog.require('goog.ui.Component'); +goog.require('goog.ui.Control'); goog.require('goog.ui.FilteredMenu'); goog.require('goog.ui.LabelInput'); goog.require('goog.ui.MenuButton'); @@ -25,7 +25,7 @@ goog.require('goog.ui.MenuItem'); * @constructor */ armadillo.PathControl = function(path, editLastComponent, opt_domHelper) { - goog.ui.Component.call(this, opt_domHelper); + goog.ui.Control.call(this, opt_domHelper); /** * Full path of the control. @@ -58,7 +58,7 @@ armadillo.PathControl = function(path, editLastComponent, opt_domHelper) { */ this.eh_ = new goog.events.EventHandler(); }; -goog.inherits(armadillo.PathControl, goog.ui.Component); +goog.inherits(armadillo.PathControl, goog.ui.Control); /** * Disposer diff --git a/web_frontend/screen.css b/web_frontend/screen.css index f697a25..e429ff4 100644 --- a/web_frontend/screen.css +++ b/web_frontend/screen.css @@ -78,8 +78,6 @@ h1 { } .actor { - height: 2.3em; - background-color: rgb(77, 79, 83); padding: .1em; -- 2.22.5