feat: Use Fluent SVG icons on the dashboard (#3482)

2021-11-30 21:03:18 -08:00 · 2021-11-30 21:03:18 -08:00 · c792cfc0be
commit c792cfc0be
parent 98be3b33c1
151 changed files with 613 additions and 617 deletions
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@ -24,12 +24,11 @@
        </span>
      </div>
      <div class="remove-file-wrap">
-        <button
-          class="remove--attachment"
+        <woot-button
+          class="remove--attachment clear secondary"
+          icon="dismiss"
          @click="() => onRemoveAttachment(index)"
-        >
-          <i class="ion-android-close"></i>
-        </button>
+        />
      </div>
    </div>
  </div>
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@ -1,7 +1,8 @@
 <template>
-  <span class="back-button ion-ios-arrow-left" @click.capture="goBack">
+  <button class="back-button" @click.capture="goBack">
+    <fluent-icon icon="chevron-left" />
    {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
-  </span>
+  </button>
 </template>
 <script>
 import router from '../../routes/index';
@ -28,3 +29,4 @@ export default {
  },
 };
 </script>
+<style scoped></style>
--- a/app/javascript/dashboard/components/widgets/InboxIconWithName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxIconWithName.vue
@ -1,38 +0,0 @@
-<template>
-  <div class="inbox">
-    <i :class="icon" />
-    <span>{{ inbox.name }}</span>
-  </div>
-</template>
-<script>
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
-export default {
-  props: {
-    inbox: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    icon() {
-      if (this.inbox.channel_type === INBOX_TYPES.WEB) {
-        return 'icon ion-earth';
-      }
-      return 'icon ion-android-textsms';
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.inbox {
-  display: flex;
-  align-items: center;
-  .icon {
-    margin-right: var(--space-micro);
-    min-width: var(--space-normal);
-    position: relative;
-    top: -1px;
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/widgets/InboxListItem.vue
+++ b/app/javascript/dashboard/components/widgets/InboxListItem.vue
@ -1,23 +0,0 @@
-<template>
-  <div class="inbox-item">
-    <img src="~dashboard/assets/images/no_page_image.png" alt="No Page Image" />
-    <div class="item--details columns">
-      <h4 class="item--name">
-        {{ inbox.label }}
-      </h4>
-      <p class="item--sub">
-        Facebook
-      </p>
-    </div>
-    <!-- <span class="ion-chevron-right arrow"></span> -->
-  </div>
-</template>
-<script>
-/* eslint no-console: 0 */
-// import WootSwitch from '../ui/Switch';
-
-export default {
-  props: ['inbox'],
-  created() {},
-};
-</script>
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@ -1,8 +1,8 @@
 <template>
-  <span class="inbox--name">
-    <i :class="computedInboxClass" />
+  <div class="inbox--name">
+    <fluent-icon class="inbox--icon" :icon="computedInboxClass" size="12" />
    {{ inbox.name }}
-  </span>
+  </div>
 </template>
 <script>
 import { getInboxClassByType } from 'dashboard/helper/inbox';
@ -25,6 +25,7 @@ export default {
 </script>
 <style scoped>
 .inbox--name {
+  display: inline-flex;
  padding: var(--space-micro) 0;
  line-height: var(--space-slab);
  font-weight: var(--font-weight-medium);
@ -32,4 +33,8 @@ export default {
  color: var(--s-500);
  font-size: var(--font-size-mini);
 }
+
+.inbox--icon {
+  margin-right: var(--space-micro);
+}
 </style>
--- a/app/javascript/dashboard/components/widgets/SearchBox.vue
+++ b/app/javascript/dashboard/components/widgets/SearchBox.vue
@ -1,11 +0,0 @@
-<template>
-  <div class="search">
-    <i class="icon ion-ios-search-strong" />
-    <input class="input" type="email" :placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
-  </div>
-</template>
-<script>
-export default {
-
-};
-</script>
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@ -20,8 +20,12 @@
          :is-disabled="hasFirstPage"
          @click="onFirstPage"
        >
-          <i class="ion-chevron-left" />
-          <i class="ion-chevron-left" />
+          <fluent-icon icon="chevron-left" size="18" />
+          <fluent-icon
+            icon="chevron-left"
+            size="18"
+            class="margin-left-minus-slab"
+          />
        </woot-button>
        <woot-button
          size="small"
@ -30,7 +34,7 @@
          :is-disabled="hasPrevPage"
          @click="onPrevPage"
        >
-          <i class="ion-chevron-left" />
+          <fluent-icon icon="chevron-left" size="18" />
        </woot-button>
        <woot-button
          size="small"
@ -47,7 +51,7 @@
          :is-disabled="hasNextPage"
          @click="onNextPage"
        >
-          <i class="ion-chevron-right" />
+          <fluent-icon icon="chevron-right" size="18" />
        </woot-button>
        <woot-button
          size="small"
@ -57,8 +61,12 @@
          :is-disabled="hasLastPage"
          @click="onLastPage"
        >
-          <i class="ion-chevron-right" />
-          <i class="ion-chevron-right" />
+          <fluent-icon icon="chevron-right" size="18" />
+          <fluent-icon
+            icon="chevron-right"
+            size="18"
+            class="margin-left-minus-slab"
+          />
        </woot-button>
      </div>
    </div>
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@ -3,11 +3,12 @@
    <div class="left-wrap">
      <woot-button
        :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
-        icon="ion-happy-outline"
+        icon="emoji"
        emoji="😊"
        color-scheme="secondary"
        variant="smooth"
        size="small"
+        :icon-size="14"
        @click="toggleEmojiPicker"
      />

@ -24,8 +25,9 @@
          v-if="showAttachButton"
          class-names="button--upload"
          :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-          icon="ion-android-attach"
+          icon="attach"
          emoji="📎"
+          :icon-size="14"
          color-scheme="secondary"
          variant="smooth"
          size="small"
@ -33,8 +35,9 @@
      </file-upload>
      <woot-button
        v-if="enableRichEditor && !isOnPrivateNote"
-        icon="ion-quote"
+        icon="quote"
        emoji="🖊️"
+        :icon-size="16"
        color-scheme="secondary"
        variant="smooth"
        size="small"
@ -46,7 +49,7 @@
          v-show="$refs.upload && $refs.upload.dropActive"
          class="modal-mask"
        >
-          <i class="ion-ios-cloud-upload-outline icon"></i>
+          <fluent-icon icon="cloud-backup" />
          <h4 class="page-sub-title">
            {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
          </h4>
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@ -30,7 +30,7 @@
      v-if="popoutReplyBox"
      variant="clear"
      size="large"
-      icon="ion-android-close"
+      icon="dismiss"
      color-scheme="secondary"
      class-names="popout-button"
      @click="$emit('click')"
@ -39,7 +39,7 @@
      v-else
      variant="clear"
      size="large"
-      icon="ion-arrow-resize"
+      icon="resize-large"
      color-scheme="secondary"
      class-names="popout-button"
      @click="$emit('click')"
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@ -21,7 +21,8 @@
        />
        <div class="filter-actions">
          <woot-button
-            icon="ion-plus"
+            icon="add"
+            icon-size="16"
            color-scheme="success"
            variant="smooth"
            size="small"
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@ -24,7 +24,7 @@
          v-if="showAssignee && assignee.name"
          class="label assignee-label text-truncate"
        >
-          <i class="ion-person" />
+          <fluent-icon icon="person" size="12" />
          {{ assignee.name }}
        </span>
      </div>
@ -32,25 +32,41 @@
        {{ currentContact.name }}
      </h4>
      <p v-if="lastMessageInChat" class="conversation--message">
-        <i v-if="isMessagePrivate" class="ion-locked last-message-icon" />
-        <i v-else-if="messageByAgent" class="ion-ios-undo last-message-icon" />
-        <i
+        <fluent-icon
+          v-if="isMessagePrivate"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="lock-closed"
+        />
+        <fluent-icon
+          v-else-if="messageByAgent"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="arrow-reply"
+        />
+        <fluent-icon
          v-else-if="isMessageAnActivity"
-          class="ion-information-circled last-message-icon"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="info"
        />
        <span v-if="lastMessageInChat.content">
          {{ parsedLastMessage }}
        </span>
        <span v-else-if="lastMessageInChat.attachments">
-          <i :class="`small-icon ${this.$t(`${attachmentIconKey}.ICON`)}`"></i>
-          {{ this.$t(`${attachmentIconKey}.CONTENT`) }}
+          <fluent-icon
+            size="16"
+            class="message--attachment-icon"
+            :icon="attachmentIcon"
+          />
+          {{ this.$t(`${attachmentMessageContent}`) }}
        </span>
        <span v-else>
          {{ $t('CHAT_LIST.NO_CONTENT') }}
        </span>
      </p>
      <p v-else class="conversation--message">
-        <i class="ion-android-alert"></i>
+        <fluent-icon size="16" class="message--attachment-icon" icon="info" />
        <span>
          {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
        </span>
@ -76,6 +92,15 @@ import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName';
 import inboxMixin from 'shared/mixins/inboxMixin';

+const ATTACHMENT_ICONS = {
+  image: 'image',
+  audio: 'headphones-sound-wave',
+  video: 'video',
+  file: 'document',
+  location: 'location',
+  fallback: 'link',
+};
+
 export default {
  components: {
    InboxName,
@ -133,10 +158,18 @@ export default {
      );
    },

-    attachmentIconKey() {
+    lastMessageFileType() {
      const lastMessage = this.lastMessageInChat;
      const [{ file_type: fileType } = {}] = lastMessage.attachments;
-      return `CHAT_LIST.ATTACHMENTS.${fileType}`;
+      return fileType;
+    },
+
+    attachmentIcon() {
+      return ATTACHMENT_ICONS[this.lastMessageFileType];
+    },
+
+    attachmentMessageContent() {
+      return `CHAT_LIST.ATTACHMENTS.${this.lastMessageFileType}.CONTENT`;
    },

    isActiveChat() {
@ -243,14 +276,10 @@ export default {
    white-space: nowrap;
    width: 60%;
  }
-  .ion-earth {
-    font-size: var(--font-size-mini);
-  }
 }

 .last-message-icon {
  color: var(--s-600);
-  font-size: var(--font-size-mini);
 }

 .conversation--metadata {
@ -259,16 +288,22 @@ export default {
  padding-right: var(--space-normal);

  .label {
-    padding: var(--space-micro) 0 var(--space-micro) 0;
-    line-height: var(--space-slab);
-    font-weight: var(--font-weight-medium);
    background: none;
    color: var(--s-500);
    font-size: var(--font-size-mini);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--space-slab);
+    padding: var(--space-micro) 0 var(--space-micro) 0;
  }

  .assignee-label {
+    display: inline-flex;
    max-width: 50%;
  }
 }
+
+.message--attachment-icon {
+  margin-top: var(--space-minus-micro);
+  vertical-align: middle;
+}
 </style>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@ -11,10 +11,12 @@
      <div class="user--profile__meta">
        <h3 class="user--name text-truncate">
          <span class="margin-right-smaller">{{ currentContact.name }}</span>
-          <i
+          <fluent-icon
            v-if="!isHMACVerified"
            v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-            class="ion-android-alert text-y-800 fs-default"
+            class="text-y-800"
+            size="14"
+            icon="warning"
          />
        </h3>
        <div class="conversation--header--actions">
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@ -234,8 +234,8 @@ export default {
      return {
        email: this.contentAttributes.email,
        cc: this.contentAttributes.cc_emails,
-        bcc: this.contentAttributes.bcc_emails
-      }
+        bcc: this.contentAttributes.bcc_emails,
+      };
    },
    hasAttachments() {
      return !!(this.data.attachments && this.data.attachments.length > 0);
@ -354,7 +354,7 @@ export default {
    }

    &.is-private .file.message-text__wrap {
-      .ion-document-text {
+      .file--icon {
        color: var(--w-400);
      }
      .text-block-title {
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@ -44,7 +44,11 @@
        class="banner-close-button"
        @click="removeTweetSelection"
      >
-        <i v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')" class="ion-close" />
+        <fluent-icon
+          v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')"
+          size="16"
+          icon="dismiss"
+        />
      </button>
    </div>
    <ul class="conversation-panel">
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@ -4,20 +4,20 @@
      v-if="!currentChat.muted"
      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
      class="hollow secondary actions--button"
-      icon="ion-volume-mute"
+      icon="speaker-mute"
      @click="mute"
    />
    <woot-button
      v-else
      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
      class="hollow secondary actions--button"
-      icon="ion-volume-medium"
+      icon="speaker-1"
      @click="unmute"
    />
    <woot-button
      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
      class="hollow secondary actions--button"
-      icon="ion-share"
+      icon="share"
      @click="toggleEmailActionsModal"
    />
    <resolve-action
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@ -2,38 +2,48 @@
  <div class="message-text--metadata">
    <span class="time">{{ readableTime }}</span>
    <span v-if="showSentIndicator" class="time">
-      <i
+      <fluent-icon
        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
-        class="icon ion-checkmark"
+        icon="checkmark"
+        size="16"
      />
    </span>
-    <i
+    <fluent-icon
      v-if="isEmail"
      v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
-      class="ion ion-android-mail"
+      icon="mail"
+      class="action--icon"
+      size="16"
    />
-    <i
+    <fluent-icon
      v-if="isPrivate"
      v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
-      class="icon ion-android-lock"
+      icon="lock-closed"
+      class="action--icon"
+      size="16"
      @mouseenter="isHovered = true"
      @mouseleave="isHovered = false"
    />
-    <i
-      v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
-      v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
-      class="icon ion-reply cursor-pointer"
-      @click="onTweetReply"
-    />
+    <button @click="onTweetReply">
+      <fluent-icon
+        v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
+        v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
+        icon="arrow-reply"
+        class="action--icon cursor-pointer"
+        size="16"
+      />
+    </button>
    <a
      v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
      :href="linkToTweet"
      target="_blank"
      rel="noopener noreferrer nofollow"
    >
-      <i
+      <fluent-icon
        v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
-        class="icon ion-android-open cursor-pointer"
+        icon="open"
+        class="action--icon cursor-pointer"
+        size="16"
      />
    </a>
  </div>
@ -129,7 +139,7 @@ export default {
    }
  }

-  .icon {
+  .action--icon {
    color: var(--white);
  }
 }
@ -143,7 +153,7 @@ export default {
 }

 .message-text--metadata {
-  align-items: flex-end;
+  align-items: flex-start;
  display: flex;

  .time {
@ -153,10 +163,9 @@ export default {
    line-height: 1.8;
  }

-  i {
-    line-height: 1.4;
-    padding-right: var(--space-small);
-    padding-left: var(--space-small);
+  .action--icon {
+    margin-right: var(--space-small);
+    margin-left: var(--space-small);
    color: var(--s-900);
  }

--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
@ -1,7 +1,7 @@
 <template>
  <div class="file message-text__wrap">
    <div class="icon-wrap">
-      <i class="ion-document-text"></i>
+      <fluent-icon icon="document" class="file--icon" />
    </div>
    <div class="meta">
      <h5 class="text-block-title">
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@ -13,11 +13,11 @@
      @click="toggleQuotedContent"
    >
      <span v-if="showQuotedContent">
-        <i class="ion-chevron-up" />
+        <fluent-icon icon="chevron-up" class="fluent-icon" size="16" />
        {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
      </span>
      <span v-else>
-        <i class="ion-chevron-down" />
+        <fluent-icon icon="chevron-down" class="fluent-icon" size="16" />
        {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
      </span>
    </button>
@ -104,5 +104,9 @@ export default {
  font-size: var(--font-size-mini);
  padding-bottom: var(--space-small);
  padding-top: var(--space-small);
+
+  .fluent-icon {
+    margin-bottom: var(--space-minus-smaller);
+  }
 }
 </style>
--- a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
@ -72,7 +72,8 @@
          />
        </div>
        <woot-button
-          icon="ion-close"
+          icon="dismiss"
+          icon-size="16"
          variant="clear"
          color-scheme="secondary"
          @click="removeFilter"
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@ -16,7 +16,9 @@
              </p>
            </div>
          </div>
-          <i class="ion-android-close modal--close" @click="$emit('close')"></i>
+          <button class="cursor-pointer" @click="$emit('close')">
+            <fluent-icon icon="dismiss" />
+          </button>
        </div>

        <div class="shortcut__wrap">
@ -111,14 +113,14 @@ export default {
 }

 .header-wrap {
+  align-items: flex-start;
  display: flex;
  justify-content: space-between;
-  align-items: center;
+  margin-bottom: var(--space-slab);
 }

 .title-shortcut-key__wrap {
  display: flex;
-  margin-bottom: var(--space-small);
 }

 .page-title {