@finsemble/finsemble-ui 6.4.0-beta.1 → 6.5.0

package/react/components/smartDesktopDesigner/SmartDesktopDesigner.js

@@ -11,6 +11,8 @@ import { CurrentView } from "./CurrentView";
 import { getCSSVars } from "./common/getCSSVars";
 import { useSelector, useDispatch } from "../../store";
 import { SmartDesktopDesignerActions } from "../../actions/smartDesktopDesignerActions";
+import { ContentHeader } from "./ContentHeader";
+import { Button } from "../common/Button";
 new FloatingFocus();
 const getDefaultTheme = () => {
     let globalCssVars = {};
@@ -36,6 +38,7 @@ export const SmartDesktopDesigner = (props) => {
     const { views } = props;
     const [theme, setTheme] = useState(themeConfig);
     const [sdServerInfo, setSDServerInfo] = useState({ enabled: false, applicationRoot: "" });
+    const [version, setVersion] = useState("");
     const project = useSelector((state) => state.smartDesktopDesigner.projectInfo);
     const setProject = (value) => {
         dispatch(SmartDesktopDesignerActions.set_project_info(value));
@@ -50,10 +53,12 @@ export const SmartDesktopDesigner = (props) => {
     });
     useEffect(() => {
         props.getConfig(null, (err, newConfig) => {
+            var _a, _b, _c;
             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;
@@ -80,11 +85,37 @@ export const SmartDesktopDesigner = (props) => {
             removeHandler();
         };
     }, []);
+    const clickResetProjectButton = () => {
+        const resetProject = async () => {
+            const [err] = await props.resetProject();
+            if (err)
+                alert(`Project failed to reset: ${err.message}`);
+        };
+        FSBL.Clients.DialogManager.open("yesNo", {
+            title: "Are you sure?",
+            question: `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.`,
+            hideModalOnClose: true,
+            showNegativeButton: false,
+            affirmativeResponseLabel: "Reset Project",
+        }, (err, response) => {
+            if (response.choice === "affirmative") {
+                resetProject();
+            }
+        });
+    };
     return sdServerInfo.enabled ? (React.createElement("div", { className: "config-container" },
         React.createElement("div", { className: "project-container" },
             React.createElement("div", { className: "nav-container" },
-                React.createElement(Navigation, { views: views })),
-            React.createElement("div", { className: "view-container" },
-                React.createElement(CurrentView, { views: views, theme: theme }))))) : (React.createElement(React.Fragment, null));
+                React.createElement(Navigation, { views: views }),
+                React.createElement("div", { className: "bottom-nav-wrapper" },
+                    React.createElement("div", { className: "nav-anchor-reset" },
+                        React.createElement("div", { className: "version-info" }, version && `Finsemble version ${version}`),
+                        React.createElement(Button, { fashion: "danger", text: "Reset project", onClick: () => {
+                                clickResetProjectButton();
+                            } })))),
+            React.createElement("div", { className: "content-container" },
+                React.createElement(ContentHeader, { name: project.name }),
+                React.createElement("div", { className: "view-container" },
+                    React.createElement(CurrentView, { views: views, theme: theme })))))) : (React.createElement(React.Fragment, null));
 };
 //# sourceMappingURL=SmartDesktopDesigner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SmartDesktopDesigner.js","sourceRoot":"","sources":["../../../src/components/smartDesktopDesigner/SmartDesktopDesigner.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\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):\r\n * \"SmartDesktop\", \"Smart Desktop\", \"SDD\", \"SDServer\", \"SMART_DESKTOP\"\r\n */\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport FloatingFocus from \"@q42/floating-focus-a11y\";\r\nimport \"../../assets/css/finsemble.css\";\r\nimport \"./css/styles.css\";\r\nimport { Navigation } from \"./Navigation\";\r\nimport { CurrentView } from \"./CurrentView\";\r\nimport { getCSSVars } from \"./common/getCSSVars\";\r\nimport { useSelector, useDispatch } from \"../../store\";\r\nimport { RootState } from \"../../reducers/rootReducer\";\r\nimport { ProjectSaveData } from \"../../types/smartDesktopDesignerTypes\";\r\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\r\nimport { FEA } from \"@finsemble/finsemble-core\";\r\n\r\ntype SDServerInfo = FEA.SDServerInfo;\r\n\r\n// The package FloatingFocus injects a focus indicator that moves around the page, but only for\r\n// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.\r\nnew FloatingFocus();\r\n// If you want to make changes to the indicator, the styles are being maintained in assets/css/focus.css\r\n\r\nconst getDefaultTheme = () => {\r\n\tlet globalCssVars: any = {};\r\n\tconst docStyle = window.getComputedStyle(document.documentElement);\r\n\tgetCSSVars(document.styleSheets).forEach((varName: any) => {\r\n\t\tglobalCssVars[varName] = docStyle.getPropertyValue(varName).trim();\r\n\t});\r\n\r\n\t// In order to prevent the theme from affecting content of smartDesktopDesigner.tsx,\r\n\t// remove the sheet after reading variables\r\n\tconst themesheet = document.body.querySelector(\"#themesheet\");\r\n\tif (themesheet) {\r\n\t\tdocument.body.removeChild(themesheet);\r\n\t}\r\n\r\n\treturn globalCssVars;\r\n};\r\n\r\nlet themeConfig = {\r\n\tcurrentTheme: \"Default\",\r\n\tdefaultTheme: \"Default\",\r\n\tthemes: {\r\n\t\tDefault: getDefaultTheme(),\r\n\t},\r\n};\r\n\r\nexport type ThemeConfig = typeof themeConfig;\r\n\r\nexport type SmartDesktopDesignerProps = {\r\n\tviews: any[];\r\n\tgetConfig: typeof FSBL.Clients.ConfigClient.getValues;\r\n\tresetProject?: typeof FSBL.Clients.SmartDesktopClient.prototype.resetProject;\r\n\tgetSDServerInfo: typeof FSBL.Clients.SmartDesktopClient.prototype.getSDServerInfo;\r\n\tgetProjectSettings: typeof FSBL.Clients.SmartDesktopClient.prototype.getProjectSettings;\r\n\tupdateProjectSettings?: typeof FSBL.Clients.SmartDesktopClient.prototype.updateProjectSettings;\r\n\tonThemeUpdated: typeof FSBL.Clients.SmartDesktopClient.onThemeUpdated;\r\n\tselectProjectPath?: typeof FSBL.Clients.SmartDesktopClient.prototype.selectProjectPath;\r\n\trestartFinsemble?: () => void;\r\n};\r\n\r\nexport const SmartDesktopDesigner = (props: SmartDesktopDesignerProps) => {\r\n\tconst dispatch = useDispatch();\r\n\r\n\tconst { views } = props;\r\n\tconst [theme, setTheme] = useState(themeConfig);\r\n\tconst [sdServerInfo, setSDServerInfo] = useState({ enabled: false, applicationRoot: \"\" } as SDServerInfo);\r\n\r\n\tconst project = useSelector((state: RootState) => state.smartDesktopDesigner.projectInfo);\r\n\r\n\tconst setProject = (value: ProjectSaveData) => {\r\n\t\tdispatch(SmartDesktopDesignerActions.set_project_info(value));\r\n\t};\r\n\r\n\tconst themeListenerRef = useRef((addListenerErr: any, { data }: { data: any }) => {\r\n\t\tconst newTheme = { ...themeConfig };\r\n\t\tnewTheme.themes.Default = { ...newTheme.themes.Default };\r\n\r\n\t\tfor (let [key, value] of Object.entries(data)) {\r\n\t\t\tnewTheme.themes.Default[key] = value;\r\n\t\t}\r\n\t\tsetTheme(newTheme);\r\n\t});\r\n\r\n\t// Similar to componentDidMount and componentDidUpdate:\r\n\tuseEffect(() => {\r\n\t\tprops.getConfig(null, (err: any, newConfig: any) => {\r\n\t\t\tif (err) {\r\n\t\t\t\tFSBL.Clients.Logger.system.error(\"SmartDesktopDesigner\", err);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tprops.getProjectSettings().then((response) => {\r\n\t\t\t\tlet projectPath = project.path;\r\n\r\n\t\t\t\tif (response.settings?.path) {\r\n\t\t\t\t\tprojectPath = response.settings.path;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tprops.getSDServerInfo().then((jsInfo) => {\r\n\t\t\t\t\tif (!jsInfo.enabled) {\r\n\t\t\t\t\t\tFSBL.Clients.Logger.system.error(\r\n\t\t\t\t\t\t\t\"Smart Desktop Designer started without the Smart Desktop Server being enabled. Check FEA configuration.\"\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tFSBL.Clients.Logger.system.log(`DPS application root: ${jsInfo.applicationRoot}`);\r\n\t\t\t\t\t}\r\n\t\t\t\t\tFSBL.Clients.Logger.system.log(`DPS info: ${JSON.stringify(jsInfo)}`);\r\n\t\t\t\t\tFSBL.Clients.Logger.system.log(`NewConfig info: ${JSON.stringify(newConfig)}`);\r\n\r\n\t\t\t\t\tsetProject({\r\n\t\t\t\t\t\t...project,\r\n\t\t\t\t\t\tname: jsInfo?.projectConfig?.name || \"\",\r\n\t\t\t\t\t\tpath: projectPath,\r\n\t\t\t\t\t\texport: {\r\n\t\t\t\t\t\t\t...project.export,\r\n\t\t\t\t\t\t\ttoolbarIcon: \"/assets/img/Finsemble_Toolbar_Icon.png\",\r\n\t\t\t\t\t\t\tinstallerIcon: \"/assets/img/installer_icon.ico\",\r\n\t\t\t\t\t\t\ttaskbarIcon: newConfig?.startup_app?.applicationIcon,\r\n\t\t\t\t\t\t\tsystemTrayIcon: newConfig?.finsemble?.systemTrayIcon,\r\n\t\t\t\t\t\t\tsplashScreenImage: newConfig?.splashScreenImage,\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t\t// This should be done last as its checked for initial rendering\r\n\t\t\t\t\t// Otherwise, inital values will be cached within states of sub components\r\n\t\t\t\t\t// \"Untitled Project\" will show as project.name since it will be \"\", e.g.\r\n\t\t\t\t\tsetSDServerInfo(jsInfo);\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t});\r\n\r\n\t\tconst removeHandler = props.onThemeUpdated(themeListenerRef.current);\r\n\t\treturn () => {\r\n\t\t\tremoveHandler();\r\n\t\t};\r\n\t}, []);\r\n\r\n\treturn sdServerInfo.enabled ? (\r\n\t\t<div className=\"config-container\">\r\n\t\t\t<div className=\"project-container\">\r\n\t\t\t\t<div className=\"nav-container\">\r\n\t\t\t\t\t<Navigation views={views}></Navigation>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div className=\"view-container\">\r\n\t\t\t\t\t<CurrentView views={views} theme={theme}></CurrentView>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t) : (\r\n\t\t<></>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"SmartDesktopDesigner.js","sourceRoot":"","sources":["../../../src/components/smartDesktopDesigner/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};\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.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"]}

