From 15cb50183cedf712412da4f129795869e49d9d31 Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Tue, 2 Apr 2019 14:38:58 -0600 Subject: [PATCH 01/29] added mobile nav --- .../app/templates/public/img/bars-nav.svg | 15 +++ .../AuthNavBar/auth-nav-bar.component.js | 2 +- .../nav-bar-profile.component.js | 5 +- .../HamburgerButton/hamburger.component.js | 15 +++ .../NavBar/children/HamburgerButton/index.js | 3 + .../NavBar/children/MobileNavigation/index.js | 3 + .../mobile.navigation.component.js | 29 +++++ .../mobile.navigation.style.js | 22 ++++ .../src/components/NavBar/children/index.js | 4 +- .../components/NavBar/nav-bar.component.js | 109 ++++++++++++------ .../Utils/Dropdown/dropdown.style.js | 11 +- .../language-dropdown.component.js | 4 +- 12 files changed, 176 insertions(+), 46 deletions(-) create mode 100644 generators/app/templates/public/img/bars-nav.svg create mode 100644 generators/app/templates/src/components/NavBar/children/HamburgerButton/hamburger.component.js create mode 100644 generators/app/templates/src/components/NavBar/children/HamburgerButton/index.js create mode 100644 generators/app/templates/src/components/NavBar/children/MobileNavigation/index.js create mode 100644 generators/app/templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.component.js create mode 100644 generators/app/templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.style.js diff --git a/generators/app/templates/public/img/bars-nav.svg b/generators/app/templates/public/img/bars-nav.svg new file mode 100644 index 00000000..be796841 --- /dev/null +++ b/generators/app/templates/public/img/bars-nav.svg @@ -0,0 +1,15 @@ + + + + Group 13 + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js index d22bf1ad..e0473727 100644 --- a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js +++ b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js @@ -26,7 +26,7 @@ const AuthNavBar = props => { sticky={true} toolbar={[ { - component: () => , + component: () => , id: "language" }, { diff --git a/generators/app/templates/src/components/AuthNavBar/children/NavbarProfile/nav-bar-profile.component.js b/generators/app/templates/src/components/AuthNavBar/children/NavbarProfile/nav-bar-profile.component.js index 10f3f626..df5429ff 100644 --- a/generators/app/templates/src/components/AuthNavBar/children/NavbarProfile/nav-bar-profile.component.js +++ b/generators/app/templates/src/components/AuthNavBar/children/NavbarProfile/nav-bar-profile.component.js @@ -45,7 +45,7 @@ class NavBarProfile extends Component { } }; render() { - const { t, img } = this.props; + const { t, img, accordion } = this.props; const { imageLoaded } = this.state; const profileOpts = [ @@ -58,9 +58,8 @@ class NavBarProfile extends Component { onClick: this.logOut } ]; - return img ? ( - + { + return ( +
+ +
+ ); +}; + +export default HamburgerButton; diff --git a/generators/app/templates/src/components/NavBar/children/HamburgerButton/index.js b/generators/app/templates/src/components/NavBar/children/HamburgerButton/index.js new file mode 100644 index 00000000..4d6c7897 --- /dev/null +++ b/generators/app/templates/src/components/NavBar/children/HamburgerButton/index.js @@ -0,0 +1,3 @@ +import HamburgerButton from './hamburger.component'; + +export default HamburgerButton; diff --git a/generators/app/templates/src/components/NavBar/children/MobileNavigation/index.js b/generators/app/templates/src/components/NavBar/children/MobileNavigation/index.js new file mode 100644 index 00000000..a0021d45 --- /dev/null +++ b/generators/app/templates/src/components/NavBar/children/MobileNavigation/index.js @@ -0,0 +1,3 @@ +import MobileNavigation from './mobile.navigation.component'; + +export default MobileNavigation; diff --git a/generators/app/templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.component.js b/generators/app/templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.component.js new file mode 100644 index 00000000..369fc13f --- /dev/null +++ b/generators/app/templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.component.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { LanguageDropdown } from "@util-components"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { withTranslation } from "react-i18next"; + +import { TopNavigation } from './mobile.navigation.style'; + +const MobileNavigation = ({ children, toggleMobileMenu, isOpenMobile, t, i18n }) => { + const isActive = isOpenMobile ? 'active slideLeft' : 'hidden'; + + return ( +
+
+ + +
+ +
+
+ {children} +
+
+ ); +}; + +export default withTranslation()(MobileNavigation); + diff --git a/generators/app/templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.style.js b/generators/app/templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.style.js new file mode 100644 index 00000000..f4718a38 --- /dev/null +++ b/generators/app/templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.style.js @@ -0,0 +1,22 @@ +import styled from "styled-components"; + + +export const TopNavigation = styled.div` + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + margin: 15.5px 0; + + div:first-child { + grid-column: 1 / 3; + } + + button { + margin: 0; + } + + .close-panel__toggle { + text-align: right; + padding-right: 20px; + } +`; diff --git a/generators/app/templates/src/components/NavBar/children/index.js b/generators/app/templates/src/components/NavBar/children/index.js index 6be9cf47..7806035e 100644 --- a/generators/app/templates/src/components/NavBar/children/index.js +++ b/generators/app/templates/src/components/NavBar/children/index.js @@ -1,3 +1,5 @@ import Toolbar from "./Toolbar"; import Navigation from "./Navigation"; -export { Toolbar, Navigation }; +import HamburgerButton from './HamburgerButton'; +import MobileNavigation from './MobileNavigation'; +export { Toolbar, Navigation, HamburgerButton, MobileNavigation}; diff --git a/generators/app/templates/src/components/NavBar/nav-bar.component.js b/generators/app/templates/src/components/NavBar/nav-bar.component.js index 046cd637..bc9ca816 100644 --- a/generators/app/templates/src/components/NavBar/nav-bar.component.js +++ b/generators/app/templates/src/components/NavBar/nav-bar.component.js @@ -1,47 +1,86 @@ -import React, {useEffect} from "react"; -import { Link } from "react-router-dom"; -import { Navigation, Toolbar } from "./children"; -type Props = { navigation: Array, toolbar: Array, sticky: boolean }; +import React, { useEffect, useState } from 'react'; +import { Link } from 'react-router-dom'; + +import { + Navigation, + Toolbar, + HamburgerButton, + MobileNavigation, +} from './children'; +type Props = { + navigation: Array, + toolbar: Array, + sticky: boolean, +}; const NavBar = (props: Props) => { - const { navigation, toolbar, sticky } = props; - let componentElement = React.createRef(); - - const setNavFixed = () => { - const navHeight = componentElement.clientHeight; - const content = document.getElementsByClassName('contentApp'); - if (content.length > 0) { - content[0].style['margin-top'] = `${navHeight}px`; - } + const { navigation, toolbar, sticky, t } = props; + const [ isOpenMobile, setOpenMobile ] = useState(false); + let componentElement = React.createRef(); + + const setNavFixed = () => { + if (componentElement) { + const navHeight = componentElement.clientHeight; + const content = document.getElementsByClassName('contentApp'); + if (content.length > 0) { + content[0].style['margin-top'] = `${navHeight}px`; + } + } + }; + + const onComponentResize = () => { + setNavFixed(); + window.addEventListener('resize', () => { + setNavFixed(); - }; + if (window.innerWidth >= 1024 && isOpenMobile) { + setOpenMobile(false); + } + }); + }; - const onComponentResize = () => { - window.addEventListener('resize', setNavFixed()); - } + useEffect(() => { + if (sticky) { + onComponentResize(); + } + }); - useEffect(() => { - if (sticky) { - onComponentResize(); + const toggleMobileMenu = () => { + setOpenMobile(!isOpenMobile); } - }); - return ( -
componentElement = el}> -
-
- - inrupt - -
- {navigation ? : ""} - {toolbar ? : ""} -
-
- ); + return ( +
(componentElement = el)} + > +
+
+ + inrupt + +
+ {navigation && } + {toolbar && } + {navigation && toolbar && ( + + + + )} + +
+
+ ); }; NavBar.defaultProps = { - sticky: true + sticky: true, }; export default NavBar; diff --git a/generators/app/templates/src/components/Utils/Dropdown/dropdown.style.js b/generators/app/templates/src/components/Utils/Dropdown/dropdown.style.js index 0cf26684..73f4b88d 100644 --- a/generators/app/templates/src/components/Utils/Dropdown/dropdown.style.js +++ b/generators/app/templates/src/components/Utils/Dropdown/dropdown.style.js @@ -5,6 +5,10 @@ export const DropdownContainer = styled.div` height: 100%; width: 100%; padding: 0 !important; + + label { + display: none; + } `; export const DropdownMain = styled.button` @@ -14,14 +18,13 @@ export const DropdownMain = styled.button` height: 100%; width: 100%; padding: 0 16px; - margin: 0; + margin: 5px 0; display: flex; align-items: center; - justify-content: center; &:focus { outline: none; - } + } `; export const DropdownItemContainer = styled.div` @@ -37,8 +40,8 @@ export const DropdownItemContainer = styled.div` right: 0; height: auto; background: #fff; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); transition: all 0.25s ease-in-out; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } `; diff --git a/generators/app/templates/src/components/Utils/LanguageDropdown/language-dropdown.component.js b/generators/app/templates/src/components/Utils/LanguageDropdown/language-dropdown.component.js index 583474ff..ac044b29 100644 --- a/generators/app/templates/src/components/Utils/LanguageDropdown/language-dropdown.component.js +++ b/generators/app/templates/src/components/Utils/LanguageDropdown/language-dropdown.component.js @@ -36,7 +36,7 @@ class LanguageDropdown extends Component { }; render() { - const { t } = this.props; + const { t } = this.props; const { language } = this.state; const profileOpts = [ { @@ -53,7 +53,7 @@ class LanguageDropdown extends Component { } ]; return ( - +
Date: Tue, 2 Apr 2019 15:54:11 -0600 Subject: [PATCH 02/29] fixed loop re-render on navbar and remove language on profile mobile --- .../nav-bar-profile.component.js | 127 +++++++++--------- .../children/Toolbar/toolbar.component.js | 4 +- .../components/NavBar/nav-bar.component.js | 12 +- .../Utils/Dropdown/dropdown.component.js | 15 ++- 4 files changed, 92 insertions(+), 66 deletions(-) diff --git a/generators/app/templates/src/components/AuthNavBar/children/NavbarProfile/nav-bar-profile.component.js b/generators/app/templates/src/components/AuthNavBar/children/NavbarProfile/nav-bar-profile.component.js index df5429ff..8fbcf38f 100644 --- a/generators/app/templates/src/components/AuthNavBar/children/NavbarProfile/nav-bar-profile.component.js +++ b/generators/app/templates/src/components/AuthNavBar/children/NavbarProfile/nav-bar-profile.component.js @@ -1,79 +1,84 @@ -import React, { Component } from "react"; -import styled from "styled-components"; -import { Dropdown } from "@util-components"; +import React, { Component } from 'react'; +import styled from 'styled-components'; +import { Dropdown } from '@util-components'; -import auth from "solid-auth-client"; +import auth from 'solid-auth-client'; export const ImageContainer = styled.div` - width: 42px; - height: 42px; - border-radius: 50%; - background-size: cover; - overflow: hidden; - visibility: ${({ show }) => (show ? "visible" : "hidden")}; - display: ${({ show }) => (show ? "block" : "none")}; + width: 42px; + height: 42px; + border-radius: 50%; + background-size: cover; + overflow: hidden; + visibility: ${({ show }) => (show ? 'visible' : 'hidden')}; + display: ${({ show }) => (show ? 'block' : 'none')}; `; export const Img = styled.img` - box-sizing: border-box; - width: 100%; - height: 100%; + box-sizing: border-box; + width: 100%; + height: 100%; `; export const LoadingImage = styled(ImageContainer)` - background: #cccccc; - display: block; + background: #cccccc; + display: block; `; class NavBarProfile extends Component { - state = { - imageLoaded: false - }; + state = { + imageLoaded: false, + }; - profileRedirect = () => this.props.history.push("/profile"); + profileRedirect = () => this.props.history.push('/profile'); - onImageLoaded = async () => this.setState({ imageLoaded: true }); - logOut = async () => { - try { - await auth.logout(); - // Remove localStorage - localStorage.removeItem("solid-auth-client"); - // Redirect to login page - this.props.history.push("/login"); - } catch (error) { - // console.log(`Error: ${error}`); - } - }; - render() { - const { t, img, accordion } = this.props; - const { imageLoaded } = this.state; + onImageLoaded = async () => this.setState({ imageLoaded: true }); + logOut = async () => { + try { + await auth.logout(); + // Remove localStorage + localStorage.removeItem('solid-auth-client'); + // Redirect to login page + this.props.history.push('/login'); + } catch (error) { + // console.log(`Error: ${error}`); + } + }; + render() { + const { t, img, open } = this.props; + const { imageLoaded } = this.state; - const profileOpts = [ - { - label: t("navBar.profile"), - onClick: this.profileRedirect - }, - { - label: t("navBar.logOut"), - onClick: this.logOut - } - ]; - return img ? ( - - - profile - - {!imageLoaded && } - - ) : ( -
- ); - } + const profileOpts = [ + { + label: t('navBar.profile'), + onClick: this.profileRedirect, + }, + { + label: t('navBar.logOut'), + onClick: this.logOut, + }, + ]; + return img ? ( + + + profile + + {!imageLoaded && } + + ) : ( +
+ ); + } } export default NavBarProfile; diff --git a/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js b/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js index c721b1d5..1e2b7603 100644 --- a/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js +++ b/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js @@ -5,14 +5,14 @@ type Props = { t: Function }; -const Toolbar = ({ toolbar }: Props) => { +const Toolbar = ({ toolbar, open }: Props) => { return (