POpovermenu fix and token settings design fixes

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

core/css/apps.scss

@@ -829,6 +829,7 @@ $popovericon-size: 16px;
 	background-color: var(--color-main-background);
 	color: var(--color-main-text);
 	border-radius: var(--border-radius);
+	border: 1px solid transparent;
 	z-index: 110;
 	margin: 5px;
 	margin-top: -5px;
@@ -838,9 +839,11 @@ $popovericon-size: 16px;
 
 	&:after {
 		bottom: 100%;
-	 /* Min-width of popover is 36px and arrow width is 20px
-		wich leaves us 8px right and 8px left */
-		right: 8px;
+		// Required right-distance is half menu icon size + right padding
+		// = 16px/2 + 14px = 22px
+		// popover right margin is 5px, arrow width is 9px to center and border is 1px
+		// 22px - 9px - 5px - 1px = 7px 
+		right: 7px;
 		/* change this to adjust the arrow position */
 		border: solid transparent;
 		content: ' ';
@@ -849,7 +852,7 @@ $popovericon-size: 16px;
 		position: absolute;
 		pointer-events: none;
 		border-bottom-color: var(--color-main-background);
-		border-width: 10px;
+		border-width: 9px;
 	}
 	/* Center the popover */
 	&.menu-center {

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

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