POpovermenu fix and token settings design fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 20 insertions, 40 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 3dd6bf82916..e03b7e6bcd1 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -410,6 +410,7 @@ table.nostyle {
 	}
 }
 
+/* Devices & sessions access & tokens */
 #security {
 	table {
 		width: 100%;
@@ -420,12 +421,6 @@ table.nostyle {
 			opacity: .5;
 			padding: 10px 10px 10px 0;
 		}
-		td {
-			padding: 10px 10px 10px 0;
-			&:first-child {
-				padding: 10px;
-			}
-		}
 	}
 	.token-list td {
 		&%icon {
@@ -441,8 +436,8 @@ table.nostyle {
 
 			div {
 				opacity: 0.57;
-				width: inherit;
-				padding-top: 5px;
+				width: 44px;
+				height: 44px;
 			}
 		}
 		border-top: 1px solid var(--color-border);
@@ -450,48 +445,27 @@ table.nostyle {
 		max-width: 200px;
 		white-space: nowrap;
 		overflow: hidden;
-		vertical-align: top;
+		vertical-align: middle;
 		position: relative;
 	}
 	tr > *:nth-child(3) {
 		text-align: right;
 	}
 	.token-list {
-		td > a.icon {
-
+		td > a.icon-more {
 			transition: opacity 0.5s;
 		}
-		a.icon {
-			margin-top: 4px;
+		a.icon-more {
+			padding: 14px;
 			display: block;
+			width: 44px;
+			height: 44px;
+			opacity: .5;
 		}
 		tr {
-			&:hover td > a.icon, &.active td > a.icon {
-				opacity: 0.6;
-			}
-		}
-		td div.configure {
-			display: none;
-		}
-		tr.active div.configure {
-			display: block;
-			position: absolute;
-			top: 45px;
-			right: -5px;
-			padding: 10px;
-		}
-		div.configure:after {
-			right: 13px;
-		}
-		tr.active {
-			div.configure > * {
-				margin-top: 5px;
-				margin-bottom: 5px;
-				display: inline-block;
-			}
-			a.icon-delete {
-				background-position: left;
-				padding-left: 20px;
+			&:hover td > a.icon,
+			&.active td > a.icon {
+				opacity: 0.7;
 			}
 		}
 	}
diff --git a/settings/js/authtoken_view.js b/settings/js/authtoken_view.js
index d20356b2594..3d56aefac1e 100644
--- a/settings/js/authtoken_view.js
+++ b/settings/js/authtoken_view.js
@@ -36,13 +36,17 @@
 		+ '<td><span class="last-activity has-tooltip" title="{{lastActivityTime}}">{{lastActivity}}</span></td>'
 		+ '<td class="more">'
 		+ '{{#if showMore}}<a class="icon icon-more"/>{{/if}}'
-		+ '<div class="popovermenu bubble open menu configure">'
+		+ '<div class="popovermenu menu">'
 		+ '{{#if canScope}}'
+		+ '<li><span class="menuitem">'
 		+ '<input class="filesystem checkbox" type="checkbox" id="{{id}}_filesystem" {{#if scope.filesystem}}checked{{/if}}/>'
 		+ '<label for="{{id}}_filesystem">' + t('settings', 'Allow filesystem access') + '</label><br/>'
+		+ '</span></li>'
 		+ '{{/if}}'
 		+ '{{#if canDelete}}'
+		+ '<li>'
 		+ '<a class="icon icon-delete has-tooltip" title="' + t('settings', 'Disconnect') + '">' + t('settings', 'Revoke') +'</a>'
+		+ '</li>'
 		+ '{{/if}}'
 		+ '</div>'
 		+ '</td>'
@@ -376,11 +380,13 @@
 			var $target = $(event.target);
 			var $row = $target.closest('tr');
 			$row.toggleClass('active');
+			$row.find('.popovermenu').toggleClass('open');
 			var id = $row.data('id');
 		},
 
 		_hideConfigureToken: function() {
 			$('.token-list tr').removeClass('active');
+			$('.token-list tr .popovermenu').removeClass('open');
 		},
 
 		_onDeleteToken: function (event) {