From fd90be6f6840b1dd82fcfec15a9304af62a72d97 Mon Sep 17 00:00:00 2001 From: yawano Date: Thu, 13 Aug 2015 20:33:32 -0700 Subject: [PATCH] Gallery: add cancel button to crop and brightness operations. BUG=520126 TEST=none Review URL: https://codereview.chromium.org/1294433002 Cr-Commit-Position: refs/heads/master@{#343338} --- ui/file_manager/gallery/css/gallery.css | 11 ++-- .../gallery/js/image_editor/image_editor.js | 69 +++++++++++++++------- 2 files changed, 53 insertions(+), 27 deletions(-) diff --git a/ui/file_manager/gallery/css/gallery.css b/ui/file_manager/gallery/css/gallery.css index 84ff7ca98d6f..8490d24ebf93 100644 --- a/ui/file_manager/gallery/css/gallery.css +++ b/ui/file_manager/gallery/css/gallery.css @@ -718,7 +718,7 @@ button[disabled] { } .edit-modal-wrapper .container, -.edit-modal-wrapper .done-button { +.edit-modal-wrapper .action-buttons { align-items: center; display: flex; height: 100%; @@ -729,7 +729,7 @@ button[disabled] { justify-content: center; } -.edit-modal-wrapper .done-button { +.edit-modal-wrapper .action-buttons { justify-content: flex-end; left: 0; position: absolute; @@ -755,17 +755,18 @@ button[disabled] { display: block; } -/* Done button */ -.edit-modal button.done { +/* Action buttons */ +.edit-modal-wrapper .action-buttons button { -webkit-margin-end: 8px; align-items: center; display: flex; height: 32px; justify-content: center; + outline: none; width: 70px; } -.edit-modal button.done .label { +.edit-modal-wrapper .action-buttons button .label { font-weight: bold; } diff --git a/ui/file_manager/gallery/js/image_editor/image_editor.js b/ui/file_manager/gallery/js/image_editor/image_editor.js index 96d21362ed96..80094c1259ba 100644 --- a/ui/file_manager/gallery/js/image_editor/image_editor.js +++ b/ui/file_manager/gallery/js/image_editor/image_editor.js @@ -58,6 +58,8 @@ function ImageEditor( this.onOptionsChange.bind(this), true /* done button */); this.modeToolbar_.addEventListener( 'done-clicked', this.onDoneClicked_.bind(this)); + this.modeToolbar_.addEventListener( + 'cancel-clicked', this.onCancelClicked_.bind(this)); this.prompt_ = prompt; @@ -576,9 +578,16 @@ ImageEditor.prototype.setUpMode_ = function(mode) { * @private */ ImageEditor.prototype.onDoneClicked_ = function(event) { - var button = event.target.getDoneButton(); - button.querySelector('paper-ripple').simulatedRipple(); - this.leaveMode(true); + this.leaveMode(true /* commit */); +}; + +/** + * Handles click event of Cancel button. + * @param {!Event} event An event. + * @private + */ +ImageEditor.prototype.onCancelClicked_ = function(event) { + this.leaveMode(false /* not commit */); }; /** @@ -993,13 +1002,13 @@ ImageEditor.MouseControl.prototype.updateCursor_ = function(position) { * @param {function(string)} displayStringFunction A string formatting function. * @param {function(Object)=} opt_updateCallback The callback called when * controls change. - * @param {boolean=} opt_showDoneButton True to show done button. + * @param {boolean=} opt_showActionButtons True to show action buttons. * @constructor * @extends {cr.EventTarget} * @struct */ ImageEditor.Toolbar = function( - parent, displayStringFunction, opt_updateCallback, opt_showDoneButton) { + parent, displayStringFunction, opt_updateCallback, opt_showActionButtons) { this.wrapper_ = parent; this.displayStringFunction_ = displayStringFunction; @@ -1009,15 +1018,22 @@ ImageEditor.Toolbar = function( */ this.updateCallback_ = opt_updateCallback || null; - // Create done button. - if (opt_showDoneButton) { - var doneButtonLayer = document.createElement('div'); - doneButtonLayer.classList.add('done-button'); + // Create action buttons. + if (opt_showActionButtons) { + var actionButtonsLayer = document.createElement('div'); + actionButtonsLayer.classList.add('action-buttons'); + + this.cancelButton_ = ImageEditor.Toolbar.createButton_( + 'GALLERY_CANCEL_LABEL', ImageEditor.Toolbar.ButtonType.LABEL_UPPER_CASE, + this.onCancelClicked_.bind(this), 'cancel'); + actionButtonsLayer.appendChild(this.cancelButton_); + this.doneButton_ = ImageEditor.Toolbar.createButton_( - 'GALLERY_DONE', ImageEditor.Toolbar.ButtonType.LABEL, + 'GALLERY_DONE', ImageEditor.Toolbar.ButtonType.LABEL_UPPER_CASE, this.onDoneClicked_.bind(this), 'done'); - doneButtonLayer.appendChild(this.doneButton_); - this.wrapper_.appendChild(doneButtonLayer); + actionButtonsLayer.appendChild(this.doneButton_); + + this.wrapper_.appendChild(actionButtonsLayer); } /** @@ -1041,24 +1057,29 @@ ImageEditor.Toolbar.HEIGHT = 48; // px * @private */ ImageEditor.Toolbar.prototype.onDoneClicked_ = function() { + this.doneButton_.querySelector('paper-ripple').simulatedRipple(); + var event = new Event('done-clicked'); this.dispatchEvent(event); }; /** - * Returns the parent element. - * @return {!HTMLElement} + * Handles click event of cancel button. + * @private */ -ImageEditor.Toolbar.prototype.getElement = function() { - return this.container_; +ImageEditor.Toolbar.prototype.onCancelClicked_ = function() { + this.cancelButton_.querySelector('paper-ripple').simulatedRipple(); + + var event = new Event('cancel-clicked'); + this.dispatchEvent(event); }; /** - * Returns the element of done button. + * Returns the parent element. * @return {!HTMLElement} */ -ImageEditor.Toolbar.prototype.getDoneButton = function() { - return this.doneButton_; +ImageEditor.Toolbar.prototype.getElement = function() { + return this.container_; }; /** @@ -1084,7 +1105,8 @@ ImageEditor.Toolbar.prototype.add = function(element) { */ ImageEditor.Toolbar.ButtonType = { ICON: 'icon', - LABEL: 'label' + LABEL: 'label', + LABEL_UPPER_CASE: 'label_upper_case' }; /** @@ -1108,10 +1130,13 @@ ImageEditor.Toolbar.createButton_ = function( var icon = document.createElement('div'); icon.classList.add('icon'); button.appendChild(icon); - } else if (type === ImageEditor.Toolbar.ButtonType.LABEL) { + } else if (type === ImageEditor.Toolbar.ButtonType.LABEL || + type === ImageEditor.Toolbar.ButtonType.LABEL_UPPER_CASE) { var label = document.createElement('span'); label.classList.add('label'); - label.textContent = strf(title); + label.textContent = + type === ImageEditor.Toolbar.ButtonType.LABEL_UPPER_CASE ? + strf(title).toLocaleUpperCase() : strf(title); button.appendChild(label); } else { assertNotReached(); -- 2.11.4.GIT