package/react/components/smartDesktopDesigner/ThemePage.css

@@ -1,109 +1,109 @@
-.appearance-options legend {
-	user-select: none;
-}
-
-.appearance-options-field {
-	display: flex;
-}
-
-.appearance-options label {
-	display: inline-block;
-	width: 50%;
-}
-
-.theme-edit {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	bottom: 0px;
-	right: 0px;
-	width: 100%;
-	height: 100%;
-}
-
-.theme-color-picker-text {
-	width: 6em;
-}
-
-.color-picker .current-color {
-	width: 3em;
-	height: 3em;
-	border: 1px solid #ccc;
-}
-
-.color-picker .current-color-popup {
-	position: absolute;
-}
-
-.theme-settings h2 {
-	margin-top: 2em;
-	margin-bottom: 2em;
-	border-bottom: 2px solid #ccc;
-}
-
-.theme-settings legend {
-	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;
-}
-
-.appearance-options-field {
-	display: flex;
-	align-items: center;
-	margin-bottom: 0.5em;
-}
-
-.appearance-options-field label {
-	width: 33.3%;
-	opacity: 75%;
-}
-
-.appearance-options-header {
-	display: flex;
-	align-items: center;
-	margin-bottom: 1em;
-}
-
-.appearance-options-header legend {
-	font-size: 1.25em;
-	margin-right: 1em;
-}
-
-.theme-settings-actions {
-	display: block;
-	text-align: right;
-	margin-bottom: 3em;
-}
-
-.theme-settings-actions button {
-	margin-left: 0.9em;
-	display: inline-block;
-}
-
-.theme-settings-reset-action {
-	background-color: #f26666;
-}
-
-.theme-settings-save-action {
-	background-color: #42a5ba;
-}
-
-.theme-color-picker-text {
-	margin-left: 1em;
-}
-
-.appearance-options-field .tooltip-icon {
-	margin-left: 10px;
-}
+.appearance-options legend {
+	user-select: none;
+}
+
+.appearance-options-field {
+	display: flex;
+}
+
+.appearance-options label {
+	display: inline-block;
+	width: 50%;
+}
+
+.theme-edit {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	bottom: 0px;
+	right: 0px;
+	width: 100%;
+	height: 100%;
+}
+
+.theme-color-picker-text {
+	width: 6em;
+}
+
+.color-picker .current-color {
+	width: 3em;
+	height: 3em;
+	border: 1px solid #ccc;
+}
+
+.color-picker .current-color-popup {
+	position: absolute;
+}
+
+.theme-settings h2 {
+	margin-top: 2em;
+	margin-bottom: 2em;
+	border-bottom: 2px solid #ccc;
+}
+
+.theme-settings legend {
+	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;
+}
+
+.appearance-options-field {
+	display: flex;
+	align-items: center;
+	margin-bottom: 0.5em;
+}
+
+.appearance-options-field label {
+	width: 33.3%;
+	opacity: 75%;
+}
+
+.appearance-options-header {
+	display: flex;
+	align-items: center;
+	margin-bottom: 1em;
+}
+
+.appearance-options-header legend {
+	font-size: 1.25em;
+	margin-right: 1em;
+}
+
+.theme-settings-actions {
+	display: block;
+	text-align: right;
+	margin-bottom: 3em;
+}
+
+.theme-settings-actions button {
+	margin-left: 0.9em;
+	display: inline-block;
+}
+
+.theme-settings-reset-action {
+	background-color: #f26666;
+}
+
+.theme-settings-save-action {
+	background-color: #42a5ba;
+}
+
+.theme-color-picker-text {
+	margin-left: 1em;
+}
+
+.appearance-options-field .tooltip-icon {
+	margin-left: 10px;
+}

