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>

settings/css/settings.scss

@@ -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;
 	}

settings/js/authtoken_view.js

@@ -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();

settings/js/templates.js

@@ -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) {

settings/js/templates/authtoken.handlebars

@@ -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>