B06022 Add common icons & add optional slot for hApp card view image (#…

…70) * left chevron icon * fix left chevron * add chain & clock icons * wrap happ card image with slot
Holo-Host · Oct 5, 2023 · f124476 · f124476
1 parent 17e78b1
commit f124476
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 4 deletions.
diff --git a/src/components/HAppCard.vue b/src/components/HAppCard.vue
@@ -17,10 +17,12 @@
       v-if="!isEmpty"
       class="happ-card__content"
     >
-      <HAppImage
-        :happ="happ"
-        class="happ-card__desktop-image"
-      />
+      <slot name="happ-image">
+        <HAppImage
+          :happ="happ"
+          class="happ-card__desktop-image"
+        />
+      </slot>
 
       <div class="happ-card__details">
         <div class="happ-card__name">

diff --git a/src/components/icons/ChainIcon.vue b/src/components/icons/ChainIcon.vue
@@ -0,0 +1,39 @@
+<template>
+  <Icon
+    fill="#313C59"
+    class="icon"
+  >
+    <path d="M16.7142 14.3567l-1.1784-1.1784L16.7142 12c1.3018-1.3018 1.3018-3.4124 0-4.7142s-3.4124-1.3018-4.7142 0l-1.1783 1.1784-1.1784-1.1784 1.1784-1.1783c1.9684-1.9367 5.1342-1.9109 7.0708.0576 1.9144 1.9458 1.9144 5.0674 0 7.0132l-1.1783 1.1784zm-2.3575 2.3575l-1.1784 1.1783c-1.9366 1.9685-5.1023 1.9942-7.0708.0576-1.9684-1.9367-1.9942-5.1024-.0576-7.0708a4.4043 4.4043 0 01.0576-.0576L7.286 9.6433l1.1783 1.1784L7.2858 12c-1.3017 1.3018-1.3017 3.4124 0 4.7142 1.3018 1.3018 3.4124 1.3018 4.7142 0l1.1783-1.1784 1.1784 1.1784zm0-8.25l1.1791 1.1791-5.8925 5.8917-1.1791-1.1783 5.8925-5.8917v-.0008z" />
+  </Icon>
+</template>
+
+<script>
+  import Icon from './Icon.vue'
+
+  export default {
+    name: 'ChainIcon',
+    components: {
+        Icon
+    },
+    props: {
+        disabled: {type: Boolean, default: false },
+        color: {
+        type: String,
+        default: "#606C8B"
+        }
+    },
+    computed: {
+        fillOpacity () {
+        return this.disabled ? '0.18' : '1'
+        }
+    } 
+  }  
+</script>
+
+
+<style scoped>
+.icon {
+  width: 24px;
+  height: 24px;
+}
+</style>
diff --git a/src/components/icons/ClockIcon.vue b/src/components/icons/ClockIcon.vue
@@ -0,0 +1,53 @@
+<template>
+    <Icon
+      stroke="#313C59"
+      fill="transparent"
+      class="icon"
+    >
+      <path
+        d="M10 17.5a7.5 7.5 0 100-15 7.5 7.5 0 000 15z"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      /><path
+        d="M10 5.8V10l2.5 2.5"
+        stroke="#313C59"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </Icon>
+  </template>
+
+  <style scoped>
+  .icon {
+    width: 20px;
+    height: 20px;
+  }
+  </style>
+
+<script>
+
+import Icon from './Icon.vue'
+
+export default {
+name: 'ClockIcon',
+components: {
+    Icon
+},
+props: {
+    disabled: {type: Boolean, default: false },
+    color: {
+    type: String,
+    default: "#606C8B"
+    }
+},
+computed: {
+    fillOpacity () {
+    return this.disabled ? '0.18' : '1'
+    }
+} 
+}
+</script>
+
+
diff --git a/src/components/icons/LeftChevronIcon.vue b/src/components/icons/LeftChevronIcon.vue
@@ -0,0 +1,36 @@
+<template>
+  <Icon :fill="color" class='icon' viewbox="0 0 8 8">
+    <path :fill-opacity="fillOpacity" d="M4.94.94L1.89 4l3.05 3.06L4 8 0 4l4-4 .94.94z" />
+  </Icon>
+</template>
+
+<script>
+
+import Icon from './Icon.vue'
+
+export default {
+  name: 'LeftChevronIcon',
+  components: {
+    Icon
+  },
+  props: {
+    disabled: {type: Boolean, default: false },
+    color: {
+      type: String,
+      default: "#606C8B"
+    }
+  },
+  computed: {
+    fillOpacity () {
+      return this.disabled ? '0.18' : '1'
+    }
+  } 
+}
+</script>
+
+<style scoped>
+.icon {
+  width: 8px;
+  height: 8px;
+}
+</style>