Merge pull request #10546 from nextcloud/popover-tokens
Popovermenu fix and token settings design fixes
This commit is contained in:
commit
3254b85c12
|
@ -829,6 +829,7 @@ $popovericon-size: 16px;
|
||||||
background-color: var(--color-main-background);
|
background-color: var(--color-main-background);
|
||||||
color: var(--color-main-text);
|
color: var(--color-main-text);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
border: 1px solid transparent;
|
||||||
z-index: 110;
|
z-index: 110;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
|
@ -838,9 +839,11 @@ $popovericon-size: 16px;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
/* Min-width of popover is 36px and arrow width is 20px
|
// Required right-distance is half menu icon size + right padding
|
||||||
wich leaves us 8px right and 8px left */
|
// = 16px/2 + 14px = 22px
|
||||||
right: 8px;
|
// 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 */
|
/* change this to adjust the arrow position */
|
||||||
border: solid transparent;
|
border: solid transparent;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
|
@ -849,7 +852,7 @@ $popovericon-size: 16px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
border-bottom-color: var(--color-main-background);
|
border-bottom-color: var(--color-main-background);
|
||||||
border-width: 10px;
|
border-width: 9px;
|
||||||
}
|
}
|
||||||
/* Center the popover */
|
/* Center the popover */
|
||||||
&.menu-center {
|
&.menu-center {
|
||||||
|
|
|
@ -410,6 +410,7 @@ table.nostyle {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Devices & sessions access & tokens */
|
||||||
#security {
|
#security {
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -420,12 +421,6 @@ table.nostyle {
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
padding: 10px 10px 10px 0;
|
padding: 10px 10px 10px 0;
|
||||||
}
|
}
|
||||||
td {
|
|
||||||
padding: 10px 10px 10px 0;
|
|
||||||
&:first-child {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.token-list td {
|
.token-list td {
|
||||||
&%icon {
|
&%icon {
|
||||||
|
@ -441,8 +436,8 @@ table.nostyle {
|
||||||
|
|
||||||
div {
|
div {
|
||||||
opacity: 0.57;
|
opacity: 0.57;
|
||||||
width: inherit;
|
width: 44px;
|
||||||
padding-top: 5px;
|
height: 44px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
border-top: 1px solid var(--color-border);
|
border-top: 1px solid var(--color-border);
|
||||||
|
@ -450,48 +445,27 @@ table.nostyle {
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
vertical-align: top;
|
vertical-align: middle;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
tr > *:nth-child(3) {
|
tr > *:nth-child(3) {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.token-list {
|
.token-list {
|
||||||
td > a.icon {
|
td > a.icon-more {
|
||||||
|
|
||||||
transition: opacity 0.5s;
|
transition: opacity 0.5s;
|
||||||
}
|
}
|
||||||
a.icon {
|
a.icon-more {
|
||||||
margin-top: 4px;
|
padding: 14px;
|
||||||
display: block;
|
display: block;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
opacity: .5;
|
||||||
}
|
}
|
||||||
tr {
|
tr {
|
||||||
&:hover td > a.icon, &.active td > a.icon {
|
&:hover td > a.icon,
|
||||||
opacity: 0.6;
|
&.active td > a.icon {
|
||||||
}
|
opacity: 0.7;
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,13 +36,17 @@
|
||||||
+ '<td><span class="last-activity has-tooltip" title="{{lastActivityTime}}">{{lastActivity}}</span></td>'
|
+ '<td><span class="last-activity has-tooltip" title="{{lastActivityTime}}">{{lastActivity}}</span></td>'
|
||||||
+ '<td class="more">'
|
+ '<td class="more">'
|
||||||
+ '{{#if showMore}}<a class="icon icon-more"/>{{/if}}'
|
+ '{{#if showMore}}<a class="icon icon-more"/>{{/if}}'
|
||||||
+ '<div class="popovermenu bubble open menu configure">'
|
+ '<div class="popovermenu menu">'
|
||||||
+ '{{#if canScope}}'
|
+ '{{#if canScope}}'
|
||||||
|
+ '<li><span class="menuitem">'
|
||||||
+ '<input class="filesystem checkbox" type="checkbox" id="{{id}}_filesystem" {{#if scope.filesystem}}checked{{/if}}/>'
|
+ '<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/>'
|
+ '<label for="{{id}}_filesystem">' + t('settings', 'Allow filesystem access') + '</label><br/>'
|
||||||
|
+ '</span></li>'
|
||||||
+ '{{/if}}'
|
+ '{{/if}}'
|
||||||
+ '{{#if canDelete}}'
|
+ '{{#if canDelete}}'
|
||||||
|
+ '<li>'
|
||||||
+ '<a class="icon icon-delete has-tooltip" title="' + t('settings', 'Disconnect') + '">' + t('settings', 'Revoke') +'</a>'
|
+ '<a class="icon icon-delete has-tooltip" title="' + t('settings', 'Disconnect') + '">' + t('settings', 'Revoke') +'</a>'
|
||||||
|
+ '</li>'
|
||||||
+ '{{/if}}'
|
+ '{{/if}}'
|
||||||
+ '</div>'
|
+ '</div>'
|
||||||
+ '</td>'
|
+ '</td>'
|
||||||
|
@ -376,11 +380,13 @@
|
||||||
var $target = $(event.target);
|
var $target = $(event.target);
|
||||||
var $row = $target.closest('tr');
|
var $row = $target.closest('tr');
|
||||||
$row.toggleClass('active');
|
$row.toggleClass('active');
|
||||||
|
$row.find('.popovermenu').toggleClass('open');
|
||||||
var id = $row.data('id');
|
var id = $row.data('id');
|
||||||
},
|
},
|
||||||
|
|
||||||
_hideConfigureToken: function() {
|
_hideConfigureToken: function() {
|
||||||
$('.token-list tr').removeClass('active');
|
$('.token-list tr').removeClass('active');
|
||||||
|
$('.token-list tr .popovermenu').removeClass('open');
|
||||||
},
|
},
|
||||||
|
|
||||||
_onDeleteToken: function (event) {
|
_onDeleteToken: function (event) {
|
||||||
|
|
Loading…
Reference in New Issue