Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popovermenu fix and token settings design fixes #10546

Merged
merged 1 commit into from
Aug 10, 2018
Merged

Popovermenu fix and token settings design fixes #10546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions core/css/apps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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: ' ';
Expand All @@ -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 {
Expand Down
52 changes: 13 additions & 39 deletions settings/css/settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,6 +410,7 @@ table.nostyle {
}
}

/* Devices & sessions access & tokens */
#security {
table {
width: 100%;
Expand All @@ -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 {
Expand All @@ -441,57 +436,36 @@ table.nostyle {

div {
opacity: 0.57;
width: inherit;
padding-top: 5px;
width: 44px;
height: 44px;
}
}
border-top: 1px solid var(--color-border);
text-overflow: ellipsis;
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;
}
}
}
Expand Down
8 changes: 7 additions & 1 deletion settings/js/authtoken_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>'
Expand Down Expand Up @@ -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) {
Expand Down