feature: ikony akcji

This commit is contained in:
2023-08-19 13:13:00 +02:00
parent 0bc2ac1d15
commit 4a03535b07
7 changed files with 40 additions and 8 deletions
+21 -6
View File
@@ -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: {
+14 -2
View File
@@ -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;