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 000000000..a7a079d24
--- /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 9e16a556f..3bcbec995 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 7ba3f7fe4..6ad18871d 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 f57cfbbc3..2bc508a91 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 a5c0a0f45..084ef34c4 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 2772ec208..0d0e84565 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 2f543a752..b50d4a550 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 3777318f1..e5dd73731 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 a33478c9d..716cc66e1 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 ae0ae2096..fc87872e8 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 5ed79ceef..48432232a 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 88c5e892f..c6cf51c52 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>