Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-05-06 07:26:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Translate skins and themes fully

Browse Source
This commit is contained in:
Peter Jaszkowiak
2016-12-05 18:31:58 -07:00
parent 5843e8dd77
commit f1cfed50a1
6 changed files with 102 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/language/en-GB/admin/appearance/skins.json Normal file
View File

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

9
public/language/en-GB/admin/appearance/themes.json
View File

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

62
public/src/admin/appearance/skins.js
View File

@@ -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];
if (!themeId) {
return;
}
$('[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');
}
});
$('[data-theme="' + themeId + '"]')
.addClass('selected')
.find('[data-action="use"]')
.html('Current Skin')
.removeClass('btn-primary')
.addClass('btn-success');
if (!themeId) {
return;
}
$('[data-theme="' + themeId + '"]')
.addClass('selected')
.find('[data-action="use"]')
.html(current)
.removeClass('btn-primary')
.addClass('btn-success');
});
}
return Skins;

90
public/src/admin/appearance/themes.js
View File

@@ -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($('<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;
} 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;

2
src/views/admin/appearance/skins.tpl
View File

@@ -1,6 +1,6 @@
<div id="skins" class="row skins">
<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 data-type="bootswatch" data-theme="" data-css="">

2
src/views/admin/partials/theme_list.tpl
View File

@@ -16,7 +16,7 @@
</div>
<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">
<!-- 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>
</div>
</div>