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

* 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>
2025-11-01 11:37:58 +00:00 · 2023-02-27 11:36:28 +05:30
parent 06ffaa90fc
commit 7d4e6d0257
11 changed files with 91 additions and 64 deletions
--- a/app/javascript/dashboard/assets/scss/_rtl.scss
+++ b/app/javascript/dashboard/assets/scss/_rtl.scss
@@ -354,12 +354,12 @@
    }

    thead th {
-      padding-left: var(--space-one);
+      padding-left: var(--space-small);
      padding-right: 0;
    }

    tbody td {
-      padding-left: var(--space-one);
+      padding-left: var(--space-small);
      padding-right: 0;
    }
  }
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -48,7 +48,7 @@
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
-        width: 100%;
+        width: fit-content;
      }

      p {
--- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
@@ -1,21 +1,22 @@
 table {
  border-spacing: 0;
-  font-size: $font-size-small;
+  font-size: var(--font-size-small);

  thead {
    th {
-      font-weight: $font-weight-bold;
+      font-weight: var(--font-weight-bold);
+      text-align: left;
      text-transform: uppercase;
    }
  }

  tbody {
    tr {
-      border-bottom: 1px solid $color-border-light;
+      border-bottom: 1px solid var(--color-border-light);
    }

    td {
-      padding: $space-one $space-small;
+      padding: var(--space-small);
    }
  }
 }
@@ -36,7 +37,7 @@ table {

  .agent-name {
    display: block;
-    font-weight: $font-weight-medium;
+    font-weight: var(--font-weight-medium);
    text-transform: capitalize;
  }

--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -24,7 +24,7 @@
          <fluent-icon
            icon="chevron-left"
            size="18"
-            class="margin-left-minus-slab"
+            :class="pageFooterIconClass"
          />
        </woot-button>
        <woot-button
@@ -65,7 +65,7 @@
          <fluent-icon
            icon="chevron-right"
            size="18"
-            class="margin-left-minus-slab"
+            :class="pageFooterIconClass"
          />
        </woot-button>
      </div>
@@ -74,8 +74,11 @@
 </template>

 <script>
+import rtlMixin from 'shared/mixins/rtlMixin';
+
 export default {
  components: {},
+  mixins: [rtlMixin],
  props: {
    currentPage: {
      type: Number,
@@ -91,6 +94,11 @@ export default {
    },
  },
  computed: {
+    pageFooterIconClass() {
+      return this.isRTLView
+        ? 'margin-right-minus-slab'
+        : 'margin-left-minus-slab';
+    },
    isFooterVisible() {
      return this.totalCount && !(this.firstIndex > this.totalCount);
    },
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -38,11 +38,7 @@ export default {
  text-align: left;

  .user-name {
-    margin: 0;
-    text-transform: capitalize;
-  }
-  .user-thumbnail-box {
-    margin-right: var(--space-small);
+    margin: 0 var(--space-small);
  }
 }
 </style>
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -34,6 +34,7 @@ import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import timeMixin from 'dashboard/mixins/time';
+import rtlMixin from 'shared/mixins/rtlMixin';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';

 export default {
@@ -42,7 +43,7 @@ export default {
    Spinner,
    VeTable,
  },
-  mixins: [clickaway, timeMixin],
+  mixins: [clickaway, timeMixin, rtlMixin],
  props: {
    contacts: {
      type: Array,
@@ -116,7 +117,7 @@ export default {
          key: 'name',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
          fixed: 'left',
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          sortBy: this.sortConfig.name || '',
          width: 300,
          renderBodyCell: ({ row }) => (
@@ -152,7 +153,7 @@ export default {
          field: 'email',
          key: 'email',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          sortBy: this.sortConfig.email || '',
          width: 240,
          renderBodyCell: ({ row }) => {
@@ -176,27 +177,27 @@ export default {
          key: 'phone_number',
          sortBy: this.sortConfig.phone_number || '',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
        },
        {
          field: 'company',
          key: 'company',
          sortBy: this.sortConfig.company_name || '',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
        },
        {
          field: 'city',
          key: 'city',
          sortBy: this.sortConfig.city || '',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
        },
        {
          field: 'country',
          key: 'country',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          sortBy: this.sortConfig.country || '',
          renderBodyCell: ({ row }) => {
            if (row.country) {
@@ -213,7 +214,7 @@ export default {
          field: 'profiles',
          key: 'profiles',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          renderBodyCell: ({ row }) => {
            const { profiles } = row;

@@ -244,21 +245,21 @@ export default {
          key: 'last_activity_at',
          sortBy: this.sortConfig.last_activity_at || '',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
        },
        {
          field: 'created_at',
          key: 'created_at',
          sortBy: this.sortConfig.created_at || '',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
        },
        {
          field: 'conversationsCount',
          key: 'conversationsCount',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CONVERSATIONS'),
          width: 150,
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
        },
      ];
    },
@@ -301,11 +302,10 @@ export default {
    text-align: left;

    .user-block {
-      min-width: 0;
-    }
-
-    .user-thumbnail-box {
-      margin-right: var(--space-small);
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      margin: 0 var(--space-small);
    }

    .user-name {
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -62,7 +62,7 @@
            <fluent-icon
              icon="chevron-left"
              size="16"
-              class="margin-left-minus-slab"
+              :class="notificationPanelFooterIconClass"
            />
          </woot-button>
          <woot-button
@@ -96,7 +96,7 @@
            <fluent-icon
              icon="chevron-right"
              size="16"
-              class="margin-left-minus-slab"
+              :class="notificationPanelFooterIconClass"
            />
          </woot-button>
        </div>
@@ -109,6 +109,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
+import rtlMixin from 'shared/mixins/rtlMixin';

 import NotificationPanelList from './NotificationPanelList';

@@ -116,7 +117,7 @@ export default {
  components: {
    NotificationPanelList,
  },
-  mixins: [clickaway],
+  mixins: [clickaway, rtlMixin],
  data() {
    return {
      pageSize: 15,
@@ -129,6 +130,11 @@ export default {
      records: 'notifications/getNotifications',
      uiFlags: 'notifications/getUIFlags',
    }),
+    notificationPanelFooterIconClass() {
+      return this.isRTLView
+        ? 'margin-right-minus-slab'
+        : 'margin-left-minus-slab';
+    },
    totalUnreadNotifications() {
      return this.meta.unreadCount;
    },
@@ -249,6 +255,7 @@ export default {
  left: var(--space-jumbo);
  margin: var(--space-small);
 }
+
 .header-wrap {
  flex-direction: row;
  align-items: center;
@@ -272,6 +279,7 @@ export default {
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-bold);
    margin-left: var(--space-smaller);
+    margin-right: var(--space-smaller);
  }

  .action-button {
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -26,6 +26,7 @@ import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import timeMixin from 'dashboard/mixins/time';
+import rtlMixin from 'shared/mixins/rtlMixin';
 import InboxName from 'dashboard/components/widgets/InboxName';

 export default {
@@ -35,7 +36,13 @@ export default {
    VeTable,
  },

-  mixins: [clickaway, timeMixin, campaignMixin, messageFormatterMixin],
+  mixins: [
+    clickaway,
+    timeMixin,
+    campaignMixin,
+    messageFormatterMixin,
+    rtlMixin,
+  ],

  props: {
    campaigns: {
@@ -98,7 +105,7 @@ export default {
          key: 'title',
          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.TITLE'),
          fixed: 'left',
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          renderBodyCell: ({ row }) => (
            <div class="row--title-block">
              <h6 class="sub-block-title title text-truncate">{row.title}</h6>
@@ -110,7 +117,7 @@ export default {
          field: 'message',
          key: 'message',
          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.MESSAGE'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          width: 350,
          renderBodyCell: ({ row }) => {
            if (row.message) {
@@ -129,7 +136,7 @@ export default {
          field: 'inbox',
          key: 'inbox',
          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.INBOX'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          renderBodyCell: ({ row }) => {
            return <InboxName inbox={row.inbox} />;
          },
@@ -142,7 +149,7 @@ export default {
            field: 'enabled',
            key: 'enabled',
            title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.STATUS'),
-            align: 'left',
+            align: this.isRTLView ? 'right' : 'left',
            renderBodyCell: ({ row }) => {
              const labelText = row.enabled
                ? this.$t('CAMPAIGN.LIST.STATUS.ENABLED')
@@ -155,7 +162,7 @@ export default {
            field: 'sender',
            key: 'sender',
            title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.SENDER'),
-            align: 'left',
+            align: this.isRTLView ? 'right' : 'left',
            renderBodyCell: ({ row }) => {
              if (row.sender) return <UserAvatarWithName user={row.sender} />;
              return this.$t('CAMPAIGN.LIST.SENDER.BOT');
@@ -165,7 +172,7 @@ export default {
            field: 'url',
            key: 'url',
            title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.URL'),
-            align: 'left',
+            align: this.isRTLView ? 'right' : 'left',
            renderBodyCell: ({ row }) => (
              <div class="text-truncate">
                <a
@@ -183,14 +190,14 @@ export default {
            field: 'timeOnPage',
            key: 'timeOnPage',
            title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.TIME_ON_PAGE'),
-            align: 'left',
+            align: this.isRTLView ? 'right' : 'left',
          },

          {
            field: 'buttons',
            key: 'buttons',
            title: '',
-            align: 'left',
+            align: this.isRTLView ? 'right' : 'left',
            renderBodyCell: row => (
              <div class="button-wrapper">
                <WootButton
@@ -221,7 +228,7 @@ export default {
          field: 'campaign_status',
          key: 'campaign_status',
          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.STATUS'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          renderBodyCell: ({ row }) => {
            const labelText =
              row.campaign_status === 'completed'
@@ -236,13 +243,13 @@ export default {
          field: 'scheduledAt',
          key: 'scheduledAt',
          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.SCHEDULED_AT'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
        },
        {
          field: 'buttons',
          key: 'buttons',
          title: '',
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          renderBodyCell: row => (
            <div class="button-wrapper">
              <WootButton
@@ -272,6 +279,10 @@ export default {
    }
    tbody.ve-table-body .ve-table-body-tr .ve-table-body-td {
      padding: var(--space-slab) var(--space-two);
+
+      .inbox--name {
+        margin: 0;
+      }
    }
  }

--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
@@ -4,13 +4,13 @@
    <td>
      <div class="avatar-container">
        <thumbnail :username="macro.created_by.name" size="24px" />
-        <span class="ml-2">{{ macro.created_by.name }}</span>
+        <span>{{ macro.created_by.name }}</span>
      </div>
    </td>
    <td>
      <div class="avatar-container">
        <thumbnail :username="macro.updated_by.name" size="24px" />
-        <span class="ml-2">{{ macro.updated_by.name }}</span>
+        <span>{{ macro.updated_by.name }}</span>
      </div>
    </td>
    <td>{{ visibilityLabel }}</td>
@@ -68,7 +68,8 @@ export default {
  align-items: center;

  span {
-    margin-left: var(--space-one);
+    margin-left: var(--space-small);
+    margin-right: var(--space-small);
  }
 }
 </style>
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -26,13 +26,14 @@ import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName'
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import { mapGetters } from 'vuex';
 import timeMixin from 'dashboard/mixins/time';
+import rtlMixin from 'shared/mixins/rtlMixin';

 export default {
  components: {
    VeTable,
    VePagination,
  },
-  mixins: [timeMixin],
+  mixins: [timeMixin, rtlMixin],
  props: {
    pageIndex: {
      type: Number,
@@ -51,7 +52,7 @@ export default {
          field: 'contact',
          key: 'contact',
          title: this.$t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          width: 200,
          renderBodyCell: ({ row }) => {
            if (row.contact) {
@@ -64,7 +65,7 @@ export default {
          field: 'assignedAgent',
          key: 'assignedAgent',
          title: this.$t('CSAT_REPORTS.TABLE.HEADER.AGENT_NAME'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          width: 200,
          renderBodyCell: ({ row }) => {
            if (row.assignedAgent) {
@@ -94,14 +95,14 @@ export default {
          field: 'feedbackText',
          key: 'feedbackText',
          title: this.$t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          width: 400,
        },
        {
-          field: 'converstionId',
-          key: 'converstionId',
+          field: 'conversationId',
+          key: 'conversationId',
          title: '',
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          width: 100,
          renderBodyCell: ({ row }) => {
            const routerParams = {
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -32,6 +32,7 @@
 import { VeTable, VePagination } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import rtlMixin from 'shared/mixins/rtlMixin';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';

 export default {
@@ -42,6 +43,7 @@ export default {
    VeTable,
    VePagination,
  },
+  mixins: [rtlMixin],
  props: {
    agents: {
      type: Array,
@@ -83,7 +85,7 @@ export default {
            'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.AGENT'
          ),
          fixed: 'left',
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          width: 25,
          renderBodyCell: ({ row }) => (
            <div class="row-user-block">
@@ -106,7 +108,7 @@ export default {
          title: this.$t(
            'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.OPEN'
          ),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          width: 10,
        },
        {
@@ -115,7 +117,7 @@ export default {
          title: this.$t(
            'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.UNATTENDED'
          ),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
          width: 10,
        },
      ];
@@ -165,22 +167,21 @@ export default {
    text-align: left;

    .user-block {
+      align-items: flex-start;
      display: flex;
      flex-direction: column;
      min-width: 0;
+      margin: 0 var(--space-small);
+
      .title {
        font-size: var(--font-size-small);
        margin: var(--zero);
-        line-height: 1;
+        line-height: 1.2;
      }
      .sub-title {
        font-size: var(--font-size-mini);
      }
    }
-
-    .user-thumbnail-box {
-      margin-right: var(--space-small);
-    }
  }

  .table-pagination {