MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): [WIP] remove fomantic dropdown

This commit is contained in:
upsiflu 2024-12-08 20:57:55 +01:00
parent 415661e0a5
commit e50a62b26a
2 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
front/src/components/Sidebar.vue
View File

@ -4,7 +4,7 @@ import type { RouteRecordName } from 'vue-router'
import { computed, ref, watch, watchEffect, onMounted } from 'vue' import { computed, ref, watch, watchEffect, onMounted } from 'vue'
import { setI18nLanguage, SUPPORTED_LOCALES } from '~/init/locale' import { setI18nLanguage, SUPPORTED_LOCALES } from '~/init/locale'
import { useCurrentElement } from '@vueuse/core' import { useCurrentElement } from '@vueuse/core'
import { setupDropdown } from '~/utils/fomantic' // import { setupDropdown } from '~/utils/fomantic'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useStore } from '~/store' import { useStore } from '~/store'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
@ -109,14 +109,14 @@ const isTauri = checkTauri()
const showUserModal = ref(false) const showUserModal = ref(false)
const showThemeModal = ref(false) const showThemeModal = ref(false)
const el = useCurrentElement() // const el = useCurrentElement()
watchEffect(() => { // watchEffect(() => {
if (store.state.auth.authenticated) { // if (store.state.auth.authenticated) {
setupDropdown('.admin-dropdown', el.value) // setupDropdown('.admin-dropdown', el.value)
} // }
setupDropdown('.user-dropdown', el.value) // setupDropdown('.user-dropdown', el.value)
}) // })
onMounted(() => { onMounted(() => {
document.getElementById('fake-sidebar')?.classList.add('loaded') document.getElementById('fake-sidebar')?.classList.add('loaded')

40
front/src/components/audio/PlayButton.vue
View File

@ -6,8 +6,8 @@ import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import usePlayOptions from '~/composables/audio/usePlayOptions' import usePlayOptions from '~/composables/audio/usePlayOptions'
import useReport from '~/composables/moderation/useReport' import useReport from '~/composables/moderation/useReport'
import { useCurrentElement } from '@vueuse/core' // import { useCurrentElement } from '@vueuse/core'
import { setupDropdown } from '~/utils/fomantic' // import { setupDropdown } from '~/utils/fomantic'
import { useStore } from '~/store' import { useStore } from '~/store'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
@ -102,27 +102,31 @@ const title = computed(() => {
return '' return ''
}) })
const el = useCurrentElement() // const el = useCurrentElement()
const dropdown = ref() // const dropdown = ref()
onMounted(() => { // onMounted(() => {
dropdown.value = setupDropdown('.ui.dropdown', el.value) // dropdown.value = setupDropdown('.ui.dropdown', el.value)
}) // })
const openMenu = () => { const openMenu = () => {
// little magic to ensure the menu is always visible in the viewport // little magic to ensure the menu is always visible in the viewport
// By default, try to display it on the right if there is enough room // By default, try to display it on the right if there is enough room
const menu = dropdown.value.find('.menu')
if (menu.hasClass('visible')) return
const viewportOffset = menu.get(0)?.getBoundingClientRect() ?? { right: 0, left: 0 }
const viewportWidth = document.documentElement.clientWidth
const rightOverflow = viewportOffset.right - viewportWidth
const leftOverflow = -viewportOffset.left
menu.css({ // TODO: Re-implement with `Popover` component instead of fomantic dropdown
cssText: rightOverflow > 0
? `left: ${-rightOverflow - 5}px !important;` // const menu = dropdown.value.find('.menu')
: `right: ${-leftOverflow + 5}px !important;`
}) // if (menu.hasClass('visible')) return
// const viewportOffset = menu.get(0)?.getBoundingClientRect() ?? { right: 0, left: 0 }
// const viewportWidth = document.documentElement.clientWidth
// const rightOverflow = viewportOffset.right - viewportWidth
// const leftOverflow = -viewportOffset.left
// menu.css({
// cssText: rightOverflow > 0
// ? `left: ${-rightOverflow - 5}px !important;`
// : `right: ${-leftOverflow + 5}px !important;`
// })
} }
</script> </script>