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

refactor: change how global buttons are rendered

Browse source
This commit is contained in:
arabcoders 2026-01-07 17:16:47 +03:00
parent ffc0b45bc9
commit ff9fd6a061
4 changed files with 111 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
ui/app/components/History.vue
View file

@ -1,64 +1,48 @@
<template> <template>
<div class="columns is-multiline is-mobile has-text-centered" v-if="hasItems"> <div class="columns is-multiline is-mobile has-text-centered is-justify-content-flex-end" v-if="hasItems">
<div class="column is-half-mobile"> <div class="column is-narrow">
<button type="button" class="button is-fullwidth is-ghost is-inverted" <button type="button" class="button is-fullwidth" @click="masterSelectAll = !masterSelectAll"
@click="masterSelectAll = !masterSelectAll"> :class="{ 'has-text-primary': !masterSelectAll, 'has-text-danger': masterSelectAll }">
<span v-if="selectedElms.length > 0" class="mr-2 tag is-danger"> <span class="icon">
{{ selectedElms.length }} <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
</span> </span>
<span class="icon-text is-block"> <span v-if="!masterSelectAll">Select</span>
<span class="icon"> <span v-else>Unselect</span>
<i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" /> <span v-if="selectedElms.length > 0">
</span> &nbsp;(<u class="has-text-danger">{{ selectedElms.length }}</u>)
<span v-if="!masterSelectAll">Select All</span>
<span v-else>Unselect All</span>
</span> </span>
</button> </button>
</div> </div>
<div class="column is-half-mobile"> <div class="column is-2-tablet is-5-mobile">
<button type="button" class="button is-fullwidth is-link" @click="downloadSelected" <Dropdown label="Actions" icons="fa-solid fa-list">
:disabled="!hasDownloaded || !hasSelected" <a class="dropdown-item has-text-link" @click="(hasDownloaded && hasSelected) ? downloadSelected() : null"
v-tooltip="!hasSelected || !hasDownloaded ? '' : 'Download items as zip'"> :style="{ opacity: (!hasDownloaded || !hasSelected) ? 0.5 : 1, cursor: (!hasDownloaded || !hasSelected) ? 'not-allowed' : 'pointer' }"
<span class="icon-text is-block"> v-tooltip="!hasSelected || !hasDownloaded ? '' : 'Download items as zip'">
<span class="icon"><i class="fa-solid fa-compress-alt" /></span> <span class="icon"><i class="fa-solid fa-compress-alt" /></span>
<span>Download</span> <span>Download</span>
</span> </a>
</button> <a class="dropdown-item has-text-danger" @click="hasSelected ? deleteSelectedItems() : null"
</div> :style="{ opacity: !hasSelected ? 0.5 : 1, cursor: !hasSelected ? 'not-allowed' : 'pointer' }">
<div class="column is-half-mobile">
<button type="button" class="button is-fullwidth is-danger" @click="deleteSelectedItems" :disabled="!hasSelected">
<span class="icon-text is-block">
<span class="icon"><i class="fa-solid fa-trash-can" /></span> <span class="icon"><i class="fa-solid fa-trash-can" /></span>
<span>{{ config.app.remove_files ? 'Remove' : 'Clear' }}</span> <span>{{ config.app.remove_files ? 'Remove' : 'Clear' }}</span>
</span> </a>
</button> <hr class="dropdown-divider" v-if="hasCompleted || hasIncomplete">
</div> <a v-if="hasCompleted" class="dropdown-item has-text-primary" @click="clearCompleted">
<div class="column is-half-mobile" v-if="hasCompleted">
<button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted">
<span class="icon-text is-block">
<span class="icon"><i class="fa-solid fa-circle-check" /></span> <span class="icon"><i class="fa-solid fa-circle-check" /></span>
<span>Clear Completed</span> <span>Clear Completed</span>
</span> </a>
</button> <a v-if="hasIncomplete" class="dropdown-item has-text-info" @click="clearIncomplete">
</div>
<div class="column is-half-mobile" v-if="hasIncomplete">
<button type="button" class="button is-fullwidth is-info is-inverted" @click="clearIncomplete">
<span class="icon-text is-block">
<span class="icon"><i class="fa-solid fa-circle-xmark" /></span> <span class="icon"><i class="fa-solid fa-circle-xmark" /></span>
<span>Clear Incomplete</span> <span>Clear Incomplete</span>
</span> </a>
</button> <a v-if="hasIncomplete" class="dropdown-item has-text-warning" @click="retryIncomplete">
</div>
<div class="column is-half-mobile" v-if="hasIncomplete">
<button type="button" class="button is-fullwidth is-warning is-inverted" @click="retryIncomplete">
<span class="icon-text is-block">
<span class="icon"><i class="fa-solid fa-rotate-right" /></span> <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
<span>Retry Incomplete</span> <span>Retry Incomplete</span>
</span> </a>
</button> </Dropdown>
</div> </div>
<div class="column is-1-tablet"> <div class="column is-narrow">
<button type="button" class="button is-fullwidth" @click="direction = direction === 'desc' ? 'asc' : 'desc'"> <button type="button" class="button" @click="direction = direction === 'desc' ? 'asc' : 'desc'">
<span class="icon-text is-block"> <span class="icon-text is-block">
<span class="icon"> <span class="icon">
<i class="fa-solid" :class="direction === 'desc' ? 'fa-arrow-down-a-z' : 'fa-arrow-up-a-z'" /> <i class="fa-solid" :class="direction === 'desc' ? 'fa-arrow-down-a-z' : 'fa-arrow-up-a-z'" />
@ -725,7 +709,10 @@ const clearCompleted = async () => {
return return
} }
selectedElms.value = [] selectedElms.value = []
await stateStore.deleteItems('history', { status: 'finished', removeFile: false }) Promise.all([
stateStore.deleteItems('history', { status: 'finished', removeFile: false }),
stateStore.deleteItems('history', { status: 'skip', removeFile: false })
])
} }
const clearIncomplete = async () => { const clearIncomplete = async () => {

58
ui/app/components/Queue.vue
View file

@ -1,37 +1,37 @@
<template> <template>
<div class="columns is-multiline is-mobile has-text-centered" v-if="filteredItems.length > 0"> <div class="columns is-multiline is-mobile has-text-centered is-justify-content-flex-end"
<div class="column is-half-mobile"> v-if="filteredItems.length > 0">
<button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll"> <div class="column is-narrow">
<span v-if="selectedElms.length > 0" class="mr-2 tag is-danger"> <button type="button" class="button" @click="masterSelectAll = !masterSelectAll"
{{ selectedElms.length }} :class="{ 'has-text-primary': !masterSelectAll, 'has-text-danger': masterSelectAll }">
<span class="icon">
<i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
</span> </span>
<span class="icon-text is-block"> <span v-if="!masterSelectAll">Select</span>
<span class="icon"> <span v-else>Unselect</span>
<i class="fas" :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" /> <span v-if="selectedElms.length > 0">
</span> &nbsp;(<u class="has-text-danger">{{ selectedElms.length }}</u>)
<span v-if="!masterSelectAll">Select All</span>
<span v-else> Unselect All</span>
</span> </span>
</button> </button>
</div> </div>
<div class="column is-half-mobile" v-if="hasManualStart"> <div class="column is-2-tablet is-5-mobile">
<button type="button" class="button is-fullwidth is-success" :disabled="!hasSelected" @click="startItems"> <Dropdown label="Actions" icons="fa-solid fa-list">
<span class="icon"><i class="fa-solid fa-circle-play" /></span> <a v-if="hasManualStart" class="dropdown-item has-text-success" @click="hasSelected ? startItems() : null"
<span>Start</span> :style="{ opacity: !hasSelected ? 0.5 : 1, cursor: !hasSelected ? 'not-allowed' : 'pointer' }">
</button> <span class="icon"><i class="fa-solid fa-circle-play" /></span>
</div> <span>Start</span>
<div class="column is-half-mobile" v-if="hasPausable"> </a>
<button type="button" class="button is-fullwidth is-warning is-background-warning-85" :disabled="!hasSelected" <a v-if="hasPausable" class="dropdown-item has-text-warning" @click="hasSelected ? pauseSelected() : null"
@click="pauseSelected"> :style="{ opacity: !hasSelected ? 0.5 : 1, cursor: !hasSelected ? 'not-allowed' : 'pointer' }">
<span class="icon"><i class="fa-solid fa-pause" /></span> <span class="icon"><i class="fa-solid fa-pause" /></span>
<span>Pause</span> <span>Pause</span>
</button> </a>
</div> <a class="dropdown-item has-text-warning" @click="hasSelected ? cancelSelected() : null"
<div class="column is-half-mobile"> :style="{ opacity: !hasSelected ? 0.5 : 1, cursor: !hasSelected ? 'not-allowed' : 'pointer' }">
<button type="button" class="button is-fullwidth is-warning" :disabled="!hasSelected" @click="cancelSelected"> <span class="icon"><i class="fa-solid fa-eject" /></span>
<span class="icon"><i class="fa-solid fa-eject" /></span> <span>Cancel</span>
<span>Cancel</span> </a>
</button> </Dropdown>
</div> </div>
</div> </div>

50
ui/app/pages/browser/[...slug].vue
View file

@ -105,36 +105,36 @@
</div> </div>
</div> </div>
<div class="columns is-mobile is-multiline" v-if="config.app.browser_control_enabled && items && items.length > 0"> <div class="columns is-mobile is-multiline is-justify-content-flex-end" v-if="config.app.browser_control_enabled && items && items.length > 0">
<div class="column is-12-mobile"> <div class="column is-narrow">
<button type="button" class="button is-fullwidth is-ghost is-inverted" <button type="button" class="button" @click="masterSelectAll = !masterSelectAll"
@click="masterSelectAll = !masterSelectAll" :disabled="isLoading || items.length < 1"> :class="{ 'has-text-primary': !masterSelectAll, 'has-text-danger': masterSelectAll }"
<span class="icon-text is-block"> :disabled="isLoading || items.length < 1">
<span class="icon"> <span class="icon">
<i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" /> <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
</span> </span>
<span v-if="!masterSelectAll">Select All</span> <span v-if="!masterSelectAll">Select</span>
<span v-else>Unselect All</span> <span v-else>Unselect</span>
<span v-if="selectedElms.length > 0">
&nbsp;(<u class="has-text-danger">{{ selectedElms.length }}</u>)
</span> </span>
</button> </button>
</div> </div>
<div class="column is-half-mobile"> <div class="column is-2-tablet is-5-mobile">
<button type="button" class="button is-fullwidth is-danger" @click="deleteSelected" <Dropdown label="Actions" icons="fa-solid fa-list">
:disabled="selectedElms.length < 1 || isLoading || items.length < 1"> <a class="dropdown-item has-text-danger"
<span class="icon-text is-block"> @click="(selectedElms.length > 0 && !isLoading) ? deleteSelected() : null"
:style="{ opacity: (selectedElms.length < 1 || isLoading) ? 0.5 : 1, cursor: (selectedElms.length < 1 || isLoading) ? 'not-allowed' : 'pointer' }">
<span class="icon"><i class="fa-solid fa-trash-can" /></span> <span class="icon"><i class="fa-solid fa-trash-can" /></span>
<span>Delete {{ selectedElms.length > 0 ? selectedElms.length : '' }} items</span> <span>Delete{{ selectedElms.length > 0 ? ` (${selectedElms.length})` : '' }}</span>
</span> </a>
</button> <a class="dropdown-item has-text-link"
</div> @click="(selectedElms.length > 0 && !isLoading) ? moveSelected() : null"
<div class="column is-half-mobile"> :style="{ opacity: (selectedElms.length < 1 || isLoading) ? 0.5 : 1, cursor: (selectedElms.length < 1 || isLoading) ? 'not-allowed' : 'pointer' }">
<button type="button" class="button is-fullwidth is-link" @click="moveSelected"
:disabled="selectedElms.length < 1 || isLoading || items.length < 1">
<span class="icon-text is-block">
<span class="icon"><i class="fa-solid fa-arrows-alt" /></span> <span class="icon"><i class="fa-solid fa-arrows-alt" /></span>
<span>Move {{ selectedElms.length > 0 ? selectedElms.length : '' }} items</span> <span>Move{{ selectedElms.length > 0 ? ` (${selectedElms.length})` : '' }}</span>
</span> </a>
</button> </Dropdown>
</div> </div>
</div> </div>

48
ui/app/pages/tasks.vue
View file

@ -72,36 +72,36 @@
</div> </div>
</div> </div>
<div class="columns is-multiline is-mobile" v-if="!toggleForm && filteredTasks && filteredTasks.length > 0"> <div class="columns is-multiline is-mobile is-justify-content-flex-end" v-if="!toggleForm && filteredTasks && filteredTasks.length > 0">
<div class="column"> <div class="column is-narrow">
<button type="button" class="button is-fullwidth is-ghost is-inverted" <button type="button" class="button" @click="masterSelectAll = !masterSelectAll"
@click="masterSelectAll = !masterSelectAll"> :class="{ 'has-text-primary': !masterSelectAll, 'has-text-danger': masterSelectAll }">
<span class="icon-text is-block"> <span class="icon">
<span class="icon"> <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
<i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" /> </span>
</span> <span v-if="!masterSelectAll">Select</span>
<span v-if="!masterSelectAll">Select All</span> <span v-else>Unselect</span>
<span v-else>Unselect All</span> <span v-if="selectedElms.length > 0">
&nbsp;(<u class="has-text-danger">{{ selectedElms.length }}</u>)
</span> </span>
</button> </button>
</div> </div>
<div class="column"> <div class="column is-2-tablet is-5-mobile">
<button class="button is-purple is-fullwidth" @click="runConfirm()" <Dropdown label="Actions" icons="fa-solid fa-list">
:disabled="selectedElms.length < 1 || massRun" :class="{ 'is-loading': massRun }"> <a class="dropdown-item has-text-purple"
<span class="icon"><i class="fa-solid fa-up-right-from-square" /></span> @click="(selectedElms.length > 0 && !massRun) ? runConfirm() : null"
<span>Run Selected</span> :style="{ opacity: (selectedElms.length < 1 || massRun) ? 0.5 : 1, cursor: (selectedElms.length < 1 || massRun) ? 'not-allowed' : 'pointer' }">
</button> <span class="icon"><i class="fa-solid fa-up-right-from-square" /></span>
</div> <span>Run Selected</span>
</a>
<div class="column"> <a class="dropdown-item has-text-danger"
<button type="button" class="button is-fullwidth is-danger" @click="deleteConfirm()" @click="(selectedElms.length > 0 && !massDelete) ? deleteConfirm() : null"
:disabled="selectedElms.length < 1 || massDelete" :class="{ 'is-loading': massDelete }"> :style="{ opacity: (selectedElms.length < 1 || massDelete) ? 0.5 : 1, cursor: (selectedElms.length < 1 || massDelete) ? 'not-allowed' : 'pointer' }">
<span class="icon-text is-block">
<span class="icon"><i class="fa-solid fa-trash-can" /></span> <span class="icon"><i class="fa-solid fa-trash-can" /></span>
<span>Remove Selected</span> <span>Remove Selected</span>
</span> </a>
</button> </Dropdown>
</div> </div>
</div> </div>