dropdown ui

Signed-off-by: Robin Appelman <robin@icewind.nl>

3 files changed, 40 insertions, 24 deletions

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 4ef1f876a63..554fe1da81c 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -149,10 +149,11 @@ table.nostyle td { padding: 0.2em 0; }
 	padding: 10px 10px 10px 0;
 }
 
-#sessions .token-list td.icon,
-#apppasswords .token-list td.icon {
+#sessions .token-list td.more,
+#apppasswords .token-list td.more {
+	overflow: visible;
+	position: relative;
 	width: 16px;
-	padding: 10px;
 }
 
 #sessions .token-list td,
@@ -170,33 +171,50 @@ table.nostyle td { padding: 0.2em 0; }
 #apppasswords tr>*:nth-child(2) {
 	text-align: right;
 }
+#sessions .token-list td > a.icon,
+#apppasswords .token-list  td > a.icon {
+	opacity: 0;
+	transition: opacity 0.5s;
+}
+
 #sessions .token-list a.icon,
 #apppasswords .token-list a.icon {
-	opacity: 0.6;
 	margin-top: 4px;
-	display: none;
+	display: block;
 }
 
-#sessions .token-list tr:hover a.icon,
-#apppasswords .token-list tr:hover a.icon {
-	display: block;
+#sessions .token-list tr:hover td > a.icon,
+#apppasswords .token-list tr:hover td > a.icon,
+#sessions .token-list tr.active td > a.icon,
+#apppasswords .token-list tr.active td > a.icon{
+	opacity: 0.6;
 }
 
 #sessions .token-list td div.configure,
 #apppasswords .token-list td div.configure {
 	display: none;
-	height: 18px;
 }
 
 #sessions .token-list tr.active div.configure,
 #apppasswords .token-list tr.active div.configure {
 	display: block;
-	padding-left: 10px;
+	position: absolute;
+	top: 45px;
+	right: -5px;
+	padding: 10px;
 }
 
-#sessions .token-list tr.active .token-name,
-#apppasswords .token-list tr.active .token-name {
-	display: none;
+#sessions .token-list tr.active div.configure > *,
+#apppasswords .token-list tr.active div.configure > *{
+	margin-top: 5px;
+	margin-bottom: 5px;
+	display: inline-block;
+}
+
+#sessions .token-list tr.active a.icon-delete,
+#apppasswords .token-list tr.active a.icon-delete {
+	background-position: left;
+	padding-left: 20px;
 }
 
 #new-app-login-name,
diff --git a/settings/js/authtoken_view.js b/settings/js/authtoken_view.js
index 7ba3ce0b924..20fe5235eb0 100644
--- a/settings/js/authtoken_view.js
+++ b/settings/js/authtoken_view.js
@@ -29,21 +29,19 @@
 		'<tr data-id="{{id}}">'
 		+ '<td class="has-tooltip" title="{{title}}">'
 		+ '<span class="token-name">{{name}}</span>'
-		+ '<div class="configure">'
-		+ '<input class="filesystem checkbox" type="checkbox" id="{{id}}_filesystem" {{#if scope.filesystem}}checked{{/if}}/>'
-		+ '<label for="{{id}}_filesystem">' + t('core', 'Allow filesystem access') + '</label><br/>'
-		+ '</div>'
 		+ '</td>'
 		+ '<td><span class="last-activity has-tooltip" title="{{lastActivityTime}}">{{lastActivity}}</span></td>'
-		+ '<td class="icon">'
+		+ '<td class="more">'
+		+ '{{#if showMore}}<a class="icon icon-more"/>{{/if}}'
+		+ '<div class="popovermenu bubble open menu configure">'
 		+ '{{#if canScope}}'
-		+ '<a class="icon icon-settings has-tooltip" title="' + t('core', 'Configure') + '"></a>'
+		+ '<input class="filesystem checkbox" type="checkbox" id="{{id}}_filesystem" {{#if scope.filesystem}}checked{{/if}}/>'
+		+ '<label for="{{id}}_filesystem">' + t('core', 'Allow filesystem access') + '</label><br/>'
 		+ '{{/if}}'
-		+ '</td>'
-		+ '<td class="icon">'
 		+ '{{#if canDelete}}'
-		+ '<a class="icon icon-delete has-tooltip" title="' + t('core', 'Disconnect') + '"></a>'
+		+ '<a class="icon icon-delete has-tooltip" title="' + t('core', 'Disconnect') + '">' + t('core', 'Revoke') +'</a>'
 		+ '{{/if}}'
+		+ '</div>'
 		+ '</td>'
 		+ '<tr>';
 
@@ -111,6 +109,7 @@
 			viewData.lastActivity = OC.Util.relativeModifiedDate(ts);
 			viewData.lastActivityTime = OC.Util.formatDate(ts, 'LLL');
 			viewData.canScope = token.get('type') === 1;
+			viewData.showMore = viewData.canScope || viewData.canDelete;
 
 			// preserve title for cases where we format it further
 			viewData.title = viewData.name;
@@ -217,7 +216,7 @@
 
 				var $el = $(el);
 				$el.on('click', 'a.icon-delete', _.bind(_this._onDeleteToken, _this));
-				$el.on('click', 'a.icon-settings', _.bind(_this._onConfigureToken, _this));
+				$el.on('click', '.icon-more', _.bind(_this._onConfigureToken, _this));
 				$el.on('change', 'input.filesystem', _.bind(_this._onSetTokenScope, _this));
 			});
 
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index c66a9d60d14..ea1c7ba6459 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -220,7 +220,6 @@ if($_['passwordChangeSupported']) {
 				<th><?php p($l->t('Name'));?></th>
 				<th><?php p($l->t('Last activity'));?></th>
 				<th></th>
-				<th></th>
 			</tr>
 		</thead>
 		<tbody class="token-list icon-loading">