[#64576] frontend: images: Replaced SVG with Vue components, got rid …

…of relative paths Signed-off-by: Grzegorz Latosinski <[email protected]>
antmicro · Oct 1, 2024 · 0a7a870 · 0a7a870
1 parent 72ebe82
commit 0a7a870
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 59 deletions.
diff --git a/frontend/src/components/Dropdown.vue b/frontend/src/components/Dropdown.vue
@@ -4,14 +4,15 @@
             <div class="tags">
                 <div v-for="tag in tags" :key="tag.id" class="t">
                     <p>#{{ tag.name }}</p>
-                    <button @click="() => select(tag.id)"><img src="/src/images/x.svg" /></button>
+                    <button @click="() => select(tag.id)"><Cross /></button>
                 </div>
             </div>
             <button @click="toggleDropdown" v-if="!tags.length" class="hint">
                 {{ placeholder }}
             </button>
             <button @click="toggleDropdown" class="dropdown-opener">
-                <img :src="`/src/images/caret-${dropdownOpen ? 'up' : 'down'}.svg`" />
+                <CaretUp v-if="dropdownOpen" />
+                <CaretDown v-else />
             </button>
         </div>
         <div v-if="dropdownOpen" class="table-holder" ref="tableRef" :style="tableStyles">
@@ -192,6 +193,9 @@ tbody tr:active {
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
 import type { PropType, Ref } from 'vue';
+import Cross from '../images/Cross.vue';
+import CaretUp from '../images/CaretUp.vue';
+import CaretDown from '../images/CaretDown.vue';
 
 export interface DataEntry {
     id: number;
@@ -205,6 +209,11 @@ export interface Column {
 }
 
 export default defineComponent({
+    components: {
+        CaretUp,
+        CaretDown,
+        Cross,
+    },
     props: {
         placeholder: {
             type: String,

diff --git a/frontend/src/images/CaretDown.vue b/frontend/src/images/CaretDown.vue
@@ -0,0 +1,25 @@
+<template>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_3_193)">
+            <mask id="path-1-inside-1_3_193" fill="white">
+                <path
+                    d="M8 10.2667L4 6.26671L4.93333 5.33337L8 8.40004L11.0667 5.33337L12 6.26671L8 10.2667Z"
+                />
+            </mask>
+            <path
+                d="M8 10.2667L4 6.26671L4.93333 5.33337L8 8.40004L11.0667 5.33337L12 6.26671L8 10.2667Z"
+                fill="#A1A1A1"
+            />
+            <path
+                d="M8 10.2667L7.99116 10.2755L8 10.2844L8.00884 10.2755L8 10.2667ZM4 6.26671L3.99116 6.25787L3.98232 6.26671L3.99116 6.27555L4 6.26671ZM4.93333 5.33337L4.94217 5.32454L4.93333 5.3157L4.92449 5.32454L4.93333 5.33337ZM8 8.40004L7.99116 8.40888L8 8.41772L8.00884 8.40888L8 8.40004ZM11.0667 5.33337L11.0755 5.32454L11.0667 5.3157L11.0578 5.32454L11.0667 5.33337ZM12 6.26671L12.0088 6.27555L12.0177 6.26671L12.0088 6.25787L12 6.26671ZM8.00884 10.2579L4.00884 6.25787L3.99116 6.27555L7.99116 10.2755L8.00884 10.2579ZM4.00884 6.27555L4.94217 5.34221L4.92449 5.32454L3.99116 6.25787L4.00884 6.27555ZM4.92449 5.34221L7.99116 8.40888L8.00884 8.3912L4.94217 5.32454L4.92449 5.34221ZM8.00884 8.40888L11.0755 5.34221L11.0578 5.32454L7.99116 8.3912L8.00884 8.40888ZM11.0578 5.34221L11.9912 6.27555L12.0088 6.25787L11.0755 5.32454L11.0578 5.34221ZM11.9912 6.25787L7.99116 10.2579L8.00884 10.2755L12.0088 6.27555L11.9912 6.25787Z"
+                fill="#A1A1A1"
+                mask="url(#path-1-inside-1_3_193)"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_3_193">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
diff --git a/frontend/src/images/CaretUp.vue b/frontend/src/images/CaretUp.vue
@@ -0,0 +1,22 @@
+<template>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_9_59)">
+            <path
+                d="M8.92891 6.66224L7.99558 5.7289L8.92891 6.66224ZM11.9912 9.73332L11.0667 10.6578L8.00442 7.59557L7.99558 7.59557L4.93333 10.6578L4.00884 9.73332L8 5.74216L8.92449 6.66666L11.9912 9.73332ZM4.93775 10.6711L4.00442 9.73774L4.93775 10.6711Z"
+                fill="#A1A1A1"
+                stroke="#A1A1A1"
+                stroke-width="0.0125"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_9_59">
+                <rect
+                    width="16"
+                    height="16"
+                    fill="white"
+                    transform="translate(16 16) rotate(-180)"
+                />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
diff --git a/frontend/src/images/Cross.vue b/frontend/src/images/Cross.vue
@@ -0,0 +1,8 @@
+<template>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M11.6094 5.33337L10.6666 4.39056L7.99989 7.05723L5.33322 4.39056L4.39041 5.33337L7.05708 8.00004L4.39041 10.6667L5.33322 11.6095L7.99989 8.94285L10.6666 11.6095L11.6094 10.6667L8.9427 8.00004L11.6094 5.33337Z"
+            fill="#EDEDED"
+        />
+    </svg>
+</template>
diff --git a/frontend/src/images/Logo.vue b/frontend/src/images/Logo.vue
@@ -0,0 +1,114 @@
+<!--
+Copyright (c) 2024 Antmicro <www.antmicro.com>
+
+SPDX-License-Identifier: Apache-2.0
+-->
+
+<template>
+    <svg
+        width="112"
+        height="26"
+        viewBox="0 0 112 26"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path d="M25.3715 0H0V25.3715H25.3715V0Z" fill="#EDEDED" />
+        <path
+            d="M18.2211 7.28906H7.15033V18.0823"
+            stroke="black"
+            stroke-width="2.89467"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M18.221 18.0823L13.2979 13.1581"
+            stroke="black"
+            stroke-width="2.89467"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            opacity="0.3"
+            d="M13.2979 13.1581H18.221V7.28906"
+            stroke="black"
+            stroke-width="2.89467"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <g clip-path="url(#clip0_2_202)">
+            <path
+                d="M81.3438 12.8835H84.3573"
+                stroke="#EDEDED"
+                stroke-width="3.35155"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M49.4926 5.6358H35.452V19.3438"
+                stroke="#EDEDED"
+                stroke-width="3.35155"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M49.4926 19.3438L43.2474 13.091"
+                stroke="#EDEDED"
+                stroke-width="3.35155"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M55.5935 19.6162H69.24V5.55432H55.5509"
+                stroke="#EDEDED"
+                stroke-width="3.35155"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M75.6961 19.3438V5.6358H89.7348"
+                stroke="#EDEDED"
+                stroke-width="3.35155"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M110.165 19.3289V5.66357H96.1262V19.3716"
+                stroke="#EDEDED"
+                stroke-width="3.35155"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M43.2474 13.091H49.4926V5.73029"
+                stroke="#EDEDED"
+                stroke-width="3.35155"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M56.0023 14.0433V11.0253"
+                stroke="#EDEDED"
+                stroke-width="3.35155"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M103.216 19.3049V12.8386"
+                stroke="#EDEDED"
+                stroke-width="3.35155"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_2_202">
+                <rect
+                    width="78.3831"
+                    height="17.7376"
+                    fill="white"
+                    transform="translate(33.6169 3.71643)"
+                />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
diff --git a/frontend/src/images/caret-down.svg b/frontend/src/images/caret-down.svg
diff --git a/frontend/src/images/caret-up.svg b/frontend/src/images/caret-up.svg
diff --git a/frontend/src/images/rdfm-logo.svg b/frontend/src/images/rdfm-logo.svg
diff --git a/frontend/src/images/x.svg b/frontend/src/images/x.svg
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: Apache-2.0
 <template>
     <div id="main">
         <div id="logobar">
-            <img src="../images/rdfm-logo.svg" alt="logo" id="logo" />
+            <Logo id="logo" />
         </div>
 
         <!-- Navbar for navigation between views -->
@@ -56,7 +56,6 @@ SPDX-License-Identifier: Apache-2.0
             }
         }
     }
-
     & > #logobar {
         color: white;
         padding: 2em;
@@ -74,6 +73,7 @@ import { ref } from 'vue';
 import DevicesList from '../components/devices/DevicesList.vue';
 import PackagesList from '../components/packages/PackagesList.vue';
 import GroupsList from '../components/groups/GroupsList.vue';
+import Logo from '../images/Logo.vue';
 
 const enum ActiveTab {
     Devices,
@@ -83,6 +83,7 @@ const enum ActiveTab {
 
 export default {
     components: {
+        Logo,
         DevicesList,
         PackagesList,
         GroupsList,