From 4a03535b0755361c5a4646c552aa2213ee7aba3f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 19 Aug 2023 13:13:00 +0200
Subject: [PATCH] feature: ikony akcji

---
 public/images/icon-copy.svg          |  1 +
 public/images/icon-download.svg      |  1 +
 public/images/icon-reset.svg         |  1 +
 public/images/icon-shuffle.svg       |  1 +
 public/images/icon-upload.svg        |  1 +
 src/components/tabs/StockListTab.vue | 27 +++++++++++++++++++++------
 src/styles/global.scss               | 16 ++++++++++++++--
 7 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 public/images/icon-copy.svg
 create mode 100644 public/images/icon-download.svg
 create mode 100644 public/images/icon-reset.svg
 create mode 100644 public/images/icon-shuffle.svg
 create mode 100644 public/images/icon-upload.svg

diff --git a/public/images/icon-copy.svg b/public/images/icon-copy.svg
new file mode 100644
index 0000000..66e3b08
--- /dev/null
+++ b/public/images/icon-copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M314.696-195.478q-32.507 0-55.862-23.356-23.356-23.355-23.356-55.862v-549.826q0-32.74 23.356-56.262 23.355-23.522 55.862-23.522h429.826q32.74 0 56.262 23.522t23.522 56.262v549.826q0 32.507-23.522 55.862-23.522 23.356-56.262 23.356H314.696Zm0-79.218h429.826v-549.826H314.696v549.826ZM175.478-55.694q-32.74 0-56.262-23.522t-23.522-56.262v-629.044h79.784v629.044h509.044v79.784H175.478Zm139.218-219.002v-549.826 549.826Z"/></svg>
\ No newline at end of file
diff --git a/public/images/icon-download.svg b/public/images/icon-download.svg
new file mode 100644
index 0000000..6d064ad
--- /dev/null
+++ b/public/images/icon-download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M480-318.087 266.651-531.436l57.131-56.001 116.609 116.609v-343.868h79.218v343.868l116.609-116.609 57.131 56.001L480-318.087ZM225.087-145.869q-32.507 0-55.862-23.356-23.356-23.355-23.356-55.862v-143h79.218v143h509.826v-143h79.783v143q0 32.478-23.521 55.848-23.522 23.37-56.262 23.37H225.087Z"/></svg>
\ No newline at end of file
diff --git a/public/images/icon-reset.svg b/public/images/icon-reset.svg
new file mode 100644
index 0000000..14c8197
--- /dev/null
+++ b/public/images/icon-reset.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M451-107.304q-128.652-10.565-216.892-105.522-88.239-94.956-88.239-225.609 0-78.13 35.5-147.543 35.5-69.413 99.5-114.674l56.566 56.565q-52.609 32.435-82.478 87.957-29.87 55.521-29.87 117.695 0 98.305 64.587 169.609T451-187.087v79.783Zm60 0v-79.783q98.304-11.435 161.609-82.239 63.304-70.804 63.304-169.109 0-103.913-70.978-177.434-70.978-73.522-174.891-76.913h-21.696l62.261 62.826-47.522 47.522-152.783-152.784 152.783-153.349 47.522 47.522-68.479 68.479h22.261q138.522 0 234.914 98.022 96.391 98.022 96.391 236.109 0 130.653-88.022 225.609Q639.652-117.869 511-107.304Z"/></svg>
\ No newline at end of file
diff --git a/public/images/icon-shuffle.svg b/public/images/icon-shuffle.svg
new file mode 100644
index 0000000..16a4a62
--- /dev/null
+++ b/public/images/icon-shuffle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M575.913-143.782v-72.436h115.956l-173.26-172.825 51.043-51.479 175.261 172.695v-117.391h73v241.436h-242Zm-382.783 2.826L142.652-193l551.217-551.782H575.913v-72.436h242v241.436h-73v-116.391L193.13-140.956Zm198.479-378.522L142.652-768l51.478-52.044 250.088 248.522-52.609 52.044Z"/></svg>
\ No newline at end of file
diff --git a/public/images/icon-upload.svg b/public/images/icon-upload.svg
new file mode 100644
index 0000000..7169aa1
--- /dev/null
+++ b/public/images/icon-upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" fill="white" width="48"><path d="M440.391-318.087v-343.868L323.782-544.782l-57.131-56.566L480-814.696l213.349 213.348-57.131 56.566-116.609-117.173v343.868h-79.218ZM225.087-145.869q-32.507 0-55.862-23.356-23.356-23.355-23.356-55.862v-143h79.218v143h509.826v-143h79.783v143q0 32.478-23.521 55.848-23.522 23.37-56.262 23.37H225.087Z"/></svg>
\ No newline at end of file
diff --git a/src/components/tabs/StockListTab.vue b/src/components/tabs/StockListTab.vue
index dbf5855..97f162b 100644
--- a/src/components/tabs/StockListTab.vue
+++ b/src/components/tabs/StockListTab.vue
@@ -35,19 +35,33 @@
 
     <div class="stock_actions">
       <label class="file-label">
-        <div class="btn">WCZYTAJ</div>
+        <div class="btn btn--image">
+          <img src="/images/icon-upload.svg" alt="" />
+          WCZYTAJ
+        </div>
+
         <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
       </label>
 
-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">POBIERZ</button>
+      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
+        <img src="/images/icon-download.svg" alt="download icon" />
+        POBIERZ
+      </button>
 
-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
+      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
+        <img src="/images/icon-copy.svg" alt="copy icon" />
         SKOPIUJ
       </button>
 
-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">ZRESETUJ</button>
+      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">
+        <img src="/images/icon-reset.svg" alt="reset icon" />
+        ZRESETUJ
+      </button>
 
-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">PRZETASUJ</button>
+      <button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">
+        <img src="/images/icon-shuffle.svg" alt="shuffle icon" />
+        PRZETASUJ
+      </button>
     </div>
 
     <div class="stock_specs">
@@ -182,8 +196,9 @@ export default defineComponent({
 
   data: () => ({
     imageOffsetY: 0,
-
     draggedVehicleID: -1,
+
+    stockActions: [{}],
   }),
 
   computed: {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 50bde83..7907371 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -121,6 +121,18 @@ button {
     background-color: #2b2b2b;
   }
 
+  &--image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+
+    img {
+      width: 1.3em;
+      vertical-align: middle;
+    }
+  }
+
   &--text {
     font-weight: bold;
     transition: all 250ms;
@@ -134,8 +146,8 @@ button {
 }
 
 select,
-input[type="text"],
-input[type="number"] {
+input[type='text'],
+input[type='number'] {
   background: none;
   border: 2px solid #aaa;
   outline: none;