Popover for the display language selector

openSUSE · Dec 13, 2023 · c2d13f7 · c2d13f7
1 parent 58a10f7
commit c2d13f7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx
@@ -154,7 +154,7 @@ export default function Sidebar ({ children }) {
         <header className="split justify-between">
           <h2>
             {/* TRANSLATORS: sidebar header */}
-            {_("Options")}
+            {_("Installer Options")}
           </h2>
 
           <button

diff --git a/web/src/components/l10n/InstallerLocaleSwitcher.jsx b/web/src/components/l10n/InstallerLocaleSwitcher.jsx
@@ -20,8 +20,10 @@
  */
 
 import React, { useCallback, useState } from "react";
+import { Link } from "react-router-dom";
+import { FormSelect, FormSelectOption, Popover } from "@patternfly/react-core";
+
 import { Icon } from "../layout";
-import { FormSelect, FormSelectOption } from "@patternfly/react-core";
 import { _ } from "~/i18n";
 import { useInstallerL10n } from "~/context/installerL10n";
 import cockpit from "~/lib/cockpit";
@@ -40,10 +42,32 @@ export default function InstallerLocaleSwitcher() {
   const options = Object.keys(languages).sort()
     .map(id => <FormSelectOption key={id} value={id} label={languages[id]} />);
 
+  // TRANSLATORS: help text for the language selector in the sidebar,
+  // %s will be replaced by the "Localization" page link
+  const [msg1, msg2] = _("The language used by the installer. The language \
+for the installed system can be set in the %s page.").split("%s");
+
+  // "hide" is a function which closes the popover
+  const description = (hide) => (
+    <>
+      {msg1}
+      {/* close the popover after clicking the link */}
+      <Link to="/l10n" onClick={hide}>
+        {_("Localization")}
+      </Link>
+      {msg2}
+    </>
+  );
+
   return (
     <>
       <h3>
-        <Icon name="translate" size="24" />{_("Display Language")}
+        <Icon name="translate" size="24" />
+        {_("Language")}&nbsp;
+        {/* smaller width of the popover so it does not overflow outside the sidebar */}
+        <Popover showClose={false} bodyContent={description} maxWidth="15em">
+          <Icon name="info" size="16" />
+        </Popover>
       </h3>
       <FormSelect
         id="language"