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

more minor design updates. Ref #441

Browse source
This commit is contained in:
arabcoders 2025-10-14 18:32:09 +03:00
parent 8e0f8045ab
commit d5a0a3aafe
4 changed files with 41 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
ui/app/pages/conditions.vue
View file

@ -4,11 +4,17 @@
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
<span class="icon-text">
<span class="icon"><i class="fa-solid fa-filter" /></span>
<span>Conditions</span>
<template v-if="toggleForm">
<span class="icon"><i class="fa-solid" :class="{ 'fa-edit': itemRef, 'fa-plus': !itemRef }" /></span>
<span>{{ itemRef ? `Edit - ${item.name}` : 'Add new condition' }}</span>
</template>
<template v-else>
<span class="icon"><i class="fa-solid fa-filter" /></span>
<span>Conditions</span>
</template>
</span>
</span>
<div class="is-pulled-right">
<div class="is-pulled-right" v-if="!toggleForm">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm;">
@ -25,9 +31,10 @@
</p>
</div>
</div>
<div class="is-hidden-mobile">
<span class="subtitle">Run yt-dlp custom match filter on returned info. and apply cli arguments if matched.
This is an advanced feature and should be used with caution.</span>
<div class="is-hidden-mobile" v-if="!toggleForm">
<span class="subtitle">
Run yt-dlp custom match filter on returned info. and apply cli arguments if matched.
</span>
</div>
</div>
@ -46,12 +53,6 @@
<a class="has-text-info" v-tooltip="'Export item.'" @click.prevent="exportItem(cond)">
<span class="icon"><i class="fa-solid fa-file-export" /></span>
</a>
<button @click="cond.raw = !cond.raw">
<span class="icon"><i class="fa-solid" :class="{
'fa-arrow-down': !cond?.raw,
'fa-arrow-up': cond?.raw,
}" /></span>
</button>
</div>
</header>
<div class="card-content is-flex-grow-1">
@ -74,15 +75,10 @@
</p>
</div>
</div>
<div class="card-content" v-if="cond?.raw">
<div class="content">
<pre><code>{{ JSON.stringify(cleanObject(cond, remove_keys), null, 2) }}</code></pre>
</div>
</div>
<div class="card-footer mt-auto">
<div class="card-footer-item">
<button class="button is-warning is-fullwidth" @click="editItem(cond)">
<span class="icon"><i class="fa-solid fa-cog" /></span>
<span class="icon"><i class="fa-solid fa-edit" /></span>
<span>Edit</span>
</button>
</div>
@ -129,7 +125,7 @@
<script setup lang="ts">
import type { ConditionItem, ImportedConditionItem } from '~/types/conditions'
import {useConfirm} from '~/composables/useConfirm'
import { useConfirm } from '~/composables/useConfirm'
type ConditionItemWithUI = ConditionItem & { raw?: boolean }

21
ui/app/pages/notifications.vue
View file

