skin support, correct order of imports for overrides

This commit is contained in:
Barış Soner Uşaklı
2022-08-23 19:30:31 -04:00
parent 62ec61e00c
commit b50f662d45
4 changed files with 35 additions and 33 deletions

View File

@@ -39,6 +39,7 @@
"body-parser": "1.20.0",
"bootbox": "https://github.com/makeusabrew/bootbox.git#v6-wip",
"bootstrap": "5.2.0",
"bootswatch": "5.2.0",
"chalk": "4.1.2",
"chart.js": "2.9.4",
"cli-graph": "3.2.2",
@@ -86,7 +87,6 @@
"morgan": "1.10.0",
"mousetrap": "1.6.5",
"multiparty": "4.2.3",
"@nodebb/bootswatch": "3.4.2",
"nconf": "0.12.0",
"nodebb-plugin-2factor": "5.0.2",
"nodebb-plugin-composer-default": "8.0.0",

View File

@@ -70,7 +70,7 @@ $brand-danger: #d9534f;
@mixin user-icon() {
display: inline-block;
text-align: center;
color: $gray-300;
color: $gray-light;
font-weight: normal;
vertical-align: middle;
overflow: hidden; /* stops alt text from overflowing past boundaries if image does not load */
@@ -175,7 +175,7 @@ $brand-danger: #d9534f;
position: absolute;
text-align: center;
font-size: 24px;
color: $gray-300;
color: $gray-light;
width: 100%;
display: none;
}

View File

@@ -0,0 +1 @@
// global bs5 overrides if necessary

View File

@@ -23,42 +23,47 @@ CSS.supportedSkins = [
];
const buildImports = {
client: function (source) {
client: function (source, themeData) {
return [
'@import "bootstrap/scss/bootstrap";',
'@import "../../public/scss/mixins.scss";',
'@import "../../public/scss/generics.scss";',
'@import "../../public/scss/responsive-utilities.scss";',
'@import "mixins";',
'@import "generics";',
'@import "fontawesome";',
'@import "./theme";',
boostrapImport(themeData),
'@import "responsive-utilities";',
source,
'@import "../../public/scss/jquery-ui.scss";',
'@import "../node_modules/@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
'@import "../node_modules/cropperjs/dist/cropper";',
'@import "../../public/scss/flags.scss";',
'@import "../../public/scss/global.scss";',
'@import "../../public/scss/modals.scss";',
'@import "jquery-ui";',
'@import "@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
'@import "cropperjs/dist/cropper";',
'@import "flags";',
'@import "global";',
'@import "modals";',
].join('\n');
},
admin: function (source) {
return [
'@import "bootstrap/scss/bootstrap";',
'@import "../../public/scss/mixins.scss";',
'@import "../public/scss/generics.scss";',
'@import "../../public/scss/responsive-utilities.scss";',
'@import "mixins.scss";',
'@import "generics.scss";',
'@import "responsive-utilities.scss";',
'@import "fontawesome";',
'@import "../public/scss/admin/admin.scss";',
'@import "admin/admin.scss";',
source,
'@import "../../public/scss/jquery-ui.scss";',
'@import "../node_modules/@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
'@import "jquery-ui.scss";',
'@import "@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
'@import "../public/vendor/mdl/material";',
].join('\n');
},
};
function boostrapImport(themeData) {
const { bootswatchSkin } = themeData;
return [
bootswatchSkin ? `@import "bootswatch/dist/${bootswatchSkin}/variables";` : '',
'@import "./theme";',
bootswatchSkin ? `@import "bootswatch/dist/${bootswatchSkin}/bootswatch";` : '',
].join('\n');
}
async function filterMissingFiles(filepaths) {
const exists = await Promise.all(
filepaths.map(async (filepath) => {
@@ -118,19 +123,15 @@ async function getBundleMetadata(target) {
target = 'client';
}
}
let skinImport = [];
let themeData = null;
if (target === 'client') {
const themeData = await db.getObjectFields('config', ['theme:type', 'theme:id', 'bootswatchSkin']);
themeData = await db.getObjectFields('config', ['theme:type', 'theme:id', 'bootswatchSkin']);
const themeId = (themeData['theme:id'] || 'nodebb-theme-persona');
const baseThemePath = path.join(nconf.get('themes_path'), (themeData['theme:type'] && themeData['theme:type'] === 'local' ? themeId : 'nodebb-theme-vanilla'));
paths.unshift(baseThemePath);
themeData.bootswatchSkin = skin || themeData.bootswatchSkin;
if (themeData && themeData.bootswatchSkin) {
skinImport.push(`\n@import "./@nodebb/bootswatch/${themeData.bootswatchSkin}/variables.less";`);
skinImport.push(`\n@import "./@nodebb/bootswatch/${themeData.bootswatchSkin}/bootswatch.less";`);
}
skinImport = skinImport.join('');
}
const [scssImports, cssImports, acpScssImports] = await Promise.all([
@@ -144,8 +145,8 @@ async function getBundleMetadata(target) {
return await getImports(filteredFiles, prefix, extension);
}
let imports = `${skinImport}\n${cssImports}\n${scssImports}\n${acpScssImports}`;
imports = buildImports[target](imports);
let imports = `${cssImports}\n${scssImports}\n${acpScssImports}`;
imports = buildImports[target](imports, themeData);
return { paths: paths, imports: imports };
}