danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Reverted some changes to the navbar

Browse source
This commit is contained in:
arabcoders 2025-10-24 18:56:56 +03:00
parent 32452e0596
commit 94dd37a123
5 changed files with 119 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
ui/app/components/Dropdown.vue
View file

@ -4,7 +4,7 @@
<button class="button is-fullwidth is-justify-content-space-between" aria-haspopup="true" type="button"
aria-controls="dropdown-menu" @click="toggle" :class="button_classes">
<span class="icon" v-if="icons"><i :class="icons" /></span>
<span>{{ label }}</span>
<span :class="{ 'is-sr-only': hideLabel }">{{ label }}</span>
<div class="is-pulled-right">
<span class="icon"><i class="fas fa-angle-down" aria-hidden="true" /></span>
</div>
@ -15,6 +15,15 @@
<div v-if="isOpen" class="dropdown is-active dropdown-portal" ref="menu" :style="menuStyle">
<div class="dropdown-menu" role="menu">
<div class="dropdown-content" @click="handle_slot_click">
<template v-if="hideLabel">
<div class="dropdown-label">
<span class="icon-text">
<span class="icon" v-if="icons"><i :class="icons" /></span>
<span>{{ label }}</span>
</span>
</div>
<div class="dropdown-divider"></div>
</template>
<slot />
</div>
</div>
@ -27,7 +36,7 @@
import { ref, onMounted, onBeforeUnmount, nextTick, watchEffect, useTemplateRef } from 'vue'
const emitter = defineEmits(['open_state'])
defineProps({
const props = defineProps({
label: {
type: String,
default: 'Select'
@ -39,6 +48,10 @@ defineProps({
button_classes: {
type: String,
default: ''
},
hide_label_on_mobile: {
type: Boolean,
default: false
}
})
@ -47,6 +60,9 @@ const dropUp = ref(false)
const dropdown = useTemplateRef<HTMLDivElement>('dropdown')
const menu = useTemplateRef<HTMLDivElement>('menu')
const menuStyle = ref<Record<string, string>>({})
const isMobile = useMediaQuery({ maxWidth: 1024 })
const hideLabel = computed(() => isMobile.value && props.hide_label_on_mobile)
const updatePosition = () => {
if (!dropdown.value || !isOpen.value) {
@ -162,8 +178,10 @@ onBeforeUnmount(() => {
}
.dropdown.dropdown-portal .dropdown-menu {
display: block !important; /* Override Bulma's display: none */
position: static; /* Don't use absolute positioning inside fixed container */
display: block !important;
/* Override Bulma's display: none */
position: static;
/* Don't use absolute positioning inside fixed container */
max-height: 300px;
overflow-y: auto;
padding-top: 4px;
@ -176,4 +194,10 @@ onBeforeUnmount(() => {
padding-top: var(--bulma-dropdown-content-padding-top, 0.5rem);
padding-bottom: var(--bulma-dropdown-content-padding-bottom, 0.5rem);
}
.dropdown-label {
font-weight: 600;
padding: 0.5rem 0.75rem;
color: var(--bulma-dropdown-label-color, var(--bulma-text-color, #4a4a4a));
}
</style>

12
ui/app/components/NotifyDropdown.vue
View file

@ -43,13 +43,14 @@
<template>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless">
<a class="navbar-link">
<span class="icon"><i class="fas fa-bell" /></span>
<span class="tag ml-2" v-if="store.unreadCount > 0">
<span class="tag ml-2">
<span class="is-underlined">{{ store.unreadCount }}</span>
<span>&nbsp;/&nbsp;</span>
<span class="is-underlined">{{ store.notifications.length }}</span>
</span>
</a>
<div class="navbar-dropdown is-right" style="width: 400px;">
<template v-if="store.notifications.length > 0">
<div class="px-3 py-2 is-flex is-justify-content-space-between is-align-items-center">
@ -112,11 +113,6 @@
</div>
</div>
</div>
</div>
<div class="navbar-item">
</div>
</template>

8
ui/app/components/Simple.vue
View file

@ -5,9 +5,11 @@
<form class="download-form__body" autocomplete="off" @submit.prevent="addDownload">
<label class="label" for="download-url">
What you would like to download?
<span class="icon is-pointer" :class="connectionStatusColor" @click="$emit('show_settings')"
v-tooltip="'WebUI Settings'">
<i class="fas fa-cogs" /></span>
<span class="is-pulled-right">
<span class="icon is-pointer" :class="connectionStatusColor" @click="$emit('show_settings')"
v-tooltip="'WebUI Settings'">
<i class="fas fa-cogs" /></span>
</span>
</label>
<div class="field has-addons">
<div class="control">

95
ui/app/layouts/default.vue
View file

@ -8,8 +8,8 @@
<template v-if="show_settings">
<Modal @close="closeSettings()"
:content-class="isMobile ? 'modal-content-max is-overflow-scroll ' : 'modal-content-max'">
<div class="columns is-multiline">
<div class="column is-12 mt-2">
<div class="columns is-multiline" style="width:100%">
<div class="column is-12">
<div class="card">
<header class="card-header">
<p class="card-header-title">WebUI Settings</p>
@ -41,8 +41,9 @@
<NuxtLink class="navbar-item is-text-overflow" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)"
v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'">
<span class="is-text-overflow">
<span class="icon" v-if="'connecting' === socket.connectionStatus">
<i class="fas fa-arrows-rotate fa-spin" />
<span class="icon">
<i v-if="'connecting' === socket.connectionStatus" class="fas fa-arrows-rotate fa-spin" />
<i v-else class="fas fa-home" />
</span>
<span class="has-text-bold" :class="connectionStatusColor">
YTPTube
@ -60,12 +61,6 @@
<div class="navbar-menu is-unselectable" :class="{ 'is-active': showMenu }">
<div class="navbar-start">
<NuxtLink class="navbar-item" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)">
<span class="icon"><i class="fa-solid fa-home" /></span>
<span>Home</span>
</NuxtLink>
<NuxtLink class="navbar-item" to="/browser" @click.prevent="(e: MouseEvent) => changeRoute(e)">
<span class="icon"><i class="fa-solid fa-folder-tree" /></span>
<span>Files</span>
@ -76,15 +71,23 @@
<span>Presets</span>
</NuxtLink>
<NuxtLink class="navbar-item" to="/tasks" @click.prevent="(e: MouseEvent) => changeRoute(e)">
<span class="icon"><i class="fa-solid fa-tasks" /></span>
<span>Tasks</span>
</NuxtLink>
<div class="navbar-item has-dropdown">
<a class="navbar-link" @click="(e: MouseEvent) => openMenu(e)">
<span class="icon"><i class="fas fa-tasks" /></span>
<span>Tasks</span>
</a>
<div class="navbar-dropdown">
<NuxtLink class="navbar-item" to="/tasks" @click.prevent="(e: MouseEvent) => changeRoute(e)">
<span class="icon"><i class="fa-solid fa-tasks" /></span>
<span>List</span>
</NuxtLink>
<NuxtLink class="navbar-item" to="/task_definitions" @click.prevent="(e: MouseEvent) => changeRoute(e)">
<span class="icon"><i class="fa-solid fa-diagram-project" /></span>
<span>Task Definitions</span>
</NuxtLink>
<NuxtLink class="navbar-item" to="/task_definitions" @click.prevent="(e: MouseEvent) => changeRoute(e)">
<span class="icon"><i class="fa-solid fa-diagram-project" /></span>
<span>Definitions</span>
</NuxtLink>
</div>
</div>
<NuxtLink class="navbar-item" to="/notifications" @click.prevent="(e: MouseEvent) => changeRoute(e)">
<span class="icon-text">
@ -100,17 +103,51 @@
</div>
<div class="navbar-end">
<div class="navbar-item has-dropdown" v-if="config.app.file_logging || config.app.console_enabled">
<a class="navbar-link" @click="(e: MouseEvent) => openMenu(e)">
<span class="icon"><i class="fas fa-tools" /></span>
<span>Other</span>
</a>
<div class="navbar-dropdown">
<NuxtLink class="navbar-item" to="/logs" @click.prevent="(e: MouseEvent) => changeRoute(e)"
v-if="config.app.file_logging">
<span class="icon"><i class="fa-solid fa-file-lines" /></span>
<span>Logs</span>
</NuxtLink>
<NuxtLink class="navbar-item" to="/console" @click.prevent="(e: MouseEvent) => changeRoute(e)"
v-if="config.app.console_enabled">
<span class="icon"><i class="fa-solid fa-terminal" /></span>
<span>Console</span>
</NuxtLink>
</div>
</div>
<div class="navbar-item" v-if="true === config.app.is_native">
<button class="button is-dark" @click="shutdownApp">
<span class="icon"><i class="fas fa-power-off" /></span>
<span v-if="isMobile">Shutdown</span>
</button>
</div>
<NuxtLink class="navbar-item" to="/settings" @click.prevent="(e: MouseEvent) => changeRoute(e)">
<span class="icon"><i class="fa-solid fa-cog" /></span>
<span>Settings</span>
</NuxtLink>
<NotifyDropdown />
<div class="navbar-item">
<button class="button is-dark" @click="reloadPage">
<span class="icon"><i class="fas fa-refresh" /></span>
<span v-if="isMobile">Reload</span>
</button>
</div>
<div class="navbar-item">
<NuxtLink class="button is-dark " :class="{ 'has-tooltip-bottom mr-4': !isMobile }" to="/settings"
@click.prevent="(e: MouseEvent) => changeRoute(e)">
<span class="icon"><i class="fas fa-cog" /></span>
<span v-if="isMobile">WebUI Settings</span>
</NuxtLink>
</div>
</div>
</div>
</nav>
@ -444,6 +481,20 @@ const shutdownApp = async () => {
}
}
const openMenu = (e: MouseEvent) => {
const elm = (e.target as HTMLElement)?.closest('div.has-dropdown') as HTMLElement | null
document.querySelectorAll<HTMLElement>('div.has-dropdown').forEach(el => {
if (el !== elm) {
el.classList.remove('is-active')
}
})
elm?.classList.toggle('is-active')
}
const reloadPage = () => window.location.reload()
const connectionStatusColor = computed(() => {
switch (socket.connectionStatus) {
case 'connected':

50
ui/app/pages/settings.vue
View file

@ -2,13 +2,15 @@
<main class="m-6">
<div>
<span class="title is-4">
<span class="icon-text">
<span class="icon"><i class="fas fa-cog" /></span>
<p class="card-header-title">Settings</p>
<template v-if="!simpleMode">
<span class="title is-4">
<span class="icon-text">
<span class="icon"><i class="fas fa-cog" /></span>
<p class="card-header-title">WebUI Settings</p>
</span>
</span>
</span>
<span class="field is-horizontal" />
<span class="field is-horizontal" />
</template>
<div class="field is-horizontal">
<div class="field-label is-normal">
@ -82,7 +84,6 @@
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label"></label>
@ -91,7 +92,7 @@
<div class="field">
<div class="control">
<template v-if="bg_enable">
<button @click="$emit('reload_bg')" class="button is-primary" :disabled="isLoading">
<button @click="$emit('reload_bg')" class="has-text-link" :disabled="isLoading">
<span class="icon-text">
<span class="icon"><i class="fa"
:class="{ 'fa-spin fa-spinner': isLoading, 'fa-file-image': !isLoading }" /></span>
@ -258,39 +259,6 @@
</div>
</div>
</div>
<template v-if="!simpleMode">
<span class="field is-horizontal" />
<span class="title is-4">
<span class="icon-text">
<span class="icon"><i class="fas fa-cog" /></span>
<p class="card-header-title">Application Settings</p>
</span>
</span>
<span class="field is-horizontal" />
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label"></label>
</div>
<div class="field-body">
<div class="field is-grouped">
<div class="control" v-if="config.app.file_logging">
<NuxtLink class="button is-primary" to="/logs">
<span class="icon"><i class="fa-solid fa-file-lines" /></span>
<span>Open Logs</span>
</NuxtLink>
</div>
<div class="control" v-if="config.app.console_enabled">
<NuxtLink class="button is-primary" to="/console">
<span class="icon"><i class="fa-solid fa-terminal" /></span>
<span>Open Console</span>
</NuxtLink>
</div>
</div>
</div>
</div>
</template>
</div>
</main>
</template>