TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-02 17:12:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: some perf and other improvements

Browse source
This commit is contained in:
Filipe Medeiros 2021-10-11 10:15:11 +01:00
parent a623887a11
commit 95131c40ab
3 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/Menu.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<MenuDesktop :collapsed="collapsed" :toggleCollapsed="toggleCollapsed" v-if="!isMobile" /> <MenuDesktop :collapsed="collapsed" :toggleCollapsed="toggleCollapsedDebounced" v-if="!isMobile" />
<MenuMobile :collapsed="collapsed" :toggleCollapsed="toggleCollapsed" v-else /> <MenuMobile :collapsed="collapsed" :toggleCollapsed="toggleCollapsedDebounced" v-else />
</template> </template>
<script> <script>
@ -16,11 +16,25 @@ export default {
}, },
props: { props: {
collapsed: Boolean, collapsed: Boolean,
toggleCollapse: Function, toggleCollapsed: Function,
},
data() {
return { toggleCollapsedDisabled: false };
}, },
setup() { setup() {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
return { isMobile }; return { isMobile };
}, },
methods: {
toggleCollapsedDebounced() {
if (!this.toggleCollapsedDisabled) {
this.toggleCollapsed();
this.toggleCollapsedDisabled = true;
setTimeout(() => {
this.toggleCollapsedDisabled = false;
}, 500);
}
},
},
}; };
</script> </script>

4
src/components/MenuDesktop.vue
View file

@ -17,7 +17,7 @@
<div <div
class="uk-flex uk-flex-middle" class="uk-flex uk-flex-middle"
style="gap: 16px; transition: transform 300ms, gap 300ms;" style="gap: 16px; transition: transform 300ms, gap 300ms;"
:style="collapseText ? 'transform: scale(0); gap: 0;' : 'transition-delay: 170ms'" :style="collapseText ? 'transform: scale3d(0, 0, 0); gap: 0;' : 'transition-delay: 170ms'"
v-if="!hideText" v-if="!hideText"
> >
<img src="/img/pipedPlay.svg" :class="{ 'piped-play': !hideText }" /> <img src="/img/pipedPlay.svg" :class="{ 'piped-play': !hideText }" />
@ -181,7 +181,7 @@ export default {
} }
.sidebar-link span { .sidebar-link span {
transition: font-size 400ms, padding 400ms; transition: font-size 400ms;
} }
.collapse-text .sidebar-link span { .collapse-text .sidebar-link span {
font-size: 0; font-size: 0;

2
src/components/TrendingPage.vue
View file

@ -33,7 +33,7 @@
v-if="!isMobile" v-if="!isMobile"
class="uk-flex uk-flex-middle" class="uk-flex uk-flex-middle"
style="gap: 16px; transition: transform 400ms; transform-origin: left;" style="gap: 16px; transition: transform 400ms; transform-origin: left;"
:style="!menuCollapsed ? 'transform: scale(0);' : {}" :style="!menuCollapsed ? 'transform: scale3d(0, 0, 0);' : {}"
> >
<img src="/img/pipedPlay.svg" style="height: 36px;" /> <img src="/img/pipedPlay.svg" style="height: 36px;" />
<img src="/img/piped.svg" /> <img src="/img/piped.svg" />