From c1ea37b43f80c813626b4c62f5c1718426d554ee Mon Sep 17 00:00:00 2001 From: Daniela Mormocea Date: Tue, 23 Nov 2021 19:40:40 +0200 Subject: [PATCH 1/3] update logo, plotly colour scheme and theme colours --- .../theme/Header/HeaderNavigation.jsx | 84 ++++++- .../volto/components/theme/Logo/Logo-sm.svg | 156 ++++-------- .../volto/components/theme/Logo/Logo.svg | 228 +++++++++++------- .../components/theme/Logo/LogoImg-sm.svg | 133 ++-------- .../volto/components/theme/Logo/LogoImg.svg | 118 +-------- src/localconfig.js | 17 +- theme/site/globals/site.less | 2 +- theme/site/globals/site.variables | 38 +-- 8 files changed, 309 insertions(+), 467 deletions(-) diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx index 0cf8bf1..d460907 100644 --- a/src/components/theme/Header/HeaderNavigation.jsx +++ b/src/components/theme/Header/HeaderNavigation.jsx @@ -8,6 +8,9 @@ import closeIcon from '@plone/volto/icons/clear.svg'; import { Icon } from '@plone/volto/components'; import { connect } from 'react-redux'; +import circleLeft from '@plone/volto/icons/circle-left.svg'; +import circleRight from '@plone/volto/icons/circle-right.svg'; + const MobileNav = ({ items, activeItem }) => { const [expanded, setExpanded] = React.useState(false); @@ -64,9 +67,36 @@ const MobileNav = ({ items, activeItem }) => { const HeaderNavigation = ({ items, pageWidth }) => { const [activeItem, setActiveItem] = React.useState(''); const [isMobile, setIsMobile] = React.useState(false); + const [itemsIncrement, setItemsIncrement] = React.useState(0); + const [itemsPerPage, setItemsPerPage] = React.useState( + items && items.length < 4 ? items.length : 4, + ); + + const [displayedItems, setDisplayedItems] = React.useState([]); const history = useHistory(); + const noPrev = displayedItems && items && items[0] === displayedItems[0]; + const noNext = + displayedItems && + items && + items[items.length - 1] === displayedItems[displayedItems.length - 1]; + + React.useEffect(() => { + //init items + const first = itemsIncrement * 3; + const last = first + itemsPerPage; + const itemsInit = items.slice(first, last); + setDisplayedItems(itemsInit); + }, [itemsIncrement, itemsPerPage, items]); + React.useEffect(() => { + //init items + const first = itemsIncrement * 3; + const last = first + itemsPerPage; + const itemsInit = items.slice(first, last); + + setDisplayedItems(itemsInit); + const activeRouteDetected = items.filter( (item) => item.url === history.location.pathname, ); @@ -79,27 +109,61 @@ const HeaderNavigation = ({ items, pageWidth }) => { if (pageWidth && pageWidth > 768) { setIsMobile(false); } + if (pageWidth && pageWidth > 1240) { + if (items.length >= 6) { + setItemsPerPage(6); + } + if (items.length < 6) { + setItemsPerPage(items.length); + } + } // eslint-disable-next-line react-hooks/exhaustive-deps }, [items, pageWidth]); + const handlePrev = () => { + setItemsIncrement(itemsIncrement - 1); + }; + + const handleNext = () => { + setItemsIncrement(itemsIncrement + 1); + }; + return ( {isMobile ? ( ) : (
- {items.length > 0 && - items.map((item, index) => ( - -

- {item.title} -

+ {displayedItems.length > 0 && + displayedItems.map((item, index) => ( + + {item.title} ))} + {!noPrev && ( + + )} + {!noNext && ( + + )}
)} diff --git a/src/customizations/volto/components/theme/Logo/Logo-sm.svg b/src/customizations/volto/components/theme/Logo/Logo-sm.svg index c43b074..0cde01b 100644 --- a/src/customizations/volto/components/theme/Logo/Logo-sm.svg +++ b/src/customizations/volto/components/theme/Logo/Logo-sm.svg @@ -1,104 +1,52 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/customizations/volto/components/theme/Logo/Logo.svg b/src/customizations/volto/components/theme/Logo/Logo.svg index d4d0453..f7bbeef 100644 --- a/src/customizations/volto/components/theme/Logo/Logo.svg +++ b/src/customizations/volto/components/theme/Logo/Logo.svg @@ -1,100 +1,142 @@ - - + + - - - - - + + + + - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/customizations/volto/components/theme/Logo/LogoImg-sm.svg b/src/customizations/volto/components/theme/Logo/LogoImg-sm.svg index 5c50b1f..214df1b 100644 --- a/src/customizations/volto/components/theme/Logo/LogoImg-sm.svg +++ b/src/customizations/volto/components/theme/Logo/LogoImg-sm.svg @@ -1,117 +1,20 @@ - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/src/customizations/volto/components/theme/Logo/LogoImg.svg b/src/customizations/volto/components/theme/Logo/LogoImg.svg index 150baa7..c35eb6c 100644 --- a/src/customizations/volto/components/theme/Logo/LogoImg.svg +++ b/src/customizations/volto/components/theme/Logo/LogoImg.svg @@ -1,117 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/localconfig.js b/src/localconfig.js index fa2ee19..926d596 100644 --- a/src/localconfig.js +++ b/src/localconfig.js @@ -157,21 +157,22 @@ export function applyConfig(config) { { title: 'Forest Default', colorscale: [ - '#215511', - '#77BB12', - '#CBEE66', + '#005c30', + '#168130', + '#6fb22c', + '#bed492', '#ffffff', - '#F4F4F1', + '#ecf0c5', '#000000', ], }, { title: 'Forest Active', colorscale: [ - '#CA4300 ', - '#E0E1E2', - '#E30166', - '#074F7C', + '#b94d1f ', + '#d9d9d9', + '#b92e48', + '#005e7d', '#000000', '#ffffff', ], diff --git a/theme/site/globals/site.less b/theme/site/globals/site.less index 984de70..2541159 100644 --- a/theme/site/globals/site.less +++ b/theme/site/globals/site.less @@ -9,7 +9,7 @@ // .loadFonts(); -@headingColor: #225511; +@headingColor: #005c30; html, body { diff --git a/theme/site/globals/site.variables b/theme/site/globals/site.variables index a3ee2dc..5855340 100644 --- a/theme/site/globals/site.variables +++ b/theme/site/globals/site.variables @@ -166,29 +166,29 @@ /*--- Theme colors ---*/ -@lightGreen : #769e2e; -@darkGreen : #225511; -@darkerGreen : #003311; -@darkBrown : #554433; -@darkOrange : #cc4400; +@lightGreen : #6fb22c; +@darkGreen : #168130; +@darkerGreen : #005c30; +@darkBrown : #8e4313; +@darkOrange : #b94d1f; // @textColor : #002200; -@textColor: #162A16; +@textColor: #494e13; /*--- Colors ---*/ @orange : #FA5C2A; // Palette: reddishOrange -@yellow : #F6A808; // Palette: goldenRod -@green : #51AA55; // Palette: darkPastelGreen -@teal : #517776; // Palette: slate -@blue : #007EB1; // Palette: Plone (tealBlue/cerulean) -@pink : #E40166; // Palette: darkHotPink -@brown : #826A6A; // Palette: reddishGrey -@grey : #68778D; // Palette: blueishGrey +@yellow : #F6A800; // Palette: goldenRod +@green : #168130; // Palette: darkPastelGreen +@teal : #5893a9; // Palette: slate +@blue : #5893a9; // Palette: Plone (tealBlue/cerulean) +@pink : #e63d5c; // Palette: darkHotPink +@brown : #8e4313; // Palette: reddishGrey +@grey : #9cc7d2; // Palette: blueishGrey @black : #252525; // Palette: darkishGrey /*--- Light Colors ---*/ -@lightOlive : #C9EAB1; // Palette: lightSage -@lightGrey : #878F93; +@lightOlive : #bed492; // Palette: lightSage +@lightGrey : #A6A6A6; /*--- Neutrals ---*/ @fullBlack : #000000; @@ -198,7 +198,7 @@ @white : #FFFFFF; /*--- Colored Backgrounds ---*/ -@redBackground : #F5C1C1; // Palette: alertError +@redBackground : #FDE7DC; // Palette: alertError @tealBackground : #EDF1F2; // Palette: Breadcrumbs @blueBackground : #F2F6F8; @purpleBackground : #B8C6C8; // Dublin Core Summary @@ -211,8 +211,8 @@ /*--- Colored Border ---*/ // Pastanaga custom borders colors @greyBorderColor : #C7D5D8; // breadcrumbs border -@lightGreyBorderColor : #E0E1E0; // breadcrumbs background -@blocksBorderGreen: #226622; +@lightGreyBorderColor : #D9D9D9; // breadcrumbs background +@blocksBorderGreen: #168130; /*------------------- @@ -237,7 +237,7 @@ /* Positive */ /* Negative */ -@negativeBackgroundColor : rgb(237, 195, 194); +@negativeBackgroundColor : rgb(253, 231, 220); @negativeHeaderColor : @black; @negativeTextColor : @black; From bd6b8b39b259e9b04d51111adf6df789908232d0 Mon Sep 17 00:00:00 2001 From: Daniela Mormocea Date: Tue, 23 Nov 2021 19:46:48 +0200 Subject: [PATCH 2/3] fix --- .../theme/Header/HeaderNavigation.jsx | 84 +++---------------- 1 file changed, 10 insertions(+), 74 deletions(-) diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx index d460907..0cf8bf1 100644 --- a/src/components/theme/Header/HeaderNavigation.jsx +++ b/src/components/theme/Header/HeaderNavigation.jsx @@ -8,9 +8,6 @@ import closeIcon from '@plone/volto/icons/clear.svg'; import { Icon } from '@plone/volto/components'; import { connect } from 'react-redux'; -import circleLeft from '@plone/volto/icons/circle-left.svg'; -import circleRight from '@plone/volto/icons/circle-right.svg'; - const MobileNav = ({ items, activeItem }) => { const [expanded, setExpanded] = React.useState(false); @@ -67,36 +64,9 @@ const MobileNav = ({ items, activeItem }) => { const HeaderNavigation = ({ items, pageWidth }) => { const [activeItem, setActiveItem] = React.useState(''); const [isMobile, setIsMobile] = React.useState(false); - const [itemsIncrement, setItemsIncrement] = React.useState(0); - const [itemsPerPage, setItemsPerPage] = React.useState( - items && items.length < 4 ? items.length : 4, - ); - - const [displayedItems, setDisplayedItems] = React.useState([]); const history = useHistory(); - const noPrev = displayedItems && items && items[0] === displayedItems[0]; - const noNext = - displayedItems && - items && - items[items.length - 1] === displayedItems[displayedItems.length - 1]; - - React.useEffect(() => { - //init items - const first = itemsIncrement * 3; - const last = first + itemsPerPage; - const itemsInit = items.slice(first, last); - setDisplayedItems(itemsInit); - }, [itemsIncrement, itemsPerPage, items]); - React.useEffect(() => { - //init items - const first = itemsIncrement * 3; - const last = first + itemsPerPage; - const itemsInit = items.slice(first, last); - - setDisplayedItems(itemsInit); - const activeRouteDetected = items.filter( (item) => item.url === history.location.pathname, ); @@ -109,61 +79,27 @@ const HeaderNavigation = ({ items, pageWidth }) => { if (pageWidth && pageWidth > 768) { setIsMobile(false); } - if (pageWidth && pageWidth > 1240) { - if (items.length >= 6) { - setItemsPerPage(6); - } - if (items.length < 6) { - setItemsPerPage(items.length); - } - } // eslint-disable-next-line react-hooks/exhaustive-deps }, [items, pageWidth]); - const handlePrev = () => { - setItemsIncrement(itemsIncrement - 1); - }; - - const handleNext = () => { - setItemsIncrement(itemsIncrement + 1); - }; - return ( {isMobile ? ( ) : (
- {displayedItems.length > 0 && - displayedItems.map((item, index) => ( - - {item.title} + {items.length > 0 && + items.map((item, index) => ( + +

+ {item.title} +

))} - {!noPrev && ( - - )} - {!noNext && ( - - )}
)} From 56a6c7b1bff10d94f42e675365a3a1feb0ba102a Mon Sep 17 00:00:00 2001 From: EEA Jenkins <@users.noreply.github.com> Date: Fri, 26 Nov 2021 11:50:48 +0000 Subject: [PATCH 3/3] Automated release 0.1.20 --- CHANGELOG.md | 8 ++++++++ package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e43654a..38c1ee2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). +#### [0.1.20](https://github.com/eea/volto-forests-theme/compare/0.1.19...0.1.20) + +- update logo, plotly colour scheme and theme colours [`#23`](https://github.com/eea/volto-forests-theme/pull/23) +- fix [`bd6b8b3`](https://github.com/eea/volto-forests-theme/commit/bd6b8b39b259e9b04d51111adf6df789908232d0) + #### [0.1.19](https://github.com/eea/volto-forests-theme/compare/0.1.18...0.1.19) +> 24 November 2021 + +- Develop [`#24`](https://github.com/eea/volto-forests-theme/pull/24) - Prettier fix lint [`12bc882`](https://github.com/eea/volto-forests-theme/commit/12bc882f9cf9bca011bcf94f053c5e19914af678) - Fix styles lint [`af7ed16`](https://github.com/eea/volto-forests-theme/commit/af7ed16718d8c5a60c63db61788563d63533c8f7) - Add more color sets [`9375225`](https://github.com/eea/volto-forests-theme/commit/9375225921d889c5bd191cf35aaf015b560dfaf0) diff --git a/package.json b/package.json index 0cc5db5..b59a55f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eeacms/volto-forests-theme", - "version": "0.1.19", + "version": "0.1.20", "description": "@eeacms/volto-forests-theme: Volto add-on", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team",