frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Update build-custom-theme to handle keyframes properly

Browse Source 
Fixes #2636

Also adds a header to the generated CSS identifing the version
of NR and date/time it was generated.
This commit is contained in:
Nick O'Leary 2020-07-07 11:38:07 +01:00
parent f5e46a663a
commit 8ea25bcd1c
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 33 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/node_modules/@node-red/editor-client/src/sass/flow.scss vendored
View File

@ -342,7 +342,10 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
stroke-dasharray: 10, 4;
}
@keyframes red-ui-flow-port-tooltip-fadeIn { from { opacity:0; } to { opacity:1; } }
// @keyframes *must* be on multiple lines so build-custom-theme can filter them out
@keyframes red-ui-flow-port-tooltip-fadeIn {
from { opacity:0; } to { opacity:1; }
}
.red-ui-flow-port-tooltip {
opacity:0;

41
packages/node_modules/@node-red/editor-client/src/sass/notifications.scss vendored
View File

@ -71,38 +71,9 @@
}
.red-ui-notification-shake-horizontal {
-webkit-animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
}
@-webkit-keyframes red-ui-notification-shake-horizontal {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateX(-1px);
transform: translateX(-1px);
}
20%,
40%,
60% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
// 80% {
// -webkit-transform: translateX(1px);
// transform: translateX(1px);
// }
// 90% {
// -webkit-transform: translateX(-1px);
// transform: translateX(-1px);
// }
animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
}
// @keyframes *must* be on multiple lines so build-custom-theme can filter them out
@keyframes red-ui-notification-shake-horizontal {
0%,
100% {
@ -122,12 +93,4 @@
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
// 80% {
// -webkit-transform: translateX(1px);
// transform: translateX(1px);
// }
// 90% {
// -webkit-transform: translateX(-1px);
// transform: translateX(-1px);
// }
}

33
scripts/build-custom-theme.js
View File

@ -29,6 +29,7 @@ const sass = require("node-sass");
const knownOpts = {
"help": Boolean,
"long": Boolean,
"in": [path],
"out": [path]
};
@ -45,7 +46,8 @@ if (parsedArgs.help) {
console.log("Options:");
console.log(" --in FILE Custom colors sass file");
console.log(" --out FILE Where you write the result");
console.log(" -?, --help show this help");
console.log(" --long Do not compress the output");
console.log(" -?, --help Show this help");
console.log("");
process.exit();
}
@ -64,7 +66,6 @@ if (parsedArgs.in && fs.existsSync(parsedArgs.in)) {
}
// Load base colours
let colorsFile = fs.readFileSync(path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/colors.scss"),"utf-8")
let updatedColors = [];
@ -81,7 +82,7 @@ const result = sass.renderSync({
contents: updatedColors.join("\n")
}
}
return {file:"../packages/node_modules/@node-red/editor-client/src/sass/"+url+".scss"}
return {file:path.join(__dirname,"../packages/node_modules/@node-red/editor-client/src/sass/"+url+".scss")}
}
});
@ -90,8 +91,18 @@ const lines = css.split("\n");
const colorCSS = []
const nonColorCSS = [];
let inKeyFrameBlock = false;
lines.forEach(l => {
if (!/^ /.test(l)) {
if (inKeyFrameBlock) {
nonColorCSS.push(l);
if (/^}/.test(l)) {
inKeyFrameBlock = false;
}
} else if (/^@keyframes/.test(l)) {
nonColorCSS.push(l);
inKeyFrameBlock = true;
} else if (!/^ /.test(l)) {
colorCSS.push(l);
nonColorCSS.push(l);
} else if (/color|border|background|fill|stroke|outline|box-shadow/.test(l)) {
@ -101,9 +112,19 @@ lines.forEach(l => {
}
});
var output = sass.renderSync({outputStyle: "compressed",data:colorCSS.join("\n")});
const nrPkg = require("../package.json");
const now = new Date().toISOString();
const header = `/*
* Theme generated with Node-RED ${nrPkg.version} on ${now}
*/`;
var output = sass.renderSync({outputStyle: parsedArgs.long?"expanded":"compressed",data:colorCSS.join("\n")});
if (parsedArgs.out) {
fs.writeFileSync(parsedArgs.out,output.css);
fs.writeFileSync(parsedArgs.out,header+"\n"+output.css);
} else {
console.log(header);
console.log(output.css.toString());
}