Improve usability
- Trigger rename by doubleclick on token name - Use action rename to open and close - Line height stays the same Signed-off-by: Daniel Kesselberg <mail@danielkesselberg.de>
This commit is contained in:
parent
34e849d702
commit
9ff6a2dab8
|
@ -440,7 +440,14 @@ table.nostyle {
|
|||
}
|
||||
|
||||
&.token-name {
|
||||
padding: 10px 0;
|
||||
padding: 10px 6px;
|
||||
&.token-rename {
|
||||
padding: 0;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.more {
|
||||
|
@ -456,6 +463,9 @@ table.nostyle {
|
|||
}
|
||||
}
|
||||
}
|
||||
tr > *:nth-child(2) {
|
||||
padding-left: 6px;
|
||||
}
|
||||
tr > *:nth-child(3) {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
@ -220,7 +220,8 @@
|
|||
$el.on('click', '.icon-more', _.bind(this._onConfigureToken, this));
|
||||
$el.on('change', 'input.filesystem', _.bind(this._onSetTokenScope, this));
|
||||
$el.on('click', '.icon-rename', _.bind(this._onRenameToken, this));
|
||||
$el.on('keyup', 'input.rename-token', _.bind(this._onEnterTokenName, this));
|
||||
$el.on('dblclick', '.token-name > span', _.bind(this._onRenameToken, this));
|
||||
$el.on('keyup', '.token-name > input', _.bind(this._onEnterTokenName, this));
|
||||
|
||||
this._form = $('#app-password-form');
|
||||
this._tokenName = $('#app-password-name');
|
||||
|
@ -420,16 +421,25 @@
|
|||
_onRenameToken: function (event) {
|
||||
var $target = $(event.target);
|
||||
var $row = $target.closest('tr');
|
||||
var id = $row.data('id');
|
||||
|
||||
var token = this.collection.get(id);
|
||||
if (_.isUndefined(token)) {
|
||||
var tokenId = $row.data('id');
|
||||
var token = this.collection.get(tokenId);
|
||||
|
||||
if (_.isUndefined(token) || token.get('current') === true) {
|
||||
// Ignore event
|
||||
return;
|
||||
}
|
||||
|
||||
$row.find('.token-name > span').addClass('hidden');
|
||||
$row.find('.token-name > input').removeClass('hidden').focus();
|
||||
var $tokenName = $row.find('.token-name');
|
||||
var showTokenNameInput = !$tokenName.hasClass('token-rename'); // if class token-rename present input is already visible.
|
||||
|
||||
this._hideTokenNameInput();
|
||||
|
||||
if (showTokenNameInput) {
|
||||
$tokenName.addClass('token-rename');
|
||||
$tokenName.find('span').addClass('hidden');
|
||||
$tokenName.find('input').removeClass('hidden').val(token.get('name')).focus();
|
||||
}
|
||||
|
||||
this._hideConfigureToken();
|
||||
},
|
||||
|
@ -437,9 +447,10 @@
|
|||
_onEnterTokenName: function(event) {
|
||||
var $target = $(event.target);
|
||||
var $row = $target.closest('tr');
|
||||
var id = $row.data('id');
|
||||
|
||||
var token = this.collection.get(id);
|
||||
var tokenId = $row.data('id');
|
||||
var token = this.collection.get(tokenId);
|
||||
|
||||
if (_.isUndefined(token)) {
|
||||
// Ignore event
|
||||
return;
|
||||
|
@ -455,11 +466,17 @@
|
|||
}
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
$row.find('.token-name > span').removeClass('hidden');
|
||||
$row.find('.token-name > input').addClass('hidden');
|
||||
this._hideTokenNameInput();
|
||||
}
|
||||
},
|
||||
|
||||
_hideTokenNameInput: function () {
|
||||
var $tokenList = $('.token-list td.token-name');
|
||||
$tokenList.removeClass('token-rename');
|
||||
$tokenList.find('span').removeClass('hidden');
|
||||
$tokenList.find('input').addClass('hidden');
|
||||
},
|
||||
|
||||
_toggleFormResult: function (showForm) {
|
||||
if (showForm) {
|
||||
this._result.slideUp();
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
templates['authtoken'] = template({"1":function(container,depth0,helpers,partials,data) {
|
||||
var helper;
|
||||
|
||||
return " <input class=\"hidden rename-token\" type=\"text\" value=\""
|
||||
return " <input class=\"hidden\" type=\"text\" value=\""
|
||||
+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"name","hash":{},"data":data}) : helper)))
|
||||
+ "\" />\n";
|
||||
},"3":function(container,depth0,helpers,partials,data) {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<td class="token-name">
|
||||
<span>{{name}}</span>
|
||||
{{#if canRename}}
|
||||
<input class="hidden rename-token" type="text" value="{{name}}" />
|
||||
<input class="hidden" type="text" value="{{name}}" />
|
||||
{{/if}}
|
||||
</td>
|
||||
<td>
|
||||
|
|
Loading…
Reference in New Issue