Skip to content

Commit

Permalink
[4.x] Apply overflow styling to user listing (#8739)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasonvarga
jasonvarga committed Sep 19, 2023
1 parent befaaff commit 2b83311
Showing 1 changed file with 42 additions and 40 deletions.
82 changes: 42 additions & 40 deletions resources/js/components/users/Listing.vue
View file
Expand Up @@ -15,7 +15,7 @@
:sort-direction="sortDirection"
>
<div slot-scope="{ hasSelections }">
<div class="card p-0 relative">
<div class="card overflow-hidden p-0 relative">
<div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b">

<data-list-filter-presets
Expand Down Expand Up @@ -65,45 +65,47 @@
@started="actionStarted"
@completed="actionCompleted"
/>
<data-list-table
v-show="items.length"
:allow-bulk-actions="true"
:allow-column-picker="true"
:column-preferences-key="preferencesKey('columns')"
@sorted="sorted"
>
<template slot="cell-email" slot-scope="{ row: user, value }">
<a :href="user.edit_url" class="flex items-center">
<avatar :user="user" class="w-8 h-8 rounded-full mr-2" />
{{ value }}
</a>
</template>
<template slot="cell-roles" slot-scope="{ row: user, value: roles }">
<div class="role-index-field">
<div v-if="user.super" class="role-index-field-item mr-1 mb-1.5">{{ __('Super Admin') }}</div>
<div v-if="!roles || roles.length === 0" />
<div v-for="(role, i) in (roles || [])" class="role-index-field-item mr-1 mb-1.5">{{ role.title }}</div>
</div>
</template>
<template slot="cell-groups" slot-scope="{ row: user, value: groups }">
<div class="groups-index-field">
<div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ group.title }}</div>
</div>
</template>
<template slot="actions" slot-scope="{ row: user, index }">
<dropdown-list placement="right-start">
<dropdown-item :text="__('Edit')" :redirect="user.edit_url" v-if="user.editable" />
<dropdown-item :text="__('View')" :redirect="user.edit_url" v-else />
<data-list-inline-actions
:item="user.id"
:url="actionUrl"
:actions="user.actions"
@started="actionStarted"
@completed="actionCompleted"
/>
</dropdown-list>
</template>
</data-list-table>
<div class="overflow-x-auto overflow-y-hidden">
<data-list-table
v-show="items.length"
:allow-bulk-actions="true"
:allow-column-picker="true"
:column-preferences-key="preferencesKey('columns')"
@sorted="sorted"
>
<template slot="cell-email" slot-scope="{ row: user, value }">
<a :href="user.edit_url" class="flex items-center">
<avatar :user="user" class="w-8 h-8 rounded-full mr-2" />
{{ value }}
</a>
</template>
<template slot="cell-roles" slot-scope="{ row: user, value: roles }">
<div class="role-index-field">
<div v-if="user.super" class="role-index-field-item mr-1 mb-1.5">{{ __('Super Admin') }}</div>
<div v-if="!roles || roles.length === 0" />
<div v-for="(role, i) in (roles || [])" class="role-index-field-item mr-1 mb-1.5">{{ role.title }}</div>
</div>
</template>
<template slot="cell-groups" slot-scope="{ row: user, value: groups }">
<div class="groups-index-field">
<div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ group.title }}</div>
</div>
</template>
<template slot="actions" slot-scope="{ row: user, index }">
<dropdown-list placement="right-start">
<dropdown-item :text="__('Edit')" :redirect="user.edit_url" v-if="user.editable" />
<dropdown-item :text="__('View')" :redirect="user.edit_url" v-else />
<data-list-inline-actions
:item="user.id"
:url="actionUrl"
:actions="user.actions"
@started="actionStarted"
@completed="actionCompleted"
/>
</dropdown-list>
</template>
</data-list-table>
</div>
</div>

<data-list-pagination
Expand Down

0 comments on commit 2b83311

Please sign in to comment.