LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Refactor tables in all screen for RTL (#6525)

Browse Source 
* chore: Refactor tables in all screen for RTL

* Notification page footer

* Apply suggestions from code review

* chore: Minor ixes

* chore: Adds rtl comment

* chore: Code clean up for contact table

---------

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
This commit is contained in:
Sivin Varghese
2023-02-27 11:36:28 +05:30
committed by GitHub
parent 06ffaa90fc
commit 7d4e6d0257
11 changed files with 91 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/dashboard/assets/scss/_rtl.scss
View File

@@ -354,12 +354,12 @@
} }
thead th { thead th {
padding-left: var(--space-one); padding-left: var(--space-small);
padding-right: 0; padding-right: 0;
} }
tbody td { tbody td {
padding-left: var(--space-one); padding-left: var(--space-small);
padding-right: 0; padding-right: 0;
} }
} }

2
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
View File

@@ -48,7 +48,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 100%; width: fit-content;
} }
p { p {

11
app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
View File

@@ -1,21 +1,22 @@
table { table {
border-spacing: 0; border-spacing: 0;
font-size: $font-size-small; font-size: var(--font-size-small);
thead { thead {
th { th {
font-weight: $font-weight-bold; font-weight: var(--font-weight-bold);
text-align: left;
text-transform: uppercase; text-transform: uppercase;
} }
} }
tbody { tbody {
tr { tr {
border-bottom: 1px solid $color-border-light; border-bottom: 1px solid var(--color-border-light);
} }
td { td {
padding: $space-one $space-small; padding: var(--space-small);
} }
} }
} }
@@ -36,7 +37,7 @@ table {
.agent-name { .agent-name {
display: block; display: block;
font-weight: $font-weight-medium; font-weight: var(--font-weight-medium);
text-transform: capitalize; text-transform: capitalize;
} }

12
app/javascript/dashboard/components/widgets/TableFooter.vue
View File

@@ -24,7 +24,7 @@
<fluent-icon <fluent-icon
icon="chevron-left" icon="chevron-left"
size="18" size="18"
class="margin-left-minus-slab" :class="pageFooterIconClass"
/> />
</woot-button> </woot-button>
<woot-button <woot-button
@@ -65,7 +65,7 @@
<fluent-icon <fluent-icon
icon="chevron-right" icon="chevron-right"
size="18" size="18"
class="margin-left-minus-slab" :class="pageFooterIconClass"
/> />
</woot-button> </woot-button>
</div> </div>
@@ -74,8 +74,11 @@
</template> </template>
<script> <script>
import rtlMixin from 'shared/mixins/rtlMixin';
export default { export default {
components: {}, components: {},
mixins: [rtlMixin],
props: { props: {
currentPage: { currentPage: {
type: Number, type: Number,
@@ -91,6 +94,11 @@ export default {
}, },
}, },
computed: { computed: {
pageFooterIconClass() {
return this.isRTLView
? 'margin-right-minus-slab'
: 'margin-left-minus-slab';
},
isFooterVisible() { isFooterVisible() {
return this.totalCount && !(this.firstIndex > this.totalCount); return this.totalCount && !(this.firstIndex > this.totalCount);
}, },

6
app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
View File

@@ -38,11 +38,7 @@ export default {
text-align: left; text-align: left;
.user-name { .user-name {
margin: 0; margin: 0 var(--space-small);
text-transform: capitalize;
}
.user-thumbnail-box {
margin-right: var(--space-small);
} }
} }
</style> </style>

32
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
View File

@@ -34,6 +34,7 @@ import Spinner from 'shared/components/Spinner.vue';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue'; import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import EmptyState from 'dashboard/components/widgets/EmptyState.vue'; import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
import timeMixin from 'dashboard/mixins/time'; import timeMixin from 'dashboard/mixins/time';
import rtlMixin from 'shared/mixins/rtlMixin';
import FluentIcon from 'shared/components/FluentIcon/DashboardIcon'; import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
export default { export default {
@@ -42,7 +43,7 @@ export default {
Spinner, Spinner,
VeTable, VeTable,
}, },
mixins: [clickaway, timeMixin], mixins: [clickaway, timeMixin, rtlMixin],
props: { props: {
contacts: { contacts: {
type: Array, type: Array,
@@ -116,7 +117,7 @@ export default {
key: 'name', key: 'name',
title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'), title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
fixed: 'left', fixed: 'left',
align: 'left', align: this.isRTLView ? 'right' : 'left',
sortBy: this.sortConfig.name || '', sortBy: this.sortConfig.name || '',
width: 300, width: 300,
renderBodyCell: ({ row }) => ( renderBodyCell: ({ row }) => (
@@ -152,7 +153,7 @@ export default {
field: 'email', field: 'email',
key: 'email', key: 'email',
title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'), title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
sortBy: this.sortConfig.email || '', sortBy: this.sortConfig.email || '',
width: 240, width: 240,
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
@@ -176,27 +177,27 @@ export default {
key: 'phone_number', key: 'phone_number',
sortBy: this.sortConfig.phone_number || '', sortBy: this.sortConfig.phone_number || '',
title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'), title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
}, },
{ {
field: 'company', field: 'company',
key: 'company', key: 'company',
sortBy: this.sortConfig.company_name || '', sortBy: this.sortConfig.company_name || '',
title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'), title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
}, },
{ {
field: 'city', field: 'city',
key: 'city', key: 'city',
sortBy: this.sortConfig.city || '', sortBy: this.sortConfig.city || '',
title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'), title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
}, },
{ {
field: 'country', field: 'country',
key: 'country', key: 'country',
title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'), title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
sortBy: this.sortConfig.country || '', sortBy: this.sortConfig.country || '',
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
if (row.country) { if (row.country) {
@@ -213,7 +214,7 @@ export default {
field: 'profiles', field: 'profiles',
key: 'profiles', key: 'profiles',
title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES'), title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
const { profiles } = row; const { profiles } = row;
@@ -244,21 +245,21 @@ export default {
key: 'last_activity_at', key: 'last_activity_at',
sortBy: this.sortConfig.last_activity_at || '', sortBy: this.sortConfig.last_activity_at || '',
title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'), title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
}, },
{ {
field: 'created_at', field: 'created_at',
key: 'created_at', key: 'created_at',
sortBy: this.sortConfig.created_at || '', sortBy: this.sortConfig.created_at || '',
title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'), title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
}, },
{ {
field: 'conversationsCount', field: 'conversationsCount',
key: 'conversationsCount', key: 'conversationsCount',
title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CONVERSATIONS'), title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CONVERSATIONS'),
width: 150, width: 150,
align: 'left', align: this.isRTLView ? 'right' : 'left',
}, },
]; ];
}, },
@@ -301,11 +302,10 @@ export default {
text-align: left; text-align: left;
.user-block { .user-block {
min-width: 0; align-items: flex-start;
} display: flex;
flex-direction: column;
.user-thumbnail-box { margin: 0 var(--space-small);
margin-right: var(--space-small);
} }
.user-name { .user-name {

14
app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
View File

@@ -62,7 +62,7 @@
<fluent-icon <fluent-icon
icon="chevron-left" icon="chevron-left"
size="16" size="16"
class="margin-left-minus-slab" :class="notificationPanelFooterIconClass"
/> />
</woot-button> </woot-button>
<woot-button <woot-button
@@ -96,7 +96,7 @@
<fluent-icon <fluent-icon
icon="chevron-right" icon="chevron-right"
size="16" size="16"
class="margin-left-minus-slab" :class="notificationPanelFooterIconClass"
/> />
</woot-button> </woot-button>
</div> </div>
@@ -109,6 +109,7 @@
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { mixin as clickaway } from 'vue-clickaway'; import { mixin as clickaway } from 'vue-clickaway';
import rtlMixin from 'shared/mixins/rtlMixin';
import NotificationPanelList from './NotificationPanelList'; import NotificationPanelList from './NotificationPanelList';
@@ -116,7 +117,7 @@ export default {
components: { components: {
NotificationPanelList, NotificationPanelList,
}, },
mixins: [clickaway], mixins: [clickaway, rtlMixin],
data() { data() {
return { return {
pageSize: 15, pageSize: 15,
@@ -129,6 +130,11 @@ export default {
records: 'notifications/getNotifications', records: 'notifications/getNotifications',
uiFlags: 'notifications/getUIFlags', uiFlags: 'notifications/getUIFlags',
}), }),
notificationPanelFooterIconClass() {
return this.isRTLView
? 'margin-right-minus-slab'
: 'margin-left-minus-slab';
},
totalUnreadNotifications() { totalUnreadNotifications() {
return this.meta.unreadCount; return this.meta.unreadCount;
}, },
@@ -249,6 +255,7 @@ export default {
left: var(--space-jumbo); left: var(--space-jumbo);
margin: var(--space-small); margin: var(--space-small);
} }
.header-wrap { .header-wrap {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -272,6 +279,7 @@ export default {
font-size: var(--font-size-micro); font-size: var(--font-size-micro);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
margin-left: var(--space-smaller); margin-left: var(--space-smaller);
margin-right: var(--space-smaller);
} }
.action-button { .action-button {

35
app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
View File

@@ -26,6 +26,7 @@ import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName'; import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
import campaignMixin from 'shared/mixins/campaignMixin'; import campaignMixin from 'shared/mixins/campaignMixin';
import timeMixin from 'dashboard/mixins/time'; import timeMixin from 'dashboard/mixins/time';
import rtlMixin from 'shared/mixins/rtlMixin';
import InboxName from 'dashboard/components/widgets/InboxName'; import InboxName from 'dashboard/components/widgets/InboxName';
export default { export default {
@@ -35,7 +36,13 @@ export default {
VeTable, VeTable,
}, },
mixins: [clickaway, timeMixin, campaignMixin, messageFormatterMixin], mixins: [
clickaway,
timeMixin,
campaignMixin,
messageFormatterMixin,
rtlMixin,
],
props: { props: {
campaigns: { campaigns: {
@@ -98,7 +105,7 @@ export default {
key: 'title', key: 'title',
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.TITLE'), title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.TITLE'),
fixed: 'left', fixed: 'left',
align: 'left', align: this.isRTLView ? 'right' : 'left',
renderBodyCell: ({ row }) => ( renderBodyCell: ({ row }) => (
<div class="row--title-block"> <div class="row--title-block">
<h6 class="sub-block-title title text-truncate">{row.title}</h6> <h6 class="sub-block-title title text-truncate">{row.title}</h6>
@@ -110,7 +117,7 @@ export default {
field: 'message', field: 'message',
key: 'message', key: 'message',
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.MESSAGE'), title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.MESSAGE'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
width: 350, width: 350,
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
if (row.message) { if (row.message) {
@@ -129,7 +136,7 @@ export default {
field: 'inbox', field: 'inbox',
key: 'inbox', key: 'inbox',
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.INBOX'), title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.INBOX'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
return <InboxName inbox={row.inbox} />; return <InboxName inbox={row.inbox} />;
}, },
@@ -142,7 +149,7 @@ export default {
field: 'enabled', field: 'enabled',
key: 'enabled', key: 'enabled',
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.STATUS'), title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.STATUS'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
const labelText = row.enabled const labelText = row.enabled
? this.$t('CAMPAIGN.LIST.STATUS.ENABLED') ? this.$t('CAMPAIGN.LIST.STATUS.ENABLED')
@@ -155,7 +162,7 @@ export default {
field: 'sender', field: 'sender',
key: 'sender', key: 'sender',
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.SENDER'), title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.SENDER'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
if (row.sender) return <UserAvatarWithName user={row.sender} />; if (row.sender) return <UserAvatarWithName user={row.sender} />;
return this.$t('CAMPAIGN.LIST.SENDER.BOT'); return this.$t('CAMPAIGN.LIST.SENDER.BOT');
@@ -165,7 +172,7 @@ export default {
field: 'url', field: 'url',
key: 'url', key: 'url',
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.URL'), title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.URL'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
renderBodyCell: ({ row }) => ( renderBodyCell: ({ row }) => (
<div class="text-truncate"> <div class="text-truncate">
<a <a
@@ -183,14 +190,14 @@ export default {
field: 'timeOnPage', field: 'timeOnPage',
key: 'timeOnPage', key: 'timeOnPage',
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.TIME_ON_PAGE'), title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.TIME_ON_PAGE'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
}, },
{ {
field: 'buttons', field: 'buttons',
key: 'buttons', key: 'buttons',
title: '', title: '',
align: 'left', align: this.isRTLView ? 'right' : 'left',
renderBodyCell: row => ( renderBodyCell: row => (
<div class="button-wrapper"> <div class="button-wrapper">
<WootButton <WootButton
@@ -221,7 +228,7 @@ export default {
field: 'campaign_status', field: 'campaign_status',
key: 'campaign_status', key: 'campaign_status',
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.STATUS'), title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.STATUS'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
const labelText = const labelText =
row.campaign_status === 'completed' row.campaign_status === 'completed'
@@ -236,13 +243,13 @@ export default {
field: 'scheduledAt', field: 'scheduledAt',
key: 'scheduledAt', key: 'scheduledAt',
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.SCHEDULED_AT'), title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.SCHEDULED_AT'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
}, },
{ {
field: 'buttons', field: 'buttons',
key: 'buttons', key: 'buttons',
title: '', title: '',
align: 'left', align: this.isRTLView ? 'right' : 'left',
renderBodyCell: row => ( renderBodyCell: row => (
<div class="button-wrapper"> <div class="button-wrapper">
<WootButton <WootButton
@@ -272,6 +279,10 @@ export default {
} }
tbody.ve-table-body .ve-table-body-tr .ve-table-body-td { tbody.ve-table-body .ve-table-body-tr .ve-table-body-td {
padding: var(--space-slab) var(--space-two); padding: var(--space-slab) var(--space-two);
.inbox--name {
margin: 0;
}
} }
} }

7
app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
View File

@@ -4,13 +4,13 @@
<td> <td>
<div class="avatar-container"> <div class="avatar-container">
<thumbnail :username="macro.created_by.name" size="24px" /> <thumbnail :username="macro.created_by.name" size="24px" />
<span class="ml-2">{{ macro.created_by.name }}</span> <span>{{ macro.created_by.name }}</span>
</div> </div>
</td> </td>
<td> <td>
<div class="avatar-container"> <div class="avatar-container">
<thumbnail :username="macro.updated_by.name" size="24px" /> <thumbnail :username="macro.updated_by.name" size="24px" />
<span class="ml-2">{{ macro.updated_by.name }}</span> <span>{{ macro.updated_by.name }}</span>
</div> </div>
</td> </td>
<td>{{ visibilityLabel }}</td> <td>{{ visibilityLabel }}</td>
@@ -68,7 +68,8 @@ export default {
align-items: center; align-items: center;
span { span {
margin-left: var(--space-one); margin-left: var(--space-small);
margin-right: var(--space-small);
} }
} }
</style> </style>

15
app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
View File

@@ -26,13 +26,14 @@ import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName'
import { CSAT_RATINGS } from 'shared/constants/messages'; import { CSAT_RATINGS } from 'shared/constants/messages';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import timeMixin from 'dashboard/mixins/time'; import timeMixin from 'dashboard/mixins/time';
import rtlMixin from 'shared/mixins/rtlMixin';
export default { export default {
components: { components: {
VeTable, VeTable,
VePagination, VePagination,
}, },
mixins: [timeMixin], mixins: [timeMixin, rtlMixin],
props: { props: {
pageIndex: { pageIndex: {
type: Number, type: Number,
@@ -51,7 +52,7 @@ export default {
field: 'contact', field: 'contact',
key: 'contact', key: 'contact',
title: this.$t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'), title: this.$t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
width: 200, width: 200,
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
if (row.contact) { if (row.contact) {
@@ -64,7 +65,7 @@ export default {
field: 'assignedAgent', field: 'assignedAgent',
key: 'assignedAgent', key: 'assignedAgent',
title: this.$t('CSAT_REPORTS.TABLE.HEADER.AGENT_NAME'), title: this.$t('CSAT_REPORTS.TABLE.HEADER.AGENT_NAME'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
width: 200, width: 200,
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
if (row.assignedAgent) { if (row.assignedAgent) {
@@ -94,14 +95,14 @@ export default {
field: 'feedbackText', field: 'feedbackText',
key: 'feedbackText', key: 'feedbackText',
title: this.$t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'), title: this.$t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
align: 'left', align: this.isRTLView ? 'right' : 'left',
width: 400, width: 400,
}, },
{ {
field: 'converstionId', field: 'conversationId',
key: 'converstionId', key: 'conversationId',
title: '', title: '',
align: 'left', align: this.isRTLView ? 'right' : 'left',
width: 100, width: 100,
renderBodyCell: ({ row }) => { renderBodyCell: ({ row }) => {
const routerParams = { const routerParams = {

17
app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
View File

@@ -32,6 +32,7 @@
import { VeTable, VePagination } from 'vue-easytable'; import { VeTable, VePagination } from 'vue-easytable';
import Spinner from 'shared/components/Spinner.vue'; import Spinner from 'shared/components/Spinner.vue';
import EmptyState from 'dashboard/components/widgets/EmptyState.vue'; import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
import rtlMixin from 'shared/mixins/rtlMixin';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue'; import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
export default { export default {
@@ -42,6 +43,7 @@ export default {
VeTable, VeTable,
VePagination, VePagination,
}, },
mixins: [rtlMixin],
props: { props: {
agents: { agents: {
type: Array, type: Array,
@@ -83,7 +85,7 @@ export default {
'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.AGENT' 'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.AGENT'
), ),
fixed: 'left', fixed: 'left',
align: 'left', align: this.isRTLView ? 'right' : 'left',
width: 25, width: 25,
renderBodyCell: ({ row }) => ( renderBodyCell: ({ row }) => (
<div class="row-user-block"> <div class="row-user-block">
@@ -106,7 +108,7 @@ export default {
title: this.$t( title: this.$t(
'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.OPEN' 'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.OPEN'
), ),
align: 'left', align: this.isRTLView ? 'right' : 'left',
width: 10, width: 10,
}, },
{ {
@@ -115,7 +117,7 @@ export default {
title: this.$t( title: this.$t(
'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.UNATTENDED' 'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.UNATTENDED'
), ),
align: 'left', align: this.isRTLView ? 'right' : 'left',
width: 10, width: 10,
}, },
]; ];
@@ -165,22 +167,21 @@ export default {
text-align: left; text-align: left;
.user-block { .user-block {
align-items: flex-start;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
margin: 0 var(--space-small);
.title { .title {
font-size: var(--font-size-small); font-size: var(--font-size-small);
margin: var(--zero); margin: var(--zero);
line-height: 1; line-height: 1.2;
} }
.sub-title { .sub-title {
font-size: var(--font-size-mini); font-size: var(--font-size-mini);
} }
} }
.user-thumbnail-box {
margin-right: var(--space-small);
}
} }
.table-pagination { .table-pagination {