From 757b200804cb9fa134f3ee6f003a0237edf431a9 Mon Sep 17 00:00:00 2001
From: CARRON Guilhem <guilhem.carron@soprasteria.com>
Date: Fri, 17 Jul 2020 11:14:27 +0200
Subject: [PATCH] Add profile menu + split parameters
---
src/assets/icons/tabbar/profile/off.svg | 4 +++
src/assets/icons/tabbar/profile/on.svg | 4 +++
.../ViewContainer/ParametersViewContainer.tsx | 1 -
.../ViewContainer/ProfileViewContainer.tsx | 26 +++++++++++++++++++
.../ViewContainer/ViewContainer.tsx | 13 ++++++++++
.../ContentComponents/Navbar/Navbar.tsx | 13 ++++++++++
src/locales/fr.json | 1 +
src/styles/components/_nav.scss | 19 +++++++++-----
8 files changed, 73 insertions(+), 8 deletions(-)
create mode 100644 src/assets/icons/tabbar/profile/off.svg
create mode 100644 src/assets/icons/tabbar/profile/on.svg
create mode 100644 src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx
diff --git a/src/assets/icons/tabbar/profile/off.svg b/src/assets/icons/tabbar/profile/off.svg
new file mode 100644
index 000000000..4fc19edd0
--- /dev/null
+++ b/src/assets/icons/tabbar/profile/off.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="36" viewBox="0 0 64 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="31.5" cy="15.5" r="6" stroke="#ABABAB"/>
+<path d="M26.3256 22.6206L26.1536 22.4729L25.9292 22.505C24.0866 22.7686 22.7128 23.7203 21.8109 25.0837C20.9172 26.4346 20.5 28.1667 20.5 30V31V31.3904L20.8787 31.485L21 31C20.8787 31.485 20.8788 31.4851 20.879 31.4851L20.8793 31.4852L20.8802 31.4854L20.8831 31.4861L20.8933 31.4886L20.9311 31.4977C20.964 31.5055 21.0122 31.5167 21.0753 31.5309C21.2015 31.5591 21.3874 31.5991 21.63 31.6468C22.1154 31.7423 22.8279 31.8689 23.7442 31.9953C25.5765 32.248 28.2245 32.5 31.5 32.5C34.7755 32.5 37.4235 32.248 39.2558 31.9953C40.1721 31.8689 40.8846 31.7423 41.37 31.6468C41.6126 31.5991 41.7985 31.5591 41.9247 31.5309C41.9878 31.5167 42.036 31.5055 42.0689 31.4977L42.1067 31.4886L42.1169 31.4861L42.1198 31.4854L42.1207 31.4852L42.121 31.4851C42.1212 31.4851 42.1213 31.485 42 31L42.1213 31.485L42.5 31.3904V31V30C42.5 28.1667 42.0828 26.4346 41.1891 25.0837C40.2872 23.7203 38.9134 22.7686 37.0708 22.505L36.8816 22.478L36.7226 22.584C36.4258 22.7819 36.1612 22.9836 35.9205 23.1671C35.8447 23.2249 35.7713 23.2809 35.7 23.3344C35.3955 23.5628 35.1112 23.7604 34.7764 23.9278C34.1181 24.2569 33.2019 24.5 31.5 24.5C29.6215 24.5 27.5528 23.6738 26.3256 22.6206Z" stroke="#ABABAB"/>
+</svg>
diff --git a/src/assets/icons/tabbar/profile/on.svg b/src/assets/icons/tabbar/profile/on.svg
new file mode 100644
index 000000000..03291d21d
--- /dev/null
+++ b/src/assets/icons/tabbar/profile/on.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="36" viewBox="0 0 64 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="31.5" cy="15.5" r="5.5" fill="#E3B82A"/>
+<path d="M21 30C21 26.4735 22.6077 23.4852 26 23C27.3163 24.1296 29.5 25 31.5 25C35 25 35.5 24 37 23C40.3923 23.4852 42 26.4735 42 30V31C42 31 38 32 31.5 32C25 32 21 31 21 31V30Z" fill="#E3B82A"/>
+</svg>
diff --git a/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
index a4b973251..5d1854bcd 100644
--- a/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
@@ -21,7 +21,6 @@ const ParametersViewContainer: React.FC = () => {
></Header>
<Content height={headerHeight}>
<FAQContainer />
- <KonnectorViewerContainer isParam={true} />
<LegalNoticeContainer />
<Version />
</Content>
diff --git a/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx
new file mode 100644
index 000000000..339158a24
--- /dev/null
+++ b/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
+import Header from 'components/ContainerComponents/Header/Header'
+import Content from 'components/ContainerComponents/Content/Content'
+import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
+
+const ProfileViewContainer: React.FC = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ return (
+ <>
+ <CozyBar titleKey={'COMMON.APP_PARAMETERS_TITLE'} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'COMMON.APP_PARAMETERS_TITLE'}
+ ></Header>
+ <Content height={headerHeight}>
+ <KonnectorViewerContainer isParam={true} />
+ </Content>
+ </>
+ )
+}
+
+export default ProfileViewContainer
diff --git a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
index d2f2184cb..9ddce6b16 100644
--- a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
@@ -20,6 +20,7 @@ import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsV
import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer'
import LegalNoticeViewContainer from './LegalNoticeViewContainer'
import FeedbackContainer from 'components/ContainerComponents/FeedbackContainer/FeedbackContainer'
+import ProfileViewContainer from './ProfileViewContainer'
export const history = createBrowserHistory()
@@ -118,6 +119,18 @@ export const ViewContainer = () => {
</>
)}
/>
+ <Route
+ path="/profile"
+ render={({ match: { url } }) => (
+ <>
+ <Route
+ path={`${url}/`}
+ component={ProfileViewContainer}
+ exact
+ />
+ </>
+ )}
+ />
<Route path="/splash" component={SplashContainer} />
<Redirect from="/" to="/consumption" />
<Redirect from="*" to="/consumption" />
diff --git a/src/components/ContentComponents/Navbar/Navbar.tsx b/src/components/ContentComponents/Navbar/Navbar.tsx
index e6f604777..4cc276017 100644
--- a/src/components/ContentComponents/Navbar/Navbar.tsx
+++ b/src/components/ContentComponents/Navbar/Navbar.tsx
@@ -10,6 +10,8 @@ import ChallengeIconOff from 'assets/icons/tabbar/defi/off.svg'
import ParameterIconOff from 'assets/icons/tabbar/parametre/off.svg'
import ConsoIconOn from 'assets/icons/tabbar/conso/on.svg'
import ParameterIconOn from 'assets/icons/tabbar/parametre/on.svg'
+import ProfileIconOn from 'assets/icons/tabbar/profile/on.svg'
+import ProfileIconOff from 'assets/icons/tabbar/profile/off.svg'
import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
interface NavbarProps {
@@ -48,6 +50,17 @@ export const Navbar = ({ t }: NavbarProps) => {
</NavLink>
</li>
+ <li className="c-nav-item">
+ <NavLink
+ to="/profile"
+ className="c-nav-link"
+ activeClassName="is-active"
+ >
+ <Icon className="c-nav-icon off" icon={ProfileIconOff} />
+ <Icon className="c-nav-icon on" icon={ProfileIconOn} />
+ {t('Nav.profile')}
+ </NavLink>
+ </li>
<li className="c-nav-item">
<NavLink
to="/parameters"
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 032de073e..c6e571202 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -13,6 +13,7 @@
"ECOGESTURES": "Ecogestes",
"BADGES": "Badges",
"parameters": "Options",
+ "profile": "Profil",
"connectors": "connecteurs",
"graphs": "graphes"
},
diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss
index 1c3d2dc6f..5d12b45c7 100644
--- a/src/styles/components/_nav.scss
+++ b/src/styles/components/_nav.scss
@@ -7,13 +7,7 @@
0px 8px 10px rgba(0, 0, 0, 0.14);
border-top: unset;
border-right: unset;
- // justify-content: flex-end;
z-index: 19;
- // position: fixed;
- // bottom: 0;
- // left: 0;
- // display: block;
- // width: 100%;
@media #{$tablet} {
background-color: $primary-color;
}
@@ -28,6 +22,7 @@
}
.c-nav-link {
padding: 0 1rem;
+ font-size: 0.9rem;
.on {
display: none;
}
@@ -40,10 +35,20 @@
// display: flex;
// list-style: none;
// justify-content: space-around;
+// height: 56px;
+// align-items: center;
// }
+@media #{$tablet} {
+ .c-nav-item {
+ height: 54px;
+ margin-top: -0.3rem;
+ padding: 0rem 0 0.8rem 0;
+ }
+}
+
.c-nav-link .c-nav-icon {
padding-right: 0.5rem;
- width: 50px;
+ width: 60px;
height: 36px;
fill: none;
}
--
GitLab