dropdown ui

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

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 4ef1f876a631c70defac40c3cc10c191836ddbf1..554fe1da81c054fc7f3ffbfbdca44fb60a9ffb74 100644 (file)
--- 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 7ba3ce0b924b4a1f274c66ae4678d378bbd53e43..20fe5235eb0f4a1392c01609dac509b0fe0b7e7f 100644 (file)
--- 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 c66a9d60d146cb20c4b0bbe38f7ef982622bceac..ea1c7ba6459b6372183bf9caf6a061ee0701eb09 100644 (file)
--- 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">