package/react/components/smartDesktopDesigner/ThemePage.js

@@ -5,7 +5,6 @@
 import React from "react";
 import { Tooltip } from "../common/Tooltip";
 import { ColorPicker, colorToRGBA, RGBA_CHANNEL } from "../common/ColorPicker";
-import { FontSize } from "../common/FontSizeSelector";
 import "./ThemePage.css";
 export const ThemePage = ({ updateThemes, theme }) => {
     const generateColorPicker = (id) => (React.createElement(ColorPicker, { id: id, startColor: theme[`--${id}`] || "", updateColor: (newColor) => {
@@ -15,17 +14,11 @@ export const ThemePage = ({ updateThemes, theme }) => {
             }
             updateThemes(`--${id}`, newColor);
         } }));
-    const generateFontSizeSelector = (id) => (React.createElement(FontSize, { id: id, startSize: theme[`--${id}`], updateSize: (newSize) => {
-            updateThemes(`--${id}`, newSize);
-        } }));
     return (React.createElement("div", { className: "theme-settings" },
         React.createElement("div", { className: "theme-colors" },
             React.createElement("fieldset", { className: "appearance-options" },
                 React.createElement("div", { className: "appearance-options-header" },
                     React.createElement("legend", null, "Font settings")),
-                React.createElement("div", { className: "appearance-options-field" },
-                    React.createElement("label", { htmlFor: "font-size" }, "Font size"),
-                    generateFontSizeSelector("font-size")),
                 React.createElement("div", { className: "appearance-options-field" },
                     React.createElement("label", { htmlFor: "font-color" }, "Primary font color"),
                     generateColorPicker("font-color"),

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

@@ -1 +1 @@
-{"version":3,"file":"ThemePage.js","sourceRoot":"","sources":["../../../src/components/smartDesktopDesigner/ThemePage.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport React from \"react\";\r\nimport { Tooltip } from \"../common/Tooltip\";\r\nimport { ColorPicker, colorToRGBA, RGBA_CHANNEL } from \"../common/ColorPicker\";\r\nimport { FontSize } from \"../common/FontSizeSelector\";\r\nimport \"./ThemePage.css\";\r\n\r\nexport type ThemeBundle = { [key: string]: string };\r\n\r\nexport type ThemePageProps = {\r\n\tupdateThemes: (id: string, newValue: string) => void;\r\n\ttheme: ThemeBundle;\r\n};\r\n\r\nexport const ThemePage = ({ updateThemes, theme }: ThemePageProps) => {\r\n\tconst generateColorPicker = (id: string) => (\r\n\t\t<ColorPicker\r\n\t\t\tid={id}\r\n\t\t\tstartColor={theme[`--${id}`] || \"\"}\r\n\t\t\tupdateColor={(newColor: string) => {\r\n\t\t\t\tif (id === \"font-color\") {\r\n\t\t\t\t\tconst rgba = colorToRGBA(newColor),\r\n\t\t\t\t\t\trgb = [rgba[RGBA_CHANNEL.RED], rgba[RGBA_CHANNEL.GREEN], rgba[RGBA_CHANNEL.BLUE]],\r\n\t\t\t\t\t\talpha = 0.3; // (rgba[RGBA_CHANNEL.ALPHA] / 255)\r\n\r\n\t\t\t\t\tupdateThemes(`--toolbar-separator`, `1px solid rgba(${rgb.join(\", \")}, ${alpha})`);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tupdateThemes(`--${id}`, newColor);\r\n\t\t\t}}\r\n\t\t/>\r\n\t);\r\n\r\n\tconst generateFontSizeSelector = (id: string) => (\r\n\t\t<FontSize\r\n\t\t\tid={id}\r\n\t\t\tstartSize={theme[`--${id}`]}\r\n\t\t\tupdateSize={(newSize: string) => {\r\n\t\t\t\tupdateThemes(`--${id}`, newSize);\r\n\t\t\t}}\r\n\t\t/>\r\n\t);\r\n\t//\r\n\r\n\treturn (\r\n\t\t<div className=\"theme-settings\">\r\n\t\t\t<div className=\"theme-colors\">\r\n\t\t\t\t<fieldset className=\"appearance-options\">\r\n\t\t\t\t\t<div className=\"appearance-options-header\">\r\n\t\t\t\t\t\t<legend>Font settings</legend>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"font-size\">Font size</label>\r\n\r\n\t\t\t\t\t\t{generateFontSizeSelector(\"font-size\")}\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"font-color\">Primary font color</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"font-color\")}\r\n\t\t\t\t\t\t<Tooltip>Main text color. Make sure there is enough contrast against the primary background.</Tooltip>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"core-primary-5\">Secondary font color</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-5\")}\r\n\t\t\t\t\t\t<Tooltip>Secondary text color. Make sure there is enough contrast against the primary background.</Tooltip>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"font-color-2\">Contrast color</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"font-color-2\")}\r\n\t\t\t\t\t\t<Tooltip>\r\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\r\n\t\t\t\t\t\t\tif you have a dark theme.\r\n\t\t\t\t\t\t</Tooltip>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</fieldset>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div className=\"theme-colors\">\r\n\t\t\t\t<fieldset className=\"appearance-options\">\r\n\t\t\t\t\t<div className=\"appearance-options-header\">\r\n\t\t\t\t\t\t<legend>Brand color</legend>\r\n\r\n\t\t\t\t\t\t<Tooltip>The primary accent color that affects icons, form elements, buttons.</Tooltip>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"accent-primary\">Primary</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"accent-primary\")}\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"accent-primary-1\">On mouseover</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"accent-primary-1\")}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</fieldset>\r\n\r\n\t\t\t\t<fieldset className=\"appearance-options\">\r\n\t\t\t\t\t<div className=\"appearance-options-header\">\r\n\t\t\t\t\t\t<legend>Background color</legend>\r\n\r\n\t\t\t\t\t\t<Tooltip>Background color of desktop components such as the Toolbar and window Titlebar.</Tooltip>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"core-primary\">Primary background</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"core-primary\")}\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"core-primary-1\">Secondary background</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-1\")}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</fieldset>\r\n\r\n\t\t\t\t<fieldset className=\"appearance-options\">\r\n\t\t\t\t\t<div className=\"appearance-options-header\">\r\n\t\t\t\t\t\t<legend>Navigation buttons</legend>\r\n\r\n\t\t\t\t\t\t<Tooltip>Background color for navigation buttons.</Tooltip>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"core-primary-2\">Primary</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-2\")}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</fieldset>\r\n\r\n\t\t\t\t<fieldset className=\"appearance-options\">\r\n\t\t\t\t\t<div className=\"appearance-options-header\">\r\n\t\t\t\t\t\t<legend>Highlights and mouseover colors</legend>\r\n\r\n\t\t\t\t\t\t<Tooltip>\r\n\t\t\t\t\t\t\tColors used to highlight particular elements or when a user mouses over selected elements.\r\n\t\t\t\t\t\t</Tooltip>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"core-primary-3\">Primary</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-3\")}\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"core-primary-4\">Secondary</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"core-primary-4\")}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</fieldset>\r\n\r\n\t\t\t\t<fieldset className=\"appearance-options\">\r\n\t\t\t\t\t<div className=\"appearance-options-header\">\r\n\t\t\t\t\t\t<legend>Success</legend>\r\n\r\n\t\t\t\t\t\t<Tooltip>Color of messages indicating success and affirmations, such as checkmark icons.</Tooltip>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"accent-positive\">Primary</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"accent-positive\")}\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"accent-positive-1\">On mouseover</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"accent-positive-1\")}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</fieldset>\r\n\r\n\t\t\t\t<fieldset className=\"appearance-options\">\r\n\t\t\t\t\t<div className=\"appearance-options-header\">\r\n\t\t\t\t\t\t<legend>Reminders and warnings</legend>\r\n\r\n\t\t\t\t\t\t<Tooltip>Color of non-critical alerts.</Tooltip>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"accent-aware\">Primary</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"accent-aware\")}\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"accent-aware-1\">On mouseover</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"accent-aware-1\")}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</fieldset>\r\n\r\n\t\t\t\t<fieldset className=\"appearance-options\">\r\n\t\t\t\t\t<div className=\"appearance-options-header\">\r\n\t\t\t\t\t\t<legend>Errors</legend>\r\n\r\n\t\t\t\t\t\t<Tooltip>Color of critical errors and information.</Tooltip>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"accent-negative\">Primary</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"accent-negative\")}\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div className=\"appearance-options-field\">\r\n\t\t\t\t\t\t<label htmlFor=\"accent-negative-1\">On mouseover</label>\r\n\r\n\t\t\t\t\t\t{generateColorPicker(\"accent-negative-1\")}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</fieldset>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"ThemePage.js","sourceRoot":"","sources":["../../../src/components/smartDesktopDesigner/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"]}

package/react/components/smartDesktopDesigner/Themes.js

@@ -4,7 +4,6 @@
  */
 import React, { useState, useEffect } from "react";
 import { View } from "./View";
-import { Header } from "../common/Header";
 import { Content } from "./Content";
 import { Appearance } from "./Appearance";
 import { darkTheme, lightTheme } from "./themeDefinitions";
@@ -54,7 +53,6 @@ export const Themes = ({ getSDServerInfo, updateProjectSettings, areYouSure, upd
                 splashScreenImage }) }));
     }, [iconsChanged]);
     return (React.createElement(View, null,
-        React.createElement(Header, null, "Themes"),
         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 })))));

