feat(design): use trash bin icon instead of times

This commit is contained in:
Phan An 2022-10-24 18:43:31 +02:00
parent 08bf30c137
commit 6e3d60c7a2
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
6 changed files with 14 additions and 15 deletions

View file

@ -1,7 +1,7 @@
<template>
<div class="row" data-testid="smart-playlist-rule-row">
<Btn class="remove-rule" red @click.prevent="removeRule">
<icon :icon="faTimes"/>
<icon :icon="faTrashCan"/>
</Btn>
<select v-model="selectedModel" name="model[]">
@ -28,7 +28,7 @@
</template>
<script lang="ts" setup>
import { faTimes } from '@fortawesome/free-solid-svg-icons'
import { faTrashCan } from '@fortawesome/free-solid-svg-icons'
import { computed, defineAsyncComponent, ref, toRefs, watch } from 'vue'
import models from '@/config/smart-playlist/models'
import inputTypes from '@/config/smart-playlist/inputTypes'

View file

@ -10,7 +10,7 @@
Retry All
</Btn>
<Btn data-testid="upload-remove-all-btn" orange @click="removeFailedEntries">
<icon :icon="faTimes"/>
<icon :icon="faTrashCan"/>
Remove Failed
</Btn>
</BtnGroup>
@ -58,7 +58,7 @@
</template>
<script lang="ts" setup>
import { faRotateBack, faTimes, faUpload, faWarning } from '@fortawesome/free-solid-svg-icons'
import { faRotateBack, faTrashCan, faUpload, faWarning } from '@fortawesome/free-solid-svg-icons'
import { computed, defineAsyncComponent, ref, toRef } from 'vue'
import { isDirectoryReadingSupported as canDropFolders } from '@/utils'

View file

@ -12,7 +12,7 @@ exports[`renders 1`] = `
<!--v-if-->
</h1><span class="meta text-secondary" data-v-5691beb5=""><span>420 songs</span><span>34:17:36</span></span>
</div>
<div class="song-list-controls" data-testid="song-list-controls" data-v-d396e0d2=""><span class="btn-group" uppercased="" data-v-e884c19a="" data-v-d396e0d2=""><button type="button" class="btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all songs" data-v-e368fe26="" data-v-d396e0d2=""><br data-testid="icon" icon="[object Object]" data-v-d396e0d2=""> All </button><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span>
<div class="song-list-controls" data-testid="song-list-controls" data-v-d396e0d2=""><span class="btn-group" uppercased="" data-v-e884c19a="" data-v-d396e0d2=""><button type="button" class="btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all songs" data-v-e368fe26="" data-v-d396e0d2=""><br data-testid="icon" icon="[object Object]" fixed-width="" data-v-d396e0d2=""> All </button><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span>
<div class="add-to" data-testid="add-to-menu" tabindex="0" data-v-42061e3e="" data-v-d396e0d2="" style="display: none;">
<section class="existing-playlists" data-v-42061e3e="">
<p data-v-42061e3e="">Add 0 songs to</p>

View file

@ -10,7 +10,7 @@
title="Play all songs"
@click.prevent="playAll"
>
<icon :icon="faPlay"/>
<icon :icon="faPlay" fixed-width/>
All
</Btn>
@ -21,7 +21,7 @@
title="Play selected songs"
@click.prevent="playSelected"
>
<icon :icon="faPlay"/>
<icon :icon="faPlay" fixed-width/>
Selected
</Btn>
</template>
@ -35,7 +35,7 @@
title="Shuffle all songs"
@click.prevent="shuffle"
>
<icon :icon="faRandom"/>
<icon :icon="faRandom" fixed-width/>
All
</Btn>
@ -47,7 +47,7 @@
title="Shuffle selected songs"
@click.prevent="shuffleSelected"
>
<icon :icon="faRandom"/>
<icon :icon="faRandom" fixed-width/>
Selected
</Btn>
</template>
@ -73,8 +73,7 @@
title="Delete this playlist"
@click.prevent="deletePlaylist"
>
<icon :icon="faTimes"/>
Playlist
<icon :icon="faTrashCan"/>
</Btn>
</BtnGroup>
@ -90,7 +89,7 @@
</template>
<script lang="ts" setup>
import { faPlay, faRandom, faTimes } from '@fortawesome/free-solid-svg-icons'
import { faPlay, faRandom, faTrashCan } from '@fortawesome/free-solid-svg-icons'
import { computed, nextTick, onMounted, onUnmounted, ref, toRefs } from 'vue'
import { SelectedSongsKey, SongsKey } from '@/symbols'
import { requireInjection } from '@/utils'

View file

@ -6,7 +6,7 @@
<style lang="scss" scoped>
.btn-group {
--radius: 9999px;
--radius: 5px;
display: flex;
position: relative;

View file

@ -8,7 +8,7 @@
<icon :icon="faRotateBack"/>
</Btn>
<Btn v-if="canRemove" icon-only title="Remove" transparent unrounded @click="remove">
<icon :icon="faTimes"/>
<icon :icon="faTrashCan"/>
</Btn>
</span>
</span>
@ -17,7 +17,7 @@
<script lang="ts" setup>
import slugify from 'slugify'
import { faRotateBack, faTimes } from '@fortawesome/free-solid-svg-icons'
import { faRotateBack, faTrashCan } from '@fortawesome/free-solid-svg-icons'
import { computed, defineAsyncComponent, toRefs } from 'vue'
import { UploadFile, uploadService } from '@/services'