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

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

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

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

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

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

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