Makes it possible to download selected icon on click (#268)

Co-authored-by: Aleksandrs Barkancevs <[email protected]> Co-authored-by: Sergejs Skusovs <[email protected]> Reviewed-on: https://git.zzdats.lv/lx/demo/pulls/268 Reviewed-by: Sergejs Skusovs <[email protected]> Reviewed-by: Daniils Seliverstovs <[email protected]> Reviewed-by: Niklāvs Mežeckis <[email protected]> Co-authored-by: Aleksandrs Barkancevs <[email protected]> Co-committed-by: Aleksandrs Barkancevs <[email protected]>
DeiranLv · Apr 4, 2024 · 1c4e2db · 1c4e2db
1 parent 3c3feb4
commit 1c4e2db
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 8 deletions.
diff --git a/src/assets/styles.css b/src/assets/styles.css
@@ -99,10 +99,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-top: 0.25rem;
   background-color: var(--color-region);
 }
 
+.icon-display .icon:not(.lx-empty):hover {
+  background-color: var(--color-region-hover-background);
+  border-radius: 50%; 
+  cursor: pointer;
+}
+
+.icon-display .icon:not(.lx-empty):hover svg {
+  fill: var(--color-region-hover-foreground);
+}
 
 .icon-display .icon .lx-data {
   color: var(--color-label)

diff --git a/src/components/IconDisplay.vue b/src/components/IconDisplay.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { LxIcon, LxSearchableText, lxStringUtils } from '@zzdats/lx-ui';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps({
   id: {
@@ -30,25 +30,62 @@ const props = defineProps({
   },
 });
 
+const cdsIcon = ref(null);
+const materialIcon = ref(null);
+const brandIcon = ref(null);
+
 const show = computed(() =>
   props.query && props.icon
     ? lxStringUtils.textSearch(props.query, `${props.icon} ${props.description}`)
     : true
 );
+
+function downloadIcon(iconName: string, iconSet: string)  {
+ let svgElement: HTMLElement | null = null;
+
+  switch(iconSet) {
+    case 'cds':
+      svgElement = cdsIcon.value.$el;
+      break;
+    case 'material':
+      svgElement = materialIcon.value.$el;
+      break;
+    case 'brand':
+      svgElement = brandIcon.value.$el;
+      break;
+
+    default:
+      break;
+  }
+
+ if (svgElement) {
+    const clonedSvgElement = svgElement.cloneNode(true) as HTMLElement;
+    const svgContent = new XMLSerializer().serializeToString(clonedSvgElement);
+    const svgBlob = new Blob([svgContent], { type: 'image/svg+xml' });
+    const downloadLink = document.createElement('a');
+    downloadLink.href = URL.createObjectURL(svgBlob);
+    downloadLink.download = `${iconName}.svg`;
+    downloadLink.click();
+  }
+};
+
+const setIconTitle = (hasIcon) => {
+  return hasIcon ? 'Lejupielādēt ikonu' : '';
+};
 </script>
 
 <template>
   <div class="icon-display" :id="id" v-show="show">
-    <div class="icon" :class="[{ 'lx-empty': !hasCds }]">
-      <LxIcon customClass="lx-icon" v-if="hasCds" :value="icon" icon-set="cds" />
+    <div class="icon" :class="[{ 'lx-empty': !hasCds }]" :title="setIconTitle(hasCds)" >
+      <LxIcon ref="cdsIcon" customClass="lx-icon" v-if="hasCds" :value="icon" icon-set="cds" @click="downloadIcon(icon, 'cds')"/>
       <p v-else class="lx-data">&mdash;</p>
     </div>
-    <div class="icon" :class="[{ 'lx-empty': !hasMaterial }]">
-      <LxIcon customClass="lx-icon" v-if="hasMaterial" :value="icon" icon-set="material" />
+    <div class="icon" :class="[{ 'lx-empty': !hasMaterial }]"  :title="setIconTitle(hasMaterial)">
+      <LxIcon ref="materialIcon" customClass="lx-icon" v-if="hasMaterial" :value="icon" icon-set="material" @click="downloadIcon(icon, 'material')" />
       <p v-else class="lx-data">&mdash;</p>
     </div>
-    <div class="icon" :class="[{ 'lx-empty': !hasBrand }]">
-      <LxIcon customClass="lx-icon" v-if="hasBrand" :value="icon" icon-set="brand" />
+    <div class="icon" :class="[{ 'lx-empty': !hasBrand }]" :title="setIconTitle(hasBrand)">
+      <LxIcon ref="brandIcon" customClass="lx-icon" v-if="hasBrand" :value="icon" icon-set="brand" @click="downloadIcon(icon, 'brand')"/>
       <p v-else class="lx-data">&mdash;</p>
     </div>
     <div class="icon-name">