add settings dialog

apps/react-starter/package.json

@@ -18,6 +18,7 @@
     "@siemens/ix-react": "^2.5.0",
     "ag-grid-community": "32.2.1",
     "ag-grid-react": "32.2.1",
+    "clsx": "^2.1.1",
     "echarts": "^5.5.1",
     "echarts-for-react": "^3.0.2",
     "i18next": "^23.15.1",

apps/react-starter/src/App.tsx

@@ -1,54 +1,46 @@
 import "./App.css";
 
-import { NavLink, Outlet } from "react-router-dom";
+import { registerTheme } from "@siemens/ix-echarts";
+import { iconLogOut, iconUserSettings } from "@siemens/ix-icons/icons";
 import {
   IxApplication,
   IxApplicationHeader,
   IxAvatar,
   IxContent,
-  IxDropdownButton,
   IxDropdownItem,
   IxMenu,
   IxMenuItem,
   IxMenuSettings,
   IxMenuSettingsItem,
 } from "@siemens/ix-react";
 import * as echarts from "echarts/core";
-import { registerTheme } from "@siemens/ix-echarts";
-import { useDataStore } from "./pages/store/device-store";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { NavLink, Outlet } from "react-router-dom";
+import useShowDemoMessage from "./hooks/demoMessage";
 import Logo from "./Logo";
-import { iconLogOut, iconUserSettings } from "@siemens/ix-icons/icons";
+import { useDataStore } from "./pages/store/device-store";
+import UserSettings from "./pages/user-settings";
 
 registerTheme(echarts);
 
