#140 node search + convert svg to css

src/components/Common/IconButton.vue

@@ -1,12 +1,22 @@
 <template>
   <button
-    :class="['icon-btn', { active }]"
+    :class="['icon-btn', { active }, 'icon-btn-' + variant]"
     :disabled="disabled"
-    @click="onClick"
+    :style="{
+      color: iconColor,
+      fontSize: iconSize + 'px',
+      width: width + 'px',
+      height: width + 'px'
+    }"
+    @click.stop="onClick"
     @mouseenter="showTooltip($event, tooltipPosition)"
     @mouseleave="hideTooltip"
   >
-    <div class="icon"><slot /></div>
+    <div class="icon">
+      <slot>
+        <i :class="icon" />
+      </slot>
+    </div>
     <div v-show="loading" class="icon-in-progress">
       <loading-indicator />
     </div>
@@ -14,7 +24,7 @@
       v-if="tooltip"
       ref="tooltip"
       class="icon-tooltip"
-      :style="tooltipStyle"
+      :style="{ ...tooltipStyle, maxWidth: maxTooltipWidth }"
     >
       {{ tooltip }}
     </span>
@@ -34,7 +44,19 @@ export default {
     disabled: Boolean,
     tooltip: String,
     tooltipPosition: String,
-    loading: Boolean
+    maxTooltipWidth: String,
+    loading: Boolean,
+    icon: String,
+    iconColor: { type: String, default: 'var(--color-text-light-2)' },
+    variant: {
+      type: String,
+      default: 'accent',
+      validator: value => ['accent', 'secondary'].includes(value)
+    },
+    iconSize: {
+      type: Number,
+      default: 18
+    }
   },
   emits: ['click'],
   methods: {
@@ -42,6 +64,11 @@ export default {
       this.hideTooltip()
       this.$emit('click')
     }
+  },
+  computed: {
+    width() {
+      return this.iconSize + 8
+    }
   }
 }
 </script>
@@ -49,8 +76,6 @@ export default {
 <style scoped>
 .icon-btn {
   box-sizing: border-box;
-  width: 26px;
-  height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -58,21 +83,27 @@ export default {
   background-color: transparent;
   border: none;
 }
-.icon-btn:hover {
+
+.icon-btn .icon i {
+  font-size: inherit;
+}
+.icon-btn.icon-btn-accent:hover {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-medium-2);
 }
 
-.icon-btn:hover .icon :deep(path),
-.icon-btn.active .icon :deep(path),
-.icon-btn:hover .icon :deep(circle),
-.icon-btn.active .icon :deep(circle) {
-  fill: var(--color-accent);
+.icon-btn.icon-btn-accent:hover,
+.icon-btn.icon-btn-accent.active {
+  color: var(--color-accent) !important;
 }
 
-.icon-btn:disabled .icon :deep(path),
-.icon-btn:disabled .icon :deep(circle) {
-  fill: var(--color-border);
+.icon-btn.icon-btn-secondary:hover,
+.icon-btn.icon-btn-secondary.active {
+  color: var(--color-text-base) !important;
+}
+
+.icon-btn:disabled {
+  color: var(--color-border) !important;
 }
 
 .icon-btn:disabled {
@@ -80,10 +111,6 @@ export default {
   pointer-events: none;
 }
 
-.disabled.icon-btn:hover .icon :deep(path) {
-  fill: var(--color-border);
-}
-
 .icon-in-progress {
   position: absolute;
   width: 26px;

src/components/Common/LoadingDialog.vue

@@ -9,7 +9,13 @@
   >
     <div class="dialog-header">
       {{ title }}
-      <close-icon :disabled="loading" @click="cancel" />
+      <IconButton
+        icon="myicon myicon-close"
+        variant="secondary"
+        :icon-size="14"
+        :disabled="loading"
+        @click="cancel"
+      />
     </div>
     <div class="dialog-body">
       <div v-if="loading" class="loading-dialog-body">
@@ -47,11 +53,11 @@
 
 <script>
 import LoadingIndicator from '@/components/Common/LoadingIndicator'
-import CloseIcon from '@/components/svg/close'
+import IconButton from '@/components/Common/IconButton.vue'
 
 export default {
   name: 'LoadingDialog',
-  components: { LoadingIndicator, CloseIcon },
+  components: { LoadingIndicator, IconButton },
   props: {
     modelValue: Boolean,
     loadingMsg: String,

src/components/Common/TextField.vue

@@ -5,11 +5,14 @@
       :class="['text-field-label', { error: errorMsg }, { disabled: disabled }]"
     >
       {{ label }}
-      <hint-icon
+      <IconButton
         v-if="hint"
+        icon="myicon myicon-hint"
+        variant="secondary"
         class="hint"
-        :hint="hint"
-        :maxWidth="maxHintWidth || '149px'"
+        :tooltip="hint"
+        :max-tooltip-width="maxHintWidth"
+        :icon-size="20"
       />
     </div>
     <input
@@ -26,10 +29,11 @@
 </template>
 
 <script>
-import HintIcon from '@/components/svg/hint'
+import IconButton from '@/components/Common/IconButton.vue'
+
 export default {
   name: 'TextField',
-  components: { HintIcon },
+  components: { IconButton },
   props: {
     placeholder: String,
     label: String,
@@ -37,7 +41,7 @@ export default {
     modelValue: String,
     width: String,
     hint: String,
-    maxHintWidth: String,
+    maxHintWidth: { type: String, default: '149px' },
     disabled: Boolean
   },
   emits: ['update:modelValue']
@@ -86,8 +90,8 @@ input.error {
 
 .text-field-label .hint {
   position: absolute;
-  top: -2px;
-  right: -22px;
+  top: -6px;
+  right: -26px;
 }
 
 .text-field-label.error {
@@ -108,4 +112,13 @@ input.error {
 .text-field-error:first-letter {
   text-transform: uppercase;
 }
+
+:deep(.icon-tooltip) {
+  display: block;
+  white-space: normal;
+  height: auto;
+  line-height: normal;
+  padding: 6px;
+  box-sizing: border-box;
+}
 </style>