@ -4,8 +4,14 @@
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
<span class="icon-text">
<span class="icon"><i class="fa-solid fa-paper-plane" /></span>
<span>Notifications</span>
<template v-if="toggleForm">
<span class="icon"><i class="fa-solid" :class="{ 'fa-edit': targetRef, 'fa-plus': !targetRef }" /></span>
<span>{{ targetRef ? `Edit - ${target.name}` : 'Add new notification target' }}</span>
</template>
<template v-else>
<span class="icon"><i class="fa-solid fa-paper-plane" /></span>
<span>Notifications</span>
</template>
</span>
</span>
<div class="is-pulled-right" v-if="!toggleForm">
@ -44,7 +50,7 @@
</p>
</div>
</div>
<div class="is-hidden-mobile">
<div class="is-hidden-mobile" v-if="!toggleForm">
<span class="subtitle">
Send notifications to your webhooks based on specified events or presets.
</span>
@ -103,7 +109,7 @@
<div class="control">
<button class="button is-warning is-small is-fullwidth" v-tooltip="'Edit'"
@click="editItem(item)">
<span class="icon"><i class="fa-solid fa-cog" /></span>
<span class="icon"><i class="fa-solid fa-edit" /></span>
</button>
</div>
<div class="control">
@ -162,7 +168,7 @@
<div class="card-footer mt-auto">
<div class="card-footer-item">
<button class="button is-warning is-fullwidth" @click="editItem(item);">
<span class="icon"><i class="fa-solid fa-trash-can" /></span>
<span class="icon"><i class="fa-solid fa-edit" /></span>
<span>Edit</span>
</button>
</div>
@ -200,9 +206,6 @@
The other keys <code>id</code>, <code>event</code> and <code>created_at</code> will be sent as they are.
</li>
<li>We also send two special headers <code>X-Event-ID</code> and <code>X-Event</code> with the request.</li>
<li>Support for <code>Apprise URLs</code> is in beta and subject to many changes to come, currently the
message field fallback to JSON encoded string of the event if no custom message set by us for that
particular event.</li>
<li>
If you have selected specific presets or events, this will take priority, For example, if you limited the
target to <code>default</code> preset and selected <code>ALL</code> events, only events that reference the
@ -219,7 +222,7 @@
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import type { notification, notificationImport } from '~/types/notification'
import {useConfirm} from '~/composables/useConfirm'
import { useConfirm } from '~/composables/useConfirm'
const toast = useNotification()
const socket = useSocketStore()

19
ui/app/pages/task_definitions.vue
View file

@ -4,11 +4,17 @@
<div class="column is-12 is-clearfix is-unselectable">
<span class="title is-4">
<span class="icon-text">
<span class="icon"><i class="fa-solid fa-diagram-project" /></span>
<span>Task Definitions</span>
<template v-if="isEditorOpen">
<span class="icon"><i class="fa-solid fa-pen-to-square" /></span>
<span>{{ editorTitle }}</span>
</template>
<template v-else>
<span class="icon"><i class="fa-solid fa-diagram-project" /></span>
<span>Task Definitions</span>
</template>
</span>
</span>
<div class="is-pulled-right">
<div class="is-pulled-right" v-if="!isEditorOpen">
<div class="field is-grouped">
<p class="control">
@ -46,7 +52,7 @@
</p>
</div>
</div>
<div class="is-hidden-mobile">
<div class="is-hidden-mobile" v-if="!isEditorOpen">
<span class="subtitle">
Create definitions to turn any website into a downloadable feed of links.
</span>
@ -167,7 +173,8 @@
<Message message_class="has-background-info-90 has-text-dark" title="Loading" icon="fas fa-spinner fa-spin"
message="Loading data. Please wait..." v-if="isLoading" />
<Message title="No definitions" message="No task definitions are configured yet. Create one to get started."
class="is-background-warning-80 has-text-dark" icon="fas fa-exclamation-circle" v-else />
class="is-background-warning-80 has-text-dark" icon="fas fa-exclamation-circle"
v-if="!isLoading && !isEditorOpen" />
</div>
</div>
@ -257,7 +264,7 @@ const currentSummary = computed<TaskDefinitionSummary | undefined>(() => {
const editorTitle = computed<string>(() => {
return 'create' === editorMode.value
? 'Create Task Definition'
: `Edit ${currentSummary.value?.name || 'Task Definition'}`
: `Edit - ${currentSummary.value?.name || 'Task Definition'}`
})
const cloneDocument = (document: TaskDefinitionDocument): TaskDefinitionDocument => {

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

@ -6,7 +6,7 @@
<span class="icon-text">
<template v-if="toggleForm">
<span class="icon"><i class="fa-solid" :class="{ 'fa-edit': taskRef, 'fa-plus': !taskRef }" /></span>
<span>{{ taskRef ? `Edit - ${task.name}` : 'Add' }}</span>
<span>{{ taskRef ? `Edit - ${task.name}` : 'Add new task' }}</span>
</template>
<template v-else>
<span class="icon"><i class="fa-solid fa-tasks" /></span>