Add options to show intranet flag and intranet header. (#318)

Co-authored-by: Víctor Fernández de Alba <sneridagh@gmail.com>
kitconcept · Feb 13, 2024 · 026c276 · 026c276
1 parent 7fca59f
commit 026c276
Show file tree

Hide file tree

Showing 10 changed files with 434 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -181,6 +181,40 @@ It's behind a feature flag, as opt-out:
 config.settings.enableFatMenu = true;
 ```
 
+### Show Site Label
+
+If you want to show a label on top of site you can pass label name to `siteLabel` property.
+
+```js
+config.settings.siteLabel = 'Plone Intranet';
+```
+
+If you wanted a translated label then you have to define a translation object in `defineMessages` function provided by react-intl.
+
+Here is the code snippets you have to add in your addon index.js file.
+If you don't have addon, you can also add in your config.js file in root of your frontend folder.
+
+```js
+import { defineMessages } from 'react-intl';
+
+defineMessages({
+  siteLabel: {
+    id: 'siteLabel',
+    defaultMessage: ' ',
+  },
+});
+
+```
+Then add the translation you want in your `locale` file.
+
+### Show intranetHeader
+
+We have totally different header for intranet sites. If you want that, you can enable it by passing `intranetHeader` property.
+
+```js
+config.settings.intranetHeader = true;
+```
+
 ## Upgrade Guide
 
 See a detailed upgrade guide in: https://github.com/kitconcept/volto-light-theme/blob/main/UPGRADE-GUIDE.md

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -228,15 +228,22 @@ msgstr "Rechts"
 #: components/Blocks/Search/components/SearchInput
 #: components/Blocks/Search/TopSideFacets
 #: components/MobileNavigation/MobileNavigation
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search"
 msgstr "Suche"
 
 #. Default: "Search Site"
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search Site"
 msgstr "Seite durchsuchen"
 
+#. Default: "Search for People, E-Mail Address, Phone Number, ..."
+#: components/SearchWidget/IntranetSearchWidget
+msgid "Search for People, E-Mail Address, Phone Number, ..."
+msgstr ""
+
 #. Default: "Search results"
 #: components/Blocks/Search/components/SearchDetails
 msgid "Search results"
@@ -253,7 +260,6 @@ msgid "Site"
 msgstr "Seite"
 
 #. Default: "Sitemap"
-#: components/Header/Header
 #: index
 msgid "Sitemap"
 msgstr "Übersicht"
@@ -327,3 +333,8 @@ msgstr ""
 #: components/Blocks/Listing/ListingBody
 msgid "of"
 msgstr "von"
+
+#. Default: ""
+#: components/Header/Header
+msgid "siteLabel"
+msgstr ""
diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -223,15 +223,22 @@ msgstr ""
 #: components/Blocks/Search/components/SearchInput
 #: components/Blocks/Search/TopSideFacets
 #: components/MobileNavigation/MobileNavigation
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search"
 msgstr ""
 
 #. Default: "Search Site"
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search Site"
 msgstr ""
 
+#. Default: "Search for People, E-Mail Address, Phone Number, ..."
+#: components/SearchWidget/IntranetSearchWidget
+msgid "Search for People, E-Mail Address, Phone Number, ..."
+msgstr ""
+
 #. Default: "Search results"
 #: components/Blocks/Search/components/SearchDetails
 msgid "Search results"
@@ -248,7 +255,6 @@ msgid "Site"
 msgstr ""
 
 #. Default: "Sitemap"
-#: components/Header/Header
 #: index
 msgid "Sitemap"
 msgstr ""
@@ -322,3 +328,8 @@ msgstr ""
 #: components/Blocks/Listing/ListingBody
 msgid "of"
 msgstr ""
+
+#. Default: ""
+#: components/Header/Header
+msgid "siteLabel"
+msgstr ""
diff --git a/locales/pt_BR/volto.po b/locales/pt_BR/volto.po
@@ -223,15 +223,22 @@ msgstr "Direita"
 #: components/Blocks/Search/components/SearchInput
 #: components/Blocks/Search/TopSideFacets
 #: components/MobileNavigation/MobileNavigation
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search"
 msgstr "Buscar"
 
 #. Default: "Search Site"
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search Site"
 msgstr "Buscar no site"
 
+#. Default: "Search for People, E-Mail Address, Phone Number, ..."
+#: components/SearchWidget/IntranetSearchWidget
+msgid "Search for People, E-Mail Address, Phone Number, ..."
+msgstr ""
+
 #. Default: "Search results"
 #: components/Blocks/Search/components/SearchDetails
 msgid "Search results"
@@ -248,7 +255,6 @@ msgid "Site"
 msgstr "Site"
 
 #. Default: "Sitemap"
-#: components/Header/Header
 #: index
 msgid "Sitemap"
 msgstr "Mapa do Site"
@@ -322,3 +328,8 @@ msgstr "Mais informações"
 #: components/Blocks/Listing/ListingBody
 msgid "of"
 msgstr "de"
+
+#. Default: ""
+#: components/Header/Header
+msgid "siteLabel"
+msgstr ""
diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-02-01T15:37:22.956Z\n"
+"POT-Creation-Date: 2024-02-08T13:36:14.317Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -225,15 +225,22 @@ msgstr ""
 #: components/Blocks/Search/components/SearchInput
 #: components/Blocks/Search/TopSideFacets
 #: components/MobileNavigation/MobileNavigation
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search"
 msgstr ""
 
 #. Default: "Search Site"
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search Site"
 msgstr ""
 
+#. Default: "Search for People, E-Mail Address, Phone Number, ..."
+#: components/SearchWidget/IntranetSearchWidget
+msgid "Search for People, E-Mail Address, Phone Number, ..."
+msgstr ""
+
 #. Default: "Search results"
 #: components/Blocks/Search/components/SearchDetails
 msgid "Search results"
@@ -250,7 +257,6 @@ msgid "Site"
 msgstr ""
 
 #. Default: "Sitemap"
-#: components/Header/Header
 #: index
 msgid "Sitemap"
 msgstr ""
@@ -324,3 +330,8 @@ msgstr ""
 #: components/Blocks/Listing/ListingBody
 msgid "of"
 msgstr ""
+
+#. Default: ""
+#: components/Header/Header
+msgid "siteLabel"
+msgstr ""
diff --git a/news/304.feature b/news/304.feature
@@ -0,0 +1 @@
+Add options to show intranet label and implement intranet header for intranet sites. @iFlameing
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import Container from '@kitconcept/volto-light-theme/components/Atoms/Container/Container';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
+import { useIntl, defineMessages } from 'react-intl';
+import config from '@plone/volto/registry';
+import cx from 'classnames';
+import IntranetSearchWidget from '../SearchWidget/IntranetSearchWidget';
 
 import {
   Anontools,
@@ -13,42 +17,124 @@ import {
   UniversalLink,
 } from '@plone/volto/components';
 
-const Header = (props) => {
-  const { pathname } = props;
-  const token = useSelector((state) => state.userSession.token);
-  const siteAction = useSelector(
-    (state) => state.content.data?.['@components']?.actions?.site_actions,
-  );
+const messages = defineMessages({
+  siteLabel: {
+    id: 'siteLabel',
+    defaultMessage: ' ',
+  },
+});
 
+const InternetHeader = ({ pathname, siteLabel, token, siteAction }) => {
   return (
-    <header className="header-wrapper">
-      <Container layout>
-        <div className="header">
-          <div className="logo-nav-wrapper">
-            <div className="logo">
-              <Logo />
-            </div>
-            <Navigation pathname={pathname} />
-            <MobileNavigation pathname={pathname} />
-            <div className="search-wrapper navigation-desktop">
-              <div className="search">
-                <SearchWidget />
-              </div>
+    <>
+      <div className="header">
+        <div className="logo-nav-wrapper">
+          <div className="logo">
+            <Logo />
+          </div>
+          <Navigation pathname={pathname} />
+          <MobileNavigation pathname={pathname} />
+          <div className="search-wrapper navigation-desktop">
+            <div className="search">
+              <SearchWidget />
             </div>
           </div>
-          <div className="tools-wrapper">
-            <LanguageSelector />
+        </div>
+        <div className="tools-wrapper">
+          <LanguageSelector />
+
+          <div className="tools">
+            {!token && <Anontools />}
+            {siteAction &&
+              siteAction.map((item) => (
+                <UniversalLink href={item.url}>{item.title}</UniversalLink>
+              ))}
+          </div>
+          {siteLabel && (
+            <div className="intranet">
+              <p>{siteLabel}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
 
-            <div className="tools">
-              {!token && <Anontools />}
+const IntranetHeader = ({ pathname, siteLabel, token, siteAction }) => {
+  return (
+    <>
+      <div className="header">
+        <div className="tools-wrapper">
+          <LanguageSelector />
 
-              {siteAction &&
-                siteAction.map((item) => (
-                  <UniversalLink href={item.url}>{item.title}</UniversalLink>
-                ))}
+          <div className="tools">
+            {!token && <Anontools />}
+            {siteAction &&
+              siteAction.map((item) => (
+                <UniversalLink href={item.url}>{item.title}</UniversalLink>
+              ))}
+          </div>
+          {siteLabel && (
+            <div className="intranet">
+              <p>{siteLabel}</p>
             </div>
+          )}
+        </div>
+        <div className="logo-nav-wrapper">
+          <div className="logo">
+            <Logo />
           </div>
+          <div className="search-wrapper">
+            <div className="search">
+              <IntranetSearchWidget />
+            </div>
+          </div>
+          <Navigation pathname={pathname} />
+          <MobileNavigation pathname={pathname} />
         </div>
+      </div>
+    </>
+  );
+};
+
+const Header = (props) => {
+  const { pathname } = props;
+  let siteLabel = config.settings.siteLabel;
+  const intranetHeader = config.settings.intranetHeader;
+  const token = useSelector((state) => state.userSession.token);
+  const siteAction = useSelector(
+    (state) => state.content.data?.['@components']?.actions?.site_actions,
+  );
+  const intl = useIntl();
+  const translatedSiteLabel = intl.formatMessage(messages.siteLabel);
+
+  siteLabel =
+    siteLabel &&
+    (translatedSiteLabel !== 'siteLabel' && translatedSiteLabel !== ' '
+      ? translatedSiteLabel
+      : siteLabel);
+
+  return (
+    <header
+      className={cx('header-wrapper', { 'intranet-header': intranetHeader })}
+    >
+      <Container layout>
+        {intranetHeader ? (
+          <IntranetHeader
+            pathname={pathname}
+            siteLabel={siteLabel}
+            token={token}
+            siteAction={siteAction}
+          />
+        ) : (
+          <InternetHeader
+            pathname={pathname}
+            siteLabel={siteLabel}
+            token={token}
+            siteAction={siteAction}
+          />
+        )}
       </Container>
     </header>
   );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Add options to show intranet label and implement intranet header for intranet sites. @iFlameing