From c1b8180fce0b20250d68f0dcd0b646561f2fcd06 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sun, 15 Apr 2018 22:39:10 +0200
Subject: [PATCH] i18n for playlist views
---
front/src/views/playlists/Detail.vue | 24 ++++++++++++------------
front/src/views/playlists/List.vue | 21 +++++++++++----------
2 files changed, 23 insertions(+), 22 deletions(-)
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 2769317e64..61968c2e7e 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <div v-if="isLoading" class="ui vertical segment" v-title="'Playlist'">
+ <div v-if="isLoading" class="ui vertical segment" v-title="$t('Playlist')">
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
</div>
<div v-if="!isLoading && playlist" class="ui head vertical center aligned stripe segment" v-title="playlist.name">
@@ -9,28 +9,28 @@
<i class="circular inverted list yellow icon"></i>
<div class="content">
{{ playlist.name }}
- <div class="sub header">
- Playlist containing {{ playlistTracks.length }} tracks,
- by <username :username="playlist.user.username"></username>
- </div>
+ <i18next tag="div" class="sub header" path="Playlist containing {%0%} tracks, by {%1%}">
+ {{ playlistTracks.length }}
+ <username :username="playlist.user.username"></username>
+ </i18next>
</div>
</h2>
<div class="ui hidden divider"></div>
</button>
- <play-button class="orange" :tracks="tracks">Play all</play-button>
+ <play-button class="orange" :tracks="tracks">{{ $t('Play all') }}</play-button>
<button
class="ui icon button"
v-if="playlist.user.id === $store.state.auth.profile.id"
@click="edit = !edit">
<i class="pencil icon"></i>
- <template v-if="edit">End edition</template>
- <template v-else>Edit...</template>
+ <template v-if="edit">{{ $t('End edition') }}</template>
+ <template v-else>{{ $t('Edit...') }}</template>
</button>
<dangerous-button class="labeled icon" :action="deletePlaylist">
- <i class="trash icon"></i> Delete
- <p slot="modal-header">Do you want to delete the playlist "{{ playlist.name }}"?</p>
- <p slot="modal-content">This will completely delete this playlist and cannot be undone.</p>
- <p slot="modal-confirm">Delete playlist</p>
+ <i class="trash icon"></i> {{ $t('Delete') }}
+ <p slot="modal-header">{{ $t('Do you want to delete the playlist "{% playlist %}"?', {playlist: playlist.name}) }}</p>
+ <p slot="modal-content">{{ $t('This will completely delete this playlist and cannot be undone.') }}</p>
+ <p slot="modal-confirm">{{ $t('Delete playlist') }}</p>
</dangerous-button>
</div>
</div>
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 96aa36c477..32ee5aafaa 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -1,21 +1,21 @@
<template>
- <div v-title="'Playlists'">
+ <div v-title="$t('Playlists')">
<div class="ui vertical stripe segment">
- <h2 class="ui header">Browsing playlists</h2>
+ <h2 class="ui header">{{ $t('Browsing playlists') }}</h2>
<div :class="['ui', {'loading': isLoading}, 'form']">
<template v-if="$store.state.auth.authenticated">
<button
@click="$store.commit('playlists/chooseTrack', null)"
- class="ui basic green button">Manage your playlists</button>
+ class="ui basic green button">{{ $t('Manage your playlists') }}</button>
<div class="ui hidden divider"></div>
</template>
<div class="fields">
<div class="field">
- <label>Search</label>
- <input type="text" v-model="query" placeholder="Enter an playlist name..."/>
+ <label>{{ $t('Search') }}</label>
+ <input type="text" v-model="query" :placeholder="$t('Enter an playlist name...')"/>
</div>
<div class="field">
- <label>Ordering</label>
+ <label>{{ $t('Ordering') }}</label>
<select class="ui dropdown" v-model="ordering">
<option v-for="option in orderingOptions" :value="option[0]">
{{ option[1] }}
@@ -23,14 +23,14 @@
</select>
</div>
<div class="field">
- <label>Ordering direction</label>
+ <label>{{ $t('Ordering direction') }}</label>
<select class="ui dropdown" v-model="orderingDirection">
- <option value="">Ascending</option>
- <option value="-">Descending</option>
+ <option value="">{{ $t('Ascending') }}</option>
+ <option value="-">{{ $t('Descending') }}</option>
</select>
</div>
<div class="field">
- <label>Results per page</label>
+ <label>{{ $t('Results per page') }}</label>
<select class="ui dropdown" v-model="paginateBy">
<option :value="parseInt(12)">12</option>
<option :value="parseInt(25)">25</option>
@@ -76,6 +76,7 @@ export default {
Pagination
},
data () {
+ console.log('YOLO', this.$t)
let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
return {
isLoading: true,
--
GitLab