package/react/components/smartDesktopDesigner/Themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Themes.js","sourceRoot":"","sources":["../../../src/components/smartDesktopDesigner/Themes.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { View } from \"./View\";\r\nimport { Header } from \"../common/Header\";\r\nimport { Content } from \"./Content\";\r\n\r\n// Copied from <Appearance>\r\nimport { Appearance } from \"./Appearance\";\r\nimport { darkTheme, lightTheme } from \"./themeDefinitions\";\r\nimport { ThemeBundle } from \"./ThemePage\";\r\nimport { ProjectSaveData, SDServerInfo } from \"../../types/smartDesktopDesignerTypes\";\r\n\r\nexport type ThemeProps = {\r\n\tgetSDServerInfo: (cb: Function) => void;\r\n\tupdateProjectSettings: (obj: ProjectSaveData) => Promise<{ err: string | undefined }>;\r\n\tareYouSure: (affirmativeCallback: Function) => void;\r\n\tupdateThemes: (id: string, newValue: string) => void;\r\n\tupdateSplashScreen: any;\r\n\tupdateToolbarIcon: any;\r\n\tupdateTaskbarIcon: any;\r\n\tupdateSystemTrayIcon: any;\r\n\tupdateInstallerIcon: any;\r\n\ttheme: {\r\n\t\tthemes: {\r\n\t\t\tDefault: ThemeBundle;\r\n\t\t};\r\n\t};\r\n};\r\n\r\nexport const Themes = ({\r\n\tgetSDServerInfo,\r\n\tupdateProjectSettings,\r\n\tareYouSure,\r\n\tupdateThemes,\r\n\tupdateSplashScreen,\r\n\tupdateToolbarIcon,\r\n\tupdateTaskbarIcon,\r\n\tupdateSystemTrayIcon,\r\n\tupdateInstallerIcon,\r\n\ttheme,\r\n}: ThemeProps) => {\r\n\tconst [applicationRoot, setApplicationRoot] = useState(\"\");\r\n\tconst [project, setProject] = useState({\r\n\t\tname: \"\",\r\n\t\tuser: {\r\n\t\t\tfirstName: \"\",\r\n\t\t\tlastName: \"\",\r\n\t\t\tcompany: \"\",\r\n\t\t\temail: \"\",\r\n\t\t},\r\n\t\texport: {\r\n\t\t\tauthor: \"\",\r\n\t\t\tcompanyName: \"\",\r\n\t\t\tdescription: \"\",\r\n\t\t\ttoolbarIcon: \"\",\r\n\t\t\tinstallerIcon: \"\",\r\n\t\t\ttaskbarIcon: \"\",\r\n\t\t\tsystemTrayIcon: \"\",\r\n\t\t\tsplashScreenImage: \"\",\r\n\t\t},\r\n\t});\r\n\r\n\t// Copied from <Appearance>\r\n\tconst [toolbarIcon, setToolbarIcon] = useState(project.export.toolbarIcon);\r\n\tconst [taskbarIcon, setTaskbarIcon] = useState(project.export.taskbarIcon);\r\n\tconst [installerIcon, setInstallerIcon] = useState(project.export.installerIcon);\r\n\tconst [systemTrayIcon, setSystemTrayIcon] = useState(project.export.systemTrayIcon);\r\n\tconst [splashScreenImage, setSplashScreenImage] = useState(project.export.splashScreenImage);\r\n\tconst [iconsChanged, setIconsChanged] = useState(0);\r\n\r\n\tuseEffect(() => {\r\n\t\tgetSDServerInfo((info: ProjectSaveData & SDServerInfo) => {\r\n\t\t\tsetProject(info);\r\n\t\t\tsetApplicationRoot(info.applicationRoot || \"\");\r\n\t\t\tsetToolbarIcon(info.export.toolbarIcon);\r\n\t\t\tsetTaskbarIcon(info.export.taskbarIcon);\r\n\t\t\tsetInstallerIcon(info.export.installerIcon);\r\n\t\t\tsetSystemTrayIcon(info.export.systemTrayIcon);\r\n\t\t\tsetSplashScreenImage(info.export.splashScreenImage);\r\n\t\t});\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tupdateProjectSettings({\r\n\t\t\t...project,\r\n\t\t\texport: {\r\n\t\t\t\t...project.export,\r\n\t\t\t\ttoolbarIcon,\r\n\t\t\t\tinstallerIcon,\r\n\t\t\t\ttaskbarIcon,\r\n\t\t\t\tsystemTrayIcon,\r\n\t\t\t\tsplashScreenImage,\r\n\t\t\t},\r\n\t\t});\r\n\t}, [iconsChanged]);\r\n\r\n\treturn (\r\n\t\t<View>\r\n\t\t\t<Header>Themes</Header>\r\n\r\n\t\t\t<Content>\r\n\t\t\t\t<div className=\"theme-edit\">\r\n\t\t\t\t\t<Appearance\r\n\t\t\t\t\t\tstartTheme={theme.themes.Default}\r\n\t\t\t\t\t\tdarkTheme={darkTheme}\r\n\t\t\t\t\t\tlightTheme={lightTheme}\r\n\t\t\t\t\t\tupdateThemes={updateThemes}\r\n\t\t\t\t\t\tareYouSure={areYouSure}\r\n\t\t\t\t\t\tbaseURL={applicationRoot || \"\"}\r\n\t\t\t\t\t\ttoolbarIcon={toolbarIcon}\r\n\t\t\t\t\t\tsetToolbarIcon={setToolbarIcon}\r\n\t\t\t\t\t\ttaskbarIcon={taskbarIcon}\r\n\t\t\t\t\t\tsetTaskbarIcon={setTaskbarIcon}\r\n\t\t\t\t\t\tinstallerIcon={installerIcon}\r\n\t\t\t\t\t\tsetInstallerIcon={setInstallerIcon}\r\n\t\t\t\t\t\tsystemTrayIcon={systemTrayIcon}\r\n\t\t\t\t\t\tsetSystemTrayIcon={setSystemTrayIcon}\r\n\t\t\t\t\t\tsplashScreenImage={splashScreenImage}\r\n\t\t\t\t\t\tsetSplashScreenImage={setSplashScreenImage}\r\n\t\t\t\t\t\tsetIconsChanged={setIconsChanged}\r\n\t\t\t\t\t\tupdateSplashScreen={updateSplashScreen}\r\n\t\t\t\t\t\tupdateToolbarIcon={updateToolbarIcon}\r\n\t\t\t\t\t\tupdateTaskbarIcon={updateTaskbarIcon}\r\n\t\t\t\t\t\tupdateSystemTrayIcon={updateSystemTrayIcon}\r\n\t\t\t\t\t\tupdateInstallerIcon={updateInstallerIcon}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\t\t\t</Content>\r\n\t\t</View>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"Themes.js","sourceRoot":"","sources":["../../../src/components/smartDesktopDesigner/Themes.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 { View } from \"./View\";\nimport { Header } from \"../common/Header\";\nimport { Content } from \"./Content\";\n\n// Copied from <Appearance>\nimport { Appearance } from \"./Appearance\";\nimport { darkTheme, lightTheme } from \"./themeDefinitions\";\nimport { ThemeBundle } from \"./ThemePage\";\nimport { ProjectSaveData, SDServerInfo } from \"../../types/smartDesktopDesignerTypes\";\n\nexport type ThemeProps = {\n\tgetSDServerInfo: (cb: Function) => void;\n\tupdateProjectSettings: (obj: ProjectSaveData) => Promise<{ err: string | undefined }>;\n\tareYouSure: (affirmativeCallback: Function) => void;\n\tupdateThemes: (id: string, newValue: string) => void;\n\tupdateSplashScreen: any;\n\tupdateToolbarIcon: any;\n\tupdateTaskbarIcon: any;\n\tupdateSystemTrayIcon: any;\n\tupdateInstallerIcon: any;\n\ttheme: {\n\t\tthemes: {\n\t\t\tDefault: ThemeBundle;\n\t\t};\n\t};\n};\n\nexport const Themes = ({\n\tgetSDServerInfo,\n\tupdateProjectSettings,\n\tareYouSure,\n\tupdateThemes,\n\tupdateSplashScreen,\n\tupdateToolbarIcon,\n\tupdateTaskbarIcon,\n\tupdateSystemTrayIcon,\n\tupdateInstallerIcon,\n\ttheme,\n}: ThemeProps) => {\n\tconst [applicationRoot, setApplicationRoot] = useState(\"\");\n\tconst [project, setProject] = useState({\n\t\tname: \"\",\n\t\tuser: {\n\t\t\tfirstName: \"\",\n\t\t\tlastName: \"\",\n\t\t\tcompany: \"\",\n\t\t\temail: \"\",\n\t\t},\n\t\texport: {\n\t\t\tauthor: \"\",\n\t\t\tcompanyName: \"\",\n\t\t\tdescription: \"\",\n\t\t\ttoolbarIcon: \"\",\n\t\t\tinstallerIcon: \"\",\n\t\t\ttaskbarIcon: \"\",\n\t\t\tsystemTrayIcon: \"\",\n\t\t\tsplashScreenImage: \"\",\n\t\t},\n\t});\n\n\t// Copied from <Appearance>\n\tconst [toolbarIcon, setToolbarIcon] = useState(project.export.toolbarIcon);\n\tconst [taskbarIcon, setTaskbarIcon] = useState(project.export.taskbarIcon);\n\tconst [installerIcon, setInstallerIcon] = useState(project.export.installerIcon);\n\tconst [systemTrayIcon, setSystemTrayIcon] = useState(project.export.systemTrayIcon);\n\tconst [splashScreenImage, setSplashScreenImage] = useState(project.export.splashScreenImage);\n\tconst [iconsChanged, setIconsChanged] = useState(0);\n\n\tuseEffect(() => {\n\t\tgetSDServerInfo((info: ProjectSaveData & SDServerInfo) => {\n\t\t\tsetProject(info);\n\t\t\tsetApplicationRoot(info.applicationRoot || \"\");\n\t\t\tsetToolbarIcon(info.export.toolbarIcon);\n\t\t\tsetTaskbarIcon(info.export.taskbarIcon);\n\t\t\tsetInstallerIcon(info.export.installerIcon);\n\t\t\tsetSystemTrayIcon(info.export.systemTrayIcon);\n\t\t\tsetSplashScreenImage(info.export.splashScreenImage);\n\t\t});\n\t}, []);\n\n\tuseEffect(() => {\n\t\tupdateProjectSettings({\n\t\t\t...project,\n\t\t\texport: {\n\t\t\t\t...project.export,\n\t\t\t\ttoolbarIcon,\n\t\t\t\tinstallerIcon,\n\t\t\t\ttaskbarIcon,\n\t\t\t\tsystemTrayIcon,\n\t\t\t\tsplashScreenImage,\n\t\t\t},\n\t\t});\n\t}, [iconsChanged]);\n\n\treturn (\n\t\t<View>\n\t\t\t<Content>\n\t\t\t\t<div className=\"theme-edit\">\n\t\t\t\t\t<Appearance\n\t\t\t\t\t\tstartTheme={theme.themes.Default}\n\t\t\t\t\t\tdarkTheme={darkTheme}\n\t\t\t\t\t\tlightTheme={lightTheme}\n\t\t\t\t\t\tupdateThemes={updateThemes}\n\t\t\t\t\t\tareYouSure={areYouSure}\n\t\t\t\t\t\tbaseURL={applicationRoot || \"\"}\n\t\t\t\t\t\ttoolbarIcon={toolbarIcon}\n\t\t\t\t\t\tsetToolbarIcon={setToolbarIcon}\n\t\t\t\t\t\ttaskbarIcon={taskbarIcon}\n\t\t\t\t\t\tsetTaskbarIcon={setTaskbarIcon}\n\t\t\t\t\t\tinstallerIcon={installerIcon}\n\t\t\t\t\t\tsetInstallerIcon={setInstallerIcon}\n\t\t\t\t\t\tsystemTrayIcon={systemTrayIcon}\n\t\t\t\t\t\tsetSystemTrayIcon={setSystemTrayIcon}\n\t\t\t\t\t\tsplashScreenImage={splashScreenImage}\n\t\t\t\t\t\tsetSplashScreenImage={setSplashScreenImage}\n\t\t\t\t\t\tsetIconsChanged={setIconsChanged}\n\t\t\t\t\t\tupdateSplashScreen={updateSplashScreen}\n\t\t\t\t\t\tupdateToolbarIcon={updateToolbarIcon}\n\t\t\t\t\t\tupdateTaskbarIcon={updateTaskbarIcon}\n\t\t\t\t\t\tupdateSystemTrayIcon={updateSystemTrayIcon}\n\t\t\t\t\t\tupdateInstallerIcon={updateInstallerIcon}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</Content>\n\t\t</View>\n\t);\n};\n"]}

