From 73db86308019f03c2aabc264b337fd6a7478b16f Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Wed, 18 Apr 2018 17:39:52 +0100
Subject: [PATCH] i18n: playlists components
---
front/src/components/playlists/Card.vue | 7 ++++--
front/src/components/playlists/Editor.vue | 20 +++++++++--------
front/src/components/playlists/Form.vue | 22 +++++++++----------
.../components/playlists/PlaylistModal.vue | 22 +++++++++----------
.../playlists/TrackPlaylistIcon.vue | 4 ++--
5 files changed, 40 insertions(+), 35 deletions(-)
diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index 6dd1b0a0ce..670b43194b 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -10,13 +10,16 @@
<i class="user icon"></i> {{ playlist.user.username }}
</div>
<div class="meta">
- <i class="clock icon"></i> Updated <human-date :date="playlist.modification_date"></human-date>
+ <i class="clock icon"></i>
+ <i18next path="Updated {%date%}">
+ <human-date :date="playlist.modification_date" />
+ </i18next>
</div>
</div>
<div class="extra content">
<span>
<i class="sound icon"></i>
- {{ playlist.tracks_count }} tracks
+ {{ $t('{%count%} tracks', { count: playlist.tracks_count }) }}
</span>
<play-button class="mini basic orange right floated" :playlist="playlist">Play all</play-button>
</div>
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index c668857ea1..c036737ce0 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -2,16 +2,16 @@
<div class="ui text container">
<playlist-form @updated="$emit('playlist-updated', $event)" :title="false" :playlist="playlist"></playlist-form>
<h3 class="ui top attached header">
- Playlist editor
+ {{ $t('Playlist editor') }}
</h3>
<div class="ui attached segment">
<template v-if="status === 'loading'">
<div class="ui active tiny inline loader"></div>
- Syncing changes to server...
+ {{ $t('Syncing changes to server...') }}
</template>
<template v-else-if="status === 'errored'">
<i class="red close icon"></i>
- An error occured while saving your changes
+ {{ $t('An error occured while saving your changes') }}
<div v-if="errors.length > 0" class="ui negative message">
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
@@ -19,7 +19,7 @@
</div>
</template>
<template v-else-if="status === 'saved'">
- <i class="green check icon"></i> Changes synced with server
+ <i class="green check icon"></i> {{ $t('Changes synced with server') }}
</template>
</div>
<div class="ui bottom attached segment">
@@ -28,13 +28,15 @@
:disabled="queueTracks.length === 0"
:class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
title="Copy tracks from current queue to playlist">
- <i class="plus icon"></i> Insert from queue ({{ queueTracks.length }} tracks)</div>
+ <i class="plus icon"></i>
+ {{ $t('Insert from queue ({%count%} tracks)', { count: queueTracks.length }) }}
+ </div>
<dangerous-button :disabled="plts.length === 0" class="labeled right floated icon" color='yellow' :action="clearPlaylist">
- <i class="eraser icon"></i> Clear playlist
- <p slot="modal-header">Do you want to clear the playlist "{{ playlist.name }}"?</p>
- <p slot="modal-content">This will remove all tracks from this playlist and cannot be undone.</p>
- <p slot="modal-confirm">Clear playlist</p>
+ <i class="eraser icon"></i> {{ $t('Clear playlist') }}
+ <p slot="modal-header">{{ $t('Do you want to clear the playlist "{%name%}"?', { name: playlist.name }) }}</p>
+ <p slot="modal-content">{{ $t('This will remove all tracks from this playlist and cannot be undone.') }}</p>
+ <p slot="modal-confirm">{{ $t('Clear playlist') }}</p>
</dangerous-button>
<div class="ui hidden divider"></div>
<template v-if="plts.length > 0">
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 634e310bcd..1fafe2d4a6 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -1,29 +1,29 @@
<template>
<form class="ui form" @submit.prevent="submit()">
- <h4 v-if="title" class="ui header">Create a new playlist</h4>
+ <h4 v-if="title" class="ui header">{{ $t('Create a new playlist') }}</h4>
<div v-if="success" class="ui positive message">
<div class="header">
<template v-if="playlist">
- Playlist updated
+ {{ $t('Playlist updated') }}
</template>
<template v-else>
- Playlist created
+ {{ $t('Playlist created') }}
</template>
</div>
</div>
<div v-if="errors.length > 0" class="ui negative message">
- <div class="header">We cannot create the playlist</div>
+ <div class="header">{{ $t('We cannot create the playlist') }}</div>
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
<div class="three fields">
<div class="field">
- <label>Playlist name</label>
+ <label>{{ $t('Playlist name') }}</label>
<input v-model="name" required type="text" placeholder="My awesome playlist" />
</div>
<div class="field">
- <label>Playlist visibility</label>
+ <label>{{ $t('Playlist visibility') }}</label>
<select class="ui dropdown" v-model="privacyLevel">
<option :value="c.value" v-for="c in privacyLevelChoices">{{ c.label }}</option>
</select>
@@ -31,8 +31,8 @@
<div class="field">
<label> </label>
<button :class="['ui', 'fluid', {'loading': isLoading}, 'button']" type="submit">
- <template v-if="playlist">Update playlist</template>
- <template v-else>Create playlist</template>
+ <template v-if="playlist">{{ $t('Update playlist') }}</template>
+ <template v-else>{{ $t('Create playlist') }}</template>
</button>
</div>
</div>
@@ -61,15 +61,15 @@ export default {
privacyLevelChoices: [
{
value: 'me',
- label: 'Nobody except me'
+ label: this.$t('Nobody except me')
},
{
value: 'instance',
- label: 'Everyone on this instance'
+ label: this.$t('Everyone on this instance')
},
{
value: 'everyone',
- label: 'Everyone'
+ label: this.$t('Everyone')
}
]
}
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 5fdf585dfb..03e36ee884 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -1,14 +1,14 @@
<template>
<modal @update:show="update" :show="$store.state.playlists.showModal">
<div class="header">
- Manage playlists
+ {{ $t('Manage playlists') }}
</div>
<div class="scrolling content">
<div class="description">
<template v-if="track">
- <h4 class="ui header">Current track</h4>
+ <h4 class="ui header">{{ $t('Current track') }}</h4>
<div>
- "{{ track.title }}" by {{ track.artist.name }}
+ {{ $t('"{%title%}" by {%artist%}', { title: track.title, artist: track.artist.name }) }}
</div>
<div class="ui divider"></div>
</template>
@@ -16,20 +16,20 @@
<playlist-form></playlist-form>
<div class="ui divider"></div>
<div v-if="errors.length > 0" class="ui negative message">
- <div class="header">We cannot add the track to a playlist</div>
+ <div class="header">{{ $t('We cannot add the track to a playlist') }}</div>
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
</div>
- <h4 class="ui header">Available playlists</h4>
+ <h4 class="ui header">{{ $t('Available playlists') }}</h4>
<table class="ui unstackable very basic table">
<thead>
<tr>
<th></th>
- <th>Name</th>
- <th class="sorted descending">Last modification</th>
- <th>Tracks</th>
+ <th>{{ $t('Name') }}</th>
+ <th class="sorted descending">{{ $t('Last modification') }}</th>
+ <th>{{ $t('Tracks') }}</th>
<th></th>
</tr>
</thead>
@@ -48,9 +48,9 @@
<div
v-if="track"
class="ui green icon basic small right floated button"
- title="Add to this playlist"
+ :title="{{ $t('Add to this playlist') }}"
@click="addToPlaylist(playlist.id)">
- <i class="plus icon"></i> Add track
+ <i class="plus icon"></i> {{ $t('Add track') }}
</div>
</td>
</tr>
@@ -59,7 +59,7 @@
</div>
</div>
<div class="actions">
- <div class="ui cancel button">Cancel</div>
+ <div class="ui cancel button">{{ $t('Cancel') }}</div>
</div>
</modal>
</template>
diff --git a/front/src/components/playlists/TrackPlaylistIcon.vue b/front/src/components/playlists/TrackPlaylistIcon.vue
index bba4c515b0..cd74b4d275 100644
--- a/front/src/components/playlists/TrackPlaylistIcon.vue
+++ b/front/src/components/playlists/TrackPlaylistIcon.vue
@@ -4,13 +4,13 @@
v-if="button"
:class="['ui', 'button']">
<i class="list icon"></i>
- Add to playlist...
+ {{ $t('Add to playlist...') }}
</button>
<i
v-else
@click="$store.commit('playlists/chooseTrack', track)"
:class="['playlist-icon', 'list', 'link', 'icon']"
- title="Add to playlist...">
+ :title="$t('Add to playlist...')">
</i>
</template>
--
GitLab