Translate skins and themes fully

v1.18.x
Peter Jaszkowiak 8 years ago
parent 5843e8dd77
commit f1cfed50a1

@ -0,0 +1,9 @@
{
"loading": "Loading Skins...",
"homepage": "Homepage",
"select-skin": "Select Skin",
"current-skin": "Current Skin",
"skin-updated": "Skin Updated",
"applied-success": "%1 skin was succesfully applied",
"revert-success": "Skin reverted to base colours"
}

@ -1,6 +1,11 @@
{ {
"checking-for-installed": "Checking for installed themes...", "checking-for-installed": "Checking for installed themes...",
"homepage": "Homepage", "homepage": "Homepage",
"select-skin": "Select Skin", "select-theme": "Select Theme",
"select-theme": "Select Theme" "current-theme": "Current Theme",
"no-themes": "No installed themes found",
"revert-confirm": "Are you sure you wish to restore the default NodeBB theme?",
"theme-changed": "Theme Changed",
"revert-success": "You have successfully reverted your NodeBB back to it's default theme.",
"restart-to-activate": "Please restart your NodeBB to fully activate this theme"
} }

@ -1,7 +1,7 @@
"use strict"; "use strict";
/* global define, app, socket, templates */ /* global define, app, socket, templates */
define('admin/appearance/skins', function () { define('admin/appearance/skins', ['translator'], function (translator) {
var Skins = {}; var Skins = {};
Skins.init = function () { Skins.init = function () {
@ -40,8 +40,8 @@ define('admin/appearance/skins', function () {
app.alert({ app.alert({
alert_id: 'admin:theme', alert_id: 'admin:theme',
type: 'info', type: 'info',
title: 'Skin Updated', title: '[[admin/appearance/skins:skin-updated]]',
message: themeId ? (themeId + ' skin was successfully applied') : 'Skin reverted to base colours', message: themeId ? ('[[admin/appearance/skins:applied-success, ' + themeId + ']]') : '[[admin/appearance/skins:revert-success]]',
timeout: 5000 timeout: 5000
}); });
}); });
@ -67,6 +67,7 @@ define('admin/appearance/skins', function () {
}), }),
showRevert: true showRevert: true
}, function (html) { }, function (html) {
translator.translate(html, function (html) {
themeContainer.html(html); themeContainer.html(html);
if (config['theme:src']) { if (config['theme:src']) {
@ -77,15 +78,21 @@ define('admin/appearance/skins', function () {
highlightSelectedTheme(skin); highlightSelectedTheme(skin);
} }
}); });
});
}; };
function highlightSelectedTheme(themeId) { function highlightSelectedTheme(themeId) {
translator.translate('[[admin/appearance/skins:select-skin]] || [[admin/appearance/skins:current-skin]]', function (text) {
text = text.split(' || ');
var select = text[0];
var current = text[1];
$('[data-theme]') $('[data-theme]')
.removeClass('selected') .removeClass('selected')
.find('[data-action="use"]').each(function () { .find('[data-action="use"]').each(function () {
if ($(this).parents('[data-theme]').attr('data-theme')) { if ($(this).parents('[data-theme]').attr('data-theme')) {
$(this) $(this)
.html('Select Skin') .html(select)
.removeClass('btn-success') .removeClass('btn-success')
.addClass('btn-primary'); .addClass('btn-primary');
} }
@ -98,9 +105,10 @@ define('admin/appearance/skins', function () {
$('[data-theme="' + themeId + '"]') $('[data-theme="' + themeId + '"]')
.addClass('selected') .addClass('selected')
.find('[data-action="use"]') .find('[data-action="use"]')
.html('Current Skin') .html(current)
.removeClass('btn-primary') .removeClass('btn-primary')
.addClass('btn-success'); .addClass('btn-success');
});
} }
return Skins; return Skins;

@ -1,7 +1,7 @@
"use strict"; "use strict";
/* global define, app, socket, bootbox, templates, config */ /* global define, app, socket, bootbox, templates, config */
define('admin/appearance/themes', function () { define('admin/appearance/themes', ['translator'], function (translator) {
var Themes = {}; var Themes = {};
Themes.init = function () { Themes.init = function () {
@ -28,8 +28,8 @@ define('admin/appearance/themes', function () {
app.alert({ app.alert({
alert_id: 'admin:theme', alert_id: 'admin:theme',
type: 'info', type: 'info',
title: 'Theme Changed', title: '[[admin/appearance/themes:theme-changed]]',
message: 'Please restart your NodeBB to fully activate this theme', message: '[[admin/appearance/themes:restart-to-activate]]',
timeout: 5000, timeout: 5000,
clickfn: function () { clickfn: function () {
socket.emit('admin.restart'); socket.emit('admin.restart');
@ -39,8 +39,9 @@ define('admin/appearance/themes', function () {
} }
}); });
translator.translate('[[admin/appearance/themes:revert-confirm]]', function (revert) {
$('#revert_theme').on('click', function () { $('#revert_theme').on('click', function () {
bootbox.confirm('Are you sure you wish to restore the default NodeBB theme?', function (confirm) { bootbox.confirm(revert, function (confirm) {
if (confirm) { if (confirm) {
socket.emit('admin.themes.set', { socket.emit('admin.themes.set', {
type: 'local', type: 'local',
@ -53,14 +54,15 @@ define('admin/appearance/themes', function () {
app.alert({ app.alert({
alert_id: 'admin:theme', alert_id: 'admin:theme',
type: 'success', type: 'success',
title: 'Theme Changed', title: '[[admin/appearance/themes:theme-changed]]',
message: 'You have successfully reverted your NodeBB back to it\'s default theme.', message: '[[admin/appearance/themes:revert-success]]',
timeout: 3500 timeout: 3500
}); });
}); });
} }
}); });
}); });
});
socket.emit('admin.themes.getInstalled', function (err, themes) { socket.emit('admin.themes.getInstalled', function (err, themes) {
if(err) { if(err) {
@ -70,37 +72,43 @@ define('admin/appearance/themes', function () {
var instListEl = $('#installed_themes'); var instListEl = $('#installed_themes');
if (!themes.length) { if (!themes.length) {
instListEl.append($('<li/ >').addClass('no-themes').html('No installed themes found')); translator.translate('[[admin/appearance/themes:no-themes]]', function (text) {
instListEl.append($('<li/ >').addClass('no-themes').html(text));
});
return; return;
} else { } else {
templates.parse('admin/partials/theme_list', { templates.parse('admin/partials/theme_list', {
themes: themes themes: themes
}, function (html) { }, function (html) {
require(['translator'], function (translator) {
translator.translate(html, function (html) { translator.translate(html, function (html) {
instListEl.html(html); instListEl.html(html);
highlightSelectedTheme(config['theme:id']); highlightSelectedTheme(config['theme:id']);
}); });
}); });
});
} }
}); });
}; };
function highlightSelectedTheme(themeId) { function highlightSelectedTheme(themeId) {
translator.translate('[[admin/appearance/themes:select-theme]] || [[admin/appearance/themes:current-theme]]', function (text) {
text = text.split(' || ');
var select = text[0];
var current = text[1];
$('[data-theme]') $('[data-theme]')
.removeClass('selected') .removeClass('selected')
.find('[data-action="use"]') .find('[data-action="use"]')
.html('Select Theme') .html(select)
.removeClass('btn-success') .removeClass('btn-success')
.addClass('btn-primary'); .addClass('btn-primary');
$('[data-theme="' + themeId + '"]') $('[data-theme="' + themeId + '"]')
.addClass('selected') .addClass('selected')
.find('[data-action="use"]') .find('[data-action="use"]')
.html('Current Theme') .html(current)
.removeClass('btn-primary') .removeClass('btn-primary')
.addClass('btn-success'); .addClass('btn-success');
});
} }
return Themes; return Themes;

@ -1,6 +1,6 @@
<div id="skins" class="row skins"> <div id="skins" class="row skins">
<div class="directory row" id="bootstrap_themes"> <div class="directory row" id="bootstrap_themes">
<i class="fa fa-refresh fa-spin"></i> Loading Skins <i class="fa fa-refresh fa-spin"></i> [[admin/appearance/skins:loading]]
</div> </div>
<div data-type="bootswatch" data-theme="" data-css=""> <div data-type="bootswatch" data-theme="" data-css="">

@ -16,7 +16,7 @@
</div> </div>
<div class="mdl-card__actions mdl-card--border"> <div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-action="use"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-action="use">
<!-- IF themes.skin -->[[admin/appearance/themes:select-skin]]<!-- ELSE -->[[admin/appearance/themes:select-theme]]<!-- ENDIF themes.skin --> <!-- IF themes.skin -->[[admin/appearance/skins:select-skin]]<!-- ELSE -->[[admin/appearance/themes:select-theme]]<!-- ENDIF themes.skin -->
</a> </a>
</div> </div>
</div> </div>

Loading…
Cancel
Save