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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,40 +1,38 @@
<template>
<div class="download_object" :id="`download_${queueItem.uuid}`" :data-deezerid="queueItem.id">
<div class="download_info">
<div class="download-object">
<div class="download-info">
<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>
<span class="secondary-text">{{ queueItem.artist }}</span>
<div class="download-info-data">
<span class="download-line">{{ queueItem.title }}</span> <span class="download-slim-separator"> - </span>
<span>{{ queueItem.artist }}</span>
</div>
<div class="download_info_status">
<span class="download_line">
<span class="queue_downloaded">{{ queueItem.downloaded + queueItem.failed }}</span
>/{{ queueItem.size }}
</span>
<span class="secondary-text inline-flex" v-if="queueItem.failed >= 1">
<span class="download_slim_separator">(</span>
<div class="download-info-status" style="text-align: center">
<span class="download-line"> {{ queueItem.downloaded + queueItem.failed }}/{{ queueItem.size }} </span>
<span
class="queue_failed_button inline-flex"
v-if="hasFails"
class="inline-flex"
:class="{ clickable: finishedWithFails }"
style="justify-content: center"
@click="finishedWithFails ? $emit('show-errors', queueItem) : null"
>
<span class="queue_failed">{{ queueItem.failed }}</span>
{{ queueItem.failed }}
<i class="material-icons">error_outline</i>
</span>
<span class="download_slim_separator">)</span>
</span>
</div>
</div>
<div class="download_bar">
<div class="download-bar">
<div class="progress">
<div :id="`bar_${queueItem.uuid}`" :class="barClass" :style="barStyle"></div>
<div :class="barClass" :style="barStyle"></div>
</div>
<i
class="material-icons queue_icon"
:data-uuid="queueItem.uuid"
:class="{ clickable: finishedWithFails }"
@click="onResultIconClick"
v-if="!isLoading"
class="material-icons queue_icon"
:class="{ clickable: finishedWithFails || resultIconText === 'delete_forever' }"
@click="onResultIconClick"
>
{{ resultIconText }}
</i>
@ -43,7 +41,99 @@
</div>
</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>
const possibleStates = ['converting', 'downloading', 'download finished']
export default {
data() {
return {
@ -54,18 +144,44 @@ export default {
queueItem: Object
},
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() {
return this.queueItem.status === 'download finished' && this.queueItem.failed >= 1
return this.queueItem.status === 'download finished' && this.hasFails
},
barClass() {
return {
converting: this.queueItem.status === 'converting',
indeterminate: ['converting', 'downloading', 'download finished'].indexOf(this.queueItem.status) === -1,
determinate: ['converting', 'downloading', 'download finished'].indexOf(this.queueItem.status) !== -1
indeterminate: possibleStates.indexOf(this.queueItem.status) === -1,
determinate: possibleStates.indexOf(this.queueItem.status) !== -1
}
},
barStyle() {
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') {
width = 100
@ -80,14 +196,15 @@ export default {
}
return {
width: `${width}%`
width: `${width}%`,
backgroundColor
}
},
resultIconText() {
let text = 'remove'
let text = 'delete_forever'
if (this.queueItem.status === 'download finished') {
if (this.queueItem.failed == 0) {
if (!this.hasFails) {
text = 'done'
} else {
if (this.queueItem.failed >= this.queueItem.size) {

View File

@ -14,13 +14,11 @@
left: 0;
bottom: 0;
background-color: var(--accent-color);
-webkit-transition: width 0.3s linear;
transition: width 0.3s linear;
}
.converting {
background-color: var(--secondary-color);
-webkit-transition: none !important;
transition: none !important;
}
@ -35,7 +33,6 @@
left: 0;
bottom: 0;
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;
}
@ -47,9 +44,7 @@
left: 0;
bottom: 0;
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;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s;
}
}

View File

@ -32,11 +32,6 @@
display: none;
}
#download_tab_label {
opacity: 1;
visibility: visible;
}
&::after {
content: attr(data-label);
display: flex;
@ -73,72 +68,6 @@
padding: 0px 8px 0px 28px;
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 {
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 {
#queue_buttons {
position: absolute;
@ -181,12 +93,6 @@
visibility: visible;
transition: all 250ms ease-in-out;
}
#download_tab_label {
opacity: 0;
visibility: hidden;
transition: all 250ms ease-in-out;
}
}
#download_tab_drag_handler {