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

Give more control over the toasts.

Browse source
This commit is contained in:
arabcoders 2025-06-03 22:37:21 +03:00
parent 38bf6af1fc
commit 1de2de9750
2 changed files with 45 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
ui/components/Settings.vue
View file

@ -12,7 +12,7 @@
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-6"> <div class="column is-6">
<div class="field"> <div class="field">
<label class="label" for="random_bg">Color scheme</label> <label class="label">Color scheme</label>
<div class="control"> <div class="control">
<label for="auto" class="radio"> <label for="auto" class="radio">
<input id="auto" type="radio" v-model="selectedTheme" value="auto"> <input id="auto" type="radio" v-model="selectedTheme" value="auto">
@ -81,7 +81,7 @@
</div> </div>
<div class="field"> <div class="field">
<label class="label" for="allow_toasts">Show notification toasts</label> <label class="label" for="allow_toasts">Show toasts</label>
<div class="control"> <div class="control">
<input id="allow_toasts" type="checkbox" class="switch is-success" v-model="allow_toasts"> <input id="allow_toasts" type="checkbox" class="switch is-success" v-model="allow_toasts">
<label for="allow_toasts" class="is-unselectable"> <label for="allow_toasts" class="is-unselectable">
@ -95,6 +95,34 @@
</span> </span>
</p> </p>
</div> </div>
<div class="field">
<label class="label">Toasts position</label>
<div class="control">
<div class="select is-fullwidth">
<select v-model="toast_position">
<option :value="POSITION.TOP_RIGHT">{{ POSITION.TOP_RIGHT }}</option>
<option :value="POSITION.TOP_CENTER">{{ POSITION.TOP_CENTER }}</option>
<option :value="POSITION.TOP_LEFT">{{ POSITION.TOP_LEFT }}</option>
<option :value="POSITION.BOTTOM_RIGHT">{{ POSITION.BOTTOM_RIGHT }}</option>
<option :value="POSITION.BOTTOM_CENTER">{{ POSITION.BOTTOM_CENTER }}</option>
<option :value="POSITION.BOTTOM_LEFT">{{ POSITION.BOTTOM_LEFT }}</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label" for="dismiss_on_click">Dismiss toasts on click</label>
<div class="control">
<input id="dismiss_on_click" type="checkbox" class="switch is-success"
v-model="toast_dismiss_on_click">
<label for="dismiss_on_click" class="is-unselectable">
&nbsp;{{ toast_dismiss_on_click ? 'Enabled' : 'Disabled' }}
</label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -103,10 +131,9 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { useStorage } from '@vueuse/core' import { useStorage } from '@vueuse/core'
import { POSITION } from 'vue-toastification'
defineProps({ defineProps({
isLoading: { isLoading: {
@ -120,5 +147,6 @@ const bg_opacity = useStorage('random_bg_opacity', 0.85)
const selectedTheme = useStorage('theme', 'auto') const selectedTheme = useStorage('theme', 'auto')
const allow_toasts = useStorage('allow_toasts', true) const allow_toasts = useStorage('allow_toasts', true)
const reduce_confirm = useStorage('reduce_confirm', false) const reduce_confirm = useStorage('reduce_confirm', false)
const toast_position = useStorage('toast_position', POSITION.TOP_RIGHT)
const toast_dismiss_on_click = useStorage('toast_dismiss_on_click', true)
</script> </script>

13
ui/composables/useNotification.ts
View file

@ -1,13 +1,17 @@
import { useStorage } from '@vueuse/core' import { useStorage } from '@vueuse/core'
import { useToast } from "vue-toastification" import { POSITION, useToast } from "vue-toastification"
type notificationType = 'info' | 'success' | 'warning' | 'error' type notificationType = 'info' | 'success' | 'warning' | 'error'
type notificationOptions = { type notificationOptions = {
timeout?: number, timeout?: number,
force?: boolean, force?: boolean,
closeOnClick?: boolean,
position?: POSITION
} }
const allowToast = useStorage<boolean>('allow_toasts', true) const allowToast = useStorage<boolean>('allow_toasts', true)
const toastPosition = useStorage<POSITION>('toast_position', POSITION.TOP_RIGHT)
const toastDismissOnClick = useStorage<boolean>('toast_dismiss_on_click', true)
const toast = useToast() const toast = useToast()
function notify(type: notificationType, message: string, opts?: notificationOptions): void { function notify(type: notificationType, message: string, opts?: notificationOptions): void {
@ -20,6 +24,13 @@ function notify(type: notificationType, message: string, opts?: notificationOpti
opts = {} opts = {}
} }
if (opts?.force) {
delete opts.force
}
opts.closeOnClick = toastDismissOnClick.value
opts.position = toastPosition.value ?? POSITION.TOP_RIGHT
switch (type) { switch (type) {
case 'info': case 'info':
toast.info(message, opts) toast.info(message, opts)