@finsemble/finsemble-ui 6.6.1 → 7.0.0-beta-X

package/react/components/sdd/ProjectErrors.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectErrors.js","sourceRoot":"","sources":["../../../src/components/sdd/ProjectErrors.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,0BAA0B,CAAC;AAMlC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IAC1D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzB,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,KAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAE1G,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,iBAAiB,EAAE;YACvB,QAAQ,CAAC,2BAA2B,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,CAAC;SACzE;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,6BAAK,SAAS,EAAC,0BAA0B,IACvC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,6BACC,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,eAAe,EACzB,OAAO,EAAE,GAAG,EAAE;YACb,QAAQ,CAAC,2BAA2B,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;QACjE,CAAC;QAED,oBAAC,aAAa,IAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAC,oBAAoB,GAAiB;QACvF,KAAK,CAAC,OAAO,CACT,CACN,CAAC,CACG,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useEffect } from \"react\";\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\nimport { RootState } from \"../../reducers/rootReducer\";\nimport { useDispatch, useSelector } from \"../../store\";\nimport { ProjectError } from \"../../types/smartDesktopDesignerTypes\";\nimport { FinsembleIcon } from \"../common/FinsembleIcon\";\n\nimport \"./css/project-errors.css\";\n\nexport type ProjectErrorsProps = {\n\terrors: ProjectError[];\n};\n\nexport const ProjectErrors = (props: ProjectErrorsProps) => {\n\tconst dispatch = useDispatch();\n\tconst { errors } = props;\n\n\tconst isReviewingErrors = useSelector((state: RootState) => state.smartDesktopDesigner.isReviewingErrors);\n\n\tuseEffect(() => {\n\t\tif (!isReviewingErrors) {\n\t\t\tdispatch(SmartDesktopDesignerActions.set_reviewing_project_errors(true));\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<div className=\"project-errors-container\">\n\t\t\t{errors.map((error, index) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclassName=\"project-error\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tdispatch(SmartDesktopDesignerActions.change_view(error.viewId));\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<FinsembleIcon className=\"project-error-icon\" icon=\"exclamation-circle\"></FinsembleIcon>\n\t\t\t\t\t{error.message}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"ProjectErrors.js","sourceRoot":"","sources":["../../../src/components/sdd/ProjectErrors.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,0BAA0B,CAAC;AAMlC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IAC1D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzB,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,KAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAE1G,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,iBAAiB,EAAE;YACvB,QAAQ,CAAC,2BAA2B,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,CAAC;SACzE;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,6BAAK,SAAS,EAAC,0BAA0B,IACvC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,6BACC,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,eAAe,EACzB,OAAO,EAAE,GAAG,EAAE;YACb,QAAQ,CAAC,2BAA2B,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;QACjE,CAAC;QAED,oBAAC,aAAa,IAAC,SAAS,EAAC,oBAAoB,EAAC,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAC,OAAO,GAAiB;QACrG,KAAK,CAAC,OAAO,CACT,CACN,CAAC,CACG,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useEffect } from \"react\";\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\nimport { RootState } from \"../../reducers/rootReducer\";\nimport { useDispatch, useSelector } from \"../../store\";\nimport { ProjectError } from \"../../types/smartDesktopDesignerTypes\";\nimport { FinsembleIcon } from \"../common/FinsembleIcon\";\n\nimport \"./css/project-errors.css\";\n\nexport type ProjectErrorsProps = {\n\terrors: ProjectError[];\n};\n\nexport const ProjectErrors = (props: ProjectErrorsProps) => {\n\tconst dispatch = useDispatch();\n\tconst { errors } = props;\n\n\tconst isReviewingErrors = useSelector((state: RootState) => state.smartDesktopDesigner.isReviewingErrors);\n\n\tuseEffect(() => {\n\t\tif (!isReviewingErrors) {\n\t\t\tdispatch(SmartDesktopDesignerActions.set_reviewing_project_errors(true));\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<div className=\"project-errors-container\">\n\t\t\t{errors.map((error, index) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclassName=\"project-error\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tdispatch(SmartDesktopDesignerActions.change_view(error.viewId));\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<FinsembleIcon className=\"project-error-icon\" icon=\"exclamation-circle\" label=\"Error\"></FinsembleIcon>\n\t\t\t\t\t{error.message}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/sdd/Publish.js

