Chore: Fixes icon size in button (#3555)

* Chore: Fixes icon size in button * Changes normal button to woot button
2021-12-14 17:37:25 +05:30 · 2021-12-14 17:37:25 +05:30 · c2191e48b1
commit c2191e48b1
parent ac372f188d
14 changed files with 87 additions and 71 deletions
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@ -66,6 +66,27 @@ $default-button-height: 4.0rem;
    }
  }

+  &.clear.button--only-icon:hover {
+    background: var(--w-50);
+
+
+    &.secondary {
+      background: var(--s-50);
+    }
+
+    &.success {
+      background: var(--g-50);
+    }
+
+    &.alert {
+      background: var(--r-50);
+    }
+
+    &.warning {
+      background: var(--y-100);
+    }
+  }
+
  // Sizes
  &.tiny {
    height: var(--space-medium);
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@ -13,9 +13,9 @@ l<template>
        />
        <woot-button
          v-else
+          size="small"
          variant="clear"
-          color-scheme="danger"
-          class="btn-clear-filters"
+          color-scheme="alert"
          @click="resetAndFetchData"
        >
          {{ $t('FILTER.CLEAR_BUTTON_LABEL') }}
@ -24,10 +24,11 @@ l<template>
          v-tooltip.top-end="$t('FILTER.TOOLTIP_LABEL')"
          variant="clear"
          color-scheme="secondary"
+          icon="filter"
+          size="small"
          class="btn-filter"
          @click="onToggleAdvanceFiltersModal"
        >
-          <fluent-icon icon="filter" />
        </woot-button>
      </div>
    </div>
@ -405,16 +406,10 @@ export default {
 .filter--actions {
  display: flex;
  align-items: center;
+}
+
 .btn-filter {
-    cursor: pointer;
-    i {
-      font-size: var(--font-size-two);
-    }
-  }
-  .btn-clear-filters {
-    color: var(--r-500);
-    cursor: pointer;
-  }
+  margin: 0 var(--space-smaller);
 }

 .filter__applied {
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@ -7,7 +7,6 @@
        color-scheme="success"
        icon="checkmark"
        emoji="✅"
-        icon-size="16"
        :is-loading="isLoading"
        @click="onCmdResolveConversation"
      >
@ -19,7 +18,6 @@
        color-scheme="warning"
        icon="arrow-redo"
        emoji="👀"
-        icon-size="16"
        :is-loading="isLoading"
        @click="onCmdOpenConversation"
      >
@ -30,7 +28,6 @@
        class-names="resolve"
        color-scheme="primary"
        icon="person"
-        icon-size="16"
        :is-loading="isLoading"
        @click="onCmdOpenConversation"
      >
@ -42,7 +39,6 @@
        :color-scheme="buttonClass"
        :disabled="isLoading"
        icon="chevron-down"
-        icon-size="16"
        emoji="🔽"
        @click="openDropdown"
      />
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@ -40,7 +40,7 @@
            :class="{ 'is-active': isActive }"
            @click="e => newLinkClick(e, navigate)"
          >
-            <fluent-icon icon="add" />
+            <fluent-icon icon="add" size="16" />
            <span class="button__content">
              {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
            </span>
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@ -36,10 +36,6 @@ export default {
      type: String,
      default: '',
    },
-    iconSize: {
-      type: [Number, String],
-      default: 20,
-    },
    emoji: {
      type: String,
      default: '',
@ -72,10 +68,12 @@ export default {
      }
      return this.variant;
    },
-    hasOnlyIconClasses() {
+    hasOnlyIcon() {
      const hasEmojiOrIcon = this.emoji || this.icon;
-      if (!this.$slots.default && hasEmojiOrIcon) return 'button--only-icon';
-      return '';
+      return !this.$slots.default && hasEmojiOrIcon;
+    },
+    hasOnlyIconClasses() {
+      return this.hasOnlyIcon ? 'button--only-icon' : '';
    },
    buttonClasses() {
      return [
@ -88,6 +86,41 @@ export default {
        this.isExpanded ? 'expanded' : '',
      ];
    },
+    withTextIconSize() {
+      switch (this.size) {
+        case 'tiny':
+          return 12;
+        case 'small':
+          return 14;
+        case 'medium':
+          return 16;
+        case 'large':
+          return 18;
+
+        default:
+          return 16;
+      }
+    },
+    withoutTextIconSize() {
+      switch (this.size) {
+        case 'tiny':
+          return 14;
+        case 'small':
+          return 16;
+        case 'medium':
+          return 18;
+        case 'large':
+          return 20;
+
+        default:
+          return 18;
+      }
+    },
+    iconSize() {
+      return this.hasOnlyIcon
+        ? this.withoutTextIconSize
+        : this.withTextIconSize;
+    },
  },
  methods: {
    handleClick(evt) {
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@ -8,7 +8,6 @@
        color-scheme="secondary"
        variant="smooth"
        size="small"
-        :icon-size="14"
        @click="toggleEmojiPicker"
      />

@ -27,7 +26,6 @@
          :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
          icon="attach"
          emoji="📎"
-          :icon-size="14"
          color-scheme="secondary"
          variant="smooth"
          size="small"
@ -37,7 +35,6 @@
        v-if="enableRichEditor && !isOnPrivateNote"
        icon="quote"
        emoji="🖊️"
-        :icon-size="16"
        color-scheme="secondary"
        variant="smooth"
        size="small"
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@ -1,23 +1,23 @@
 <template>
  <div class="top-box">
    <div class="mode-wrap button-group">
-      <button
-        class="button clear button--reply"
+      <woot-button
+        variant="clear"
+        class="button--reply"
        :class="replyButtonClass"
        @click="handleReplyClick"
      >
-        <emoji-or-icon icon="" emoji="💬" />
        {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
-      </button>
+      </woot-button>

-      <button
-        class="button clear button--note"
+      <woot-button
+        class="button--note"
+        variant="clear"
        :class="noteButtonClass"
        @click="handleNoteClick"
      >
-        <emoji-or-icon icon="" emoji="📝" />
        {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
-      </button>
+      </woot-button>
    </div>
    <div class="action-wrap">
      <div v-if="isMessageLengthReachingThreshold" class="tabs-title">
@ -29,7 +29,6 @@
    <woot-button
      v-if="popoutReplyBox"
      variant="clear"
-      size="large"
      icon="dismiss"
      color-scheme="secondary"
      class-names="popout-button"
@ -38,7 +37,6 @@
    <woot-button
      v-else
      variant="clear"
-      size="large"
      icon="resize-large"
      color-scheme="secondary"
      class-names="popout-button"
@ -49,7 +47,6 @@

 <script>
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
-import EmojiOrIcon from 'shared/components/EmojiOrIcon';
 import {
  hasPressedAltAndPKey,
  hasPressedAltAndLKey,
@ -57,9 +54,6 @@ import {
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 export default {
  name: 'ReplyTopPanel',
-  components: {
-    EmojiOrIcon,
-  },
  mixins: [eventListenerMixins],
  props: {
    mode: {
@ -189,11 +183,4 @@ export default {
    color: var(--s-600);
  }
 }
-
-.popout-button {
-  display: flex;
-  justify-content: flex-end;
-  height: auto;
-  padding-right: var(--space-normal);
-}
 </style>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@ -22,7 +22,6 @@
        <div class="filter-actions">
          <woot-button
            icon="add"
-            icon-size="16"
            color-scheme="success"
            variant="smooth"
            size="small"
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@ -3,8 +3,7 @@
    <woot-button
      v-if="!currentChat.muted"
      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      variant="smooth"
-      size="small"
+      variant="clear"
      color-scheme="secondary"
      icon="speaker-mute"
      @click="mute"
@ -12,16 +11,14 @@
    <woot-button
      v-else
      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      variant="smooth"
-      size="small"
+      variant="clear"
      color-scheme="secondary"
      icon="speaker-1"
      @click="unmute"
    />
    <woot-button
      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      variant="smooth"
-      size="small"
+      variant="clear"
      color-scheme="secondary"
      icon="share"
      @click="toggleEmailActionsModal"
@ -93,8 +90,8 @@ export default {
 .actions--container {
  align-items: center;

-  .button {
-    margin-right: var(--space-small);
+  .resolve-actions {
+    margin-left: var(--space-small);
  }
 }

--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@ -19,7 +19,6 @@
            variant="clear"
            size="small"
            icon="clipboard"
-            icon-size="16"
            @click="handleCopy"
          >
            {{ $t('CONVERSATION.CONTEXT_MENU.COPY') }}
@ -31,7 +30,6 @@
            color-scheme="alert"
            size="small"
            icon="delete"
-            icon-size="16"
            @click="handleDelete"
          >
            {{ $t('CONVERSATION.CONTEXT_MENU.DELETE') }}
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@ -20,7 +20,6 @@
          variant="smooth"
          size="tiny"
          icon="delete"
-          icon-size="16"
          color-scheme="secondary"
          @click="onDelete"
        />
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@ -9,7 +9,6 @@
          <woot-button
            v-if="showSelfAssign"
            icon="arrow-right"
-            icon-size="14"
            variant="link"
            size="small"
            @click="onSelfAssign"
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@ -63,8 +63,7 @@
          title="$t('CONTACT_PANEL.NEW_MESSAGE')"
          class="new-message"
          icon="chat"
-          icon-size="14"
-          size="small expanded"
+          size="small"
          @click="toggleConversationModal"
        />
        <woot-button
@ -72,9 +71,8 @@
          title="$t('EDIT_CONTACT.BUTTON_LABEL')"
          class="edit-contact"
          icon="edit"
-          icon-size="14"
          variant="smooth"
-          size="small expanded"
+          size="small"
          @click="toggleEditModal"
        />
        <woot-button
@ -83,9 +81,8 @@
          title="$t('CONTACT_PANEL.MERGE_CONTACT')"
          class="merge-contact"
          icon="merge"
-          icon-size="14"
          variant="smooth"
-          size="small expanded"
+          size="small"
          color-scheme="secondary"
          :disabled="uiFlags.isMerging"
          @click="openMergeModal"
@ -96,9 +93,8 @@
          title="$t('DELETE_CONTACT.BUTTON_LABEL')"
          class="delete-contact"
          icon="delete"
-          icon-size="14"
          variant="smooth"
-          size="small expanded"
+          size="small"
          color-scheme="alert"
          :disabled="uiFlags.isDeleting"
          @click="toggleDeleteModal"
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@ -13,7 +13,6 @@
        variant="link"
        color-scheme="secondary"
        icon="clipboard"
-        icon-size="14"
        class-names="icon copy-icon"
        @click="onCopy"
      />