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

public/src/admin/appearance/skins.js

@@ -2,8 +2,8 @@
 
 
 define('admin/appearance/skins', [
-	'translator', 'alerts', 'settings',
-], function (translator, alerts, settings) {
+	'translator', 'alerts', 'settings', 'hooks',
+], function (translator, alerts, settings, hooks) {
 	const Skins = {};
 
 	Skins.init = function () {
@@ -11,9 +11,19 @@ define('admin/appearance/skins', [
 		$.ajax({
 			method: 'get',
 			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'));
+		});
+
 		$('#save-custom-skins').on('click', function () {
 			settings.save('custom-skins', $('.custom-skin-settings'), function () {
 				alerts.success('[[admin/appearance/skins:save-custom-skins-success]]');
@@ -33,13 +43,12 @@ define('admin/appearance/skins', [
 
 			if (action && action === 'use') {
 				const parentEl = target.parents('[data-theme]');
-				const themeType = parentEl.attr('data-type');
 				const cssSrc = parentEl.attr('data-css');
 				const themeId = parentEl.attr('data-theme');
-
+				const themeName = parentEl.attr('data-theme-name');
 
 				socket.emit('admin.themes.set', {
-					type: themeType,
+					type: 'bootswatch',
 					id: themeId,
 					src: cssSrc,
 				}, function (err) {
@@ -52,7 +61,7 @@ define('admin/appearance/skins', [
 						alert_id: 'admin:theme',
 						type: 'info',
 						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,
 					});
 				});
@@ -67,7 +76,7 @@ define('admin/appearance/skins', [
 			themes: bootswatch.themes.map(function (theme) {
 				return {
 					type: 'bootswatch',
-					id: theme.name,
+					id: theme.name.toLowerCase(),
 					name: theme.name,
 					description: theme.description,
 					screenshot_url: theme.thumbnail,
@@ -82,9 +91,7 @@ define('admin/appearance/skins', [
 
 			if (app.config.bootswatchSkin) {
 				const skin = app.config.bootswatchSkin;
-				highlightSelectedTheme(
-					skin.charAt(0).toUpperCase() + skin.slice(1)
-				);
+				highlightSelectedTheme(skin);
 			}
 		});
 	};

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

@@ -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="">
             <strong>{custom-skin-name}</strong>
         </div>
         <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="remove" class="btn btn-sm btn-light"><i class="fa fa-trash-o text-danger"></i></button>
         </div>

src/views/admin/partials/theme_list.tpl

@@ -1,5 +1,5 @@
 {{{ 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">
 		<img src="{./screenshot_url}" class="card-img-top">
 		<div class="card-body">