@@ -46,7 +46,9 @@ export const Publish = (props) => {
                 props.getPublishProgress().then((data) => {
                     setCurrentStep(data.currentStep);
                     setStepProgress(Object.values(data.steps));
+                    // Finished! When the installer step reaches state "Finished"
                     if (data.steps["cloud"].state === ProgressState.Finished) {
+                        // dispatch(SmartDesktopDesignerActions.SET_IS_PUBLISHING(false));
                         clearInterval(debounceTimeout);
                         reset();
                     }
@@ -98,8 +100,8 @@ export const Publish = (props) => {
                     currentStep === step.name ? "publish-current-step" : "",
                 ].join(" ") },
                 React.createElement("div", { className: "publish-progress-icon" }, data.state === ProgressState.Started ? (React.createElement(PublishProgress, Object.assign({}, data))) : data.state === ProgressState.NotStarted ? (React.createElement("div", { className: "publish-progress-pending" })) : data.state === ProgressState.Error ? (React.createElement("div", { className: "publish-progress-error" },
-                    React.createElement(FinsembleIcon, { className: "publish-progress-error-icon", icon: "times" }))) : (React.createElement("div", { className: "publish-progress-success" },
-                    React.createElement(FinsembleIcon, { className: "publish-progress-success-icon", icon: "check" })))),
+                    React.createElement(FinsembleIcon, { className: "publish-progress-error-icon", icon: "times", label: "Error" }))) : (React.createElement("div", { className: "publish-progress-success" },
+                    React.createElement(FinsembleIcon, { className: "publish-progress-success-icon", icon: "check", label: "Success" })))),
                 React.createElement("div", { className: "publish-progress-text" }, data.error ? step.error : step.description))));
         })),
         deployInfo && (React.createElement("div", { className: "export-publish-uploaded" },

package/react/components/sdd/Publish.js.map

@@ -1 +1 @@
-{"version":3,"file":"Publish.js","sourceRoot":"","sources":["../../../src/components/sdd/Publish.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useEffect } from \"react\";\nimport { PublishProgress } from \"./PublishProgress\";\nimport { ExportDeployInfo } from \"./ExportDeployInfo\";\nimport { Button } from \"../common/Button\";\nimport { RootState } from \"../../reducers/rootReducer\";\nimport { useDispatch, useSelector } from \"../../store\";\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\nimport { ProgressState } from \"../../types/smartDesktopDesignerTypes\";\nimport { ExportProps } from \"./Export\";\nimport { FinsembleIcon } from \"../common/FinsembleIcon\";\nimport { FEA } from \"@finsemble/finsemble-api\";\n\ntype ProgressItem = FEA.ProgressItem;\n\nexport type PublishProps = ExportProps;\n\nexport const Publish = (props: PublishProps) => {\n\tconst dispatch = useDispatch();\n\n\tconst [currentStep, setCurrentStep] = useState(\"\");\n\tconst [stepProgress, setStepProgress] = useState([] as Array<ProgressItem>);\n\n\tconst exportContext = useSelector((state: RootState) => state.smartDesktopDesigner.export);\n\n\tconst { deployInfo, publishError } = exportContext;\n\n\tconst tryAgain = () => {\n\t\tsetCurrentStep(\"\");\n\t\tsetStepProgress([]);\n\t\tdispatch(SmartDesktopDesignerActions.set_deploy_info(null));\n\t\tdispatch(SmartDesktopDesignerActions.set_publish_error(null));\n\n\t\tprops\n\t\t\t.publishToCosaicCloud()\n\t\t\t.then((currentDeployInfo) => dispatch(SmartDesktopDesignerActions.set_deploy_info(currentDeployInfo)))\n\t\t\t.catch((error) => dispatch(SmartDesktopDesignerActions.set_publish_error(error)));\n\t};\n\n\tconst reset = () => {\n\t\tdispatch(SmartDesktopDesignerActions.set_is_publishing(false));\n\t\tdispatch(SmartDesktopDesignerActions.set_publish_error(null));\n\t};\n\n\tconst hasError = stepProgress.some((step) => step.state === ProgressState.Error);\n\n\tconst didFinish =\n\t\t(stepProgress.length > 0 &&\n\t\t\tstepProgress.every((step) => {\n\t\t\t\tif (step.state === ProgressState.Error) {\n\t\t\t\t\tdispatch(SmartDesktopDesignerActions.set_publish_error(step.error));\n\t\t\t\t}\n\t\t\t\treturn step.state === ProgressState.Finished;\n\t\t\t})) ||\n\t\thasError;\n\n\tuseEffect(() => {\n\t\tlet debounceTimeout: any = null;\n\t\tif (!didFinish) {\n\t\t\tdebounceTimeout = setInterval(() => {\n\t\t\t\tprops.getPublishProgress().then((data) => {\n\t\t\t\t\tsetCurrentStep(data.currentStep);\n\t\t\t\t\tsetStepProgress(Object.values(data.steps));\n\n\t\t\t\t\t// Finished! When the installer step reaches state \"Finished\"\n\t\t\t\t\tif (data.steps[\"cloud\"].state === ProgressState.Finished) {\n\t\t\t\t\t\t// dispatch(SmartDesktopDesignerActions.SET_IS_PUBLISHING(false));\n\t\t\t\t\t\tclearInterval(debounceTimeout);\n\t\t\t\t\t\treset();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}, props.progressCheckInterval);\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (debounceTimeout) {\n\t\t\t\tclearInterval(debounceTimeout);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<div className=\"export-publish-container\">\n\t\t\t{publishError ? (\n\t\t\t\t<div className=\"export-publish-error\">\n\t\t\t\t\t<h3>Your project was not published</h3>\n\n\t\t\t\t\t<p>An error occurred while trying to publish.</p>\n\t\t\t\t\t<p className=\"export-publish-error-message\">&quot;{publishError}&quot;</p>\n\n\t\t\t\t\t<div className=\"export-error-actions\">\n\t\t\t\t\t\t<Button fashion=\"ghost\" text=\"Cancel\" onClick={reset} />\n\t\t\t\t\t\t<Button className=\"export-error-btn\" fashion=\"secondary\" text=\"Try again\" onClick={tryAgain} />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<h2>Publishing...</h2>\n\n\t\t\t\t\t<div className={[\"export-publish-progress\", hasError ? \"export-publish-has-error\" : \"\"].join(\" \")}>\n\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"initialize\",\n\t\t\t\t\t\t\t\tdescription: \"Creating a location for the project\",\n\t\t\t\t\t\t\t\terror: \"Failed to create a location for the project\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"zip\",\n\t\t\t\t\t\t\t\tdescription: \"Zipping project\",\n\t\t\t\t\t\t\t\terror: \"Failed to zip the project\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"upload\",\n\t\t\t\t\t\t\t\tdescription: \"Uploading project\",\n\t\t\t\t\t\t\t\terror: \"Failed to upload the project\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"cloud\",\n\t\t\t\t\t\t\t\tdescription: \"Creating installer and site\",\n\t\t\t\t\t\t\t\terror: \"Failed to publish\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t].map((step) => {\n\t\t\t\t\t\t\tlet data = stepProgress.find((item) => item.step === step.name);\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\tdata && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={step.name}\n\t\t\t\t\t\t\t\t\t\tclassName={[\n\t\t\t\t\t\t\t\t\t\t\t\"publish-progress-container\",\n\t\t\t\t\t\t\t\t\t\t\tcurrentStep === step.name ? \"publish-current-step\" : \"\",\n\t\t\t\t\t\t\t\t\t\t].join(\" \")}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-icon\">\n\t\t\t\t\t\t\t\t\t\t\t{/* eslint-disable no-nested-ternary */}\n\t\t\t\t\t\t\t\t\t\t\t{data.state === ProgressState.Started ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<PublishProgress {...data}></PublishProgress>\n\t\t\t\t\t\t\t\t\t\t\t) : data.state === ProgressState.NotStarted ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-pending\"></div>\n\t\t\t\t\t\t\t\t\t\t\t) : data.state === ProgressState.Error ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-error\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FinsembleIcon className=\"publish-progress-error-icon\" icon=\"times\"></FinsembleIcon>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-success\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FinsembleIcon className=\"publish-progress-success-icon\" icon=\"check\"></FinsembleIcon>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-text\">{data.error ? step.error : step.description}</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t\t{deployInfo && (\n\t\t\t\t\t\t<div className=\"export-publish-uploaded\">\n\t\t\t\t\t\t\t<h3>Project uploaded</h3>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tYour project has been uploaded to the cloud. It will take several minutes to generate an installer.\n\t\t\t\t\t\t\t\tShare the installer link with your team. The desktop you&apos;ve created will be available shortly by\n\t\t\t\t\t\t\t\tdownloading and installing from the link.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<ExportDeployInfo />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"Publish.js","sourceRoot":"","sources":["../../../src/components/sdd/Publish.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useEffect } from \"react\";\nimport { PublishProgress } from \"./PublishProgress\";\nimport { ExportDeployInfo } from \"./ExportDeployInfo\";\nimport { Button } from \"../common/Button\";\nimport { RootState } from \"../../reducers/rootReducer\";\nimport { useDispatch, useSelector } from \"../../store\";\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\nimport { ProgressState } from \"../../types/smartDesktopDesignerTypes\";\nimport { ExportProps } from \"./Export\";\nimport { FinsembleIcon } from \"../common/FinsembleIcon\";\nimport { FEA } from \"@finsemble/finsemble-api\";\n\ntype ProgressItem = FEA.ProgressItem;\n\nexport type PublishProps = ExportProps;\n\nexport const Publish = (props: PublishProps) => {\n\tconst dispatch = useDispatch();\n\n\tconst [currentStep, setCurrentStep] = useState(\"\");\n\tconst [stepProgress, setStepProgress] = useState([] as Array<ProgressItem>);\n\n\tconst exportContext = useSelector((state: RootState) => state.smartDesktopDesigner.export);\n\n\tconst { deployInfo, publishError } = exportContext;\n\n\tconst tryAgain = () => {\n\t\tsetCurrentStep(\"\");\n\t\tsetStepProgress([]);\n\t\tdispatch(SmartDesktopDesignerActions.set_deploy_info(null));\n\t\tdispatch(SmartDesktopDesignerActions.set_publish_error(null));\n\n\t\tprops\n\t\t\t.publishToCosaicCloud()\n\t\t\t.then((currentDeployInfo) => dispatch(SmartDesktopDesignerActions.set_deploy_info(currentDeployInfo)))\n\t\t\t.catch((error) => dispatch(SmartDesktopDesignerActions.set_publish_error(error)));\n\t};\n\n\tconst reset = () => {\n\t\tdispatch(SmartDesktopDesignerActions.set_is_publishing(false));\n\t\tdispatch(SmartDesktopDesignerActions.set_publish_error(null));\n\t};\n\n\tconst hasError = stepProgress.some((step) => step.state === ProgressState.Error);\n\n\tconst didFinish =\n\t\t(stepProgress.length > 0 &&\n\t\t\tstepProgress.every((step) => {\n\t\t\t\tif (step.state === ProgressState.Error) {\n\t\t\t\t\tdispatch(SmartDesktopDesignerActions.set_publish_error(step.error));\n\t\t\t\t}\n\t\t\t\treturn step.state === ProgressState.Finished;\n\t\t\t})) ||\n\t\thasError;\n\n\tuseEffect(() => {\n\t\tlet debounceTimeout: any = null;\n\t\tif (!didFinish) {\n\t\t\tdebounceTimeout = setInterval(() => {\n\t\t\t\tprops.getPublishProgress().then((data) => {\n\t\t\t\t\tsetCurrentStep(data.currentStep);\n\t\t\t\t\tsetStepProgress(Object.values(data.steps));\n\n\t\t\t\t\t// Finished! When the installer step reaches state \"Finished\"\n\t\t\t\t\tif (data.steps[\"cloud\"].state === ProgressState.Finished) {\n\t\t\t\t\t\t// dispatch(SmartDesktopDesignerActions.SET_IS_PUBLISHING(false));\n\t\t\t\t\t\tclearInterval(debounceTimeout);\n\t\t\t\t\t\treset();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}, props.progressCheckInterval);\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (debounceTimeout) {\n\t\t\t\tclearInterval(debounceTimeout);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<div className=\"export-publish-container\">\n\t\t\t{publishError ? (\n\t\t\t\t<div className=\"export-publish-error\">\n\t\t\t\t\t<h3>Your project was not published</h3>\n\n\t\t\t\t\t<p>An error occurred while trying to publish.</p>\n\t\t\t\t\t<p className=\"export-publish-error-message\">&quot;{publishError}&quot;</p>\n\n\t\t\t\t\t<div className=\"export-error-actions\">\n\t\t\t\t\t\t<Button fashion=\"ghost\" text=\"Cancel\" onClick={reset} />\n\t\t\t\t\t\t<Button className=\"export-error-btn\" fashion=\"secondary\" text=\"Try again\" onClick={tryAgain} />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<h2>Publishing...</h2>\n\n\t\t\t\t\t<div className={[\"export-publish-progress\", hasError ? \"export-publish-has-error\" : \"\"].join(\" \")}>\n\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"initialize\",\n\t\t\t\t\t\t\t\tdescription: \"Creating a location for the project\",\n\t\t\t\t\t\t\t\terror: \"Failed to create a location for the project\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"zip\",\n\t\t\t\t\t\t\t\tdescription: \"Zipping project\",\n\t\t\t\t\t\t\t\terror: \"Failed to zip the project\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"upload\",\n\t\t\t\t\t\t\t\tdescription: \"Uploading project\",\n\t\t\t\t\t\t\t\terror: \"Failed to upload the project\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"cloud\",\n\t\t\t\t\t\t\t\tdescription: \"Creating installer and site\",\n\t\t\t\t\t\t\t\terror: \"Failed to publish\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t].map((step) => {\n\t\t\t\t\t\t\tlet data = stepProgress.find((item) => item.step === step.name);\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\tdata && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={step.name}\n\t\t\t\t\t\t\t\t\t\tclassName={[\n\t\t\t\t\t\t\t\t\t\t\t\"publish-progress-container\",\n\t\t\t\t\t\t\t\t\t\t\tcurrentStep === step.name ? \"publish-current-step\" : \"\",\n\t\t\t\t\t\t\t\t\t\t].join(\" \")}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-icon\">\n\t\t\t\t\t\t\t\t\t\t\t{/* eslint-disable no-nested-ternary */}\n\t\t\t\t\t\t\t\t\t\t\t{data.state === ProgressState.Started ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<PublishProgress {...data}></PublishProgress>\n\t\t\t\t\t\t\t\t\t\t\t) : data.state === ProgressState.NotStarted ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-pending\"></div>\n\t\t\t\t\t\t\t\t\t\t\t) : data.state === ProgressState.Error ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-error\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FinsembleIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"publish-progress-error-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel=\"Error\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t></FinsembleIcon>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-success\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FinsembleIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"publish-progress-success-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"check\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel=\"Success\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t></FinsembleIcon>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-text\">{data.error ? step.error : step.description}</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t\t{deployInfo && (\n\t\t\t\t\t\t<div className=\"export-publish-uploaded\">\n\t\t\t\t\t\t\t<h3>Project uploaded</h3>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tYour project has been uploaded to the cloud. It will take several minutes to generate an installer.\n\t\t\t\t\t\t\t\tShare the installer link with your team. The desktop you&apos;ve created will be available shortly by\n\t\t\t\t\t\t\t\tdownloading and installing from the link.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<ExportDeployInfo />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/sdd/PublishProgress.js

@@ -5,7 +5,17 @@
 import React from "react";
 import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
 export const PublishProgress = ({ percentComplete }) => (React.createElement("div", { className: "publish-progress-indicator", style: { width: 24, height: 24 } },
-    React.createElement(CircularProgressbar, { value: percentComplete, strokeWidth: 15, styles: buildStyles({
+    React.createElement(CircularProgressbar
+    // strokeWidth={24}
+    // reduction={0}
+    // hideBall={true}
+    // progress={percentComplete}
+    , { 
+        // strokeWidth={24}
+        // reduction={0}
+        // hideBall={true}
+        // progress={percentComplete}
+        value: percentComplete, strokeWidth: 15, styles: buildStyles({
             pathTransitionDuration: 0.5,
             pathColor: `#42a5ba`,
             trailColor: "#373b43",

package/react/components/sdd/PublishProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"PublishProgress.js","sourceRoot":"","sources":["../../../src/components/sdd/PublishProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAM9E,MAAM,CAAC,MAAM,eAAe,GAAkD,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACtG,6BAAK,SAAS,EAAC,4BAA4B,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,oBAAC,mBAAmB,IAKnB,KAAK,EAAE,eAAe,EACtB,WAAW,EAAE,EAAE,EACf,MAAM,EAAE,WAAW,CAAC;YACnB,sBAAsB,EAAE,GAAG;YAC3B,SAAS,EAAE,SAAS;YACpB,UAAU,EAAE,SAAS;YACrB,eAAe,EAAE,SAAS;SAC1B,CAAC,GACoB,CAClB,CACN,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React from \"react\";\n\nimport { CircularProgressbar, buildStyles } from \"react-circular-progressbar\";\n\nexport type PublishProgressProps = {\n\tpercentComplete: number;\n};\n\nexport const PublishProgress: React.FunctionComponent<PublishProgressProps> = ({ percentComplete }) => (\n\t<div className=\"publish-progress-indicator\" style={{ width: 24, height: 24 }}>\n\t\t<CircularProgressbar\n\t\t\t// strokeWidth={24}\n\t\t\t// reduction={0}\n\t\t\t// hideBall={true}\n\t\t\t// progress={percentComplete}\n\t\t\tvalue={percentComplete}\n\t\t\tstrokeWidth={15}\n\t\t\tstyles={buildStyles({\n\t\t\t\tpathTransitionDuration: 0.5,\n\t\t\t\tpathColor: `#42a5ba`,\n\t\t\t\ttrailColor: \"#373b43\",\n\t\t\t\tbackgroundColor: \"#3e98c7\",\n\t\t\t})}\n\t\t></CircularProgressbar>\n\t</div>\n);\n"]}
+{"version":3,"file":"PublishProgress.js","sourceRoot":"","sources":["../../../src/components/sdd/PublishProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAM9E,MAAM,CAAC,MAAM,eAAe,GAAkD,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACtG,6BAAK,SAAS,EAAC,4BAA4B,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,oBAAC,mBAAmB;IACnB,mBAAmB;IACnB,gBAAgB;IAChB,kBAAkB;IAClB,6BAA6B;;QAH7B,mBAAmB;QACnB,gBAAgB;QAChB,kBAAkB;QAClB,6BAA6B;QAC7B,KAAK,EAAE,eAAe,EACtB,WAAW,EAAE,EAAE,EACf,MAAM,EAAE,WAAW,CAAC;YACnB,sBAAsB,EAAE,GAAG;YAC3B,SAAS,EAAE,SAAS;YACpB,UAAU,EAAE,SAAS;YACrB,eAAe,EAAE,SAAS;SAC1B,CAAC,GACoB,CAClB,CACN,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React from \"react\";\n\nimport { CircularProgressbar, buildStyles } from \"react-circular-progressbar\";\n\nexport type PublishProgressProps = {\n\tpercentComplete: number;\n};\n\nexport const PublishProgress: React.FunctionComponent<PublishProgressProps> = ({ percentComplete }) => (\n\t<div className=\"publish-progress-indicator\" style={{ width: 24, height: 24 }}>\n\t\t<CircularProgressbar\n\t\t\t// strokeWidth={24}\n\t\t\t// reduction={0}\n\t\t\t// hideBall={true}\n\t\t\t// progress={percentComplete}\n\t\t\tvalue={percentComplete}\n\t\t\tstrokeWidth={15}\n\t\t\tstyles={buildStyles({\n\t\t\t\tpathTransitionDuration: 0.5,\n\t\t\t\tpathColor: `#42a5ba`,\n\t\t\t\ttrailColor: \"#373b43\",\n\t\t\t\tbackgroundColor: \"#3e98c7\",\n\t\t\t})}\n\t\t></CircularProgressbar>\n\t</div>\n);\n"]}

package/react/components/sdd/SmartDesktopDesigner.d.ts

@@ -5,25 +5,26 @@
 /// <reference types="react" />
 import "../../assets/css/finsemble.css";
 import "./css/styles.css";
-declare let themeConfig: {
+import { SmartDesktopClient } from "./smartDesktopClient";
+export declare type ThemeConfig = {
     currentTheme: string;
     defaultTheme: string;
     themes: {
-        Default: any;
+        Default: Record<string, string>;
+        [index: string]: Record<string, string>;
     };
 };
-export declare type ThemeConfig = typeof themeConfig;
-export declare type SmartDesktopDesignerProps = {
-    views: any[];
-    getConfig: typeof FSBL.Clients.ConfigClient.getValues;
-    resetProject: typeof FSBL.Clients.SmartDesktopClient.prototype.resetProject;
-    getSDServerInfo: typeof FSBL.Clients.SmartDesktopClient.prototype.getSDServerInfo;
-    getProjectSettings: typeof FSBL.Clients.SmartDesktopClient.prototype.getProjectSettings;
-    updateProjectSettings?: typeof FSBL.Clients.SmartDesktopClient.prototype.updateProjectSettings;
-    onThemeUpdated: typeof FSBL.Clients.SmartDesktopClient.onThemeUpdated;
-    selectProjectPath?: typeof FSBL.Clients.SmartDesktopClient.prototype.selectProjectPath;
+export interface SmartDesktopDesignerProps {
+    views?: any[];
+    getConfig?: typeof FSBL.Clients.ConfigClient.getValues;
+    resetProject?: typeof SmartDesktopClient.resetProject;
+    getSDServerInfo?: typeof SmartDesktopClient.getSDServerInfo;
+    getTheme?: typeof SmartDesktopClient.getTheme;
+    getProjectSettings?: typeof SmartDesktopClient.getProjectSettings;
+    updateProjectSettings?: typeof SmartDesktopClient.updateProjectSettings;
+    onThemeUpdated?: typeof SmartDesktopClient.onThemeUpdated;
+    selectProjectPath?: typeof SmartDesktopClient.selectProjectPath;
     restartFinsemble?: () => void;
-    setDefaults: () => Promise<void>;
-};
-export declare const SmartDesktopDesigner: (props: SmartDesktopDesignerProps) => JSX.Element;
-export {};
+    setDefaults?: () => Promise<void>;
+}
+export declare const SmartDesktopDesigner: ({ views, getConfig, getTheme, resetProject, getSDServerInfo, getProjectSettings, updateProjectSettings, onThemeUpdated, selectProjectPath, restartFinsemble, setDefaults, }: SmartDesktopDesignerProps) => JSX.Element;

package/react/components/sdd/SmartDesktopDesigner.js

@@ -2,6 +2,9 @@
  * Copyright 2017 - 2020 by ChartIQ, Inc.
  * All rights reserved.
  */
+/* If you rename "SmartDesktopDesigner" to something else (it's been Maker UI, Jumpstart, and DesktopProjectEditor in the past), grep for the following terms (case insensitive):
+ * "SmartDesktop", "Smart Desktop", "SDD", "SDServer", "SMART_DESKTOP"
+ */
 import React, { useState, useEffect, useRef } from "react";
 import FloatingFocus from "@q42/floating-focus-a11y";
 import "../../assets/css/finsemble.css";
@@ -13,17 +16,24 @@ import { useSelector, useDispatch } from "../../store";
 import { SmartDesktopDesignerActions } from "../../actions/smartDesktopDesignerActions";
 import { ContentHeader } from "./ContentHeader";
 import { Button } from "../common/Button";
+import defaultViews from "./common/views";
+import { setDefaults as defaultSetDefaults } from "./common/setPreloadDefaults";
+import { SmartDesktopClient } from "./smartDesktopClient";
+// The package FloatingFocus injects a focus indicator that moves around the page, but only for
+// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.
 new FloatingFocus();
+// If you want to make changes to the indicator, the styles are being maintained in assets/css/focus.css
+/**
+ * Initializes the Default theme with the CSS variables that are hard baked into Finsemble's UI library.
+ * These might be overridden by what is stored in the project's theme.css file.
+ * @returns An object containing the current theme.
+ */
 const getDefaultTheme = () => {
     let globalCssVars = {};
     const docStyle = window.getComputedStyle(document.documentElement);
     getCSSVars(document.styleSheets).forEach((varName) => {
         globalCssVars[varName] = docStyle.getPropertyValue(varName).trim();
     });
-    const themesheet = document.body.querySelector("#themesheet");
-    if (themesheet) {
-        document.body.removeChild(themesheet);
-    }
     return globalCssVars;
 };
 let themeConfig = {
@@ -33,9 +43,10 @@ let themeConfig = {
         Default: getDefaultTheme(),
     },
 };
-export const SmartDesktopDesigner = (props) => {
+export const SmartDesktopDesigner = ({ views = defaultViews, getConfig = (params, callback) => FSBL.Clients.ConfigClient.getValues(params, callback), getTheme = () => SmartDesktopClient.getTheme(), resetProject = () => SmartDesktopClient.resetProject(), getSDServerInfo = () => SmartDesktopClient.getSDServerInfo(), getProjectSettings = () => SmartDesktopClient.getProjectSettings(), updateProjectSettings = (settings) => SmartDesktopClient.updateProjectSettings(settings), onThemeUpdated = (callback) => SmartDesktopClient.onThemeUpdated(callback), selectProjectPath = () => SmartDesktopClient.selectProjectPath(), restartFinsemble = () => FSBL.System.Application.getCurrent().restart(), setDefaults = async () => {
+    await defaultSetDefaults();
+}, }) => {
     const dispatch = useDispatch();
-    const { views } = props;
     const [theme, setTheme] = useState(themeConfig);
     const [sdServerInfo, setSDServerInfo] = useState({ enabled: false, applicationRoot: "" });
     const [version, setVersion] = useState("");
@@ -52,43 +63,52 @@ export const SmartDesktopDesigner = (props) => {
         setTheme(newTheme);
     });
     useEffect(() => {
-        props.setDefaults();
-        props.getConfig(null, (err, newConfig) => {
-            var _a, _b, _c;
+        setDefaults();
+        // Initialize the local theme with data from theme.css (via REST)
+        getTheme().then((response) => {
+            if (!response.theme)
+                return;
+            const newTheme = Object.assign({}, themeConfig);
+            newTheme.themes.Default = Object.assign({}, newTheme.themes.Default);
+            Object.entries(response.theme).forEach(([key, value]) => {
+                newTheme.themes.Default[key] = value;
+            });
+            setTheme(newTheme);
+        });
+        // Initialize the local version number with the current FSBL version
+        FSBL.getFSBLInfo().then((info) => setVersion(info.FSBLVersion));
+        // Initialize the local project info based on data obtained from config of sdServerInfo
+        getConfig(null, async (err, newConfig) => {
+            var _a, _b, _c, _d;
             if (err) {
                 FSBL.Clients.Logger.system.error("SmartDesktopDesigner", err);
                 return;
             }
-            setVersion((_c = (_b = (_a = newConfig === null || newConfig === void 0 ? void 0 : newConfig.finsemble) === null || _a === void 0 ? void 0 : _a.system) === null || _b === void 0 ? void 0 : _b.FSBLVersion) !== null && _c !== void 0 ? _c : "");
-            props.getProjectSettings().then((response) => {
-                var _a;
-                let projectPath = project.path;
-                if ((_a = response.settings) === null || _a === void 0 ? void 0 : _a.path) {
-                    projectPath = response.settings.path;
-                }
-                props.getSDServerInfo().then((jsInfo) => {
-                    var _a, _b, _c;
-                    if (!jsInfo.enabled) {
-                        FSBL.Clients.Logger.system.error("Smart Desktop Designer started without the Smart Desktop Server being enabled. Check FEA configuration.");
-                    }
-                    else {
-                        FSBL.Clients.Logger.system.log(`DPS application root: ${jsInfo.applicationRoot}`);
-                    }
-                    FSBL.Clients.Logger.system.log(`DPS info: ${JSON.stringify(jsInfo)}`);
-                    FSBL.Clients.Logger.system.log(`NewConfig info: ${JSON.stringify(newConfig)}`);
-                    setProject(Object.assign(Object.assign({}, project), { name: ((_a = jsInfo === null || jsInfo === void 0 ? void 0 : jsInfo.projectConfig) === null || _a === void 0 ? void 0 : _a.name) || "", path: projectPath, export: Object.assign(Object.assign({}, project.export), { toolbarIcon: "/assets/img/Finsemble_Toolbar_Icon.png", installerIcon: "/assets/img/installer_icon.ico", taskbarIcon: (_b = newConfig === null || newConfig === void 0 ? void 0 : newConfig.startup_app) === null || _b === void 0 ? void 0 : _b.applicationIcon, systemTrayIcon: (_c = newConfig === null || newConfig === void 0 ? void 0 : newConfig.finsemble) === null || _c === void 0 ? void 0 : _c.systemTrayIcon, splashScreenImage: newConfig === null || newConfig === void 0 ? void 0 : newConfig.splashScreenImage }) }));
-                    setSDServerInfo(jsInfo);
-                });
-            });
+            const { settings } = await getProjectSettings();
+            const projectPath = (_a = settings === null || settings === void 0 ? void 0 : settings.path) !== null && _a !== void 0 ? _a : project.path;
+            const jsInfo = await getSDServerInfo();
+            if (!jsInfo.enabled) {
+                FSBL.Clients.Logger.system.error("Smart Desktop Designer started without the Smart Desktop Server being enabled. Check FEA configuration.");
+            }
+            else {
+                FSBL.Clients.Logger.system.log(`DPS application root: ${jsInfo.applicationRoot}`);
+            }
+            FSBL.Clients.Logger.system.log(`DPS info: ${JSON.stringify(jsInfo)}`);
+            FSBL.Clients.Logger.system.log(`NewConfig info: ${JSON.stringify(newConfig)}`);
+            setProject(Object.assign(Object.assign({}, project), { name: ((_b = jsInfo === null || jsInfo === void 0 ? void 0 : jsInfo.projectConfig) === null || _b === void 0 ? void 0 : _b.name) || "", path: projectPath, export: Object.assign(Object.assign({}, project.export), { toolbarIcon: "/assets/img/Finsemble_Toolbar_Icon.png", installerIcon: "/assets/img/installer_icon.ico", taskbarIcon: (_c = newConfig === null || newConfig === void 0 ? void 0 : newConfig.startup_app) === null || _c === void 0 ? void 0 : _c.applicationIcon, systemTrayIcon: (_d = newConfig === null || newConfig === void 0 ? void 0 : newConfig.finsemble) === null || _d === void 0 ? void 0 : _d.systemTrayIcon, splashScreenImage: newConfig === null || newConfig === void 0 ? void 0 : newConfig.splashScreenImage }) }));
+            // This should be done last as it's checked for initial rendering
+            // Otherwise, inital values will be cached within states of sub components
+            // "Untitled project" will show as project.name since it will be "", e.g.
+            setSDServerInfo(jsInfo);
         });
-        const removeHandler = props.onThemeUpdated(themeListenerRef.current);
+        const removeHandler = onThemeUpdated(themeListenerRef.current);
         return () => {
             removeHandler();
         };
     }, []);
     const clickResetProjectButton = () => {
-        const resetProject = async () => {
-            const [err] = await props.resetProject();
+        const resetProjectHelper = async () => {
+            const [err] = await resetProject();
             if (err)
                 alert(`Project failed to reset: ${err.message}`);
         };
@@ -100,7 +120,7 @@ export const SmartDesktopDesigner = (props) => {
             affirmativeResponseLabel: "Reset Project",
         }, (err, response) => {
             if (response.choice === "affirmative") {
-                resetProject();
+                resetProjectHelper();
             }
         });
     };

package/react/components/sdd/SmartDesktopDesigner.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmartDesktopDesigner.js","sourceRoot":"","sources":["../../../src/components/sdd/SmartDesktopDesigner.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\n/* If you rename \"SmartDesktopDesigner\" to something else (it's been Maker UI, Jumpstart, and DesktopProjectEditor in the past), grep for the following terms (case insensitive):\n * \"SmartDesktop\", \"Smart Desktop\", \"SDD\", \"SDServer\", \"SMART_DESKTOP\"\n */\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport FloatingFocus from \"@q42/floating-focus-a11y\";\nimport \"../../assets/css/finsemble.css\";\nimport \"./css/styles.css\";\nimport { Navigation } from \"./Navigation\";\nimport { CurrentView } from \"./CurrentView\";\nimport { getCSSVars } from \"./common/getCSSVars\";\nimport { useSelector, useDispatch } from \"../../store\";\nimport { RootState } from \"../../reducers/rootReducer\";\nimport { ProjectSaveData } from \"../../types/smartDesktopDesignerTypes\";\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\nimport { FEA } from \"@finsemble/finsemble-api\";\nimport { ContentHeader } from \"./ContentHeader\";\nimport { Button } from \"../common/Button\";\n\ntype SDServerInfo = FEA.SDServerInfo;\n\n// The package FloatingFocus injects a focus indicator that moves around the page, but only for\n// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.\nnew FloatingFocus();\n// If you want to make changes to the indicator, the styles are being maintained in assets/css/focus.css\n\nconst getDefaultTheme = () => {\n\tlet globalCssVars: any = {};\n\tconst docStyle = window.getComputedStyle(document.documentElement);\n\tgetCSSVars(document.styleSheets).forEach((varName: any) => {\n\t\tglobalCssVars[varName] = docStyle.getPropertyValue(varName).trim();\n\t});\n\n\t// In order to prevent the theme from affecting content of smartDesktopDesigner.tsx,\n\t// remove the sheet after reading variables\n\tconst themesheet = document.body.querySelector(\"#themesheet\");\n\tif (themesheet) {\n\t\tdocument.body.removeChild(themesheet);\n\t}\n\n\treturn globalCssVars;\n};\n\nlet themeConfig = {\n\tcurrentTheme: \"Default\",\n\tdefaultTheme: \"Default\",\n\tthemes: {\n\t\tDefault: getDefaultTheme(),\n\t},\n};\n\nexport type ThemeConfig = typeof themeConfig;\n\nexport type SmartDesktopDesignerProps = {\n\tviews: any[];\n\tgetConfig: typeof FSBL.Clients.ConfigClient.getValues;\n\tresetProject: typeof FSBL.Clients.SmartDesktopClient.prototype.resetProject;\n\tgetSDServerInfo: typeof FSBL.Clients.SmartDesktopClient.prototype.getSDServerInfo;\n\tgetProjectSettings: typeof FSBL.Clients.SmartDesktopClient.prototype.getProjectSettings;\n\tupdateProjectSettings?: typeof FSBL.Clients.SmartDesktopClient.prototype.updateProjectSettings;\n\tonThemeUpdated: typeof FSBL.Clients.SmartDesktopClient.onThemeUpdated;\n\tselectProjectPath?: typeof FSBL.Clients.SmartDesktopClient.prototype.selectProjectPath;\n\trestartFinsemble?: () => void;\n\tsetDefaults: () => Promise<void>;\n};\n\nexport const SmartDesktopDesigner = (props: SmartDesktopDesignerProps) => {\n\tconst dispatch = useDispatch();\n\n\tconst { views } = props;\n\tconst [theme, setTheme] = useState(themeConfig);\n\tconst [sdServerInfo, setSDServerInfo] = useState({ enabled: false, applicationRoot: \"\" } as SDServerInfo);\n\tconst [version, setVersion] = useState(\"\");\n\n\tconst project = useSelector((state: RootState) => state.smartDesktopDesigner.projectInfo);\n\n\tconst setProject = (value: ProjectSaveData) => {\n\t\tdispatch(SmartDesktopDesignerActions.set_project_info(value));\n\t};\n\n\tconst themeListenerRef = useRef((addListenerErr: any, { data }: { data: any }) => {\n\t\tconst newTheme = { ...themeConfig };\n\t\tnewTheme.themes.Default = { ...newTheme.themes.Default };\n\n\t\tfor (let [key, value] of Object.entries(data)) {\n\t\t\tnewTheme.themes.Default[key] = value;\n\t\t}\n\t\tsetTheme(newTheme);\n\t});\n\n\t// Similar to componentDidMount and componentDidUpdate:\n\tuseEffect(() => {\n\t\tprops.setDefaults();\n\t\tprops.getConfig(null, (err: any, newConfig: any) => {\n\t\t\tif (err) {\n\t\t\t\tFSBL.Clients.Logger.system.error(\"SmartDesktopDesigner\", err);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// @todo: We should use a Client API for this, rather than relying on the config to look this way.\n\t\t\t// That change will be easier to do once the SDD is removed from the Seed.\n\t\t\tsetVersion(newConfig?.finsemble?.system?.FSBLVersion ?? \"\");\n\n\t\t\tprops.getProjectSettings().then((response) => {\n\t\t\t\tlet projectPath = project.path;\n\n\t\t\t\tif (response.settings?.path) {\n\t\t\t\t\tprojectPath = response.settings.path;\n\t\t\t\t}\n\n\t\t\t\tprops.getSDServerInfo().then((jsInfo) => {\n\t\t\t\t\tif (!jsInfo.enabled) {\n\t\t\t\t\t\tFSBL.Clients.Logger.system.error(\n\t\t\t\t\t\t\t\"Smart Desktop Designer started without the Smart Desktop Server being enabled. Check FEA configuration.\"\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tFSBL.Clients.Logger.system.log(`DPS application root: ${jsInfo.applicationRoot}`);\n\t\t\t\t\t}\n\t\t\t\t\tFSBL.Clients.Logger.system.log(`DPS info: ${JSON.stringify(jsInfo)}`);\n\t\t\t\t\tFSBL.Clients.Logger.system.log(`NewConfig info: ${JSON.stringify(newConfig)}`);\n\n\t\t\t\t\tsetProject({\n\t\t\t\t\t\t...project,\n\t\t\t\t\t\tname: jsInfo?.projectConfig?.name || \"\",\n\t\t\t\t\t\tpath: projectPath,\n\t\t\t\t\t\texport: {\n\t\t\t\t\t\t\t...project.export,\n\t\t\t\t\t\t\ttoolbarIcon: \"/assets/img/Finsemble_Toolbar_Icon.png\",\n\t\t\t\t\t\t\tinstallerIcon: \"/assets/img/installer_icon.ico\",\n\t\t\t\t\t\t\ttaskbarIcon: newConfig?.startup_app?.applicationIcon,\n\t\t\t\t\t\t\tsystemTrayIcon: newConfig?.finsemble?.systemTrayIcon,\n\t\t\t\t\t\t\tsplashScreenImage: newConfig?.splashScreenImage,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\n\t\t\t\t\t// This should be done last as its checked for initial rendering\n\t\t\t\t\t// Otherwise, inital values will be cached within states of sub components\n\t\t\t\t\t// \"Untitled project\" will show as project.name since it will be \"\", e.g.\n\t\t\t\t\tsetSDServerInfo(jsInfo);\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\n\t\tconst removeHandler = props.onThemeUpdated(themeListenerRef.current);\n\t\treturn () => {\n\t\t\tremoveHandler();\n\t\t};\n\t}, []);\n\n\tconst clickResetProjectButton = () => {\n\t\tconst resetProject = async () => {\n\t\t\tconst [err] = await props.resetProject();\n\t\t\tif (err) alert(`Project failed to reset: ${err.message}`);\n\t\t};\n\t\tFSBL.Clients.DialogManager.open(\n\t\t\t\"yesNo\",\n\t\t\t{\n\t\t\t\ttitle: \"Are you sure?\",\n\t\t\t\tquestion: `Your project will be set back to factory defaults. You will lose all customizations except the name of the project. Finsemble will then be restarted.`,\n\t\t\t\thideModalOnClose: true,\n\t\t\t\tshowNegativeButton: false,\n\t\t\t\taffirmativeResponseLabel: \"Reset Project\",\n\t\t\t},\n\t\t\t(err: any, response: { choice: string }) => {\n\t\t\t\tif (response.choice === \"affirmative\") {\n\t\t\t\t\tresetProject();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t};\n\n\treturn sdServerInfo.enabled ? (\n\t\t<div className=\"config-container\">\n\t\t\t<div className=\"project-container\">\n\t\t\t\t<div className=\"nav-container\">\n\t\t\t\t\t<Navigation views={views}></Navigation>\n\n\t\t\t\t\t<div className=\"bottom-nav-wrapper\">\n\t\t\t\t\t\t<div className=\"nav-anchor-reset\">\n\t\t\t\t\t\t\t<div className=\"version-info\">{version && `Finsemble version ${version}`}</div>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tfashion=\"danger\"\n\t\t\t\t\t\t\t\ttext=\"Reset project\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tclickResetProjectButton();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"content-container\">\n\t\t\t\t\t<ContentHeader name={project.name} />\n\t\t\t\t\t<div className=\"view-container\">\n\t\t\t\t\t\t<CurrentView views={views} theme={theme}></CurrentView>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t) : (\n\t\t<></>\n\t);\n};\n"]}
+{"version":3,"file":"SmartDesktopDesigner.js","sourceRoot":"","sources":["../../../src/components/sdd/SmartDesktopDesigner.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\n/* If you rename \"SmartDesktopDesigner\" to something else (it's been Maker UI, Jumpstart, and DesktopProjectEditor in the past), grep for the following terms (case insensitive):\n * \"SmartDesktop\", \"Smart Desktop\", \"SDD\", \"SDServer\", \"SMART_DESKTOP\"\n */\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport FloatingFocus from \"@q42/floating-focus-a11y\";\nimport \"../../assets/css/finsemble.css\";\nimport \"./css/styles.css\";\nimport { Navigation } from \"./Navigation\";\nimport { CurrentView } from \"./CurrentView\";\nimport { getCSSVars } from \"./common/getCSSVars\";\nimport { useSelector, useDispatch } from \"../../store\";\nimport { RootState } from \"../../reducers/rootReducer\";\nimport { ProjectSaveData } from \"../../types/smartDesktopDesignerTypes\";\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\nimport { FEA } from \"@finsemble/finsemble-api\";\nimport { ContentHeader } from \"./ContentHeader\";\nimport { Button } from \"../common/Button\";\nimport defaultViews from \"./common/views\";\nimport { setDefaults as defaultSetDefaults } from \"./common/setPreloadDefaults\";\nimport { SmartDesktopClient } from \"./smartDesktopClient\";\n\n// The package FloatingFocus injects a focus indicator that moves around the page, but only for\n// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.\nnew FloatingFocus();\n// If you want to make changes to the indicator, the styles are being maintained in assets/css/focus.css\n\n/**\n * Initializes the Default theme with the CSS variables that are hard baked into Finsemble's UI library.\n * These might be overridden by what is stored in the project's theme.css file.\n * @returns An object containing the current theme.\n */\nconst getDefaultTheme = () => {\n\tlet globalCssVars: any = {};\n\tconst docStyle = window.getComputedStyle(document.documentElement);\n\tgetCSSVars(document.styleSheets).forEach((varName: any) => {\n\t\tglobalCssVars[varName] = docStyle.getPropertyValue(varName).trim();\n\t});\n\n\treturn globalCssVars;\n};\n\nexport type ThemeConfig = {\n\tcurrentTheme: string;\n\tdefaultTheme: string;\n\tthemes: {\n\t\tDefault: Record<string, string>;\n\t\t[index: string]: Record<string, string>;\n\t};\n};\n\nlet themeConfig: ThemeConfig = {\n\tcurrentTheme: \"Default\",\n\tdefaultTheme: \"Default\",\n\tthemes: {\n\t\tDefault: getDefaultTheme(),\n\t},\n};\n\nexport interface SmartDesktopDesignerProps {\n\tviews?: any[];\n\tgetConfig?: typeof FSBL.Clients.ConfigClient.getValues;\n\tresetProject?: typeof SmartDesktopClient.resetProject;\n\tgetSDServerInfo?: typeof SmartDesktopClient.getSDServerInfo;\n\tgetTheme?: typeof SmartDesktopClient.getTheme;\n\tgetProjectSettings?: typeof SmartDesktopClient.getProjectSettings;\n\tupdateProjectSettings?: typeof SmartDesktopClient.updateProjectSettings;\n\tonThemeUpdated?: typeof SmartDesktopClient.onThemeUpdated;\n\tselectProjectPath?: typeof SmartDesktopClient.selectProjectPath;\n\trestartFinsemble?: () => void;\n\tsetDefaults?: () => Promise<void>;\n}\n\nexport const SmartDesktopDesigner = ({\n\tviews = defaultViews,\n\tgetConfig = (params: any, callback: any) => FSBL.Clients.ConfigClient.getValues(params, callback),\n\tgetTheme = () => SmartDesktopClient.getTheme(),\n\tresetProject = () => SmartDesktopClient.resetProject(),\n\tgetSDServerInfo = () => SmartDesktopClient.getSDServerInfo(),\n\tgetProjectSettings = () => SmartDesktopClient.getProjectSettings(),\n\tupdateProjectSettings = (settings: any) => SmartDesktopClient.updateProjectSettings(settings),\n\tonThemeUpdated = (callback: any) => SmartDesktopClient.onThemeUpdated(callback),\n\tselectProjectPath = () => SmartDesktopClient.selectProjectPath(),\n\trestartFinsemble = () => FSBL.System.Application.getCurrent().restart(),\n\tsetDefaults = async () => {\n\t\tawait defaultSetDefaults();\n\t},\n}: SmartDesktopDesignerProps) => {\n\tconst dispatch = useDispatch();\n\n\tconst [theme, setTheme] = useState(themeConfig);\n\tconst [sdServerInfo, setSDServerInfo] = useState({ enabled: false, applicationRoot: \"\" } as FEA.SDServerInfo);\n\tconst [version, setVersion] = useState(\"\");\n\n\tconst project = useSelector((state: RootState) => state.smartDesktopDesigner.projectInfo);\n\n\tconst setProject = (value: ProjectSaveData) => {\n\t\tdispatch(SmartDesktopDesignerActions.set_project_info(value));\n\t};\n\n\tconst themeListenerRef = useRef((addListenerErr: any, { data }: { data: Record<string, string> }) => {\n\t\tconst newTheme = { ...themeConfig };\n\t\tnewTheme.themes.Default = { ...newTheme.themes.Default };\n\n\t\tfor (let [key, value] of Object.entries(data)) {\n\t\t\tnewTheme.themes.Default[key] = value;\n\t\t}\n\t\tsetTheme(newTheme);\n\t});\n\n\tuseEffect(() => {\n\t\tsetDefaults();\n\t\t// Initialize the local theme with data from theme.css (via REST)\n\t\tgetTheme().then((response) => {\n\t\t\tif (!response.theme) return;\n\t\t\tconst newTheme = { ...themeConfig };\n\t\t\tnewTheme.themes.Default = { ...newTheme.themes.Default };\n\n\t\t\tObject.entries(response.theme).forEach(([key, value]) => {\n\t\t\t\tnewTheme.themes.Default[key] = value;\n\t\t\t});\n\n\t\t\tsetTheme(newTheme);\n\t\t});\n\n\t\t// Initialize the local version number with the current FSBL version\n\t\tFSBL.getFSBLInfo().then((info) => setVersion(info.FSBLVersion));\n\n\t\t// Initialize the local project info based on data obtained from config of sdServerInfo\n\t\tgetConfig(null, async (err: any, newConfig: any) => {\n\t\t\tif (err) {\n\t\t\t\tFSBL.Clients.Logger.system.error(\"SmartDesktopDesigner\", err);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { settings } = await getProjectSettings();\n\n\t\t\tconst projectPath = settings?.path ?? project.path;\n\n\t\t\tconst jsInfo = await getSDServerInfo();\n\t\t\tif (!jsInfo.enabled) {\n\t\t\t\tFSBL.Clients.Logger.system.error(\n\t\t\t\t\t\"Smart Desktop Designer started without the Smart Desktop Server being enabled. Check FEA configuration.\"\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tFSBL.Clients.Logger.system.log(`DPS application root: ${jsInfo.applicationRoot}`);\n\t\t\t}\n\t\t\tFSBL.Clients.Logger.system.log(`DPS info: ${JSON.stringify(jsInfo)}`);\n\t\t\tFSBL.Clients.Logger.system.log(`NewConfig info: ${JSON.stringify(newConfig)}`);\n\n\t\t\tsetProject({\n\t\t\t\t...project,\n\t\t\t\tname: jsInfo?.projectConfig?.name || \"\",\n\t\t\t\tpath: projectPath,\n\t\t\t\texport: {\n\t\t\t\t\t...project.export,\n\t\t\t\t\ttoolbarIcon: \"/assets/img/Finsemble_Toolbar_Icon.png\",\n\t\t\t\t\tinstallerIcon: \"/assets/img/installer_icon.ico\",\n\t\t\t\t\ttaskbarIcon: newConfig?.startup_app?.applicationIcon,\n\t\t\t\t\tsystemTrayIcon: newConfig?.finsemble?.systemTrayIcon,\n\t\t\t\t\tsplashScreenImage: newConfig?.splashScreenImage,\n\t\t\t\t},\n\t\t\t});\n\n\t\t\t// This should be done last as it's checked for initial rendering\n\t\t\t// Otherwise, inital values will be cached within states of sub components\n\t\t\t// \"Untitled project\" will show as project.name since it will be \"\", e.g.\n\t\t\tsetSDServerInfo(jsInfo);\n\t\t});\n\n\t\tconst removeHandler = onThemeUpdated(themeListenerRef.current);\n\t\treturn () => {\n\t\t\tremoveHandler();\n\t\t};\n\t}, []);\n\n\tconst clickResetProjectButton = () => {\n\t\tconst resetProjectHelper = async () => {\n\t\t\tconst [err] = await resetProject();\n\t\t\tif (err) alert(`Project failed to reset: ${err.message}`);\n\t\t};\n\t\tFSBL.Clients.DialogManager.open(\n\t\t\t\"yesNo\",\n\t\t\t{\n\t\t\t\ttitle: \"Are you sure?\",\n\t\t\t\tquestion: `Your project will be set back to factory defaults. You will lose all customizations except the name of the project. Finsemble will then be restarted.`,\n\t\t\t\thideModalOnClose: true,\n\t\t\t\tshowNegativeButton: false,\n\t\t\t\taffirmativeResponseLabel: \"Reset Project\",\n\t\t\t},\n\t\t\t(err: any, response: { choice: string }) => {\n\t\t\t\tif (response.choice === \"affirmative\") {\n\t\t\t\t\tresetProjectHelper();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t};\n\n\treturn sdServerInfo.enabled ? (\n\t\t<div className=\"config-container\">\n\t\t\t<div className=\"project-container\">\n\t\t\t\t<div className=\"nav-container\">\n\t\t\t\t\t<Navigation views={views}></Navigation>\n\n\t\t\t\t\t<div className=\"bottom-nav-wrapper\">\n\t\t\t\t\t\t<div className=\"nav-anchor-reset\">\n\t\t\t\t\t\t\t<div className=\"version-info\">{version && `Finsemble version ${version}`}</div>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tfashion=\"danger\"\n\t\t\t\t\t\t\t\ttext=\"Reset project\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tclickResetProjectButton();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"content-container\">\n\t\t\t\t\t<ContentHeader name={project.name} />\n\t\t\t\t\t<div className=\"view-container\">\n\t\t\t\t\t\t<CurrentView views={views} theme={theme}></CurrentView>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t) : (\n\t\t<></>\n\t);\n};\n"]}

package/react/components/sdd/ThemePage.css

@@ -2,10 +2,6 @@
 	user-select: none;
 }
 
-.appearance-options-field {
-	display: flex;
-}
-
 .appearance-options label {
 	display: inline-block;
 	width: 50%;
@@ -13,15 +9,16 @@
 
 .theme-edit {
 	position: absolute;
-	top: 0px;
-	left: 0px;
-	bottom: 0px;
-	right: 0px;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
 	width: 100%;
 	height: 100%;
 }
 
 .theme-color-picker-text {
+	margin-left: 1em;
 	width: 6em;
 }
 
@@ -45,16 +42,6 @@
 	font-weight: bold;
 }
 
-.theme-settings h2 {
-	margin-top: 2em;
-	margin-bottom: 2em;
-	border-bottom: 2px solid #ccc;
-}
-
-.theme-settings legend {
-	font-weight: bold;
-}
-
 .appearance-options {
 	margin-bottom: 3em;
 }
@@ -67,7 +54,7 @@
 
 .appearance-options-field label {
 	width: 33.3%;
-	opacity: 75%;
+	opacity: 0.75;
 }
 
 .appearance-options-header {
@@ -100,10 +87,6 @@
 	background-color: #42a5ba;
 }
 
-.theme-color-picker-text {
-	margin-left: 1em;
-}
-
 .appearance-options-field .tooltip-icon {
 	margin-left: 10px;
 }

package/react/components/sdd/ThemePage.js

@@ -7,12 +7,15 @@ import { Tooltip } from "../common/Tooltip";
 import { ColorPicker, colorToRGBA, RGBA_CHANNEL } from "../common/ColorPicker";
 import "./ThemePage.css";
 export const ThemePage = ({ updateThemes, theme }) => {
+    const onUpdateColor = (id, newColor) => {
+        if (id === "font-color") {
+            const rgba = colorToRGBA(newColor), rgb = [rgba[RGBA_CHANNEL.RED], rgba[RGBA_CHANNEL.GREEN], rgba[RGBA_CHANNEL.BLUE]], alpha = 0.3; // (rgba[RGBA_CHANNEL.ALPHA] / 255)
+            updateThemes(`--toolbar-separator`, `1px solid rgba(${rgb.join(", ")}, ${alpha})`);
+        }
+        updateThemes(`--${id}`, newColor);
+    };
     const generateColorPicker = (id) => (React.createElement(ColorPicker, { id: id, startColor: theme[`--${id}`] || "", updateColor: (newColor) => {
-            if (id === "font-color") {
-                const rgba = colorToRGBA(newColor), rgb = [rgba[RGBA_CHANNEL.RED], rgba[RGBA_CHANNEL.GREEN], rgba[RGBA_CHANNEL.BLUE]], alpha = 0.3;
-                updateThemes(`--toolbar-separator`, `1px solid rgba(${rgb.join(", ")}, ${alpha})`);
-            }
-            updateThemes(`--${id}`, newColor);
+            onUpdateColor(id, newColor);
         } }));
     return (React.createElement("div", { className: "theme-settings" },
         React.createElement("div", { className: "theme-colors" },

package/react/components/sdd/ThemePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePage.js","sourceRoot":"","sources":["../../../src/components/sdd/ThemePage.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React from \"react\";\nimport { Tooltip } from \"../common/Tooltip\";\nimport { ColorPicker, colorToRGBA, RGBA_CHANNEL } from \"../common/ColorPicker\";\nimport \"./ThemePage.css\";\n\nexport type ThemeBundle = { [key: string]: string };\n\nexport type ThemePageProps = {\n\tupdateThemes: (id: string, newValue: string) => void;\n\ttheme: ThemeBundle;\n};\n\nexport const ThemePage = ({ updateThemes, theme }: ThemePageProps) => {\n\tconst generateColorPicker = (id: string) => (\n\t\t<ColorPicker\n\t\t\tid={id}\n\t\t\tstartColor={theme[`--${id}`] || \"\"}\n\t\t\tupdateColor={(newColor: string) => {\n\t\t\t\tif (id === \"font-color\") {\n\t\t\t\t\tconst rgba = colorToRGBA(newColor),\n\t\t\t\t\t\trgb = [rgba[RGBA_CHANNEL.RED], rgba[RGBA_CHANNEL.GREEN], rgba[RGBA_CHANNEL.BLUE]],\n\t\t\t\t\t\talpha = 0.3; // (rgba[RGBA_CHANNEL.ALPHA] / 255)\n\n\t\t\t\t\tupdateThemes(`--toolbar-separator`, `1px solid rgba(${rgb.join(\", \")}, ${alpha})`);\n\t\t\t\t}\n\n\t\t\t\tupdateThemes(`--${id}`, newColor);\n\t\t\t}}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<div className=\"theme-settings\">\n\t\t\t<div className=\"theme-colors\">\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Font settings</legend>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"font-color\">Primary font color</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"font-color\")}\n\t\t\t\t\t\t<Tooltip>Main text color. Make sure there is enough contrast against the primary background.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary-5\">Secondary font color</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-5\")}\n\t\t\t\t\t\t<Tooltip>Secondary text color. Make sure there is enough contrast against the primary background.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"font-color-2\">Contrast color</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"font-color-2\")}\n\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\tColor of text that is not against a typical background. Make it light if you have a light theme, or dark\n\t\t\t\t\t\t\tif you have a dark theme.\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\n\t\t\t<div className=\"theme-colors\">\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Brand color</legend>\n\n\t\t\t\t\t\t<Tooltip>The primary accent color that affects icons, form elements, buttons.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-primary\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-primary\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-primary-1\">On mouseover</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-primary-1\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Background color</legend>\n\n\t\t\t\t\t\t<Tooltip>Background color of desktop components such as the Toolbar and window Titlebar.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary\">Primary background</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary-1\">Secondary background</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-1\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Navigation buttons</legend>\n\n\t\t\t\t\t\t<Tooltip>Background color for navigation buttons.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary-2\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-2\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Highlights and mouseover colors</legend>\n\n\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\tColors used to highlight particular elements or when a user mouses over selected elements.\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary-3\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-3\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary-4\">Secondary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-4\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Success</legend>\n\n\t\t\t\t\t\t<Tooltip>Color of messages indicating success and affirmations, such as checkmark icons.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-positive\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-positive\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-positive-1\">On mouseover</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-positive-1\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Reminders and warnings</legend>\n\n\t\t\t\t\t\t<Tooltip>Color of non-critical alerts.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-aware\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-aware\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-aware-1\">On mouseover</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-aware-1\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Errors</legend>\n\n\t\t\t\t\t\t<Tooltip>Color of critical errors and information.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-negative\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-negative\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-negative-1\">On mouseover</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-negative-1\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"ThemePage.js","sourceRoot":"","sources":["../../../src/components/sdd/ThemePage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,iBAAiB,CAAC;AASzB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,YAAY,EAAE,KAAK,EAAkB,EAAE,EAAE;IACpE,MAAM,aAAa,GAAG,CAAC,EAAU,EAAE,QAAgB,EAAE,EAAE;QACtD,IAAI,EAAE,KAAK,YAAY,EAAE;YACxB,MAAM,IAAI,GAAG,WAAW,CAAC,QAAQ,CAAC,EACjC,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EACjF,KAAK,GAAG,GAAG,CAAC,CAAC,mCAAmC;YAEjD,YAAY,CAAC,qBAAqB,EAAE,kBAAkB,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC;SACnF;QAED,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,CAC3C,oBAAC,WAAW,IACX,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,EAAE,EAClC,WAAW,EAAE,CAAC,QAAgB,EAAE,EAAE;YACjC,aAAa,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QAC7B,CAAC,GACA,CACF,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAC,gBAAgB;QAC9B,6BAAK,SAAS,EAAC,cAAc;YAC5B,kCAAU,SAAS,EAAC,oBAAoB;gBACvC,6BAAK,SAAS,EAAC,2BAA2B;oBACzC,oDAA8B,CACzB;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,YAAY,yBAA2B;oBAErD,mBAAmB,CAAC,YAAY,CAAC;oBAClC,oBAAC,OAAO,8FAA8F,CACjG;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,gBAAgB,2BAA6B;oBAE3D,mBAAmB,CAAC,gBAAgB,CAAC;oBACtC,oBAAC,OAAO,mGAAmG,CACtG;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,cAAc,qBAAuB;oBAEnD,mBAAmB,CAAC,cAAc,CAAC;oBACpC,oBAAC,OAAO,6IAGE,CACL,CACI,CACN;QAEN,6BAAK,SAAS,EAAC,cAAc;YAC5B,kCAAU,SAAS,EAAC,oBAAoB;gBACvC,6BAAK,SAAS,EAAC,2BAA2B;oBACzC,kDAA4B;oBAE5B,oBAAC,OAAO,+EAA+E,CAClF;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,gBAAgB,cAAgB;oBAE9C,mBAAmB,CAAC,gBAAgB,CAAC,CACjC;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,kBAAkB,mBAAqB;oBAErD,mBAAmB,CAAC,kBAAkB,CAAC,CACnC,CACI;YAEX,kCAAU,SAAS,EAAC,oBAAoB;gBACvC,6BAAK,SAAS,EAAC,2BAA2B;oBACzC,uDAAiC;oBAEjC,oBAAC,OAAO,0FAA0F,CAC7F;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,cAAc,yBAA2B;oBAEvD,mBAAmB,CAAC,cAAc,CAAC,CAC/B;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,gBAAgB,2BAA6B;oBAE3D,mBAAmB,CAAC,gBAAgB,CAAC,CACjC,CACI;YAEX,kCAAU,SAAS,EAAC,oBAAoB;gBACvC,6BAAK,SAAS,EAAC,2BAA2B;oBACzC,yDAAmC;oBAEnC,oBAAC,OAAO,mDAAmD,CACtD;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,gBAAgB,cAAgB;oBAE9C,mBAAmB,CAAC,gBAAgB,CAAC,CACjC,CACI;YAEX,kCAAU,SAAS,EAAC,oBAAoB;gBACvC,6BAAK,SAAS,EAAC,2BAA2B;oBACzC,sEAAgD;oBAEhD,oBAAC,OAAO,qGAEE,CACL;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,gBAAgB,cAAgB;oBAE9C,mBAAmB,CAAC,gBAAgB,CAAC,CACjC;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,gBAAgB,gBAAkB;oBAEhD,mBAAmB,CAAC,gBAAgB,CAAC,CACjC,CACI;YAEX,kCAAU,SAAS,EAAC,oBAAoB;gBACvC,6BAAK,SAAS,EAAC,2BAA2B;oBACzC,8CAAwB;oBAExB,oBAAC,OAAO,0FAA0F,CAC7F;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,iBAAiB,cAAgB;oBAE/C,mBAAmB,CAAC,iBAAiB,CAAC,CAClC;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,mBAAmB,mBAAqB;oBAEtD,mBAAmB,CAAC,mBAAmB,CAAC,CACpC,CACI;YAEX,kCAAU,SAAS,EAAC,oBAAoB;gBACvC,6BAAK,SAAS,EAAC,2BAA2B;oBACzC,6DAAuC;oBAEvC,oBAAC,OAAO,wCAAwC,CAC3C;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,cAAc,cAAgB;oBAE5C,mBAAmB,CAAC,cAAc,CAAC,CAC/B;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,gBAAgB,mBAAqB;oBAEnD,mBAAmB,CAAC,gBAAgB,CAAC,CACjC,CACI;YAEX,kCAAU,SAAS,EAAC,oBAAoB;gBACvC,6BAAK,SAAS,EAAC,2BAA2B;oBACzC,6CAAuB;oBAEvB,oBAAC,OAAO,oDAAoD,CACvD;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,iBAAiB,cAAgB;oBAE/C,mBAAmB,CAAC,iBAAiB,CAAC,CAClC;gBAEN,6BAAK,SAAS,EAAC,0BAA0B;oBACxC,+BAAO,OAAO,EAAC,mBAAmB,mBAAqB;oBAEtD,mBAAmB,CAAC,mBAAmB,CAAC,CACpC,CACI,CACN,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React from \"react\";\nimport { Tooltip } from \"../common/Tooltip\";\nimport { ColorPicker, colorToRGBA, RGBA_CHANNEL } from \"../common/ColorPicker\";\nimport \"./ThemePage.css\";\n\nexport type ThemeBundle = { [key: string]: string };\n\nexport type ThemePageProps = {\n\tupdateThemes: (id: string, newValue: string) => void;\n\ttheme: ThemeBundle;\n};\n\nexport const ThemePage = ({ updateThemes, theme }: ThemePageProps) => {\n\tconst onUpdateColor = (id: string, newColor: string) => {\n\t\tif (id === \"font-color\") {\n\t\t\tconst rgba = colorToRGBA(newColor),\n\t\t\t\trgb = [rgba[RGBA_CHANNEL.RED], rgba[RGBA_CHANNEL.GREEN], rgba[RGBA_CHANNEL.BLUE]],\n\t\t\t\talpha = 0.3; // (rgba[RGBA_CHANNEL.ALPHA] / 255)\n\n\t\t\tupdateThemes(`--toolbar-separator`, `1px solid rgba(${rgb.join(\", \")}, ${alpha})`);\n\t\t}\n\n\t\tupdateThemes(`--${id}`, newColor);\n\t};\n\n\tconst generateColorPicker = (id: string) => (\n\t\t<ColorPicker\n\t\t\tid={id}\n\t\t\tstartColor={theme[`--${id}`] || \"\"}\n\t\t\tupdateColor={(newColor: string) => {\n\t\t\t\tonUpdateColor(id, newColor);\n\t\t\t}}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<div className=\"theme-settings\">\n\t\t\t<div className=\"theme-colors\">\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Font settings</legend>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"font-color\">Primary font color</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"font-color\")}\n\t\t\t\t\t\t<Tooltip>Main text color. Make sure there is enough contrast against the primary background.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary-5\">Secondary font color</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-5\")}\n\t\t\t\t\t\t<Tooltip>Secondary text color. Make sure there is enough contrast against the primary background.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"font-color-2\">Contrast color</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"font-color-2\")}\n\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\tColor of text that is not against a typical background. Make it light if you have a light theme, or dark\n\t\t\t\t\t\t\tif you have a dark theme.\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\n\t\t\t<div className=\"theme-colors\">\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Brand color</legend>\n\n\t\t\t\t\t\t<Tooltip>The primary accent color that affects icons, form elements, buttons.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-primary\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-primary\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-primary-1\">On mouseover</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-primary-1\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Background color</legend>\n\n\t\t\t\t\t\t<Tooltip>Background color of desktop components such as the Toolbar and window Titlebar.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary\">Primary background</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary-1\">Secondary background</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-1\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Navigation buttons</legend>\n\n\t\t\t\t\t\t<Tooltip>Background color for navigation buttons.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary-2\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-2\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Highlights and mouseover colors</legend>\n\n\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\tColors used to highlight particular elements or when a user mouses over selected elements.\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary-3\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-3\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"core-primary-4\">Secondary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-4\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Success</legend>\n\n\t\t\t\t\t\t<Tooltip>Color of messages indicating success and affirmations, such as checkmark icons.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-positive\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-positive\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-positive-1\">On mouseover</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-positive-1\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Reminders and warnings</legend>\n\n\t\t\t\t\t\t<Tooltip>Color of non-critical alerts.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-aware\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-aware\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-aware-1\">On mouseover</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-aware-1\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<fieldset className=\"appearance-options\">\n\t\t\t\t\t<div className=\"appearance-options-header\">\n\t\t\t\t\t\t<legend>Errors</legend>\n\n\t\t\t\t\t\t<Tooltip>Color of critical errors and information.</Tooltip>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-negative\">Primary</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-negative\")}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"appearance-options-field\">\n\t\t\t\t\t\t<label htmlFor=\"accent-negative-1\">On mouseover</label>\n\n\t\t\t\t\t\t{generateColorPicker(\"accent-negative-1\")}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/sdd/Themes.d.ts

@@ -6,6 +6,7 @@
 import { ThemeBundle } from "./ThemePage";
 import { ProjectSaveData } from "../../types/smartDesktopDesignerTypes";
 export declare type ThemeProps = {
+    updateTheme: (theme: ThemeBundle) => void;
     getSDServerInfo: (cb: Function) => void;
     updateProjectSettings: (obj: ProjectSaveData) => Promise<{
         err: string | undefined;
@@ -23,4 +24,4 @@ export declare type ThemeProps = {
         };
     };
 };
-export declare const Themes: ({ getSDServerInfo, updateProjectSettings, areYouSure, updateThemes, updateSplashScreen, updateToolbarIcon, updateTaskbarIcon, updateSystemTrayIcon, updateInstallerIcon, theme, }: ThemeProps) => JSX.Element;
+export declare const Themes: ({ getSDServerInfo, updateProjectSettings, areYouSure, updateTheme, updateThemes, updateSplashScreen, updateToolbarIcon, updateTaskbarIcon, updateSystemTrayIcon, updateInstallerIcon, theme, }: ThemeProps) => JSX.Element;

package/react/components/sdd/Themes.js

@@ -5,9 +5,10 @@
 import React, { useState, useEffect } from "react";
 import { View } from "./View";
 import { Content } from "./Content";
+// Copied from <Appearance>
 import { Appearance } from "./Appearance";
 import { darkTheme, lightTheme } from "./themeDefinitions";
-export const Themes = ({ getSDServerInfo, updateProjectSettings, areYouSure, updateThemes, updateSplashScreen, updateToolbarIcon, updateTaskbarIcon, updateSystemTrayIcon, updateInstallerIcon, theme, }) => {
+export const Themes = ({ getSDServerInfo, updateProjectSettings, areYouSure, updateTheme, updateThemes, updateSplashScreen, updateToolbarIcon, updateTaskbarIcon, updateSystemTrayIcon, updateInstallerIcon, theme, }) => {
     const [applicationRoot, setApplicationRoot] = useState("");
     const [project, setProject] = useState({
         name: "",
@@ -28,6 +29,7 @@ export const Themes = ({ getSDServerInfo, updateProjectSettings, areYouSure, upd
             splashScreenImage: "",
         },
     });
+    // Copied from <Appearance>
     const [toolbarIcon, setToolbarIcon] = useState(project.export.toolbarIcon);
     const [taskbarIcon, setTaskbarIcon] = useState(project.export.taskbarIcon);
     const [installerIcon, setInstallerIcon] = useState(project.export.installerIcon);
@@ -55,6 +57,6 @@ export const Themes = ({ getSDServerInfo, updateProjectSettings, areYouSure, upd
     return (React.createElement(View, null,
         React.createElement(Content, null,
             React.createElement("div", { className: "theme-edit" },
-                React.createElement(Appearance, { startTheme: theme.themes.Default, darkTheme: darkTheme, lightTheme: lightTheme, updateThemes: updateThemes, areYouSure: areYouSure, baseURL: applicationRoot || "", toolbarIcon: toolbarIcon, setToolbarIcon: setToolbarIcon, taskbarIcon: taskbarIcon, setTaskbarIcon: setTaskbarIcon, installerIcon: installerIcon, setInstallerIcon: setInstallerIcon, systemTrayIcon: systemTrayIcon, setSystemTrayIcon: setSystemTrayIcon, splashScreenImage: splashScreenImage, setSplashScreenImage: setSplashScreenImage, setIconsChanged: setIconsChanged, updateSplashScreen: updateSplashScreen, updateToolbarIcon: updateToolbarIcon, updateTaskbarIcon: updateTaskbarIcon, updateSystemTrayIcon: updateSystemTrayIcon, updateInstallerIcon: updateInstallerIcon })))));
+                React.createElement(Appearance, { startTheme: theme.themes.Default, darkTheme: darkTheme, lightTheme: lightTheme, updateTheme: updateTheme, updateThemes: updateThemes, areYouSure: areYouSure, baseURL: applicationRoot || "", toolbarIcon: toolbarIcon, setToolbarIcon: setToolbarIcon, taskbarIcon: taskbarIcon, setTaskbarIcon: setTaskbarIcon, installerIcon: installerIcon, setInstallerIcon: setInstallerIcon, systemTrayIcon: systemTrayIcon, setSystemTrayIcon: setSystemTrayIcon, splashScreenImage: splashScreenImage, setSplashScreenImage: setSplashScreenImage, setIconsChanged: setIconsChanged, updateSplashScreen: updateSplashScreen, updateToolbarIcon: updateToolbarIcon, updateTaskbarIcon: updateTaskbarIcon, updateSystemTrayIcon: updateSystemTrayIcon, updateInstallerIcon: updateInstallerIcon })))));
 };
 //# sourceMappingURL=Themes.js.map