From 9157f807cc9a8a0aa5c68de572bff230dd7e2a49 Mon Sep 17 00:00:00 2001
From: Robin Appelman <robin@icewind.nl>
Date: Mon, 14 Nov 2016 18:19:27 +0100
Subject: [PATCH] dropdown ui
Signed-off-by: Robin Appelman <robin@icewind.nl>
---
settings/css/settings.css | 44 +++++++++++++++++++++++----------
settings/js/authtoken_view.js | 19 +++++++-------
settings/templates/personal.php | 1 -
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">
--
GitLab