style: download items color bar; style: download items delete icon

This commit is contained in:
Roberto Tonino 2020-10-05 19:54:48 +02:00
parent 5327b2014e
commit 9e25ada875
5 changed files with 156 additions and 138 deletions
public
src
components/downloads
styles/scss

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,40 +1,38 @@
<template> <template>
<div class="download_object" :id="`download_${queueItem.uuid}`" :data-deezerid="queueItem.id"> <div class="download-object">
<div class="download_info"> <div class="download-info">
<img width="75px" class="rounded coverart" :src="queueItem.cover" :alt="`Cover ${queueItem.title}`" /> <img width="75px" class="rounded coverart" :src="queueItem.cover" :alt="`Cover ${queueItem.title}`" />
<div class="download_info_data">
<span class="download_line">{{ queueItem.title }}</span> <span class="download_slim_separator"> - </span> <div class="download-info-data">
<span class="secondary-text">{{ queueItem.artist }}</span> <span class="download-line">{{ queueItem.title }}</span> <span class="download-slim-separator"> - </span>
<span>{{ queueItem.artist }}</span>
</div> </div>
<div class="download_info_status">
<span class="download_line"> <div class="download-info-status" style="text-align: center">
<span class="queue_downloaded">{{ queueItem.downloaded + queueItem.failed }}</span <span class="download-line"> {{ queueItem.downloaded + queueItem.failed }}/{{ queueItem.size }} </span>
>/{{ queueItem.size }}
</span> <span
<span class="secondary-text inline-flex" v-if="queueItem.failed >= 1"> v-if="hasFails"
<span class="download_slim_separator">(</span> class="inline-flex"
<span :class="{ clickable: finishedWithFails }"
class="queue_failed_button inline-flex" style="justify-content: center"
:class="{ clickable: finishedWithFails }" @click="finishedWithFails ? $emit('show-errors', queueItem) : null"
@click="finishedWithFails ? $emit('show-errors', queueItem) : null" >
> {{ queueItem.failed }}
<span class="queue_failed">{{ queueItem.failed }}</span> <i class="material-icons">error_outline</i>
<i class="material-icons">error_outline</i>
</span>
<span class="download_slim_separator">)</span>
</span> </span>
</div> </div>
</div> </div>
<div class="download_bar">
<div class="download-bar">
<div class="progress"> <div class="progress">
<div :id="`bar_${queueItem.uuid}`" :class="barClass" :style="barStyle"></div> <div :class="barClass" :style="barStyle"></div>
</div> </div>
<i <i
class="material-icons queue_icon"
:data-uuid="queueItem.uuid"
:class="{ clickable: finishedWithFails }"
@click="onResultIconClick"
v-if="!isLoading" v-if="!isLoading"
class="material-icons queue_icon"
:class="{ clickable: finishedWithFails || resultIconText === 'delete_forever' }"
@click="onResultIconClick"
> >
{{ resultIconText }} {{ resultIconText }}
</i> </i>
@ -43,7 +41,99 @@
</div> </div>
</template> </template>
<style lang="scss">
.download-object {
padding-bottom: 8px;
.download-info {
display: flex;
align-items: center;
img {
height: 75px;
flex-shrink: 0;
flex: 0 0 75px;
}
.download-line {
display: block;
}
.download-slim-separator {
display: none;
}
}
.download-info-data {
flex: 1 50%;
margin-left: 8px;
overflow: hidden;
}
.download-info-status {
flex: 1 15%;
margin-left: 8px;
width: 80px;
}
> .download-bar {
display: flex;
align-items: center;
height: 24px;
> .queue_icon {
cursor: default;
margin-left: 8px;
}
> .progress {
margin: 0px;
}
}
}
#download_list:not(.slim) .download-line {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#download_list.slim {
> .download-object {
.download-info {
display: block;
img {
display: none;
}
.download-line {
display: inline-block;
}
.download-slim-separator {
display: inline-block;
}
}
.download-info-data {
width: calc(80% - 16px);
display: inline-block;
padding-left: 0px;
}
.download-info-status {
width: 20%;
display: inline-block; // ignored due to float
float: right;
}
}
}
</style>
<script> <script>
const possibleStates = ['converting', 'downloading', 'download finished']
export default { export default {
data() { data() {
return { return {
@ -54,18 +144,44 @@ export default {
queueItem: Object queueItem: Object
}, },
computed: { computed: {
hasFails() {
return this.queueItem.failed >= 1
},
allFailed() {
let allFailed = false
if (this.queueItem.status === 'download finished') {
allFailed = this.queueItem.failed === this.queueItem.size
}
return allFailed
},
finishedWithFails() { finishedWithFails() {
return this.queueItem.status === 'download finished' && this.queueItem.failed >= 1 return this.queueItem.status === 'download finished' && this.hasFails
}, },
barClass() { barClass() {
return { return {
converting: this.queueItem.status === 'converting', converting: this.queueItem.status === 'converting',
indeterminate: ['converting', 'downloading', 'download finished'].indexOf(this.queueItem.status) === -1, indeterminate: possibleStates.indexOf(this.queueItem.status) === -1,
determinate: ['converting', 'downloading', 'download finished'].indexOf(this.queueItem.status) !== -1 determinate: possibleStates.indexOf(this.queueItem.status) !== -1
} }
}, },
barStyle() { barStyle() {
let width = 0 let width = 0
let backgroundColor = 'var(--accent-color)'
if (this.hasFails) {
// Orange
backgroundColor = 'hsl(33, 100%, 47%)'
} else {
// Green
backgroundColor = 'hsl(120, 100%, 40%)'
}
if (this.allFailed) {
// Red
backgroundColor = 'hsl(360, 100%, 35%)'
}
if (this.queueItem.status === 'download finished') { if (this.queueItem.status === 'download finished') {
width = 100 width = 100
@ -80,14 +196,15 @@ export default {
} }
return { return {
width: `${width}%` width: `${width}%`,
backgroundColor
} }
}, },
resultIconText() { resultIconText() {
let text = 'remove' let text = 'delete_forever'
if (this.queueItem.status === 'download finished') { if (this.queueItem.status === 'download finished') {
if (this.queueItem.failed == 0) { if (!this.hasFails) {
text = 'done' text = 'done'
} else { } else {
if (this.queueItem.failed >= this.queueItem.size) { if (this.queueItem.failed >= this.queueItem.size) {

@ -14,13 +14,11 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
background-color: var(--accent-color); background-color: var(--accent-color);
-webkit-transition: width 0.3s linear;
transition: width 0.3s linear; transition: width 0.3s linear;
} }
.converting { .converting {
background-color: var(--secondary-color); background-color: var(--secondary-color);
-webkit-transition: none !important;
transition: none !important; transition: none !important;
} }
@ -35,7 +33,6 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
will-change: left, right; will-change: left, right;
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
} }
@ -47,9 +44,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
will-change: left, right; will-change: left, right;
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s; animation-delay: 1.15s;
} }
} }

@ -32,11 +32,6 @@
display: none; display: none;
} }
#download_tab_label {
opacity: 1;
visibility: visible;
}
&::after { &::after {
content: attr(data-label); content: attr(data-label);
display: flex; display: flex;
@ -73,72 +68,6 @@
padding: 0px 8px 0px 28px; padding: 0px 8px 0px 28px;
overflow-y: scroll; overflow-y: scroll;
> .download_object {
padding-bottom: 8px;
.download_info {
display: flex;
align-items: center;
img {
width: 75px;
height: 75px;
display: inline-block;
flex-shrink: 0;
}
.download_line {
display: block;
}
.download_slim_separator {
display: none;
}
}
.download_info_data {
width: 100%;
margin-left: 8px;
}
.download_info_status {
margin-left: 8px;
width: 80px;
}
}
&.slim {
> .download_object {
.download_info {
display: block;
img {
display: none;
}
.download_line {
display: inline-block;
}
.download_slim_separator {
display: inline-block;
}
}
.download_info_data {
width: calc(80% - 16px);
display: inline-block;
padding-left: 0px;
}
.download_info_status {
width: 20%;
display: inline-block; // ignored due tu float
float: right;
}
}
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 10px; width: 10px;
} }
@ -155,23 +84,6 @@
} }
} }
.download_object {
> .download_bar {
display: flex;
align-items: center;
height: 24px;
> .queue_icon {
cursor: default;
margin-left: 8px;
}
> .progress {
margin: 0px;
}
}
}
#download_tab_container { #download_tab_container {
#queue_buttons { #queue_buttons {
position: absolute; position: absolute;
@ -181,12 +93,6 @@
visibility: visible; visibility: visible;
transition: all 250ms ease-in-out; transition: all 250ms ease-in-out;
} }
#download_tab_label {
opacity: 0;
visibility: hidden;
transition: all 250ms ease-in-out;
}
} }
#download_tab_drag_handler { #download_tab_drag_handler {