package/react/components/smartDesktopDesigner/Toolbar.js

@@ -5,16 +5,15 @@
 import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "../../store";
 import { View } from "./View";
-import { Tab } from "../common/Tab";
 import { Header } from "../common/Header";
 import { FinsembleSelect } from "../common/FinsembleSelect";
 import { Button } from "../common/Button";
 import { Content } from "./Content";
-import { ApplicationList } from "./ApplicationList";
+import { ItemList } from "./ItemList";
 import { SmartDesktopDesignerActions } from "../../actions/smartDesktopDesignerActions";
 const MENU_NAME_MAX_LENGTH = 50;
 const EMPTY_MENU_ERROR = {
-    viewId: "applications",
+    viewId: "toolbar",
     message: "One or more of your app menus is empty",
 };
 export const Toolbar = (props) => {
@@ -25,7 +24,7 @@ export const Toolbar = (props) => {
     const [selectedApps, setSelectedApps] = useState([]);
     const apps = useSelector((state) => state.smartDesktopDesigner.apps);
     const menus = useSelector((state) => state.smartDesktopDesigner.menus);
-    if (Object.values(menus).every((menu) => menu.applications.length > 1)) {
+    if (Object.values(menus).every((menu) => menu.applications.length > 0)) {
         dispatch(SmartDesktopDesignerActions.delete_project_error(EMPTY_MENU_ERROR));
     }
     else {
@@ -77,22 +76,22 @@ export const Toolbar = (props) => {
     };
     useEffect(updateMenuList, []);
     const applicationListProps = {
-        apps: Object.entries(menus).map(([key, value]) => {
+        items: Object.entries(menus).map(([key, value]) => {
             var _a;
             const menuObj = JSON.parse(JSON.stringify(value));
             menuObj.appId = key;
             menuObj.name = (_a = menuObj.name) !== null && _a !== void 0 ? _a : menuObj.displayName;
             if (menuObj.applications.length === 0) {
-                menuObj.icon = "warning";
+                menuObj.icons = "warning";
             }
             return menuObj;
         }),
-        clickApp: (menuId) => {
+        clickItem: (menuId) => {
             setCurrentMenuID(menuId);
             setMenuName(menus[menuId].displayName);
             setSelectedApps(menus[menuId].applications);
         },
-        deleteApp: removeMenuID,
+        deleteItem: removeMenuID,
     };
     const backFunction = () => {
         setCurrentMenuID("");
@@ -106,20 +105,19 @@ export const Toolbar = (props) => {
                         setMenuName(e.target.value.substr(0, MENU_NAME_MAX_LENGTH));
                     } })),
             React.createElement("div", { className: "app-edit-field" },
-                React.createElement("label", { htmlFor: "menu-group" }, "Group Contents"),
+                React.createElement("label", { htmlFor: "menu-group" }, "Group contents"),
                 React.createElement(FinsembleSelect, { options: apps.map((app) => app.name), values: apps.map((app) => app.appId), selected: ((_a = menus[currentMenuID]) === null || _a === void 0 ? void 0 : _a.applications) || [], updateCallback: setSelectedApps, showSearch: true })),
             React.createElement("div", { className: "app-edit-actions" },
                 React.createElement("span", null),
                 React.createElement(Button, { fashion: "secondary", text: "Save", disabled: menuName.length <= 0, onClick: updateMenuItem }))))) : (React.createElement(View, null,
-        React.createElement(Header, null, "Apps"),
+        React.createElement(Header, null, "Toolbar"),
         React.createElement(Content, null,
-            React.createElement(Tab, null,
-                React.createElement("div", { "data-label": "Menus" },
-                    React.createElement("div", { className: "frontmatter" },
-                        "This screen allows you to make menus that will appear on your Toolbar.",
-                        React.createElement("br", null),
-                        "You are allowed a maximum of five Menus."),
-                    React.createElement(Button, { className: "icon-before-add", fashion: "primary", text: "Add", iconBefore: "plus", disabled: Object.keys(menus).length >= 5, onClick: addNewMenu }),
-                    React.createElement(ApplicationList, Object.assign({}, applicationListProps)))))))));
+            React.createElement("div", { "data-label": "Menus" },
+                React.createElement("div", { className: "frontmatter" },
+                    "This screen allows you to make menus that will appear on your Toolbar.",
+                    React.createElement("br", null),
+                    "You are allowed a maximum of five Menus."),
+                React.createElement(Button, { className: "icon-before-add", fashion: "primary", text: "Add", iconBefore: "plus", disabled: Object.keys(menus).length >= 5, onClick: addNewMenu }),
+                React.createElement(ItemList, Object.assign({}, applicationListProps))))))));
 };
 //# sourceMappingURL=Toolbar.js.map