Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-10-26 16:46:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: #11930, ability to set custom skins as default

Browse Source
This commit is contained in:
Barış Soner Uşaklı
2023-08-18 13:18:13 -04:00
parent d1949cee0c
commit db07ab1508
3 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,8 +2,8 @@
define('admin/appearance/skins', [ define('admin/appearance/skins', [
'translator', 'alerts', 'settings', 'translator', 'alerts', 'settings', 'hooks',
], function (translator, alerts, settings) { ], function (translator, alerts, settings, hooks) {
const Skins = {}; const Skins = {};
Skins.init = function () { Skins.init = function () {
@@ -11,9 +11,19 @@ define('admin/appearance/skins', [
$.ajax({ $.ajax({
method: 'get', method: 'get',
url: 'https://bootswatch.com/api/5.json', url: 'https://bootswatch.com/api/5.json',
}).done(Skins.render); }).done((bsData) => {
hooks.on('action:settings.sorted-list.loaded', (data) => {
if (data.hash === 'custom-skins') {
// lower case all custom-skin ids after load
$('.custom-skin-settings [data-type="list"] [data-theme]').each((i, el) => {
$(el).attr('data-theme', $(el).attr('data-theme').toLowerCase());
});
Skins.render(bsData);
}
});
settings.load('custom-skins', $('.custom-skin-settings'));
});
settings.load('custom-skins', $('.custom-skin-settings'));
$('#save-custom-skins').on('click', function () { $('#save-custom-skins').on('click', function () {
settings.save('custom-skins', $('.custom-skin-settings'), function () { settings.save('custom-skins', $('.custom-skin-settings'), function () {
alerts.success('[[admin/appearance/skins:save-custom-skins-success]]'); alerts.success('[[admin/appearance/skins:save-custom-skins-success]]');
@@ -33,13 +43,12 @@ define('admin/appearance/skins', [
if (action && action === 'use') { if (action && action === 'use') {
const parentEl = target.parents('[data-theme]'); const parentEl = target.parents('[data-theme]');
const themeType = parentEl.attr('data-type');
const cssSrc = parentEl.attr('data-css'); const cssSrc = parentEl.attr('data-css');
const themeId = parentEl.attr('data-theme'); const themeId = parentEl.attr('data-theme');
const themeName = parentEl.attr('data-theme-name');
socket.emit('admin.themes.set', { socket.emit('admin.themes.set', {
type: themeType, type: 'bootswatch',
id: themeId, id: themeId,
src: cssSrc, src: cssSrc,
}, function (err) { }, function (err) {
@@ -52,7 +61,7 @@ define('admin/appearance/skins', [
alert_id: 'admin:theme', alert_id: 'admin:theme',
type: 'info', type: 'info',
title: '[[admin/appearance/skins:skin-updated]]', title: '[[admin/appearance/skins:skin-updated]]',
message: themeId ? ('[[admin/appearance/skins:applied-success, ' + themeId + ']]') : '[[admin/appearance/skins:revert-success]]', message: themeId ? ('[[admin/appearance/skins:applied-success, ' + themeName + ']]') : '[[admin/appearance/skins:revert-success]]',
timeout: 5000, timeout: 5000,
}); });
}); });
@@ -67,7 +76,7 @@ define('admin/appearance/skins', [
themes: bootswatch.themes.map(function (theme) { themes: bootswatch.themes.map(function (theme) {
return { return {
type: 'bootswatch', type: 'bootswatch',
id: theme.name, id: theme.name.toLowerCase(),
name: theme.name, name: theme.name,
description: theme.description, description: theme.description,
screenshot_url: theme.thumbnail, screenshot_url: theme.thumbnail,
@@ -82,9 +91,7 @@ define('admin/appearance/skins', [
if (app.config.bootswatchSkin) { if (app.config.bootswatchSkin) {
const skin = app.config.bootswatchSkin; const skin = app.config.bootswatchSkin;
highlightSelectedTheme( highlightSelectedTheme(skin);
skin.charAt(0).toUpperCase() + skin.slice(1)
);
} }
}); });
}; };

3
src/views/admin/partials/appearance/skins/item-custom-skin.tpl
View File

@@ -1,9 +1,10 @@
<li data-type="item" class="list-group-item"> <li data-type="item" class="list-group-item" data-theme-name="{custom-skin-name}" data-theme="{custom-skin-name}">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<div class=""> <div class="">
<strong>{custom-skin-name}</strong> <strong>{custom-skin-name}</strong>
</div> </div>
<div class=""> <div class="">
<button type="button" data-action="use" class="btn btn-sm btn-primary">[[admin/appearance/skins:select-skin]]</button>
<button type="button" data-type="edit" class="btn btn-sm btn-light"><i class="fa fa-edit text-primary"></i></button> <button type="button" data-type="edit" class="btn btn-sm btn-light"><i class="fa fa-edit text-primary"></i></button>
<button type="button" data-type="remove" class="btn btn-sm btn-light"><i class="fa fa-trash-o text-danger"></i></button> <button type="button" data-type="remove" class="btn btn-sm btn-light"><i class="fa fa-trash-o text-danger"></i></button>
</div> </div>

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

@@ -1,5 +1,5 @@
{{{ each themes }}} {{{ each themes }}}
<div class="col-lg-4 col-md-6 col-12 mb-4" data-type="{./type}" data-theme="{./id}"{{{ if ./css }}} data-css="{./css}" {{{ end }}}> <div class="col-lg-4 col-md-6 col-12 mb-4" data-type="{./type}" data-theme-name="{./name}" data-theme="{./id}"{{{ if ./css }}} data-css="{./css}" {{{ end }}}>
<div class="card h-100"> <div class="card h-100">
<img src="{./screenshot_url}" class="card-img-top"> <img src="{./screenshot_url}" class="card-img-top">
<div class="card-body"> <div class="card-body">