From 54cfb43ddf08ff80c5eefa2acefdaac604db7706 Mon Sep 17 00:00:00 2001 From: samoel-silva Date: Mon, 23 Dec 2024 16:28:59 -0300 Subject: [PATCH] adiciona tema e customizacao de header e footer --- packages/volto-demo-tema/package.json | 4 +- .../components/RedesSociais/RedesSociais.jsx | 33 ++++ .../src/components/RedesSociais/facebook.svg | 19 ++ .../src/components/RedesSociais/flickr.svg | 6 + .../src/components/RedesSociais/insta.svg | 6 + .../src/components/RedesSociais/x.svg | 4 + .../src/components/RedesSociais/yt.svg | 19 ++ .../components/SeloGoverno/SeloGoverno.jsx | 19 ++ .../src/components/SeloGoverno/rslogo.svg | 1 + .../SiteMapFooter/SiteMapFooter.jsx | 130 +++++++++++++ .../components/theme/Footer/Footer.jsx | 27 +++ .../components/theme/Header/Header;jsx | 183 ++++++++++++++++++ 12 files changed, 450 insertions(+), 1 deletion(-) create mode 100644 packages/volto-demo-tema/src/components/RedesSociais/RedesSociais.jsx create mode 100644 packages/volto-demo-tema/src/components/RedesSociais/facebook.svg create mode 100644 packages/volto-demo-tema/src/components/RedesSociais/flickr.svg create mode 100644 packages/volto-demo-tema/src/components/RedesSociais/insta.svg create mode 100644 packages/volto-demo-tema/src/components/RedesSociais/x.svg create mode 100644 packages/volto-demo-tema/src/components/RedesSociais/yt.svg create mode 100644 packages/volto-demo-tema/src/components/SeloGoverno/SeloGoverno.jsx create mode 100644 packages/volto-demo-tema/src/components/SeloGoverno/rslogo.svg create mode 100644 packages/volto-demo-tema/src/components/SiteMapFooter/SiteMapFooter.jsx create mode 100644 packages/volto-demo-tema/src/customizations/components/theme/Footer/Footer.jsx create mode 100644 packages/volto-demo-tema/src/customizations/components/theme/Header/Header;jsx diff --git a/packages/volto-demo-tema/package.json b/packages/volto-demo-tema/package.json index 5a90876..c7a3df1 100644 --- a/packages/volto-demo-tema/package.json +++ b/packages/volto-demo-tema/package.json @@ -26,7 +26,9 @@ "release-major-alpha": "release-it major --preRelease=alpha", "release-alpha": "release-it --preRelease=alpha" }, - "dependencies": {}, + "dependencies": { + "@kitconcept/volto-light-theme": "^6.0.0-alpha.9" + }, "peerDependencies": { "react": "18.2.0", "react-dom": "18.2.0" diff --git a/packages/volto-demo-tema/src/components/RedesSociais/RedesSociais.jsx b/packages/volto-demo-tema/src/components/RedesSociais/RedesSociais.jsx new file mode 100644 index 0000000..5c77b7e --- /dev/null +++ b/packages/volto-demo-tema/src/components/RedesSociais/RedesSociais.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import facebook from './facebook.svg'; +import insta from './insta.svg'; +import flickr from './flickr.svg'; +import x from './x.svg'; +import youtube from './yt.svg'; + +const RedesSociais = () => { + return ( +
+

Redes Sociais

+
+ + facebook + + + x + + + youtube + + + flickr + + + insta + +
+
+ ); +}; + +export default RedesSociais; \ No newline at end of file diff --git a/packages/volto-demo-tema/src/components/RedesSociais/facebook.svg b/packages/volto-demo-tema/src/components/RedesSociais/facebook.svg new file mode 100644 index 0000000..4a561af --- /dev/null +++ b/packages/volto-demo-tema/src/components/RedesSociais/facebook.svg @@ -0,0 +1,19 @@ + + + + + facebook [#176] + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/volto-demo-tema/src/components/RedesSociais/flickr.svg b/packages/volto-demo-tema/src/components/RedesSociais/flickr.svg new file mode 100644 index 0000000..d05c996 --- /dev/null +++ b/packages/volto-demo-tema/src/components/RedesSociais/flickr.svg @@ -0,0 +1,6 @@ + + + +flickr + + \ No newline at end of file diff --git a/packages/volto-demo-tema/src/components/RedesSociais/insta.svg b/packages/volto-demo-tema/src/components/RedesSociais/insta.svg new file mode 100644 index 0000000..c483545 --- /dev/null +++ b/packages/volto-demo-tema/src/components/RedesSociais/insta.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/packages/volto-demo-tema/src/components/RedesSociais/x.svg b/packages/volto-demo-tema/src/components/RedesSociais/x.svg new file mode 100644 index 0000000..9a15d23 --- /dev/null +++ b/packages/volto-demo-tema/src/components/RedesSociais/x.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/volto-demo-tema/src/components/RedesSociais/yt.svg b/packages/volto-demo-tema/src/components/RedesSociais/yt.svg new file mode 100644 index 0000000..b0d36f1 --- /dev/null +++ b/packages/volto-demo-tema/src/components/RedesSociais/yt.svg @@ -0,0 +1,19 @@ + + + + + youtube [#168] + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/volto-demo-tema/src/components/SeloGoverno/SeloGoverno.jsx b/packages/volto-demo-tema/src/components/SeloGoverno/SeloGoverno.jsx new file mode 100644 index 0000000..69b4306 --- /dev/null +++ b/packages/volto-demo-tema/src/components/SeloGoverno/SeloGoverno.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { UniversalLink } from '@plone/volto/components'; +import LogoRS from './rslogo.svg'; + +const SeloGoverno = () => { + return ( +
+ + RS.GOV - Novas façanhas + +
+ ); +}; + +export default SeloGoverno; \ No newline at end of file diff --git a/packages/volto-demo-tema/src/components/SeloGoverno/rslogo.svg b/packages/volto-demo-tema/src/components/SeloGoverno/rslogo.svg new file mode 100644 index 0000000..c546491 --- /dev/null +++ b/packages/volto-demo-tema/src/components/SeloGoverno/rslogo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/volto-demo-tema/src/components/SiteMapFooter/SiteMapFooter.jsx b/packages/volto-demo-tema/src/components/SiteMapFooter/SiteMapFooter.jsx new file mode 100644 index 0000000..44ec0ae --- /dev/null +++ b/packages/volto-demo-tema/src/components/SiteMapFooter/SiteMapFooter.jsx @@ -0,0 +1,130 @@ +import React, { useEffect } from 'react'; +import PropTypes from 'prop-types'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { asyncConnect } from '@plone/volto/helpers'; +import { defineMessages, injectIntl } from 'react-intl'; +import { Container as SemanticContainer } from 'semantic-ui-react'; +import { Helmet, toBackendLang } from '@plone/volto/helpers'; +import { Link } from 'react-router-dom'; +import config from '@plone/volto/registry'; + +import { getNavigation } from '@plone/volto/actions'; + +const messages = defineMessages({ + Sitemap: { + id: 'Sitemap', + defaultMessage: 'Sitemap', + }, +}); + +export function getSitemapPath(pathname = '', lang) { + const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, ''); + const path = prefix || lang || ''; + return path; +} + +/** + * Sitemap function component. + * @function Sitemap + * @param {Object} props - Component properties. + * @returns {JSX.Element} - Rendered component. + */ +function Sitemap(props) { + const { + location: { pathname }, + lang, + getNavigation, + } = props; + + useEffect(() => { + const { settings } = config; + const language = settings.isMultilingual ? `${toBackendLang(lang)}` : null; + const path = getSitemapPath(pathname, language); + getNavigation(path, 4); + }, [pathname, lang, getNavigation]); + + const renderItems = (items) => { + return ( + + ); + }; + + const Container = + config.getComponent({ name: 'Container' }).component || SemanticContainer; + + return ( +
+ + + {props.items && renderItems(props.items, 2)} + +
+ ); +} + +Sitemap.propTypes = { + getNavigation: PropTypes.func.isRequired, + location: PropTypes.object.isRequired, + intl: PropTypes.object.isRequired, + lang: PropTypes.string.isRequired, + items: PropTypes.array.isRequired, +}; + +export const __test__ = compose( + injectIntl, + connect( + (state) => ({ + items: state.navigation.items, + lang: state.intl.locale, + }), + { getNavigation }, + ), +)(Sitemap); + +export default compose( + injectIntl, + connect( + (state) => ({ + items: state.navigation.items, + lang: state.intl.locale, + }), + { getNavigation }, + ), + asyncConnect([ + { + key: 'navigation', + promise: ({ location, store: { dispatch, getState } }) => { + if (!__SERVER__) return; + const { settings } = config; + const path = getSitemapPath( + location.pathname, + settings.isMultilingual + ? toBackendLang(getState().intl.locale) + : null, + ); + return dispatch(getNavigation(path, 4)); + }, + }, + ]), +)(Sitemap); \ No newline at end of file diff --git a/packages/volto-demo-tema/src/customizations/components/theme/Footer/Footer.jsx b/packages/volto-demo-tema/src/customizations/components/theme/Footer/Footer.jsx new file mode 100644 index 0000000..60852cd --- /dev/null +++ b/packages/volto-demo-tema/src/customizations/components/theme/Footer/Footer.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { injectIntl } from 'react-intl'; +import SeloGoverno from '../../../../components/SeloGoverno/SeloGoverno'; +import SiteMapFooter from '../../../../components/SiteMapFooter/SiteMapFooter'; +import RedesSociais from '../../../../components/RedesSociais/RedesSociais'; + +const Footer = ({ intl }) => { + return ( + + ); +}; + +export default injectIntl(Footer); \ No newline at end of file diff --git a/packages/volto-demo-tema/src/customizations/components/theme/Header/Header;jsx b/packages/volto-demo-tema/src/customizations/components/theme/Header/Header;jsx new file mode 100644 index 0000000..591eb06 --- /dev/null +++ b/packages/volto-demo-tema/src/customizations/components/theme/Header/Header;jsx @@ -0,0 +1,183 @@ +// SemanticUI-free pre-@plone/components +import PropTypes from 'prop-types'; +import { useSelector } from 'react-redux'; +import { Container } from 'semantic-ui-react'; +import MobileNavigation from '@kitconcept/volto-light-theme/components/MobileNavigation/MobileNavigation'; +import { useIntl, defineMessages } from 'react-intl'; +import config from '@plone/volto/registry'; +import cx from 'classnames'; +import IntranetSearchWidget from '@kitconcept/volto-light-theme/components//SearchWidget/IntranetSearchWidget'; +import SimboloRS from '../../../../components/SimboloRS/SimboloRS'; +import { SearchBar } from '../../../../components/SearchBar/SearchBar'; + +import { + Anontools, + LanguageSelector, + Navigation, + UniversalLink, +} from '@plone/volto/components'; +import BarraEstado from '../../../../components/BarraEstado/BarraEstado'; +import BarraAcessibilidade from '../../../../components/BarraAcessibilidade/BarraAcessibilidade'; +import SecretariaNome from '../../../../components/SecretariaNome/SecretariaNome'; + +const messages = defineMessages({ + siteLabel: { + id: 'siteLabel', + defaultMessage: ' ', + }, +}); + +const InternetHeader = ({ + pathname, + siteLabel, + token, + siteAction, + siteTitle, +}) => { + const navRoot = useSelector((state) => state.navroot?.data?.navroot); + const nome_sec = navRoot?.nome_secretaria_vinculada; + const url_sec = navRoot?.url_secretaria_vinculada; + + return ( + <> +
+
+ + +
+ {!token && } + {siteAction && + siteAction.map((item) => ( + + {item.title} + + ))} +
+ {siteLabel && ( +
+

{siteLabel}

+
+ )} +
+
+
+ +
{siteTitle}
+
+ + +
+
+ +
+
+
+
+ + ); +}; + +const IntranetHeader = ({ + pathname, + siteLabel, + token, + siteAction, + siteTitle, +}) => { + return ( + <> +
+
+ +
+ {!token && } + {siteAction && + siteAction.map((item) => ( + + {item.title} + + ))} +
+ {siteLabel && ( +
+

{siteLabel}

+
+ )} +
+
+
+ + {siteTitle} +
+
+
+ +
+
+ + +
+
+ + ); +}; + +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); + const site = useSelector((state) => state.site.data); + + const siteTitle = site['plone.site_title']; + + siteLabel = + siteLabel && + (translatedSiteLabel !== 'siteLabel' && translatedSiteLabel !== ' ' + ? translatedSiteLabel + : siteLabel); + + return ( +
+ + + + {intranetHeader ? ( + + ) : ( + + )} + +
+ ); +}; + +Header.propTypes = { + token: PropTypes.string, + pathname: PropTypes.string.isRequired, +}; + +Header.defaultProps = { + token: null, +}; + +export default Header; \ No newline at end of file