style: download items color bar; style: download items delete icon
This commit is contained in:
Roberto Tonino
parent
5327b2014e
commit
9e25ada875
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>
|
||||
<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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user