Skip to content

Commit

Permalink
Fix table view
Browse files Browse the repository at this point in the history 
Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
  • Loading branch information
@JuliaKirschenheuter
JuliaKirschenheuter committed May 11, 2023
1 parent 9d2d3d4 commit cb852ef
Show file tree
Hide file tree
Showing 11 changed files with 200 additions and 179 deletions.
2 changes: 1 addition & 1 deletion apps/settings/css/settings.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion apps/settings/css/settings.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 1 addition & 12 deletions apps/settings/css/settings.scss
View file
Expand Up @@ -1418,14 +1418,8 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
.userActions {
display: flex;
justify-content: flex-end;
position: sticky;
right: 0px;
min-width: 88px;
background-color: var(--color-main-background);
}

&.row--editable .userActions {
z-index: 10;
}

.subtitle {
Expand Down Expand Up @@ -1469,10 +1463,6 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
}

&:hover {
input:not([type='submit']):not(:focus):not(:active) {
border-color: var(--color-border) !important;
}

&:not(#grid-header) {
box-shadow: 5px 0 0 var(--color-primary-element) inset;
}
Expand All @@ -1482,8 +1472,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
width: 100%;
}

> div,
> .displayName > form,
> td,
> form {
grid-row: 1;
display: inline-flex;
Expand Down
171 changes: 95 additions & 76 deletions apps/settings/src/components/UserList.vue
View file
Expand Up @@ -21,7 +21,11 @@
-->

<template>
<div id="app-content" class="user-list-grid" @scroll.passive="onScroll">
<table id="app-content"
role="grid"
:aria-label="t('settings', 'User\'s table')"
class="user-list-grid"
@scroll.passive="onScroll">
<NcModal v-if="showConfig.showNewUserForm" size="small" @close="closeModal">
<form id="new-user"
:disabled="loading.all"
Expand Down Expand Up @@ -152,85 +156,92 @@
</div>
</form>
</NcModal>
<div id="grid-header"
:class="{'sticky': scrolled && !showConfig.showNewUserForm}"
class="row">
<div id="headerAvatar" class="avatar" />
<div id="headerName" class="name">
<div class="subtitle">
<strong>
{{ t('settings', 'Display name') }}
</strong>
</div>
{{ t('settings', 'Username') }}
</div>
<div id="headerPassword" class="password">
{{ t('settings', 'Password') }}
</div>
<div id="headerAddress" class="mailAddress">
{{ t('settings', 'Email') }}
</div>
<div id="headerGroups" class="groups">
{{ t('settings', 'Groups') }}
</div>
<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
id="headerSubAdmins"
class="subadmins">
{{ t('settings', 'Group admin for') }}
</div>
<div id="headerQuota" class="quota">
{{ t('settings', 'Quota') }}
</div>
<div v-if="showConfig.showLanguages"
id="headerLanguages"
class="languages">
{{ t('settings', 'Language') }}
</div>
<tbody>
<tr id="grid-header"
:class="{'sticky': scrolled && !showConfig.showNewUserForm}"
class="row">
<th id="headerAvatar" class="avatar">
<span class="hidden-visually"> {{ t('settings', 'Avatar') }} </span>
</th>
<th id="headerName" class="name">
<div class="subtitle">
<strong>
{{ t('settings', 'Display name') }}
</strong>
</div>
{{ t('settings', 'Username') }}
</th>
<th id="headerPassword" class="password">
{{ t('settings', 'Password') }}
</th>
<th id="headerAddress" class="mailAddress">
{{ t('settings', 'Email') }}
</th>
<th id="headerGroups" class="groups">
{{ t('settings', 'Groups') }}
</th>
<th v-if="subAdminsGroups.length>0 && settings.isAdmin"
id="headerSubAdmins"
class="subadmins">
{{ t('settings', 'Group admin for') }}
</th>
<th id="headerQuota" class="quota">
{{ t('settings', 'Quota') }}
</th>
<th v-if="showConfig.showLanguages"
id="headerLanguages"
class="languages">
{{ t('settings', 'Language') }}
</th>

<div v-if="showConfig.showUserBackend || showConfig.showStoragePath"
class="headerUserBackend userBackend">
<div v-if="showConfig.showUserBackend" class="userBackend">
{{ t('settings', 'User backend') }}
</div>
<div v-if="showConfig.showStoragePath"
class="subtitle storageLocation">
{{ t('settings', 'Storage location') }}
</div>
</div>
<div v-if="showConfig.showLastLogin"
class="headerLastLogin lastLogin">
{{ t('settings', 'Last login') }}
</div>
<th v-if="showConfig.showUserBackend || showConfig.showStoragePath"
class="headerUserBackend userBackend">
<div v-if="showConfig.showUserBackend" class="userBackend">
{{ t('settings', 'User backend') }}
</div>
<div v-if="showConfig.showStoragePath"
class="subtitle storageLocation">
{{ t('settings', 'Storage location') }}
</div>
</th>
<th v-if="showConfig.showLastLogin"
class="headerLastLogin lastLogin">
{{ t('settings', 'Last login') }}
</th>

<div class="userActions" />
</div>
<th class="userActions hidden-visually">
{{ t('settings', 'User actions') }}
</th>
</tr>

<user-row v-for="user in filteredUsers"
:key="user.id"
:external-actions="externalActions"
:groups="groups"
:languages="languages"
:quota-options="quotaOptions"
:settings="settings"
:show-config="showConfig"
:sub-admins-groups="subAdminsGroups"
:user="user"
:is-dark-theme="isDarkTheme" />
<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler">
<div slot="spinner">
<div class="users-icon-loading icon-loading" />
</div>
<div slot="no-more">
<div class="users-list-end" />
</div>
<div slot="no-results">
<div id="emptycontent">
<div class="icon-contacts-dark" />
<h2>{{ t('settings', 'No users in here') }}</h2>
<user-row v-for="user in filteredUsers"
:key="user.id"
:external-actions="externalActions"
:groups="groups"
:languages="languages"
:quota-options="quotaOptions"
:settings="settings"
:show-config="showConfig"
:sub-admins-groups="subAdminsGroups"
:user="user"
:is-dark-theme="isDarkTheme" />

<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler">
<div slot="spinner">
<div class="users-icon-loading icon-loading" />
</div>
<div slot="no-more">
<div class="users-list-end" />
</div>
</div>
</InfiniteLoading>
</div>
<div slot="no-results">
<div id="emptycontent">
<div class="icon-contacts-dark" />
<h2>{{ t('settings', 'No users in here') }}</h2>
</div>
</div>
</InfiniteLoading>
</tbody>
</table>
</template>

<script>
Expand Down Expand Up @@ -642,4 +653,12 @@ export default {
* prevent it). */
width: 0;
}
#app-content tbody tr {
&:hover,
&:focus,
&:active {
background-color: var(--color-main-background);
}
}
</style>

0 comments on commit cb852ef

Please sign in to comment.