[web] Streamline the style of button

This commit is contained in:
Alain Nussbaumer 2025-02-16 00:17:55 +01:00
parent f54b2e5b0b
commit aaea7135a0
4 changed files with 21 additions and 11 deletions

View File

@ -7,7 +7,7 @@
<a <a
v-for="button in buttons" v-for="button in buttons"
:key="button.label" :key="button.label"
class="button is-small" class="button is-small is-rounded"
@click="button.handler" @click="button.handler"
v-text="$t(button.label)" v-text="$t(button.label)"
/> />

View File

@ -13,13 +13,13 @@
<div class="level-right"> <div class="level-right">
<div v-if="library.updating"> <div v-if="library.updating">
<a <a
class="button is-small is-loading" class="button is-small is-rounded is-loading"
v-text="$t('page.about.update')" v-text="$t('page.about.update')"
/> />
</div> </div>
<div v-else> <div v-else>
<a <a
class="button is-small" class="button is-small is-rounded"
@click="showUpdateDialog()" @click="showUpdateDialog()"
v-text="$t('page.about.update')" v-text="$t('page.about.update')"
/> />

View File

@ -6,7 +6,7 @@
</template> </template>
<template #heading-right> <template #heading-right>
<div class="buttons is-centered"> <div class="buttons is-centered">
<a class="button is-small" @click="mark_all_played"> <a class="button is-small is-rounded" @click="mark_all_played">
<mdicon class="icon" name="pencil" size="16" /> <mdicon class="icon" name="pencil" size="16" />
<span v-text="$t('page.podcasts.mark-all-played')" /> <span v-text="$t('page.podcasts.mark-all-played')" />
</a> </a>
@ -30,11 +30,18 @@
</template> </template>
<template #heading-right> <template #heading-right>
<div class="buttons is-centered"> <div class="buttons is-centered">
<a v-if="rss.tracks > 0" class="button is-small" @click="update_rss"> <a
v-if="rss.tracks > 0"
class="button is-small is-rounded"
@click="update_rss"
>
<mdicon class="icon" name="refresh" size="16" /> <mdicon class="icon" name="refresh" size="16" />
<span v-text="$t('page.podcasts.update')" /> <span v-text="$t('page.podcasts.update')" />
</a> </a>
<a class="button is-small" @click="open_add_podcast_dialog"> <a
class="button is-small is-rounded"
@click="open_add_podcast_dialog"
>
<mdicon class="icon" name="rss" size="16" /> <mdicon class="icon" name="rss" size="16" />
<span v-text="$t('page.podcasts.add')" /> <span v-text="$t('page.podcasts.add')" />
</a> </a>

View File

@ -11,19 +11,22 @@
<template #heading-right> <template #heading-right>
<div class="buttons is-centered"> <div class="buttons is-centered">
<button <button
class="button is-small" class="button is-small is-rounded"
:class="{ 'is-info': show_only_next_items }" :class="{ 'is-info': show_only_next_items }"
@click="update_show_next_items" @click="update_show_next_items"
> >
<mdicon class="icon" name="arrow-collapse-down" size="16" /> <mdicon class="icon" name="arrow-collapse-down" size="16" />
<span v-text="$t('page.queue.hide-previous')" /> <span v-text="$t('page.queue.hide-previous')" />
</button> </button>
<button class="button is-small" @click="open_add_stream_dialog"> <button
class="button is-small is-rounded"
@click="open_add_stream_dialog"
>
<mdicon class="icon" name="web" size="16" /> <mdicon class="icon" name="web" size="16" />
<span v-text="$t('page.queue.add-stream')" /> <span v-text="$t('page.queue.add-stream')" />
</button> </button>
<button <button
class="button is-small" class="button is-small is-rounded"
:class="{ 'is-info': edit_mode }" :class="{ 'is-info': edit_mode }"
:disabled="queue_items.length === 0" :disabled="queue_items.length === 0"
@click="edit_mode = !edit_mode" @click="edit_mode = !edit_mode"
@ -32,7 +35,7 @@
<span v-text="$t('page.queue.edit')" /> <span v-text="$t('page.queue.edit')" />
</button> </button>
<button <button
class="button is-small" class="button is-small is-rounded"
:disabled="queue_items.length === 0" :disabled="queue_items.length === 0"
@click="queue_clear" @click="queue_clear"
> >
@ -41,7 +44,7 @@
</button> </button>
<button <button
v-if="is_queue_save_allowed" v-if="is_queue_save_allowed"
class="button is-small" class="button is-small is-rounded"
:disabled="queue_items.length === 0" :disabled="queue_items.length === 0"
@click="save_dialog" @click="save_dialog"
> >