From f1cfed50a1f750bd4871d7263615e0a85ee5a9c3 Mon Sep 17 00:00:00 2001 From: Peter Jaszkowiak Date: Mon, 5 Dec 2016 18:31:58 -0700 Subject: [PATCH] Translate skins and themes fully --- .../en-GB/admin/appearance/skins.json | 9 ++ .../en-GB/admin/appearance/themes.json | 9 +- public/src/admin/appearance/skins.js | 62 +++++++------ public/src/admin/appearance/themes.js | 90 ++++++++++--------- src/views/admin/appearance/skins.tpl | 2 +- src/views/admin/partials/theme_list.tpl | 2 +- 6 files changed, 102 insertions(+), 72 deletions(-) create mode 100644 public/language/en-GB/admin/appearance/skins.json diff --git a/public/language/en-GB/admin/appearance/skins.json b/public/language/en-GB/admin/appearance/skins.json new file mode 100644 index 0000000000..4db6fbdd8a --- /dev/null +++ b/public/language/en-GB/admin/appearance/skins.json @@ -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" +} \ No newline at end of file diff --git a/public/language/en-GB/admin/appearance/themes.json b/public/language/en-GB/admin/appearance/themes.json index 3f1b10cf7f..3148a01337 100644 --- a/public/language/en-GB/admin/appearance/themes.json +++ b/public/language/en-GB/admin/appearance/themes.json @@ -1,6 +1,11 @@ { "checking-for-installed": "Checking for installed themes...", "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" } \ No newline at end of file diff --git a/public/src/admin/appearance/skins.js b/public/src/admin/appearance/skins.js index 7583dc952d..35ad5a2289 100644 --- a/public/src/admin/appearance/skins.js +++ b/public/src/admin/appearance/skins.js @@ -1,7 +1,7 @@ "use strict"; /* global define, app, socket, templates */ -define('admin/appearance/skins', function () { +define('admin/appearance/skins', ['translator'], function (translator) { var Skins = {}; Skins.init = function () { @@ -40,8 +40,8 @@ define('admin/appearance/skins', function () { app.alert({ alert_id: 'admin:theme', type: 'info', - title: 'Skin Updated', - message: themeId ? (themeId + ' skin was successfully applied') : 'Skin reverted to base colours', + title: '[[admin/appearance/skins:skin-updated]]', + message: themeId ? ('[[admin/appearance/skins:applied-success, ' + themeId + ']]') : '[[admin/appearance/skins:revert-success]]', timeout: 5000 }); }); @@ -67,40 +67,48 @@ define('admin/appearance/skins', function () { }), showRevert: true }, function (html) { - themeContainer.html(html); + translator.translate(html, function (html) { + themeContainer.html(html); - if (config['theme:src']) { - var skin = config['theme:src'] + if (config['theme:src']) { + var skin = config['theme:src'] .match(/latest\/(\S+)\/bootstrap.min.css/)[1] .replace(/(^|\s)([a-z])/g , function (m,p1,p2) {return p1 + p2.toUpperCase();}); - highlightSelectedTheme(skin); - } + highlightSelectedTheme(skin); + } + }); }); }; function highlightSelectedTheme(themeId) { - $('[data-theme]') - .removeClass('selected') - .find('[data-action="use"]').each(function () { - if ($(this).parents('[data-theme]').attr('data-theme')) { - $(this) - .html('Select Skin') - .removeClass('btn-success') - .addClass('btn-primary'); - } - }); + 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]') + .removeClass('selected') + .find('[data-action="use"]').each(function () { + if ($(this).parents('[data-theme]').attr('data-theme')) { + $(this) + .html(select) + .removeClass('btn-success') + .addClass('btn-primary'); + } + }); - if (!themeId) { - return; - } + if (!themeId) { + return; + } - $('[data-theme="' + themeId + '"]') - .addClass('selected') - .find('[data-action="use"]') - .html('Current Skin') - .removeClass('btn-primary') - .addClass('btn-success'); + $('[data-theme="' + themeId + '"]') + .addClass('selected') + .find('[data-action="use"]') + .html(current) + .removeClass('btn-primary') + .addClass('btn-success'); + }); } return Skins; diff --git a/public/src/admin/appearance/themes.js b/public/src/admin/appearance/themes.js index 835dcda654..0c71baa4c4 100644 --- a/public/src/admin/appearance/themes.js +++ b/public/src/admin/appearance/themes.js @@ -1,7 +1,7 @@ "use strict"; /* global define, app, socket, bootbox, templates, config */ -define('admin/appearance/themes', function () { +define('admin/appearance/themes', ['translator'], function (translator) { var Themes = {}; Themes.init = function () { @@ -28,8 +28,8 @@ define('admin/appearance/themes', function () { app.alert({ alert_id: 'admin:theme', type: 'info', - title: 'Theme Changed', - message: 'Please restart your NodeBB to fully activate this theme', + title: '[[admin/appearance/themes:theme-changed]]', + message: '[[admin/appearance/themes:restart-to-activate]]', timeout: 5000, clickfn: function () { socket.emit('admin.restart'); @@ -38,27 +38,29 @@ define('admin/appearance/themes', function () { }); } }); - - $('#revert_theme').on('click', function () { - bootbox.confirm('Are you sure you wish to restore the default NodeBB theme?', function (confirm) { - if (confirm) { - socket.emit('admin.themes.set', { - type: 'local', - id: 'nodebb-theme-persona' - }, function (err) { - if (err) { - return app.alertError(err.message); - } - highlightSelectedTheme('nodebb-theme-persona'); - app.alert({ - alert_id: 'admin:theme', - type: 'success', - title: 'Theme Changed', - message: 'You have successfully reverted your NodeBB back to it\'s default theme.', - timeout: 3500 + + translator.translate('[[admin/appearance/themes:revert-confirm]]', function (revert) { + $('#revert_theme').on('click', function () { + bootbox.confirm(revert, function (confirm) { + if (confirm) { + socket.emit('admin.themes.set', { + type: 'local', + id: 'nodebb-theme-persona' + }, function (err) { + if (err) { + return app.alertError(err.message); + } + highlightSelectedTheme('nodebb-theme-persona'); + app.alert({ + alert_id: 'admin:theme', + type: 'success', + title: '[[admin/appearance/themes:theme-changed]]', + message: '[[admin/appearance/themes:revert-success]]', + timeout: 3500 + }); }); - }); - } + } + }); }); }); @@ -70,17 +72,17 @@ define('admin/appearance/themes', function () { var instListEl = $('#installed_themes'); if (!themes.length) { - instListEl.append($('
  • ').addClass('no-themes').html('No installed themes found')); + translator.translate('[[admin/appearance/themes:no-themes]]', function (text) { + instListEl.append($('
  • ').addClass('no-themes').html(text)); + }); return; } else { templates.parse('admin/partials/theme_list', { themes: themes }, function (html) { - require(['translator'], function (translator) { - translator.translate(html, function (html) { - instListEl.html(html); - highlightSelectedTheme(config['theme:id']); - }); + translator.translate(html, function (html) { + instListEl.html(html); + highlightSelectedTheme(config['theme:id']); }); }); } @@ -88,19 +90,25 @@ define('admin/appearance/themes', function () { }; function highlightSelectedTheme(themeId) { - $('[data-theme]') - .removeClass('selected') - .find('[data-action="use"]') - .html('Select Theme') - .removeClass('btn-success') - .addClass('btn-primary'); + 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="' + themeId + '"]') - .addClass('selected') - .find('[data-action="use"]') - .html('Current Theme') - .removeClass('btn-primary') - .addClass('btn-success'); + $('[data-theme]') + .removeClass('selected') + .find('[data-action="use"]') + .html(select) + .removeClass('btn-success') + .addClass('btn-primary'); + + $('[data-theme="' + themeId + '"]') + .addClass('selected') + .find('[data-action="use"]') + .html(current) + .removeClass('btn-primary') + .addClass('btn-success'); + }); } return Themes; diff --git a/src/views/admin/appearance/skins.tpl b/src/views/admin/appearance/skins.tpl index 0c1b543a47..c5d1355f08 100644 --- a/src/views/admin/appearance/skins.tpl +++ b/src/views/admin/appearance/skins.tpl @@ -1,6 +1,6 @@
    - Loading Skins + [[admin/appearance/skins:loading]]
    diff --git a/src/views/admin/partials/theme_list.tpl b/src/views/admin/partials/theme_list.tpl index 066f43cdd8..26a226b803 100644 --- a/src/views/admin/partials/theme_list.tpl +++ b/src/views/admin/partials/theme_list.tpl @@ -16,7 +16,7 @@
    - [[admin/appearance/themes:select-skin]][[admin/appearance/themes:select-theme]] + [[admin/appearance/skins:select-skin]][[admin/appearance/themes:select-theme]]