-interface Language {
-  code: string;
-  name: string;
-}
-
 function App() {
+  const showDemoMessage = useShowDemoMessage();
   const { fetch } = useDataStore();
 
   useEffect(() => {
     fetch();
   }, [fetch]);
 
-  const supportedLanguages: Language[] = [
-    { code: "en", name: "English" },
-    { code: "de", name: "German" },
-  ];
-
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <IxApplication>
       <IxApplicationHeader name="Siemens Industrial Experience">
         <Logo />
         <IxAvatar username="Your user" extra="Administrator">
-          <IxDropdownItem icon={iconUserSettings} label="User Settings" />
-          <IxDropdownItem icon={iconLogOut} label="Logout" />
+          <IxDropdownItem icon={iconUserSettings} label="User Settings" onClick={showDemoMessage} />
+          <IxDropdownItem icon={iconLogOut} label="Logout" onClick={showDemoMessage} />
         </IxAvatar>
       </IxApplicationHeader>
       <IxMenu
@@ -74,14 +66,7 @@ function App() {
 
         <IxMenuSettings label={t("settings.title")}>
           <IxMenuSettingsItem label={t("settings.user-settings")}>
-            <span className="language-switch-label">{t("language.title")}:</span>
-            <IxDropdownButton label={t(`language.${i18n.language}`)}>
-              {supportedLanguages.map((lang) => (
-                <IxDropdownItem key={lang.code} onClick={() => i18n.changeLanguage(lang.code)}>
-                  {t(lang.name)} ({t(lang.code)})
-                </IxDropdownItem>
-              ))}
-            </IxDropdownButton>
+            <UserSettings />
           </IxMenuSettingsItem>
         </IxMenuSettings>
       </IxMenu>

apps/react-starter/src/main.tsx

@@ -1,13 +1,13 @@
+import { IxApplicationContext } from "@siemens/ix-react";
+import "@siemens/ix/dist/siemens-ix/siemens-ix.css";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createHashRouter, RouterProvider } from "react-router-dom";
-import { IxApplicationContext } from "@siemens/ix-react";
-import "./index.css";
-import "./i18n";
 import App from "./App.tsx";
-import OverviewPage from "./pages/overview/index.tsx";
+import "./i18n";
+import "./index.css";
 import DevicesPage from "./pages/devices/index.tsx";
-import "@siemens/ix/dist/siemens-ix/siemens-ix.css";
+import OverviewPage from "./pages/overview/index.tsx";
 
 function optionalTheme() {
   if (import.meta.env.VITE_THEME) {

apps/react-starter/src/pages/overview/components/device-range/styles.module.css

@@ -9,6 +9,7 @@
 
 .DeviceRange {
   height: 21rem;
+  min-width: 24rem;
 }
 
 .echarts {

apps/react-starter/src/pages/overview/index.tsx

@@ -7,29 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { IxContentHeader, IxPane, IxPaneLayout } from "@siemens/ix-react";
+import { IxContentHeader } from "@siemens/ix-react";
+import { useTranslation } from "react-i18next";
+import Incidents from "./components/incidents/overview";
 import Overview from "./components/overview";
-import QuickActions from "./components/quick-actions";
 import styles from "./styles.module.css";
-import Incidents from "./components/incidents/overview";
-import { useTranslation } from "react-i18next";
 
 const OverviewPage = () => {
   const { t } = useTranslation();
 
   return (
-    <IxPaneLayout variant="inline">
-      <div slot="content" className={styles.Content}>
-        <IxContentHeader headerTitle={t("content-header")} slot="header"></IxContentHeader>
-        <section className={styles.List}>
-          <Overview></Overview>
-          <Incidents></Incidents>
-        </section>
-      </div>
-      <IxPane heading={t("quick-actions.title")} slot="right">
-        <QuickActions></QuickActions>
-      </IxPane>
-    </IxPaneLayout>
+    <>
+      <IxContentHeader headerTitle={t("content-header")} slot="header"></IxContentHeader>
+      <section className={styles.List}>
+        <Overview></Overview>
+        <Incidents></Incidents>
+      </section>
+    </>
   );
 };
 

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

@@ -0,0 +1,105 @@
+/*
+ * 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 { IxTypography } from "@siemens/ix-react";
+import brand from "./brand.png";
+import classic from "./classic.png";
+import styles from "./styles.module.css";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import { themeSwitcher } from "@siemens/ix";
+import { useTranslation } from "react-i18next";
+
+function ThemeButton(props: {
+  name: string;
+  theme: string;
+  active?: boolean;
+  image: string;
+  onClick?: () => void;
+}) {
+  return (
+    <div className={styles.ThemeButton}>
+      <div
+        className={clsx(styles.ThemeImagePreview, {
+          [styles.Active]: props.active,
+        })}
+        onClick={props.onClick}
+      >
+        <img draggable={false} src={props.image} alt="Siemens brand theme" />
+      </div>
+      <div>
+        <input
+          type="radio"
+          checked={props.active}
+          id={props.name}
+          onChange={() => props.onClick?.()}
+        />
+        <label htmlFor={props.name}>{props.name}</label>
+      </div>
+    </div>
+  );
+}
+
+export default function UserSettings() {
+  const { t, i18n } = useTranslation();
+  const [currentTheme, setCurrentTheme] = useState<string>("brand");
+
+  useEffect(() => {
+    const currentVariant = themeSwitcher.getCurrentTheme();
+    const isDark = currentVariant.endsWith(themeSwitcher.suffixDark);
+    themeSwitcher.setTheme(`theme-${currentTheme}-${isDark ? "dark" : "light"}`);
+  }, [currentTheme]);
+
+  return (
+    <div>
+      <IxTypography className={styles.HeadlineMargin} format="h4">
+        Theme
+      </IxTypography>
+      <section className={styles.ThemeSelection}>
+        <ThemeButton
+          name="Siemens Brand"
+          image={brand}
+          active={currentTheme === "brand"}
+          theme="brand"
+          onClick={() => setCurrentTheme("brand")}
+        />
+        <ThemeButton
+          name="Classic"
+          image={classic}
+          active={currentTheme === "classic"}
+          theme="classic"
+          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>
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+
+.ThemeSelection {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+
+  gap: 1rem;
+}
+
+.ThemeButton {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+
+  align-items: center;
+  gap: 1rem;
+}
+
+.ThemeImagePreview {
+  display: inline-flex;
+  position: relative;
+  border-radius: 0.125rem;
+  border: 1px solid var(--theme-color-6);
+  padding: 0.5rem;
+  gap: 1rem;
+  cursor: pointer;
+}
+
+.ThemeImagePreview img {
+  user-select: none;
+}
+
+.ThemeImagePreview.Active {
+  border-color: var(--theme-color-dynamic);
+}
+
+.LanguageSelection {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+
+  gap: 0.5rem;
+}
+
+.HeadlineMargin {
+  margin-bottom: 1rem;
+}