Squashed merge from refactor/code-cleanup to main
This commit is contained in:
Roberto Tonino
@@ -41,184 +41,15 @@
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: var(--secondary-background);
|
||||
border-radius: 2px;
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
overflow: hidden;
|
||||
|
||||
.determinate {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--primary-color);
|
||||
transition: width 0.3s linear;
|
||||
}
|
||||
|
||||
.converting {
|
||||
background-color: var(--secondary-color);
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.indeterminate {
|
||||
background-color: var(--primary-color);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
||||
animation-delay: 1.15s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes indeterminate {
|
||||
0% {
|
||||
left: -35%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes indeterminate-short {
|
||||
0% {
|
||||
left: -200%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
100% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const possibleStates = ['converting', 'downloading', 'download finished', 'completed']
|
||||
|
||||
export default {
|
||||
props: {
|
||||
queueItem: Object
|
||||
queueItem: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -321,3 +152,174 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.download-object {
|
||||
padding-bottom: 8px;
|
||||
|
||||
.download-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 75px;
|
||||
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: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#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: 0;
|
||||
}
|
||||
|
||||
.download-info-status {
|
||||
width: 20%;
|
||||
display: inline-block; // ignored due to float
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: var(--secondary-background);
|
||||
border-radius: 2px;
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
overflow: hidden;
|
||||
|
||||
.determinate {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--primary-color);
|
||||
transition: width 0.3s linear;
|
||||
}
|
||||
|
||||
.converting {
|
||||
background-color: var(--secondary-color);
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.indeterminate {
|
||||
background-color: var(--primary-color);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
||||
animation-delay: 1.15s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes indeterminate {
|
||||
0% {
|
||||
left: -35%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes indeterminate-short {
|
||||
0% {
|
||||
left: -200%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
100% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -63,58 +63,6 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#toggle_download_tab {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
&::before {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
content: 'chevron_right';
|
||||
}
|
||||
}
|
||||
|
||||
#download_tab_container.tab-hidden {
|
||||
#toggle_download_tab {
|
||||
&::before {
|
||||
content: 'chevron_left';
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(data-label);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: capitalize;
|
||||
writing-mode: vertical-rl;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
#download_list {
|
||||
height: calc(100% - 32px);
|
||||
padding-left: 28px;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--panels-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--panels-scroll);
|
||||
border-radius: 4px;
|
||||
width: 6px;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import QueueItem from '@components/downloads/QueueItem.vue'
|
||||
@@ -250,7 +198,7 @@ export default {
|
||||
addToQueue(queueItem, current = false) {
|
||||
if (Array.isArray(queueItem)) {
|
||||
if (queueItem.length > 1) {
|
||||
queueItem.forEach((item, i) => {
|
||||
queueItem.forEach(item => {
|
||||
item.silent = true
|
||||
this.addToQueue(item)
|
||||
})
|
||||
@@ -435,3 +383,55 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#toggle_download_tab {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
&::before {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
content: 'chevron_right';
|
||||
}
|
||||
}
|
||||
|
||||
#download_tab_container.tab-hidden {
|
||||
#toggle_download_tab {
|
||||
&::before {
|
||||
content: 'chevron_left';
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(data-label);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: capitalize;
|
||||
writing-mode: vertical-rl;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
#download_list {
|
||||
height: calc(100% - 32px);
|
||||
padding-left: 28px;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--panels-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--panels-scroll);
|
||||
border-radius: 4px;
|
||||
width: 6px;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user