diff options
| -rw-r--r-- | css/style.scss | 14 | ||||
| -rw-r--r-- | js/views/editabletextlabel.js | 33 | ||||
| -rw-r--r-- | js/views/templates.js | 4 | ||||
| -rw-r--r-- | js/views/templates/editabletextlabel.handlebars | 2 |
4 files changed, 41 insertions, 12 deletions
diff --git a/css/style.scss b/css/style.scss index 3858d6166..6607873c0 100644 --- a/css/style.scss +++ b/css/style.scss @@ -787,7 +787,12 @@ input[type="password"] { .label-wrapper { display: flex; align-items: center; - .edit-button { + .edit-button .icon { + background-color: transparent; + border: none; + padding: 13px 22px; + margin: 0; + opacity: .3; &:hover, @@ -795,13 +800,6 @@ input[type="password"] { &:active { opacity: 1; } - - .icon { - background-color: transparent; - border: none; - padding: 13px 22px; - margin: 0; - } } } .input-wrapper { diff --git a/js/views/editabletextlabel.js b/js/views/editabletextlabel.js index 8031a401a..d7dfb7414 100644 --- a/js/views/editabletextlabel.js +++ b/js/views/editabletextlabel.js @@ -73,7 +73,7 @@ ui: { labelWrapper: '.label-wrapper', label: '.label', - editButton: '.edit-button', + editButton: '.edit-button button', inputWrapper: '.input-wrapper', input: 'input.username', confirmButton: '.confirm-button', @@ -81,6 +81,7 @@ }, events: { + 'keydown @ui.editButton': 'preventConfirmEditOnNextInputKeyUp', 'click @ui.editButton': 'showInput', 'keyup @ui.input': 'handleInputKeyUp', 'click @ui.confirmButton': 'confirmEdit', @@ -181,6 +182,34 @@ this.getUI('label').text(this._getText()); }, + /** + * Prevents the edition to be confirmed on the next key up event on the + * input. + * + * When Enter is pressed in the edit button the default behaviour is to + * trigger a click event which, in turn, shows and focus the input. + * However, as the enter key is still pressed as soon as it is released + * a key up event is triggered, now on the focused input, which would + * confirm the edit and hide again the input. + * + * Note that confirming the edition is only prevented for the first key + * up event. If the Enter key is kept pressed on an input the browser + * periodically generates new key down and key up events; surprisingly + * the "repeat" property of the event is "false", so it can not be + * distinguished if the key is being kept pressed. Due to this it is not + * possible to prevent confirming the edition until the Enter key is + * actually released for the first time after showing the input. + */ + preventConfirmEditOnNextInputKeyUp: function(event) { + if (event.keyCode !== 13) { + return; + } + + this.getUI('input').one('keyup', function(event) { + event.stopPropagation(); + }.bind(this)); + }, + showInput: function() { this.getUI('input').val(this.model.get(this.modelAttribute)); @@ -193,6 +222,8 @@ hideInput: function() { this.getUI('labelWrapper').removeClass('hidden-important'); this.getUI('inputWrapper').addClass('hidden-important'); + + this.getUI('editButton').focus(); }, handleInputKeyUp: function(event) { diff --git a/js/views/templates.js b/js/views/templates.js index bac29a350..06c68b28e 100644 --- a/js/views/templates.js +++ b/js/views/templates.js @@ -192,9 +192,9 @@ templates['collectionsview'] = template({"compiler":[7,">= 4.0.0"],"main":functi templates['editabletextlabel'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1; - return " <div class=\"edit-button\"><span class=\"icon button icon-rename\" " + return " <div class=\"edit-button\"><button class=\"icon button icon-rename\" " + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.buttonTitle : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") - + "></span></div>\n"; + + "></button></div>\n"; },"2":function(container,depth0,helpers,partials,data) { var helper; diff --git a/js/views/templates/editabletextlabel.handlebars b/js/views/templates/editabletextlabel.handlebars index 9ec400497..bb0150027 100644 --- a/js/views/templates/editabletextlabel.handlebars +++ b/js/views/templates/editabletextlabel.handlebars @@ -1,7 +1,7 @@ <div class="label-wrapper"> <{{labelTagName}} class="label">{{text}}</{{labelTagName}}> {{#if editionEnabled}} - <div class="edit-button"><span class="icon button icon-rename" {{#if buttonTitle}} title="{{buttonTitle}}" {{/if}}></span></div> + <div class="edit-button"><button class="icon button icon-rename" {{#if buttonTitle}} title="{{buttonTitle}}" {{/if}}></button></div> {{/if}} </div> {{#if editionEnabled}} |