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 { setI18nLanguage, SUPPORTED_LOCALES } from '~/init/locale'
import { useCurrentElement } from '@vueuse/core'
import { setupDropdown } from '~/utils/fomantic'
// import { setupDropdown } from '~/utils/fomantic'
import { useRoute } from 'vue-router'
import { useStore } from '~/store'
import { useI18n } from 'vue-i18n'
@ -109,14 +109,14 @@ const isTauri = checkTauri()
const showUserModal = ref(false)
const showThemeModal = ref(false)
const el = useCurrentElement()
watchEffect(() => {
if (store.state.auth.authenticated) {
setupDropdown('.admin-dropdown', el.value)
}
// const el = useCurrentElement()
// watchEffect(() => {
// if (store.state.auth.authenticated) {
// setupDropdown('.admin-dropdown', el.value)
// }
setupDropdown('.user-dropdown', el.value)
})
// setupDropdown('.user-dropdown', el.value)
// })
onMounted(() => {
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 usePlayOptions from '~/composables/audio/usePlayOptions'
import useReport from '~/composables/moderation/useReport'
import { useCurrentElement } from '@vueuse/core'
import { setupDropdown } from '~/utils/fomantic'
// import { useCurrentElement } from '@vueuse/core'
// import { setupDropdown } from '~/utils/fomantic'
import { useStore } from '~/store'
import { useRouter, useRoute } from 'vue-router'
@ -102,27 +102,31 @@ const title = computed(() => {
return ''
})
const el = useCurrentElement()
const dropdown = ref()
onMounted(() => {
dropdown.value = setupDropdown('.ui.dropdown', el.value)
})
// const el = useCurrentElement()
// const dropdown = ref()
// onMounted(() => {
// dropdown.value = setupDropdown('.ui.dropdown', el.value)
// })
const openMenu = () => {
// 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
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({
cssText: rightOverflow > 0
? `left: ${-rightOverflow - 5}px !important;`
: `right: ${-leftOverflow + 5}px !important;`
})
// TODO: Re-implement with `Popover` component instead of fomantic dropdown
// 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({
// cssText: rightOverflow > 0
// ? `left: ${-rightOverflow - 5}px !important;`
// : `right: ${-leftOverflow + 5}px !important;`
// })
}
</script>