chore: downgraded rollup-plugin-vue@4.2.0 due to watcher problems; performance: removed download tab styles

This commit is contained in:
Roberto Tonino 2020-10-28 21:14:21 +01:00
parent f095c1264e
commit 2cf68d182b
6 changed files with 174 additions and 850 deletions

887
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -42,7 +42,7 @@
"rollup-plugin-postcss": "^3.1.8", "rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-svg": "^2.0.0", "rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9", "rollup-plugin-vue": "^4.2.0",
"sass": "^1.27.0", "sass": "^1.27.0",
"tailwindcss": "^1.9.6", "tailwindcss": "^1.9.6",
"vue-template-compiler": "^2.6.12" "vue-template-compiler": "^2.6.12"

File diff suppressed because one or more lines are too long

View File

@ -1,13 +1,14 @@
<template> <template>
<div <section
id="download_tab_container" id="download_tab_container"
class="block tab_hidden bg-panels-bg text-foreground" class="block bg-panels-bg text-foreground h-screen"
:class="{ 'tab-hidden': !isExpanded, 'w-8': !isExpanded }"
@transitionend="$refs.container.style.transition = ''" @transitionend="$refs.container.style.transition = ''"
ref="container" ref="container"
:data-label="$t('downloads')" :data-label="$t('downloads')"
aria-label="downloads" aria-label="downloads"
> >
<!-- Drag Handler --> <!-- Drag handler -->
<div <div
v-show="isExpanded" v-show="isExpanded"
class="absolute w-4 h-full bg-grayscale-200" class="absolute w-4 h-full bg-grayscale-200"
@ -15,14 +16,21 @@
style="cursor: ew-resize" style="cursor: ew-resize"
></div> ></div>
<!-- Bar toggler -->
<i <i
id="toggle_download_tab" id="toggle_download_tab"
class="m-1 text-2xl cursor-pointer material-icons" class="m-1 text-2xl cursor-pointer material-icons"
:class="{ 'ml-1': !isExpanded, 'ml-5': isExpanded }"
@click.prevent="toggleDownloadTab" @click.prevent="toggleDownloadTab"
ref="toggler" ref="toggler"
:title="$t('globals.toggle_download_tab_hint')" :title="$t('globals.toggle_download_tab_hint')"
></i> ></i>
<div id="queue_buttons">
<!-- Queue buttons -->
<div
class="absolute top-0 right-0 transition-all duration-200 ease-in-out"
:class="{ 'opacity-0 invisible': !isExpanded, 'opacity-100 visible': isExpanded }"
>
<i <i
v-if="clientMode" v-if="clientMode"
class="m-1 text-2xl cursor-pointer material-icons" class="m-1 text-2xl cursor-pointer material-icons"
@ -52,12 +60,37 @@
@remove-item="onRemoveItem" @remove-item="onRemoveItem"
/> />
</div> </div>
</div> </section>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
#download_tab_container { #toggle_download_tab {
height: 100vh; 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 { #download_list {
@ -139,9 +172,7 @@ export default {
this.$refs.list.classList.add('slim') this.$refs.list.classList.add('slim')
} }
if ('true' === localStorage.getItem('downloadTabOpen')) { if (this.isExpanded) {
this.$refs.container.classList.remove('tab_hidden')
this.setTabWidth(this.cachedTabWidth) this.setTabWidth(this.cachedTabWidth)
} }
@ -305,8 +336,7 @@ export default {
this.$refs.container.style.transition = 'all 250ms ease-in-out' this.$refs.container.style.transition = 'all 250ms ease-in-out'
// Toggle returns a Boolean based on the action it performed // Toggle returns a Boolean based on the action it performed
let isHidden = this.$refs.container.classList.toggle('tab_hidden') this.isExpanded = !this.isExpanded
this.isExpanded = !isHidden
if (this.isExpanded) { if (this.isExpanded) {
this.setTabWidth(this.cachedTabWidth) this.setTabWidth(this.cachedTabWidth)

View File

@ -25,7 +25,6 @@ body {
@import './globals/globals'; @import './globals/globals';
@import './globals/tables'; @import './globals/tables';
@import './tabs/download-tab';
@import './tabs/search-tab'; @import './tabs/search-tab';
@import './tabs/settings-tab'; @import './tabs/settings-tab';
@import './tabs/tabs'; @import './tabs/tabs';

View File

@ -1,49 +0,0 @@
#download_tab_container {
#queue_buttons {
position: absolute;
top: 0;
right: 0;
opacity: 1;
visibility: visible;
transition: all 250ms ease-in-out;
}
&.tab_hidden {
width: 32px;
#toggle_download_tab {
margin-left: 4px;
&::before {
content: 'chevron_left';
}
}
#queue_buttons {
opacity: 0;
visibility: hidden;
}
&::after {
content: attr(data-label);
display: flex;
align-items: center;
text-transform: capitalize;
writing-mode: vertical-rl;
line-height: 32px;
}
}
}
#toggle_download_tab {
width: 25px;
height: 25px;
margin-left: 20px;
&::before {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
content: 'chevron_right';
}
}