vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Refactor to only used local storage value when on desktop viewport widths

This commit is contained in:
David Angel 2023-02-01 22:32:44 -05:00 committed by Dominik Pschenitschni
parent 3604cb3ec7
commit 99dc5cf34f
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/home/navigation.vue
View File

@ -146,7 +146,7 @@
</template>
<script setup lang="ts">
import {ref, computed, onMounted, onBeforeMount} from 'vue'
import {ref, computed, onBeforeMount} from 'vue'
import draggable from 'zhyswan-vuedraggable'
import type {SortableEvent} from 'sortablejs'
@ -159,7 +159,6 @@ import Logo from '@/components/home/Logo.vue'
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
import {getListTitle} from '@/helpers/getListTitle'
import {useEventListener} from '@vueuse/core'
import type {IList} from '@/modelTypes/IList'
import type {INamespace} from '@/modelTypes/INamespace'
import ColorBubble from '@/components/misc/colorBubble.vue'
@ -200,17 +199,8 @@ const namespaceListsCount = computed(() => {
return namespaces.value.map((_, index) => activeLists.value[index]?.length ?? 0)
})
useEventListener('resize', resize)
onMounted(() => resize())
const listStore = useListStore()
function resize() {
// Hide the menu by default on mobile
baseStore.menuActive && baseStore.setMenuActive(window.innerWidth >= 770)
}
function toggleLists(namespaceId: INamespace['id']) {
listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
}

25
src/stores/base.ts
View File

@ -1,4 +1,4 @@
import {readonly, ref} from 'vue'
import { readonly, ref} from 'vue'
import {defineStore, acceptHMRUpdate} from 'pinia'
import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
@ -9,7 +9,7 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
import {useAuthStore} from '@/stores/auth'
import type {IList} from '@/modelTypes/IList'
import { useStorage } from '@vueuse/core'
import { useStorage, useWindowSize, whenever } from '@vueuse/core'
export const useBaseStore = defineStore('base', () => {
const loading = ref(false)
@ -24,11 +24,22 @@ export const useBaseStore = defineStore('base', () => {
const blurHash = ref('')
const hasTasks = ref(false)
const menuActive = useStorage('menuActive', true)
const windowSize = useWindowSize()
const menuActivePreference = useStorage('menuActive', true)
const menuActive = ref(windowSize.width.value >= 770 && menuActivePreference.value)
const keyboardShortcutsActive = ref(false)
const quickActionsActive = ref(false)
const logoVisible = ref(true)
whenever(windowSize.width, (value, previous) => {
if (value < 770 && previous >= 770) {
setMenuActive(false)
}
if (value >= 770 && previous < 770 && menuActivePreference.value) {
setMenuActive(menuActivePreference.value)
}
})
function setLoading(newLoading: boolean) {
loading.value = newLoading
}
@ -58,8 +69,13 @@ export const useBaseStore = defineStore('base', () => {
menuActive.value = newMenuActive
}
function setMenuActivePreference(newMenuActivePreference: boolean) {
menuActivePreference.value = newMenuActivePreference
}
function toggleMenu() {
menuActive.value = !menuActive.value
windowSize.width.value >= 770 && setMenuActivePreference(menuActive.value)
}
function setKeyboardShortcutsActive(value: boolean) {
@ -144,8 +160,10 @@ export const useBaseStore = defineStore('base', () => {
keyboardShortcutsActive: readonly(keyboardShortcutsActive),
quickActionsActive: readonly(quickActionsActive),
logoVisible: readonly(logoVisible),
windowSize: readonly(windowSize),
setLoading,
setReady,
setCurrentList,
setHasTasks,
setMenuActive,
@ -155,7 +173,6 @@ export const useBaseStore = defineStore('base', () => {
setBackground,
setBlurHash,
setLogoVisible,
setReady,
handleSetCurrentList,
loadApp,