From 8b4f83c3bc7ac169cd94333dd2b867d547552f99 Mon Sep 17 00:00:00 2001
From: jovuit <jvuitton@disroot.org>
Date: Mon, 18 Feb 2019 10:01:57 +0100
Subject: [PATCH] Front enhancements
---
changes/changelog.d/buttons.enhancement | 1 +
front/src/components/audio/PlayButton.vue | 2 +-
front/src/components/favorites/TrackFavoriteIcon.vue | 2 +-
front/src/components/library/Album.vue | 6 +++---
front/src/components/library/Artist.vue | 2 +-
front/src/components/library/Track.vue | 8 ++++----
front/src/components/library/radios/Builder.vue | 3 ++-
front/src/components/playlists/TrackPlaylistIcon.vue | 2 +-
front/src/components/radios/Button.vue | 7 +++----
front/src/components/radios/Card.vue | 1 +
front/src/views/playlists/Detail.vue | 2 +-
front/src/views/radios/Detail.vue | 2 +-
12 files changed, 20 insertions(+), 18 deletions(-)
create mode 100644 changes/changelog.d/buttons.enhancement
diff --git a/changes/changelog.d/buttons.enhancement b/changes/changelog.d/buttons.enhancement
new file mode 100644
index 00000000..a7a079d2
--- /dev/null
+++ b/changes/changelog.d/buttons.enhancement
@@ -0,0 +1 @@
+The buttons displaying an icon now always show a little divider between the icon and the text. (!620)
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 9e16a556..3bcbec99 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -1,5 +1,5 @@
<template>
- <span :class="['ui', {'tiny': discrete}, {'buttons': !dropdownOnly && !iconOnly}]">
+ <span :title="title" :class="['ui', {'tiny': discrete}, {'icon': !discrete}, {'buttons': !dropdownOnly && !iconOnly}]">
<button
v-if="!dropdownOnly"
:title="labels.playNow"
diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index 7ba3f7fe..6ad18871 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -1,5 +1,5 @@
<template>
- <button @click="$store.dispatch('favorites/toggle', track.id)" v-if="button" :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'button']">
+ <button @click="$store.dispatch('favorites/toggle', track.id)" v-if="button" :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'labeled', 'button']">
<i class="heart icon"></i>
<translate v-if="isFavorite" :translate-context="'Content/Track/Button.Message'">In favorites</translate>
<translate v-else :translate-context="'Content/Track/Button.Message'">Add to favorites</translate>
diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue
index f57cfbbc..2bc508a9 100644
--- a/front/src/components/library/Album.vue
+++ b/front/src/components/library/Album.vue
@@ -23,18 +23,18 @@
<translate :translate-context="'Content/*/Button.Label/Verb, Short'">Play all</translate>
</play-button>
- <a :href="wikipediaUrl" target="_blank" class="ui button">
+ <a :href="wikipediaUrl" target="_blank" class="ui icon labeled button">
<i class="wikipedia w icon"></i>
<translate :translate-context="'Content/*/Button.Label/Verb'">Search on Wikipedia</translate>
</a>
- <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui button">
+ <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui icon labeled button">
<i class="external icon"></i>
<translate :translate-context="'Content/*/Button.Label/Verb'">View on MusicBrainz</translate>
</a>
<template v-if="publicLibraries.length > 0">
<button
@click="showEmbedModal = !showEmbedModal"
- class="ui button">
+ class="ui button icon labeled">
<i class="code icon"></i>
<translate :translate-context="'Content/*/Button.Label/Verb'">Embed</translate>
</button>
diff --git a/front/src/components/library/Artist.vue b/front/src/components/library/Artist.vue
index a5c0a0f4..084ef34c 100644
--- a/front/src/components/library/Artist.vue
+++ b/front/src/components/library/Artist.vue
@@ -27,7 +27,7 @@
<translate :translate-context="'Content/Artist/Button.Label/Verb'">Play all albums</translate>
</play-button>
- <a :href="wikipediaUrl" target="_blank" class="ui button">
+ <a :href="wikipediaUrl" target="_blank" class="ui icon labeled button">
<i class="wikipedia w icon"></i>
<translate :translate-context="'Content/*/Button.Label/Verb'">Search on Wikipedia</translate>
</a>
diff --git a/front/src/components/library/Track.vue b/front/src/components/library/Track.vue
index 2772ec20..0d0e8456 100644
--- a/front/src/components/library/Track.vue
+++ b/front/src/components/library/Track.vue
@@ -43,22 +43,22 @@
<track-favorite-icon :track="track" :button="true"></track-favorite-icon>
<track-playlist-icon :button="true" v-if="$store.state.auth.authenticated" :track="track"></track-playlist-icon>
- <a :href="wikipediaUrl" target="_blank" class="ui button">
+ <a :href="wikipediaUrl" target="_blank" class="ui icon labeled button">
<i class="wikipedia w icon"></i>
<translate :translate-context="'Content/*/Link/Verb'">Search on Wikipedia</translate>
</a>
- <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui button">
+ <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui icon labeled button">
<i class="external icon"></i>
<translate :translate-context="'Content/*/Link/Verb'">View on MusicBrainz</translate>
</a>
- <a v-if="upload" :href="downloadUrl" target="_blank" class="ui button">
+ <a v-if="upload" :href="downloadUrl" target="_blank" class="ui icon labeled button">
<i class="download icon"></i>
<translate :translate-context="'Content/Track/Link/Verb'">Download</translate>
</a>
<template v-if="publicLibraries.length > 0">
<button
@click="showEmbedModal = !showEmbedModal"
- class="ui button">
+ class="ui icon labeled button">
<i class="code icon"></i>
<translate :translate-context="'Content/Track/Button.Label/Verb'">Embed</translate>
</button>
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index 2f543a75..b50d4a55 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/front/src/components/library/radios/Builder.vue
@@ -26,10 +26,11 @@
<label for="description"><translate :translate-context="'Content/Radio/Input.Label'">Description</translate></label>
<textarea rows="2" id="description" type="text" v-model="radioDesc" :placeholder="labels.placeholder.description" />
</div>
- <div class="inline field">
+ <div class="ui toggle checkbox">
<input id="public" type="checkbox" v-model="isPublic" />
<label for="public"><translate :translate-context="'Content/Radio/Checkbox.Label/Verb'">Display publicly</translate></label>
</div>
+ <div class="ui hidden divider"></div>
<button :disabled="!canSave" @click="save" :class="['ui', 'green', {loading: isLoading}, 'button']">
<translate :translate-context="'Content/Radio/Button.Label/Verb'">Save</translate>
</button>
diff --git a/front/src/components/playlists/TrackPlaylistIcon.vue b/front/src/components/playlists/TrackPlaylistIcon.vue
index 3777318f..e5dd7373 100644
--- a/front/src/components/playlists/TrackPlaylistIcon.vue
+++ b/front/src/components/playlists/TrackPlaylistIcon.vue
@@ -2,7 +2,7 @@
<button
@click="$store.commit('playlists/chooseTrack', track)"
v-if="button"
- :class="['ui', 'button']">
+ :class="['ui', 'icon', 'labeled', 'button']">
<i class="list icon"></i>
<translate :translate-context="'Sidebar/Player/Icon.Tooltip/Verb'">Add to playlist…</translate>
</button>
diff --git a/front/src/components/radios/Button.vue b/front/src/components/radios/Button.vue
index a33478c9..716cc66e 100644
--- a/front/src/components/radios/Button.vue
+++ b/front/src/components/radios/Button.vue
@@ -1,9 +1,8 @@
<template>
- <button @click="toggleRadio" :class="['ui', 'blue', {'inverted': running}, 'button']">
+ <button @click="toggleRadio" :class="['ui', 'blue', {'inverted': running}, 'icon', 'labeled', 'button']">
<i class="ui feed icon"></i>
- <template v-if="running"><translate>Stop</translate></template>
- <template v-else><translate>Start</translate></template>
- radio
+ <template v-if="running"><translate>Stop radio</translate></template>
+ <template v-else><translate>Start radio</translate></template>
</button>
</template>
diff --git a/front/src/components/radios/Card.vue b/front/src/components/radios/Card.vue
index ae0ae209..fc87872e 100644
--- a/front/src/components/radios/Card.vue
+++ b/front/src/components/radios/Card.vue
@@ -15,6 +15,7 @@
</div>
<div class="extra content">
<user-link v-if="radio.user" :user="radio.user" class="left floated" />
+ <div class="ui hidden divider"></div>
<radio-button class="right floated button" :type="type" :custom-radio-id="customRadioId"></radio-button>
<router-link
class="ui basic yellow button right floated"
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 5ed79cee..48432232 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -24,7 +24,7 @@
<div class="ui hidden divider"></div>
<play-button class="orange" :is-playable="playlist.is_playable" :tracks="tracks"><translate :translate-context="'Content/*/Button.Label/Verb, Short'">Play all</translate></play-button>
<button
- class="ui icon button"
+ class="ui icon labeled button"
v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id"
@click="edit = !edit">
<i class="pencil icon"></i>
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index 88c5e892..c6cf51c5 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -18,7 +18,7 @@
<div class="ui hidden divider"></div>
<radio-button type="custom" :custom-radio-id="radio.id"></radio-button>
<template v-if="$store.state.auth.username === radio.user.username">
- <router-link class="ui icon button" :to="{name: 'library.radios.edit', params: {id: radio.id}}" exact>
+ <router-link class="ui icon labeled button" :to="{name: 'library.radios.edit', params: {id: radio.id}}" exact>
<i class="pencil icon"></i>
Edit…
</router-link>
--
GitLab