Use fontawesome icon for key delete button (#1389)

qmk · Jan 6, 2025 · 38be222 · 38be222
1 parent 717df34
commit 38be222
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 5 deletions.
diff --git a/src/components/AnyKey.vue b/src/components/AnyKey.vue
@@ -26,7 +26,7 @@
         v-if="visible"
         class="remove"
         @click.stop="remove"
-      >x</div></div>
+      ><font-awesome-icon icon="times" size="xs" /></div></div>
 </template>
 <script>
 import { mapMutations } from 'vuex';

diff --git a/src/components/BaseKey.vue b/src/components/BaseKey.vue
@@ -4,7 +4,7 @@
     @dragstart="dragstart" @dragend="dragend" @drop.stop="dropped" @dragleave.prevent="dragleave"
     @dragover.prevent="dragover" @dragenter.prevent="dragenter">{{ displayName }}<font-awesome-icon v-if="icon"
       size="2x" :icon="icon" /><template v-if="visible">
-      <div v-if="visible" class="remove" @click.stop="remove">x</div>
+      <div v-if="visible" class="remove" @click.stop="remove"><font-awesome-icon icon="times" size="xs" /></div>
     </template></div>
 </template>
 <script>

diff --git a/src/components/ContainerKey.vue b/src/components/ContainerKey.vue
@@ -24,7 +24,7 @@
         v-if="visible"
         class="remove"
         @click.stop="remove"
-      >x</div></div>
+      ><font-awesome-icon icon="times" size="xs" /></div></div>
 </template>
 <script>
 import isUndefined from 'lodash/isUndefined';

diff --git a/src/components/LayerContainerKey.vue b/src/components/LayerContainerKey.vue
@@ -22,7 +22,7 @@
   @dragleave.prevent="dragleaveContents"
   @click.prevent.stop="clickContents"
   >{{ contents }}</div></div>
-    <div v-if="visible" class="remove" @click.stop="remove">x</div>
+    <div v-if="visible" class="remove" @click.stop="remove"><font-awesome-icon icon="times" size="xs" /></div>
   </div>
 </template>
 <script>

diff --git a/src/components/LayerKey.vue b/src/components/LayerKey.vue
@@ -28,7 +28,7 @@
         v-if="visible"
         class="remove"
         @click.stop="remove"
-      >x</div>
+      ><font-awesome-icon icon="times" size="xs" /></div>
   </div>
 </template>
 <script>

diff --git a/src/main.js b/src/main.js
@@ -43,6 +43,7 @@ import {
   faPrint,
   faUndo,
   faTrash,
+  faTimes,
   faHatWizard,
   faMagic,
   faStar,
@@ -100,6 +101,7 @@ const icons = [
   faSearch,
   faStar,
   faTrash,
+  faTimes,
   faUndo,
   faUpload,
   faWindows,

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -550,13 +550,18 @@ button {
   padding-right: 2px;
   // color: #ccc;
   cursor: pointer;
+  opacity: 0.5;
 }
 
 .key:hover .remove {
   width: unset;
   height: unset;
 }
 
+.key:hover .remove:hover {
+  opacity: 1;
+}
+
 // .key.active-key {
 //   // background: #d4f9d1;
 // }