mirror of
https://github.com/koel/koel
synced 2024-09-20 14:21:55 +00:00
Merge pull request #1552 from koel/feat/times-to-trash
This commit is contained in:
commit
7bcb4afc09
7 changed files with 36 additions and 24 deletions
|
@ -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'
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.btn-group {
|
||||
--radius: 9999px;
|
||||
--radius: 5px;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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'
|
||||
|
||||
|
|
Loading…
Reference in a new issue