Merge pull request #1552 from koel/feat/times-to-trash

This commit is contained in:
Phan An 2022-10-24 19:26:57 +02:00 committed by GitHub
commit 7bcb4afc09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 24 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

@ -1,5 +1,9 @@
<template>
<form id="searchForm" role="search" @submit.prevent="onSubmit">
<span class="icon">
<icon :icon="faSearch"/>
</span>
<input
ref="input"
v-model="q"
@ -13,6 +17,7 @@
@focus="maybeGoToSearchScreen"
@input="onInput"
>
<button type="submit" title="Search">
<icon :icon="faSearch"/>
</button>
@ -63,14 +68,27 @@ eventBus.on({
display: flex;
align-items: stretch;
color: var(--color-text-secondary);
background: rgba(0, 0, 0, .2);
border: 1px solid transparent;
border-radius: 5px;
transition: border .2s ease-in-out;
transition: border .3s ease-in-out, .3s background-color ease-in-out;
overflow: hidden;
padding: 0 0 0 1rem;
gap: .5rem;
.icon {
display: flex;
align-items: center;
opacity: .7;
@media screen and (max-width: 768px) {
display: none;
}
}
button {
display: none;
padding: 0 1.5rem;
padding: 0 1.2rem;
background: rgba(255, 255, 255, .05);
border-radius: 0;
@ -81,20 +99,15 @@ eventBus.on({
&:focus-within {
border: 1px solid rgba(255, 255, 255, .2);
background: rgba(0, 0, 0, .5);
}
input[type="search"] {
width: 100%;
border-radius: 0;
height: 36px;
background: rgba(0, 0, 0, .2);
transition: .3s background-color;
padding: 0 1rem;
color: var(--color-text-primary);
&:focus {
background: rgba(0, 0, 0, .5);
}
background-color: transparent;
&::placeholder {
color: rgba(255, 255, 255, .5);

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'