diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index bd6446ad16555eb0e26f496afb0bdf2dcc9a8117..a07072aa8f368408ca3453e8082e9588de59b877 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -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;
diff --git a/apps/settings/js/vue-0.js b/apps/settings/js/vue-0.js
index 22e73276398a63cf58463c970156e0017998152c..b8a7322c3054a8467ea74c42241daf57424b475b 100644
Binary files a/apps/settings/js/vue-0.js and b/apps/settings/js/vue-0.js differ
diff --git a/apps/settings/js/vue-0.js.map b/apps/settings/js/vue-0.js.map
index fb8078e9baa5da09c0a77a54c7dc984bd9bf0fb5..f07540e1c3ebaf0f32d6abe9c93a076fa710802f 100644
Binary files a/apps/settings/js/vue-0.js.map and b/apps/settings/js/vue-0.js.map differ
diff --git a/apps/settings/js/vue-4.js b/apps/settings/js/vue-4.js
index c14bd5fc32c943293f0e45c4ea0185037925b807..29ddea52ffc81b4df413ed4fd4828db641e75c12 100644
Binary files a/apps/settings/js/vue-4.js and b/apps/settings/js/vue-4.js differ
diff --git a/apps/settings/js/vue-4.js.map b/apps/settings/js/vue-4.js.map
index 4ac2f3cc1c56636ca91ea042ad66be4857ca5c68..2b0de75e7c386a5a36b4a19b6fde759c01eccdfc 100644
Binary files a/apps/settings/js/vue-4.js.map and b/apps/settings/js/vue-4.js.map differ
diff --git a/apps/settings/js/vue-5.js b/apps/settings/js/vue-5.js
index 2d98fdf99f8281ea3e3d420dd45f6eb00a591143..e77272a66506c200551358d07051dcfe2d2023b6 100644
Binary files a/apps/settings/js/vue-5.js and b/apps/settings/js/vue-5.js differ
diff --git a/apps/settings/js/vue-5.js.map b/apps/settings/js/vue-5.js.map
index 2fb2d67017e40160c756c1623e7b9a12b18638a5..86767c5c047b7235f3fcb8b814d33a669f33264c 100644
Binary files a/apps/settings/js/vue-5.js.map and b/apps/settings/js/vue-5.js.map differ
diff --git a/apps/settings/js/vue-6.js b/apps/settings/js/vue-6.js
index 8fb2b1bbbfe3e933fe6c1f0b08b44985f4f919a7..8095385663b0e42d1bfbedff68f216c276d17676 100644
Binary files a/apps/settings/js/vue-6.js and b/apps/settings/js/vue-6.js differ
diff --git a/apps/settings/js/vue-6.js.map b/apps/settings/js/vue-6.js.map
index ecf03d4bf671c56fea66126ce3ed8f676a22f02a..3732baff879dda62051a174b7c8fee2bb2887dcc 100644
Binary files a/apps/settings/js/vue-6.js.map and b/apps/settings/js/vue-6.js.map differ
diff --git a/apps/settings/js/vue-7.js b/apps/settings/js/vue-7.js
index 4ed6980705df30d73681fe08e86a4a6fa5752b6a..2ce520cecb7a76f22008f2f5569e10a6d00738bf 100644
Binary files a/apps/settings/js/vue-7.js and b/apps/settings/js/vue-7.js differ
diff --git a/apps/settings/js/vue-7.js.map b/apps/settings/js/vue-7.js.map
index 921b6916a97ee41ad19bb083113ec1f7290afc01..30be62e62409490b1bca67e36398179d3bb66b36 100644
Binary files a/apps/settings/js/vue-7.js.map and b/apps/settings/js/vue-7.js.map differ
diff --git a/apps/settings/js/vue-settings-apps-users-management.js b/apps/settings/js/vue-settings-apps-users-management.js
index 8ba048cb0b0e478aaeb4fff99546f16f9f67219f..e05fa549618b2c9e99cdd504f9b9db59c75a822e 100644
Binary files a/apps/settings/js/vue-settings-apps-users-management.js and b/apps/settings/js/vue-settings-apps-users-management.js differ
diff --git a/apps/settings/js/vue-settings-apps-users-management.js.map b/apps/settings/js/vue-settings-apps-users-management.js.map
index cce291fd92a759e1c2d980489132937623d008aa..5f506582a5f61cf5fae7182d8389a9f9cb7963a6 100644
Binary files a/apps/settings/js/vue-settings-apps-users-management.js.map and b/apps/settings/js/vue-settings-apps-users-management.js.map differ
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 15462a1e7ae854b9feb1a8a4839999c7e287e43d..37b510e2079d35106db29eda06d172c396fef075 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -575,3 +575,8 @@ export default {
},
}
</script>
+<style scoped>
+ .row::v-deep .multiselect__single {
+ z-index: auto !important;
+ }
+</style>
diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue
index 0fe438752eeeba59a9eee9375a5aae80c41cbda0..d0787b2d0e329f64ba33791c0eaf2a4c12696d38 100644
--- a/apps/settings/src/components/UserList/UserRow.vue
+++ b/apps/settings/src/components/UserList/UserRow.vue
@@ -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>
diff --git a/apps/settings/src/components/UserList/UserRowSimple.vue b/apps/settings/src/components/UserList/UserRowSimple.vue
index f163ea64f472c387ff51772f87441631ed37347d..255043c21dbd0679b66b61b812a238df72bfe2da 100644
--- a/apps/settings/src/components/UserList/UserRowSimple.vue
+++ b/apps/settings/src/components/UserList/UserRowSimple.vue
@@ -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}">