djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hide message window, when add text is deactivated

Browse Source
This commit is contained in:
Jonathan Baecker 2024-10-24 13:51:42 +02:00
parent 532c4b4615
commit fb355e59fc
2 changed files with 53 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/components/HeaderMenu.vue
View File

@ -15,18 +15,26 @@
<SvgIcon name="burger" classes="w-5 h-5" /> <SvgIcon name="burger" classes="w-5 h-5" />
</summary> </summary>
<ul class="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow bg-base-100 rounded-box w-52"> <ul class="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md"> <template v-for="item in menuItems" :key="item.name">
<NuxtLink <li
:to="item.link" v-if="
class="h-[27px] text-base" item.label !== 'message' ||
exact-active-class="is-active" (configStore.playout.text.add_text && !configStore.playout.text.text_from_filename)
@click="closeMenu()" "
class="bg-base-100 rounded-md"
> >
<span> <NuxtLink
{{ item.name }} :to="item.link"
</span> class="h-[27px] text-base"
</NuxtLink> exact-active-class="is-active"
</li> @click="closeMenu()"
>
<span>
{{ item.name }}
</span>
</NuxtLink>
</li>
</template>
<li v-if="configStore.channels.length > 1"> <li v-if="configStore.channels.length > 1">
<details tabindex="0" @focusout="closeDropdown"> <details tabindex="0" @focusout="closeDropdown">
<summary> <summary>
@ -37,7 +45,9 @@
<ul class="p-2"> <ul class="p-2">
<li v-for="(channel, index) in configStore.channels" :key="index"> <li v-for="(channel, index) in configStore.channels" :key="index">
<span> <span>
<a class="dropdown-item cursor-pointer" @click="selectChannel(index)">{{ channel.name }}</a> <a class="dropdown-item cursor-pointer" @click="selectChannel(index)">{{
channel.name
}}</a>
</span> </span>
</li> </li>
</ul> </ul>
@ -53,17 +63,26 @@
</div> </div>
<div class="navbar-end hidden 2sm:flex w-4/5 min-w-[750px]"> <div class="navbar-end hidden 2sm:flex w-4/5 min-w-[750px]">
<ul class="menu menu-sm menu-horizontal px-1"> <ul class="menu menu-sm menu-horizontal px-1">
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md p-0"> <template v-for="item in menuItems" :key="item.name">
<NuxtLink <li
:to="item.link" v-if="
class="px-2 h-[27px] relative text-base text-base-content" item.label !== 'message' ||
active-class="is-active" (configStore.playout.text.add_text && !configStore.playout.text.text_from_filename)
"
class="bg-base-100 rounded-md p-0"
> >
<span> <NuxtLink
{{ item.name }} :to="item.link"
</span> class="px-2 h-[27px] relative text-base text-base-content"
</NuxtLink> active-class="is-active"
</li> >
<span>
{{ item.name }}
</span>
</NuxtLink>
</li>
</template>
<li v-if="configStore.channels.length > 1"> <li v-if="configStore.channels.length > 1">
<details tabindex="0" @focusout="closeDropdown"> <details tabindex="0" @focusout="closeDropdown">
<summary> <summary>
@ -112,12 +131,12 @@ const menuDropdown = ref()
const isOpen = ref(false) const isOpen = ref(false)
const menuItems = ref([ const menuItems = ref([
{ name: t('button.home'), link: localePath({ name: 'index' }) }, { label: 'index', name: t('button.home'), link: localePath({ name: 'index' }) },
{ name: t('button.player'), link: localePath({ name: 'player' }) }, { label: 'player', name: t('button.player'), link: localePath({ name: 'player' }) },
{ name: t('button.media'), link: localePath({ name: 'media' }) }, { label: 'media', name: t('button.media'), link: localePath({ name: 'media' }) },
{ name: t('button.message'), link: localePath({ name: 'message' }) }, { label: 'message', name: t('button.message'), link: localePath({ name: 'message' }) },
{ name: t('button.logging'), link: localePath({ name: 'logging' }) }, { label: 'logging', name: t('button.logging'), link: localePath({ name: 'logging' }) },
{ name: t('button.configure'), link: localePath({ name: 'configure' }) }, { label: 'configure', name: t('button.configure'), link: localePath({ name: 'configure' }) },
]) ])
if (colorMode.value === 'dark') { if (colorMode.value === 'dark') {

11
frontend/pages/index.vue
View File

@ -12,16 +12,17 @@
<NuxtLink :to="localePath({ name: 'media' })" class="btn join-item btn-primary px-2"> <NuxtLink :to="localePath({ name: 'media' })" class="btn join-item btn-primary px-2">
{{ t('button.media') }} {{ t('button.media') }}
</NuxtLink> </NuxtLink>
<NuxtLink :to="localePath({ name: 'message' })" class="btn join-item btn-primary px-2"> <NuxtLink
v-if="configStore.playout.text.add_text && !configStore.playout.text.text_from_filename"
:to="localePath({ name: 'message' })"
class="btn join-item btn-primary px-2"
>
{{ t('button.message') }} {{ t('button.message') }}
</NuxtLink> </NuxtLink>
<NuxtLink :to="localePath({ name: 'logging' })" class="btn join-item btn-primary px-2"> <NuxtLink :to="localePath({ name: 'logging' })" class="btn join-item btn-primary px-2">
{{ t('button.logging') }} {{ t('button.logging') }}
</NuxtLink> </NuxtLink>
<NuxtLink <NuxtLink :to="localePath({ name: 'configure' })" class="btn join-item btn-primary px-2">
:to="localePath({ name: 'configure' })"
class="btn join-item btn-primary px-2"
>
{{ t('button.configure') }} {{ t('button.configure') }}
</NuxtLink> </NuxtLink>
<button class="btn join-item btn-primary px-2" @click="logout()"> <button class="btn join-item btn-primary px-2" @click="logout()">