add application-settings

apps/react-starter/src/App.tsx

@@ -14,17 +14,19 @@ import {
   IxMenuSettingsItem,
 } from "@siemens/ix-react";
 import * as echarts from "echarts/core";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { NavLink, Outlet } from "react-router-dom";
 import useShowDemoMessage from "./hooks/demoMessage";
 import Logo from "./Logo";
-import { useDataStore } from "./store/device-store";
 import UserSettings from "./pages/user-settings";
+import { useDataStore } from "./store/device-store";
+import ApplicationSettings from "./pages/application-settings";
 
 registerTheme(echarts);
 
 function App() {
+  const menuRef = useRef<HTMLIxMenuElement>(null);
   const showDemoMessage = useShowDemoMessage();
   const { fetch } = useDataStore();
 
@@ -48,6 +50,7 @@ function App() {
         </IxAvatar>
       </IxApplicationHeader>
       <IxMenu
+        ref={menuRef}
         enableToggleTheme
         i18nToggleTheme={t("toggle-theme")}
         i18nSettings={t("settings.title")}
@@ -72,6 +75,9 @@ function App() {
           <IxMenuSettingsItem label={t("settings.user-settings")}>
             <UserSettings />
           </IxMenuSettingsItem>
+          <IxMenuSettingsItem label={t("settings.application-settings")}>
+            <ApplicationSettings />
+          </IxMenuSettingsItem>
         </IxMenuSettings>
       </IxMenu>
 

apps/react-starter/src/locales/de/translation.json

@@ -89,7 +89,14 @@
   },
   "settings": {
     "title": "Einstellungen",
-    "user-settings": "Benutzereinstellungen"
+    "user-settings": "Benutzereinstellungen",
+    "application-settings": "Anwendungseinstellungen",
+    "notification": "Benachrichtigung",
+    "toggle-on": "Eingeschaltet",
+    "toggle-off": "Ausgeschaltet",
+    "import-device": "Gerätedaten importieren",
+    "upload-text": "Dateien hierher ziehen oder...",
+    "upload-button": "Dateien auswählen"
   },
   "toggle-theme": "Theme wechseln",
   "search": "Suchen",

apps/react-starter/src/locales/en/translation.json

@@ -90,7 +90,14 @@
   },
   "settings": {
     "title": "Settings",
-    "user-settings": "User settings"
+    "user-settings": "User settings",
+    "application-settings": "Application settings",
+    "notification": "Notification",
+    "toggle-on": "On",
+    "toggle-off": "Off",
+    "import-device": "Import device data",
+    "upload-text": "Drag files here or...",
+    "upload-button": "Browse files"
   },
   "toggle-theme": "Toggle theme",
   "search": "Search",

apps/react-starter/src/pages/application-settings/index.tsx

@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { IxToggle, IxTypography, IxUpload } from "@siemens/ix-react";
+import styles from "./styles.module.css";
+import { useTranslation } from "react-i18next";
+
+export default function ApplicationSettings() {
+  const { t } = useTranslation();
+  return (
+    <section className={styles.ApplicationSettings}>
+      <section>
+        <IxTypography format="h4" className={styles.Headline}>
+          {t("settings.notification")}
+        </IxTypography>
+        <IxToggle textOn={t("settings.toggle-on")} textOff={t("settings.toggle-off")}></IxToggle>
+      </section>
+      <section>
+        <IxTypography format="h4" className={styles.Headline}>
+          {t("settings.import-device")}
+        </IxTypography>
+        <IxUpload
+          className={styles.Upload}
+          i18nUploadFile={t("settings.upload-button")}
+          selectFileText={t("settings.upload-text")}
+        ></IxUpload>
+      </section>
+    </section>
+  );
+}

apps/react-starter/src/pages/application-settings/styles.module.css

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.ApplicationSettings {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.Headline {
+  margin-bottom: 0.75rem;
+}
+
+.Upload {
+  width: fit-content;
+  width: 25rem;
+  max-width: 25rem;
+}

apps/react-starter/src/pages/user-settings/index.tsx

@@ -24,12 +24,21 @@ function ThemeButton(props: {
   onClick?: () => void;
 }) {
   return (
-    <div className={styles.ThemeButton}>
+    <div
+      className={styles.ThemeButton}
+      onClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (props.onClick) {
+          props.onClick();
+        }
+      }}
+    >
       <div
         className={clsx(styles.ThemeImagePreview, {
           [styles.Active]: props.active,
         })}
-        onClick={props.onClick}
       >
         <img draggable={false} src={props.image} alt="Siemens brand theme" />
       </div>
@@ -38,7 +47,9 @@ function ThemeButton(props: {
           type="radio"
           checked={props.active}
           id={props.name}
-          onChange={() => props.onClick?.()}
+          onChange={() => {
+            console.log("ThemeButton onChange", props.theme);
+          }}
         />
         <label htmlFor={props.name}>{props.name}</label>
       </div>
@@ -57,10 +68,8 @@ export default function UserSettings() {
   }, [currentTheme]);
 
   return (
-    <div>
-      <IxTypography className={styles.HeadlineMargin} format="h4">
-        Theme
-      </IxTypography>
+    <div className={styles.UserSettings}>
+      <IxTypography format="h4">Theme</IxTypography>
       <section className={styles.ThemeSelection}>
         <ThemeButton
           name="Siemens Brand"
@@ -77,28 +86,30 @@ export default function UserSettings() {
           onClick={() => setCurrentTheme("classic")}
         />
       </section>
-      <IxTypography className={styles.HeadlineMargin} format="h4">
-        {t("language.title")}
-      </IxTypography>
-      <section className={styles.LanguageSelection}>
-        <div>
-          <input
-            id="l_en"
-            type="radio"
-            checked={i18n.language === "en"}
-            onChange={() => i18n.changeLanguage("en")}
-          />
-          <label htmlFor="l_en">{t("language.en")}</label>
-        </div>
-        <div>
-          <input
-            id="l_de"
-            type="radio"
-            checked={i18n.language === "de"}
-            onChange={() => i18n.changeLanguage("de")}
-          />
-          <label htmlFor="l_de">{t("language.de")}</label>
-        </div>
+      <section>
+        <IxTypography className={styles.HeadlineLanguage} format="h4">
+          {t("language.title")}
+        </IxTypography>
+        <section className={styles.LanguageSelection}>
+          <div>
+            <input
+              id="l_en"
+              type="radio"
+              checked={i18n.language === "en"}
+              onChange={() => i18n.changeLanguage("en")}
+            />
+            <label htmlFor="l_en">{t("language.en")}</label>
+          </div>
+          <div>
+            <input
+              id="l_de"
+              type="radio"
+              checked={i18n.language === "de"}
+              onChange={() => i18n.changeLanguage("de")}
+            />
+            <label htmlFor="l_de">{t("language.de")}</label>
+          </div>
+        </section>
       </section>
     </div>
   );

apps/react-starter/src/pages/user-settings/styles.module.css

@@ -7,6 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.UserSettings {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
 .ThemeSelection {
   display: flex;
   flex-wrap: wrap;
@@ -32,10 +38,15 @@
   padding: 0.5rem;
   gap: 1rem;
   cursor: pointer;
+
+  width: 208px;
+  height: 160px;
 }
 
 .ThemeImagePreview img {
-  user-select: none;
+  object-fit: contain;
+  height: 100%;
+  width: 100%;
 }
 
 .ThemeImagePreview.Active {
@@ -50,6 +61,6 @@
   gap: 0.5rem;
 }
 
-.HeadlineMargin {
-  margin-bottom: 1rem;
+.HeadlineLanguage {
+  margin-bottom: 0.75rem;
 }