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

src/components/downloads/QueueItem.vue

@@ -1,40 +1,38 @@
 <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}`" />
-			<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 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>
 			</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,
+				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() {
 			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) {

src/styles/scss/_progressbar.scss

@@ -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;
 		}
 	}

src/styles/scss/tabs/_download-tab.scss

@@ -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 {