[web] Revert icon changes (fixes ignored size attribute)

This commit is contained in:
chme
2022-06-15 19:24:51 +02:00
parent c020905f2e
commit 58c6b2891c
65 changed files with 350 additions and 256 deletions

View File

@@ -12,7 +12,7 @@
@click="is_active = !is_active"
>
<span v-text="option.name" />
<mdicon class="icon" name="chevron-down" size="16" />
<span class="icon"><mdicon name="chevron-down" size="16" /></span>
</button>
</div>
<div id="dropdown-menu" class="dropdown-menu" role="menu">

View File

@@ -38,7 +38,9 @@
</div>
<div class="media-right" style="padding-top: 0.7rem">
<a @click.prevent.stop="open_dialog(album.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>
</div>

View File

@@ -19,7 +19,9 @@
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(artist.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>
</div>

View File

@@ -19,7 +19,9 @@
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(composer.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>
</div>

View File

@@ -5,7 +5,9 @@
@click="open_parent_directory()"
>
<figure class="media-left fd-has-action">
<mdicon class="icon" name="subdirectory-arrow-left" size="16" />
<span class="icon"
><mdicon name="subdirectory-arrow-left" size="16"
/></span>
</figure>
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6">..</h1>
@@ -17,7 +19,7 @@
<template v-for="directory in directories" :key="directory.path">
<div class="media" @click="open_directory(directory)">
<figure class="media-left fd-has-action">
<mdicon class="icon" name="folder" size="16" />
<span class="icon"><mdicon name="folder" size="16" /></span>
</figure>
<div class="media-content fd-has-action is-clipped">
<h1
@@ -28,7 +30,9 @@
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(directory)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>
</div>

View File

@@ -15,7 +15,9 @@
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(genre.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>
</div>

View File

@@ -1,11 +1,9 @@
<template>
<div v-if="is_next || !show_only_next_items" class="media">
<div v-if="edit_mode" class="media-left">
<mdicon
class="icon has-text-grey fd-is-movable handle"
name="drag-horizontal"
size="16"
/>
<span class="icon has-text-grey fd-is-movable handle"
><mdicon name="drag-horizontal" size="16"
/></span>
</div>
<div class="media-content fd-has-action is-clipped" @click="play">
<h1

View File

@@ -7,14 +7,18 @@
@click="open_playlist(playlist.item)"
>
<figure class="media-left fd-has-action">
<mdicon class="icon" :name="icon_name(playlist.item)" size="16" />
<span class="icon"
><mdicon :name="icon_name(playlist.item)" size="16"
/></span>
</figure>
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6" v-text="playlist.item.name" />
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(playlist.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>
</div>

View File

@@ -8,7 +8,7 @@
@click="play_track(index, track)"
>
<figure v-if="show_icon" class="media-left fd-has-action">
<mdicon class="icon" name="file-outline" size="16" />
<span class="icon"><mdicon name="file-outline" size="16" /></span>
</figure>
<div class="media-content fd-has-action is-clipped">
<h1
@@ -29,7 +29,9 @@
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(track)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a>
</div>
</div>

View File

@@ -11,7 +11,7 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span
class="is-size-7"
v-text="close_action ? close_action : t('dialog.cancel')"
@@ -22,7 +22,7 @@
class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
@click="$emit('delete')"
>
<mdicon class="icon" name="delete" size="16" />
<span class="icon"><mdicon name="delete" size="16" /></span>
<span class="is-size-7" v-text="delete_action" />
</a>
<a
@@ -30,7 +30,7 @@
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="$emit('ok')"
>
<mdicon class="icon" name="check" size="16" />
<span class="icon"><mdicon name="check" size="16" /></span>
<span class="is-size-7" v-text="ok_action" />
</a>
</footer>

View File

@@ -18,7 +18,9 @@
:placeholder="$t('dialog.add.rss.placeholder')"
:disabled="loading"
/>
<mdicon class="icon is-left" name="rss" size="16" />
<span class="icon is-left"
><mdicon name="rss" size="16"
/></span>
</p>
<p class="help" v-text="$t('dialog.add.rss.help')" />
</div>
@@ -26,7 +28,7 @@
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item button is-loading">
<mdicon class="icon" name="web" size="16" />
<span class="icon"><mdicon name="web" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.add.rss.processing')"
@@ -38,14 +40,16 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<mdicon class="icon" name="cancel" size="16" />
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="add_stream"
>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
</a>
</footer>

View File

@@ -18,14 +18,16 @@
:placeholder="$t('dialog.add.stream.placeholder')"
:disabled="loading"
/>
<mdicon class="icon is-left" name="web" size="16" />
<span class="icon is-left"
><mdicon name="web" size="16"
/></span>
</p>
</div>
</form>
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span class="icon"><mdicon name="web" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.add.stream.loading')"
@@ -37,21 +39,23 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<mdicon class="icon" name="cancel" size="16" />
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.add.stream.cancel')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="add_stream">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="play"
>
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
</a>
</footer>

View File

@@ -88,15 +88,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.album.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.album.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.album.play')" />
</a>
</footer>

View File

@@ -40,15 +40,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.artist.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.artist.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.artist.play')" />
</a>
</footer>

View File

@@ -39,18 +39,22 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.composer.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.composer.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.composer.play')" />
</a>
</footer>

View File

@@ -10,18 +10,22 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.directory.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.directory.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.directory.play')" />
</a>
</footer>

View File

@@ -33,15 +33,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.genre.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.genre.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.genre.play')" />
</a>
</footer>

View File

@@ -33,18 +33,22 @@
</div>
<footer v-if="!playlist.folder" class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.playlist.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.playlist.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.playlist.play')" />
</a>
</footer>

View File

@@ -18,14 +18,16 @@
placeholder="Playlist name"
:disabled="loading"
/>
<mdicon class="icon is-left" name="file-music" size="16" />
<span class="icon is-left"
><mdicon name="file-music" size="16"
/></span>
</p>
</div>
</form>
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span class="icon"><mdicon name="web" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.playlist.save.saving')"
@@ -37,7 +39,7 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<mdicon class="icon" name="cancel" size="16" />
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.playlist.save.cancel')"
@@ -47,7 +49,9 @@
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="save"
>
<mdicon class="icon" name="content-save" size="16" />
<span class="icon"
><mdicon name="content-save" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.playlist.save.save')"

View File

@@ -137,14 +137,14 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="remove">
<mdicon class="icon" name="delete" size="16" />
<span class="icon"><mdicon name="delete" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.queue-item.remove')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.queue-item.play')" />
</a>
</footer>

View File

@@ -30,7 +30,7 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<mdicon class="icon" name="cancel" size="16" />
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.remote-pairing.cancel')"
@@ -40,7 +40,7 @@
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="kickoff_pairing"
>
<mdicon class="icon" name="cellphone" size="16" />
<span class="icon"><mdicon name="cellphone" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.remote-pairing.pair')"

View File

@@ -168,15 +168,19 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.track.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.track.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play_track">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.track.play')" />
</a>
</footer>

View File

@@ -12,7 +12,7 @@
<div class="navbar-brand fd-expanded">
<!-- Link to queue -->
<navbar-item-link to="/" exact>
<mdicon class="icon" name="playlist-play" size="24" />
<span class="icon"><mdicon name="playlist-play" size="24" /></span>
</navbar-item-link>
<!-- Now playing artist/title (not visible on "now playing" page) -->
<router-link
@@ -71,11 +71,11 @@
class="navbar-item fd-margin-left-auto is-hidden-desktop"
@click="show_player_menu = !show_player_menu"
>
<mdicon
class="icon"
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/>
<span class="icon"
><mdicon
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/></span>
</a>
<!-- Player menu dropup menu (only visible on desktop) -->
<div
@@ -86,11 +86,11 @@
class="navbar-link is-arrowless"
@click="show_player_menu = !show_player_menu"
>
<mdicon
class="icon"
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/>
<span class="icon"
><mdicon
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/></span>
</a>
<div
class="navbar-dropdown is-right is-boxed"
@@ -105,11 +105,11 @@
class="button is-white is-small"
@click="toggle_mute_volume"
>
<mdicon
class="icon"
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/>
<span class="icon"
><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/></span>
</a>
</div>
<div class="level-item fd-expanded">
@@ -145,17 +145,15 @@
<a
class="button is-white is-small"
:class="{ 'is-loading': loading }"
>
<span
><span
class="icon fd-has-action"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading
}"
@click="togglePlay"
>
<mdicon name="broadcast" size="18" />
</span>
><mdicon name="broadcast" size="18"
/></span>
</a>
</div>
<div class="level-item fd-expanded">
@@ -169,13 +167,12 @@
href="stream.mp3"
style="margin-left: 5px"
target="_blank"
>
<mdicon
class="icon"
name="open-in-new"
size="16"
style="vertical-align: middle"
/>
><span class="icon"
><mdicon
name="open-in-new"
size="16"
style="vertical-align: middle"
/></span>
</a>
</p>
<Slider
@@ -231,11 +228,11 @@
<div class="level-left fd-expanded">
<div class="level-item" style="flex-grow: 0">
<a class="button is-white is-small" @click="toggle_mute_volume">
<mdicon
class="icon"
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/>
<span class="icon"
><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/></span>
</a>
</div>
<div class="level-item fd-expanded">
@@ -278,8 +275,7 @@
'is-loading': loading
}"
@click="togglePlay"
>
<mdicon name="broadcast" size="16" />
><mdicon name="radio-tower" size="16" />
</span>
</a>
</div>
@@ -294,13 +290,12 @@
href="stream.mp3"
style="margin-left: 5px"
target="_blank"
>
<mdicon
class="icon"
name="open-in-new"
size="16"
style="vertical-align: middle"
/>
><span class="icon"
><mdicon
name="open-in-new"
size="16"
style="vertical-align: middle"
/></span>
</a>
</p>
<Slider

View File

@@ -8,9 +8,8 @@
class="icon fd-has-action"
:class="{ 'has-text-grey-light': !output.selected }"
@click="set_enabled"
>
<mdicon :name="type_class" size="18" :title="output.type" />
</span>
><mdicon :name="type_class" size="18" :title="output.type"
/></span>
</a>
</div>
<div class="level-item fd-expanded">

View File

@@ -7,25 +7,25 @@
>
<div class="navbar-brand">
<navbar-item-link v-if="is_visible_playlists" to="/playlists">
<mdicon class="icon" name="music-box-multiple" size="16" />
<span class="icon"><mdicon name="music-box-multiple" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_music" to="/music">
<mdicon class="icon" name="music" size="16" />
<span class="icon"><mdicon name="music" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_podcasts" to="/podcasts">
<mdicon class="icon" name="podcast" size="16" />
<span class="icon"><mdicon name="microphone" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks">
<mdicon class="icon" name="book-open-variant" size="16" />
<span class="icon"><mdicon name="book-open-variant" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_radio" to="/radio">
<mdicon class="icon" name="radio-tower" size="16" />
<span class="icon"><mdicon name="radio" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_files" to="/files">
<mdicon class="icon" name="folder-open" size="16" />
<span class="icon"><mdicon name="folder-open" size="16" /></span>
</navbar-item-link>
<navbar-item-link v-if="is_visible_search" to="/search">
<mdicon class="icon" name="magnify" size="16" />
<span class="icon"><mdicon name="magnify" size="16" /></span>
</navbar-item-link>
<div
class="navbar-burger"
@@ -47,7 +47,9 @@
@click="on_click_outside_settings"
>
<a class="navbar-link is-arrowless">
<mdicon class="icon is-hidden-touch" name="menu" size="24" />
<span class="icon is-hidden-touch"
><mdicon name="menu" size="24"
/></span>
<span
class="is-hidden-desktop has-text-weight-bold"
v-text="$t('navigation.title')"
@@ -55,11 +57,13 @@
</a>
<div class="navbar-dropdown is-right">
<navbar-item-link to="/playlists">
<mdicon class="icon" name="music-box-multiple" size="16" />
<span class="icon"
><mdicon name="music-box-multiple" size="16"
/></span>
<b v-text="$t('navigation.playlists')" />
</navbar-item-link>
<navbar-item-link to="/music" exact>
<mdicon class="icon" name="music" size="16" />
<span class="icon"><mdicon name="music" size="16" /></span>
<b v-text="$t('navigation.music')" />
</navbar-item-link>
<navbar-item-link to="/music/artists">
@@ -87,23 +91,25 @@
/>
</navbar-item-link>
<navbar-item-link to="/podcasts">
<mdicon class="icon" name="podcast" size="16" />
<span class="icon"><mdicon name="microphone" size="16" /></span>
<b v-text="$t('navigation.podcasts')" />
</navbar-item-link>
<navbar-item-link to="/audiobooks">
<mdicon class="icon" name="book-open-variant" size="16" />
<span class="icon"
><mdicon name="book-open-variant" size="16"
/></span>
<b v-text="$t('navigation.audiobooks')" />
</navbar-item-link>
<navbar-item-link to="/radio">
<mdicon class="icon" name="radio-tower" size="16" />
<span class="icon"><mdicon name="radio" size="16" /></span>
<b v-text="$t('navigation.radio')" />
</navbar-item-link>
<navbar-item-link to="/files">
<mdicon class="icon" name="folder-open" size="16" />
<span class="icon"><mdicon name="folder-open" size="16" /></span>
<b v-text="$t('navigation.files')" />
</navbar-item-link>
<navbar-item-link to="/search">
<mdicon class="icon" name="magnify" size="16" />
<span class="icon"><mdicon name="magnify" size="16" /></span>
<b v-text="$t('navigation.search')" />
</navbar-item-link>
<hr class="fd-navbar-divider" />

View File

@@ -1,6 +1,6 @@
<template>
<a :class="{ 'is-warning': is_consume }" @click="toggle_consume_mode">
<mdicon class="icon" name="fire" :size="icon_size" />
<span class="icon"><mdicon name="fire" :size="icon_size" /></span>
</a>
</template>

View File

@@ -1,6 +1,6 @@
<template>
<a :disabled="disabled" @click="play_next">
<mdicon class="icon" name="skip-forward" :size="icon_size" />
<span class="icon"><mdicon name="skip-forward" :size="icon_size" /></span>
</a>
</template>

View File

@@ -1,6 +1,6 @@
<template>
<a :disabled="disabled" @click="toggle_play_pause">
<mdicon class="icon" :name="icon_name" :size="icon_size" />
<span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
</a>
</template>

View File

@@ -1,6 +1,6 @@
<template>
<a :disabled="disabled" @click="play_previous">
<mdicon class="icon" name="skip-backward" :size="icon_size" />
<span class="icon"><mdicon name="skip-backward" :size="icon_size" /></span>
</a>
</template>

View File

@@ -1,6 +1,6 @@
<template>
<a :class="{ 'is-warning': !is_repeat_off }" @click="toggle_repeat_mode">
<mdicon class="icon" :name="icon_name" :size="icon_size" />
<span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
</a>
</template>

View File

@@ -1,6 +1,6 @@
<template>
<a v-if="visible" :disabled="disabled" @click="seek">
<mdicon class="icon" name="rewind" :size="icon_size" />
<span class="icon"><mdicon name="rewind" :size="icon_size" /></span>
</a>
</template>

View File

@@ -1,6 +1,6 @@
<template>
<a v-if="visible" :disabled="disabled" @click="seek">
<mdicon class="icon" name="fast-forward" :size="icon_size" />
<span class="icon"><mdicon name="fast-forward" :size="icon_size" /></span>
</a>
</template>

View File

@@ -1,6 +1,6 @@
<template>
<a :class="{ 'is-warning': is_shuffle }" @click="toggle_shuffle_mode">
<mdicon class="icon" :name="icon_name" :size="icon_size" />
<span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
</a>
</template>

View File

@@ -57,21 +57,25 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.album.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.album.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.album.play')"

View File

@@ -37,21 +37,25 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.artist.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.artist.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.artist.play')"

View File

@@ -42,21 +42,25 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.playlist.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.playlist.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.playlist.play')"

View File

@@ -72,21 +72,25 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.track.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.track.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="icon"><mdicon name="play" size="16" /></span>
<span
class="is-size-7"
v-text="$t('dialog.spotify.track.play')"

View File

@@ -12,11 +12,9 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<mdicon
class="icon is-small"
name="account-music"
size="16"
/>
<span class="icon is-small"
><mdicon name="account-music" size="16"
/></span>
<span v-text="$t('page.audiobooks.tabs.authors')" />
</a>
</li>
@@ -28,7 +26,9 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="album" size="16" />
<span class="icon is-small"
><mdicon name="album" size="16"
/></span>
<span v-text="$t('page.audiobooks.tabs.audiobooks')" />
</a>
</li>

View File

@@ -12,7 +12,9 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="web" size="16" />
<span class="icon is-small"
><mdicon name="web" size="16"
/></span>
<span v-text="$t('page.browse.tabs.browse')" />
</a>
</li>
@@ -24,11 +26,9 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<mdicon
class="icon is-small"
name="account-music"
size="16"
/>
<span class="icon is-small"
><mdicon name="account-music" size="16"
/></span>
<span v-text="$t('page.browse.tabs.artists')" />
</a>
</li>
@@ -40,7 +40,9 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="album" size="16" />
<span class="icon is-small"
><mdicon name="album" size="16"
/></span>
<span v-text="$t('page.browse.tabs.albums')" />
</a>
</li>
@@ -52,7 +54,9 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="speaker" size="16" />
<span class="icon is-small"
><mdicon name="speaker" size="16"
/></span>
<span v-text="$t('page.browse.tabs.genres')" />
</a>
</li>
@@ -64,11 +68,9 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<mdicon
class="icon is-small"
name="book-open-page-variant"
size="16"
/>
<span class="icon is-small"
><mdicon name="book-open-page-variant" size="16"
/></span>
<span v-text="$t('page.browse.tabs.composers')" />
</a>
</li>
@@ -81,7 +83,9 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="spotify" size="16" />
<span class="icon is-small"
><mdicon name="spotify" size="16"
/></span>
<span v-text="$t('page.browse.tabs.spotify')" />
</a>
</li>

View File

@@ -11,7 +11,9 @@
}"
>
<a @click="search_library">
<mdicon class="icon is-small" name="bookshelf" size="16" />
<span class="icon is-small"
><mdicon name="bookshelf" size="16"
/></span>
<span v-text="$t('page.search.tabs.library')" />
</a>
</li>
@@ -21,7 +23,9 @@
}"
>
<a @click="search_spotify">
<mdicon class="icon is-small" name="spotify" size="16" />
<span class="icon is-small"
><mdicon name="spotify" size="16"
/></span>
<span v-text="$t('page.search.tabs.spotify')" />
</a>
</li>