Merge pull request #19533 from nextcloud/bugfix/noid/user-settings

Various user settings fixes
This commit is contained in:
Christoph Wurst 2020-02-21 11:51:35 +01:00 committed by GitHub
commit b16882888b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 99 additions and 155 deletions

View File

@ -606,90 +606,6 @@ span.usersLastLoginTooltip {
white-space: nowrap; white-space: nowrap;
} }
/* dropdowns will be relative to this element */
#userlist {
position: relative;
.storageLocation, .userBackend, .lastLogin {
display: none;
}
th.name {
color: #000;
}
tr {
height: 50px;
}
.mailAddress .loading-small {
width: 16px;
height: 16px;
margin-left: -26px;
position: relative;
top: 3px;
}
.groupsListContainer.hidden {
display: none;
}
thead th,
thead tr {
z-index: 100;
background-color: var(--color-main-background);
@include position('sticky');
// positional attribute is required for position to take affect.
top: 0;
}
}
#newuser {
.groupsListContainer.hidden {
display: none;
}
.multiselect {
min-width: 150px !important;
position: relative;
top: -1px;
}
input {
&:not([type='submit']),
&:not([type='reset']) {
width: 100%;
}
}
.userActions {
position: sticky;
right: 60px;
z-index: 20;
}
.userActions input {
width: 44px;
height: 44px;
&.icon-close {
border: none;
background-color: initial;
opacity: .5;
}
&:hover {
opacity: 1;
}
}
}
/* used to highlight a user row in red */
#userlist tr.row-warning {
background-color: #FDD;
}
/* APPS */ /* APPS */
#app-content > svg.app-filter { #app-content > svg.app-filter {
float: left; float: left;
@ -1496,12 +1412,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
/* USERS LIST -------------------------------------------------------------- */ /* USERS LIST -------------------------------------------------------------- */
#body-settings { #body-settings {
$grid-row-height: 60px; $grid-row-height: 60px;
$grid-col-min-width: 150px; $grid-col-min-width: 160px;
overflow-x: scroll;
#app-content.user-list-grid { #app-content.user-list-grid {
display: grid; display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: $grid-row-height;
grid-column-gap: 20px; grid-column-gap: 20px;
.row { .row {
@ -1509,13 +1424,20 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
// fallback for ie11 no grid // fallback for ie11 no grid
display: flex; display: flex;
display: grid; display: grid;
min-height: $grid-row-height;
grid-row-start: span 1; grid-row-start: span 1;
grid-gap: 3px; grid-gap: 3px;
align-items: center; align-items: center;
z-index: 0;
/* let's define the column until storage path, /* let's define the column until storage path,
what follows will be manually defined */ what follows will be manually defined */
grid-template-columns: 44px minmax($grid-col-min-width + 30px, 1fr) repeat(auto-fit, minmax($grid-col-min-width, 1fr)); grid-template-columns:
44px
minmax($grid-col-min-width + 30px, 1fr) // username, displayname
minmax($grid-col-min-width, 1fr) // password
minmax($grid-col-min-width, 1fr) // email
minmax(1.5*$grid-col-min-width, 1fr) // groups
minmax(1.5*$grid-col-min-width, 1fr) // group admins
repeat(auto-fit, minmax($grid-col-min-width, 1fr));
border-bottom: var(--color-border) 1px solid; border-bottom: var(--color-border) 1px solid;
&.disabled { &.disabled {
@ -1531,16 +1453,20 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
.userBackend, .userBackend,
.lastLogin { .lastLogin {
min-width: $grid-col-min-width; min-width: $grid-col-min-width;
display: flex;
color: var(--color-text-dark); color: var(--color-text-dark);
vertical-align: baseline; vertical-align: baseline;
text-overflow: ellipsis;
overflow: hidden;
} }
.groups, .groups,
.subadmins, .subadmins,
.quota { .quota {
min-width: $grid-col-min-width;
.multiselect { .multiselect {
min-width: $grid-col-min-width; width: 100%;
color: var(--color-text-dark); color: var(--color-text-dark);
vertical-align: baseline; vertical-align: baseline;
} }
@ -1552,10 +1478,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
} }
.userActions { .userActions {
min-width: 44px; display: flex;
justify-content: flex-end;
position: sticky; position: sticky;
right: 40px; right: 0px;
z-index: 109; min-width: 88px;
background-color: var(--color-main-background);
} }
.subtitle { .subtitle {
@ -1628,12 +1556,15 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
} }
} }
> form {
width: 100%;
}
> div, > div,
> form { > form {
grid-row: 1; grid-row: 1;
display: inline-flex; display: inline-flex;
color: var(--color-text-lighter); color: var(--color-text-lighter);
position: relative;
> input:not(:focus):not(:active) { > input:not(:focus):not(:active) {
border-color: transparent; border-color: transparent;
@ -1711,9 +1642,8 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
} }
&.userActions { &.userActions {
.action-item { display: flex;
position: absolute; justify-content: flex-end;
}
#newsubmit { #newsubmit {
width: 100%; width: 100%;
@ -1721,15 +1651,15 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
.toggleUserActions { .toggleUserActions {
position: relative; position: relative;
display: block; display: flex;
align-items: center; align-items: center;
background-color: var(--color-main-background);
.icon-more { .icon-more {
width: 44px; width: 44px;
height: 44px; height: 44px;
opacity: .5; opacity: .5;
cursor: pointer; cursor: pointer;
margin-left: 40px;
&:hover { &:hover {
opacity: .7; opacity: .7;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -575,3 +575,8 @@ export default {
}, },
} }
</script> </script>
<style scoped>
.row::v-deep .multiselect__single {
z-index: auto !important;
}
</style>

View File

@ -76,32 +76,35 @@
width="32"> width="32">
</div> </div>
<!-- dirty hack to ellipsis on two lines --> <!-- dirty hack to ellipsis on two lines -->
<div class="displayName"> <div v-if="user.backendCapabilities.setDisplayName" class="displayName">
<form <form
:class="{'icon-loading-small': loading.displayName}" :class="{'icon-loading-small': loading.displayName}"
class="displayName" class="displayName"
@submit.prevent="updateDisplayName"> @submit.prevent="updateDisplayName">
<template v-if="user.backendCapabilities.setDisplayName"> <input
<input v-if="user.backendCapabilities.setDisplayName" :id="'displayName'+user.id+rand"
:id="'displayName'+user.id+rand" ref="displayName"
ref="displayName" :disabled="loading.displayName||loading.all"
:disabled="loading.displayName||loading.all" :value="user.displayname"
:value="user.displayname" autocapitalize="off"
autocapitalize="off" autocomplete="off"
autocomplete="new-password" autocorrect="off"
autocorrect="off" spellcheck="false"
spellcheck="false" type="text">
type="text"> <input
<input v-if="user.backendCapabilities.setDisplayName" class="icon-confirm"
class="icon-confirm" type="submit"
type="submit" value="">
value="">
</template>
<div v-else
v-tooltip.auto="t('settings', 'The backend does not support changing the display name')"
class="name" />
</form> </form>
</div> </div>
<div v-else class="name">
{{ user.id }}
<div class="displayName subtitle">
<div v-tooltip="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
{{ user.displayname }}
</div>
</div>
</div>
<form v-if="settings.canChangePassword && user.backendCapabilities.setPassword" <form v-if="settings.canChangePassword && user.backendCapabilities.setPassword"
:class="{'icon-loading-small': loading.password}" :class="{'icon-loading-small': loading.password}"
class="password" class="password"
@ -221,11 +224,12 @@
{{ t('settings', 'Done') }} {{ t('settings', 'Done') }}
</ActionButton> </ActionButton>
</Actions> </Actions>
<div v-click-outside="hideMenu" <div class="userPopoverMenuWrapper" v-click-outside="hideMenu">
class="icon-more" <div class="icon-more"
@click="toggleMenu" /> @click="toggleMenu" />
<div :class="{ 'open': openedMenu }" class="popovermenu"> <div :class="{ 'open': openedMenu }" class="popovermenu">
<PopoverMenu :menu="userActions" /> <PopoverMenu :menu="userActions" />
</div>
</div> </div>
</div> </div>
<div :style="{opacity: feedbackMessage !== '' ? 1 : 0}" <div :style="{opacity: feedbackMessage !== '' ? 1 : 0}"
@ -684,4 +688,7 @@ export default {
.row--menu-opened { .row--menu-opened {
z-index: 1 !important; z-index: 1 !important;
} }
.row::v-deep .multiselect__single {
z-index: auto !important;
}
</style> </style>

View File

@ -46,7 +46,7 @@
<div v-if="showConfig.showUserBackend" class="userBackend"> <div v-if="showConfig.showUserBackend" class="userBackend">
{{ user.backend }} {{ user.backend }}
</div> </div>
<div v-if="showConfig.showStoragePath" class="storageLocation subtitle"> <div v-if="showConfig.showStoragePath" v-tooltip="user.storageLocation" class="storageLocation subtitle">
{{ user.storageLocation }} {{ user.storageLocation }}
</div> </div>
</div> </div>
@ -61,9 +61,11 @@
{{ t('settings', 'Edit User') }} {{ t('settings', 'Edit User') }}
</ActionButton> </ActionButton>
</Actions> </Actions>
<div v-click-outside="hideMenu" class="icon-more" @click="$emit('toggleMenu')" /> <div class="userPopoverMenuWrapper">
<div class="popovermenu" :class="{ 'open': openedMenu }"> <div v-click-outside="hideMenu" class="icon-more" @click="$emit('toggleMenu')" />
<PopoverMenu :menu="userActions" /> <div class="popovermenu" :class="{ 'open': openedMenu }">
<PopoverMenu :menu="userActions" />
</div>
</div> </div>
</div> </div>
<div class="feedback" :style="{opacity: feedbackMessage !== '' ? 1 : 0}"> <div class="feedback" :style="{opacity: feedbackMessage !== '' ? 1 : 0}">