Front enhancements

changes/changelog.d/buttons.enhancement

+The buttons displaying an icon now always show a little divider between the icon and the text. (!620)

front/src/components/audio/PlayButton.vue

 <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"

front/src/components/favorites/TrackFavoriteIcon.vue

  <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>

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>

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>

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>

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>

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>

front/src/components/radios/Button.vue

 <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>
 

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"

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>

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>