Merge pull request #19533 from nextcloud/bugfix/noid/user-settings
Various user settings fixes
This commit is contained in:
Christoph Wurst
GitHub
commit
b16882888b
|
|
@ -606,90 +606,6 @@ span.usersLastLoginTooltip {
|
|||
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 */
|
||||
#app-content > svg.app-filter {
|
||||
float: left;
|
||||
|
|
@ -1496,12 +1412,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
/* USERS LIST -------------------------------------------------------------- */
|
||||
#body-settings {
|
||||
$grid-row-height: 60px;
|
||||
$grid-col-min-width: 150px;
|
||||
$grid-col-min-width: 160px;
|
||||
overflow-x: scroll;
|
||||
|
||||
#app-content.user-list-grid {
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-rows: $grid-row-height;
|
||||
grid-column-gap: 20px;
|
||||
|
||||
.row {
|
||||
|
|
@ -1509,13 +1424,20 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
// fallback for ie11 no grid
|
||||
display: flex;
|
||||
display: grid;
|
||||
min-height: $grid-row-height;
|
||||
grid-row-start: span 1;
|
||||
grid-gap: 3px;
|
||||
align-items: center;
|
||||
z-index: 0;
|
||||
/* let's define the column until storage path,
|
||||
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;
|
||||
|
||||
&.disabled {
|
||||
|
|
@ -1531,16 +1453,20 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
.userBackend,
|
||||
.lastLogin {
|
||||
min-width: $grid-col-min-width;
|
||||
display: flex;
|
||||
|
||||
color: var(--color-text-dark);
|
||||
vertical-align: baseline;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.groups,
|
||||
.subadmins,
|
||||
.quota {
|
||||
min-width: $grid-col-min-width;
|
||||
|
||||
.multiselect {
|
||||
min-width: $grid-col-min-width;
|
||||
width: 100%;
|
||||
color: var(--color-text-dark);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
|
@ -1552,10 +1478,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
}
|
||||
|
||||
.userActions {
|
||||
min-width: 44px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
right: 40px;
|
||||
z-index: 109;
|
||||
right: 0px;
|
||||
min-width: 88px;
|
||||
background-color: var(--color-main-background);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
|
|
@ -1628,12 +1556,15 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
}
|
||||
}
|
||||
|
||||
> form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> div,
|
||||
> form {
|
||||
grid-row: 1;
|
||||
display: inline-flex;
|
||||
color: var(--color-text-lighter);
|
||||
position: relative;
|
||||
|
||||
> input:not(:focus):not(:active) {
|
||||
border-color: transparent;
|
||||
|
|
@ -1711,9 +1642,8 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
}
|
||||
|
||||
&.userActions {
|
||||
.action-item {
|
||||
position: absolute;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
#newsubmit {
|
||||
width: 100%;
|
||||
|
|
@ -1721,15 +1651,15 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
|
||||
.toggleUserActions {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--color-main-background);
|
||||
|
||||
.icon-more {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
opacity: .5;
|
||||
cursor: pointer;
|
||||
margin-left: 40px;
|
||||
|
||||
&:hover {
|
||||
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
|
|
@ -575,3 +575,8 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.row::v-deep .multiselect__single {
|
||||
z-index: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -76,32 +76,35 @@
|
|||
width="32">
|
||||
</div>
|
||||
<!-- dirty hack to ellipsis on two lines -->
|
||||
<div class="displayName">
|
||||
<div v-if="user.backendCapabilities.setDisplayName" class="displayName">
|
||||
<form
|
||||
:class="{'icon-loading-small': loading.displayName}"
|
||||
class="displayName"
|
||||
@submit.prevent="updateDisplayName">
|
||||
<template v-if="user.backendCapabilities.setDisplayName">
|
||||
<input v-if="user.backendCapabilities.setDisplayName"
|
||||
:id="'displayName'+user.id+rand"
|
||||
ref="displayName"
|
||||
:disabled="loading.displayName||loading.all"
|
||||
:value="user.displayname"
|
||||
autocapitalize="off"
|
||||
autocomplete="new-password"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
type="text">
|
||||
<input v-if="user.backendCapabilities.setDisplayName"
|
||||
class="icon-confirm"
|
||||
type="submit"
|
||||
value="">
|
||||
</template>
|
||||
<div v-else
|
||||
v-tooltip.auto="t('settings', 'The backend does not support changing the display name')"
|
||||
class="name" />
|
||||
<input
|
||||
:id="'displayName'+user.id+rand"
|
||||
ref="displayName"
|
||||
:disabled="loading.displayName||loading.all"
|
||||
:value="user.displayname"
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
type="text">
|
||||
<input
|
||||
class="icon-confirm"
|
||||
type="submit"
|
||||
value="">
|
||||
</form>
|
||||
</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"
|
||||
:class="{'icon-loading-small': loading.password}"
|
||||
class="password"
|
||||
|
|
@ -221,11 +224,12 @@
|
|||
{{ t('settings', 'Done') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
<div v-click-outside="hideMenu"
|
||||
class="icon-more"
|
||||
@click="toggleMenu" />
|
||||
<div :class="{ 'open': openedMenu }" class="popovermenu">
|
||||
<PopoverMenu :menu="userActions" />
|
||||
<div class="userPopoverMenuWrapper" v-click-outside="hideMenu">
|
||||
<div class="icon-more"
|
||||
@click="toggleMenu" />
|
||||
<div :class="{ 'open': openedMenu }" class="popovermenu">
|
||||
<PopoverMenu :menu="userActions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{opacity: feedbackMessage !== '' ? 1 : 0}"
|
||||
|
|
@ -684,4 +688,7 @@ export default {
|
|||
.row--menu-opened {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
.row::v-deep .multiselect__single {
|
||||
z-index: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
<div v-if="showConfig.showUserBackend" class="userBackend">
|
||||
{{ user.backend }}
|
||||
</div>
|
||||
<div v-if="showConfig.showStoragePath" class="storageLocation subtitle">
|
||||
<div v-if="showConfig.showStoragePath" v-tooltip="user.storageLocation" class="storageLocation subtitle">
|
||||
{{ user.storageLocation }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -61,9 +61,11 @@
|
|||
{{ t('settings', 'Edit User') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
<div v-click-outside="hideMenu" class="icon-more" @click="$emit('toggleMenu')" />
|
||||
<div class="popovermenu" :class="{ 'open': openedMenu }">
|
||||
<PopoverMenu :menu="userActions" />
|
||||
<div class="userPopoverMenuWrapper">
|
||||
<div v-click-outside="hideMenu" class="icon-more" @click="$emit('toggleMenu')" />
|
||||
<div class="popovermenu" :class="{ 'open': openedMenu }">
|
||||
<PopoverMenu :menu="userActions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feedback" :style="{opacity: feedbackMessage !== '' ? 1 : 0}">
|
||||
|
|
|
|||
Loading…
Reference in New Issue