Skip to content

Commit cb852ef

Browse files
JuliaKirschenheuterJuliaKirschenheuter
committed
Fix table view
Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
1 parent 9d2d3d4 commit cb852ef

11 files changed

Lines changed: 200 additions & 179 deletions

‎apps/settings/css/settings.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/settings/css/settings.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/settings/css/settings.scss‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1418,14 +1418,8 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
14181418
.userActions {
14191419
display: flex;
14201420
justify-content: flex-end;
1421-
position: sticky;
14221421
right: 0px;
14231422
min-width: 88px;
1424-
background-color: var(--color-main-background);
1425-
}
1426-
1427-
&.row--editable .userActions {
1428-
z-index: 10;
14291423
}
14301424

14311425
.subtitle {
@@ -1469,10 +1463,6 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
14691463
}
14701464

14711465
&:hover {
1472-
input:not([type='submit']):not(:focus):not(:active) {
1473-
border-color: var(--color-border) !important;
1474-
}
1475-
14761466
&:not(#grid-header) {
14771467
box-shadow: 5px 0 0 var(--color-primary-element) inset;
14781468
}
@@ -1482,8 +1472,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
14821472
width: 100%;
14831473
}
14841474

1485-
> div,
1486-
> .displayName > form,
1475+
> td,
14871476
> form {
14881477
grid-row: 1;
14891478
display: inline-flex;

‎apps/settings/src/components/UserList.vue‎

Lines changed: 95 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@
2121
-->
2222

2323
<template>
24-
<div id="app-content" class="user-list-grid" @scroll.passive="onScroll">
24+
<table id="app-content"
25+
role="grid"
26+
:aria-label="t('settings', 'User\'s table')"
27+
class="user-list-grid"
28+
@scroll.passive="onScroll">
2529
<NcModal v-if="showConfig.showNewUserForm" size="small" @close="closeModal">
2630
<form id="new-user"
2731
:disabled="loading.all"
@@ -152,85 +156,92 @@
152156
</div>
153157
</form>
154158
</NcModal>
155-
<div id="grid-header"
156-
:class="{'sticky': scrolled && !showConfig.showNewUserForm}"
157-
class="row">
158-
<div id="headerAvatar" class="avatar" />
159-
<div id="headerName" class="name">
160-
<div class="subtitle">
161-
<strong>
162-
{{ t('settings', 'Display name') }}
163-
</strong>
164-
</div>
165-
{{ t('settings', 'Username') }}
166-
</div>
167-
<div id="headerPassword" class="password">
168-
{{ t('settings', 'Password') }}
169-
</div>
170-
<div id="headerAddress" class="mailAddress">
171-
{{ t('settings', 'Email') }}
172-
</div>
173-
<div id="headerGroups" class="groups">
174-
{{ t('settings', 'Groups') }}
175-
</div>
176-
<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
177-
id="headerSubAdmins"
178-
class="subadmins">
179-
{{ t('settings', 'Group admin for') }}
180-
</div>
181-
<div id="headerQuota" class="quota">
182-
{{ t('settings', 'Quota') }}
183-
</div>
184-
<div v-if="showConfig.showLanguages"
185-
id="headerLanguages"
186-
class="languages">
187-
{{ t('settings', 'Language') }}
188-
</div>
159+
<tbody>
160+
<tr id="grid-header"
161+
:class="{'sticky': scrolled && !showConfig.showNewUserForm}"
162+
class="row">
163+
<th id="headerAvatar" class="avatar">
164+
<span class="hidden-visually"> {{ t('settings', 'Avatar') }} </span>
165+
</th>
166+
<th id="headerName" class="name">
167+
<div class="subtitle">
168+
<strong>
169+
{{ t('settings', 'Display name') }}
170+
</strong>
171+
</div>
172+
{{ t('settings', 'Username') }}
173+
</th>
174+
<th id="headerPassword" class="password">
175+
{{ t('settings', 'Password') }}
176+
</th>
177+
<th id="headerAddress" class="mailAddress">
178+
{{ t('settings', 'Email') }}
179+
</th>
180+
<th id="headerGroups" class="groups">
181+
{{ t('settings', 'Groups') }}
182+
</th>
183+
<th v-if="subAdminsGroups.length>0 && settings.isAdmin"
184+
id="headerSubAdmins"
185+
class="subadmins">
186+
{{ t('settings', 'Group admin for') }}
187+
</th>
188+
<th id="headerQuota" class="quota">
189+
{{ t('settings', 'Quota') }}
190+
</th>
191+
<th v-if="showConfig.showLanguages"
192+
id="headerLanguages"
193+
class="languages">
194+
{{ t('settings', 'Language') }}
195+
</th>
189196

190-
<div v-if="showConfig.showUserBackend || showConfig.showStoragePath"
191-
class="headerUserBackend userBackend">
192-
<div v-if="showConfig.showUserBackend" class="userBackend">
193-
{{ t('settings', 'User backend') }}
194-
</div>
195-
<div v-if="showConfig.showStoragePath"
196-
class="subtitle storageLocation">
197-
{{ t('settings', 'Storage location') }}
198-
</div>
199-
</div>
200-
<div v-if="showConfig.showLastLogin"
201-
class="headerLastLogin lastLogin">
202-
{{ t('settings', 'Last login') }}
203-
</div>
197+
<th v-if="showConfig.showUserBackend || showConfig.showStoragePath"
198+
class="headerUserBackend userBackend">
199+
<div v-if="showConfig.showUserBackend" class="userBackend">
200+
{{ t('settings', 'User backend') }}
201+
</div>
202+
<div v-if="showConfig.showStoragePath"
203+
class="subtitle storageLocation">
204+
{{ t('settings', 'Storage location') }}
205+
</div>
206+
</th>
207+
<th v-if="showConfig.showLastLogin"
208+
class="headerLastLogin lastLogin">
209+
{{ t('settings', 'Last login') }}
210+
</th>
204211

205-
<div class="userActions" />
206-
</div>
212+
<th class="userActions hidden-visually">
213+
{{ t('settings', 'User actions') }}
214+
</th>
215+
</tr>
207216

208-
<user-row v-for="user in filteredUsers"
209-
:key="user.id"
210-
:external-actions="externalActions"
211-
:groups="groups"
212-
:languages="languages"
213-
:quota-options="quotaOptions"
214-
:settings="settings"
215-
:show-config="showConfig"
216-
:sub-admins-groups="subAdminsGroups"
217-
:user="user"
218-
:is-dark-theme="isDarkTheme" />
219-
<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler">
220-
<div slot="spinner">
221-
<div class="users-icon-loading icon-loading" />
222-
</div>
223-
<div slot="no-more">
224-
<div class="users-list-end" />
225-
</div>
226-
<div slot="no-results">
227-
<div id="emptycontent">
228-
<div class="icon-contacts-dark" />
229-
<h2>{{ t('settings', 'No users in here') }}</h2>
217+
<user-row v-for="user in filteredUsers"
218+
:key="user.id"
219+
:external-actions="externalActions"
220+
:groups="groups"
221+
:languages="languages"
222+
:quota-options="quotaOptions"
223+
:settings="settings"
224+
:show-config="showConfig"
225+
:sub-admins-groups="subAdminsGroups"
226+
:user="user"
227+
:is-dark-theme="isDarkTheme" />
228+
229+
<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler">
230+
<div slot="spinner">
231+
<div class="users-icon-loading icon-loading" />
232+
</div>
233+
<div slot="no-more">
234+
<div class="users-list-end" />
230235
</div>
231-
</div>
232-
</InfiniteLoading>
233-
</div>
236+
<div slot="no-results">
237+
<div id="emptycontent">
238+
<div class="icon-contacts-dark" />
239+
<h2>{{ t('settings', 'No users in here') }}</h2>
240+
</div>
241+
</div>
242+
</InfiniteLoading>
243+
</tbody>
244+
</table>
234245
</template>
235246

236247
<script>
@@ -642,4 +653,12 @@ export default {
642653
* prevent it). */
643654
width: 0;
644655
}
656+
657+
#app-content tbody tr {
658+
&:hover,
659+
&:focus,
660+
&:active {
661+
background-color: var(--color-main-background);
662+
}
663+
}
645664
</style>

0 commit comments

Comments
 (0)