Skip to content

Commit

Permalink
Bringing Bootstrap header. (#5)
Browse files Browse the repository at this point in the history 
* MUI to Bootstrap

Header-component

* MUI to boostrap fix

* Added Glyphicons to language & login

* Added + Glyphicon to add new event

* Updating basecode to be on same level as develop (#3)

* Fix double encoding City-of-Helsinki#524; with caveat axios/axios#2563

* Display all api results in react select components

* Fix event publisher field name for user rights check

* Fix City-of-Helsinki#530

* Do not try to update deleted subevents

* Do not try to edit past subevents

* Refactor editability check; allow deleting and canceling series that contain deleted, canceled or past subevents

* Remove unnecessary inlined sub_events at cancel to prevent API errors

* Add instructions for internet events

* Update snapshots

* Add remote participation keyword to all internet events

* Add notification about online events to cancel confirmation dialog

* Add postpone button and badge

* Mention postponing in cancel extra text

* Add postpone button to editor too

* Show postponed events in search instead of crashing

* Update user rights managers

* Add missing </p>

* Do not remove subevents at cancel after all; deleted items removed by API PR City-of-Helsinki/linkedevents#407

* Fix removed future time validation; fixes City-of-Helsinki#536, City-of-Helsinki#528

* Update snapshots

Co-authored-by: Riku Oja <[email protected]>
Co-authored-by: Aleksi Salonen <[email protected]>
Co-authored-by: Riku Oja <[email protected]>
Co-authored-by: aceViilee <[email protected]>

* Updated header-component

Updated to Reactstrap based on Open design. Updated mobile-functionality. Language dropdown WIP
Added Reactstrap stylesheet.
Added Reactstrap & Bootstrap packets

* Removed React-select language changer, replaced with component

Added comment about Nav-update, removed React-select and updated language dropdown with LanguageSelector-component

* Fixed padding on language-select

Fixed padding to be inline with login

Co-authored-by: DelusionCB <[email protected]>
Co-authored-by: Riku Oja <[email protected]>
Co-authored-by: Aleksi Salonen <[email protected]>
Co-authored-by: Riku Oja <[email protected]>
Co-authored-by: aceViilee <[email protected]>
  • Loading branch information
@Ducky07 @DelusionCB
@Rikuoja @aleksisalonen @aceViilee
6 people authored May 4, 2020
1 parent 3b8fa5c commit a1fdbd2
Show file tree
Hide file tree
Showing 6 changed files with 538 additions and 106 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
"raven-js": "^2.3.0",
"react": "16.12.0",
"react-addons-pure-render-mixin": "^15.6.2",
"react-bootstrap": "^1.0.1",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "16.12.0",
"react-helmet": "^5.2.1",
Expand All @@ -70,6 +71,7 @@
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9",
"react-select": "^3.0.8",
"reactstrap": "^8.4.1",
"redux": "4.0.4",
"redux-actions": "^0.9.0",
"redux-thunk": "^2.3.0",
Expand Down
58 changes: 58 additions & 0 deletions src/components/Header/LanguageSelector.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

class LanguageSelector extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false,
};
}

toggle(e) {
e.preventDefault();
this.setState({isOpen: !this.state.isOpen});
}

handleLanguageChange(lang, e) {
e.preventDefault();
this.props.changeLanguage(lang);
this.setState({isOpen: false})

}

isActiveLanguage(language) {
const {userLocale} = this.props;
return language.label === userLocale.locale.toUpperCase();
}

render() {
const {userLocale} = this.props;
const activeLocale = userLocale.locale.toUpperCase();
return (
<div style={{display: 'flex', flexDirection: 'column', width: '50px', color: 'white', fontWeight: 'bold', padding: '.375rem .75rem', alignItems: 'center'}}>
<div className="currentLanguage" style={{paddingTop: '0.375rem', paddingBottom: '0.375rem'}}>
<a href="#" onClick={this.toggle}>{activeLocale}</a>
</div>
<ul className={classNames('language', {open: this.state.isOpen})}>
{this.props.languages.map((language, index) => {
return (
<li key={index} className={classNames('language-item',{active: this.isActiveLanguage(language)})}>
<a onClick={this.handleLanguageChange.bind(this, language)} href="#">{language.label}</a>
</li>
)
})}
</ul>
</div>
)
}
}

LanguageSelector.propTypes = {
languages: PropTypes.array,
userLocale: PropTypes.object,
changeLanguage: PropTypes.func,
}
export default LanguageSelector;
166 changes: 69 additions & 97 deletions src/components/Header/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import './index.scss'
import 'bootstrap/dist/css/bootstrap.min.css';

import React from 'react'
import PropTypes from 'prop-types'
Expand All @@ -9,32 +10,33 @@ import {withRouter} from 'react-router'

import {login as loginAction, logout as logoutAction} from 'src/actions/user.js'
import {setLocale as setLocaleAction} from 'src/actions/userLocale'

import LanguageSelector from './LanguageSelector';
import {FormattedMessage} from 'react-intl'

// Material-ui Components
import Select from 'react-select'
import {Button, Drawer, Hidden, makeStyles, Toolbar} from '@material-ui/core'
import {Add, Menu, Language, Person} from '@material-ui/icons'

import {Link} from 'react-router-dom'
import constants from '../../constants'

//Updated Nav from Material UI to Reactstrap based on Open design
import {Collapse, Navbar, NavbarToggler, Nav, NavbarBrand, NavLink, Button} from 'reactstrap';
import cityOfHelsinkiLogo from '../../assets/images/helsinki-logo.svg'
import {hasOrganizationWithRegularUsers} from '../../utils/user'
import {get} from 'lodash'
import {HelMaterialTheme} from '../../themes/material-ui'
import {HelSelectTheme, HelLanguageSelectStyles} from '../../themes/react-select'
import moment from 'moment'
import * as momentTimezone from 'moment-timezone'
import helBrandColors from '../../themes/hel/hel-brand-colors'

const {USER_TYPE, APPLICATION_SUPPORT_TRANSLATION} = constants

class HeaderBar extends React.Component {
state = {
navBarOpen: false,
showModerationLink: false,
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false,
showModerationLink: false,
};}
toggle() {
this.setState ({
isOpen: !this.state.isOpen,
});
}

componentDidMount() {
Expand Down Expand Up @@ -68,15 +70,6 @@ class HeaderBar extends React.Component {
momentTimezone.locale(selectedOption.value)
}

toggleNavbar = () => {
this.setState({navBarOpen: !this.state.navBarOpen});
}

getNavigateMobile = (navigate) => () => {
navigate();
this.toggleNavbar();
}

render() {
const {user, userLocale, routerPush, logout, login, location} = this.props
const {showModerationLink} = this.state
Expand All @@ -89,52 +82,44 @@ class HeaderBar extends React.Component {
const isInsideForm = location.pathname.startsWith('/event/create/new');

return (
<div className="main-navbar">
<Toolbar className="helsinki-bar">
<div className="helsinki-bar__logo">
<Link to="/">
<img src={cityOfHelsinkiLogo} alt="City Of Helsinki" />
<div className='main-navbar'>
<Navbar className='bar'>
<div className="bar__logo">
<Link to='/'>
<img src={cityOfHelsinkiLogo} alt='City Logo' />
</Link>
</div>
<div className="helsinki-bar__login-button">
<div className="helsinki-bar__language-button">
<div className="language-selector">
<Language className="language-icon"/>
<Select
isClearable={false}
isSearchable={false}
value={{
label: userLocale.locale.toUpperCase(),
value: userLocale.locale,
}}
options={this.getLanguageOptions()}
onChange={this.changeLanguage}
styles={HelLanguageSelectStyles}
theme={HelSelectTheme}
/>
</div>
<Nav className='ml-auto'>
<div className='bar__login-button'>
<div className='bar__language-button'>
<span className="glyphicon glyphicon-globe"></span>
<div className='language-selector'>
<LanguageSelector languages={this.getLanguageOptions()} userLocale={userLocale} changeLanguage={this.changeLanguage} />
</div>
</div>
{user ? (
<Button

onClick={() => logout()}>
{user.displayName}
</Button>
) : (
<Button

onClick={() => login()}>
<span className="glyphicon glyphicon-user"></span>
<FormattedMessage id='login' />
</Button>
)}
</div>
{user
? <Button
style={{color: HelMaterialTheme.palette.primary.contrastText}}
onClick={() => logout()}
>
{user.displayName}
</Button>
: <Button
style={{color: HelMaterialTheme.palette.primary.contrastText}}
startIcon={<Person/>}
onClick={() => login()}
>
<FormattedMessage id="login"/>
</Button>}
</div>
</Toolbar>

<Toolbar className="linked-events-bar">
<div className="linked-events-bar__logo" onClick={() => routerPush('/')}><FormattedMessage id={`linked-${appSettings.ui_mode}`} /></div>
<div className="linked-events-bar__links">
<Hidden smDown>
</Nav>
</Navbar>

<Navbar className="linked-events-bar" expand='lg'>
<NavbarBrand className="linked-events-bar__logo" onClick={() => routerPush('/')}><FormattedMessage id={`linked-${appSettings.ui_mode}`} /></NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<div className="linked-events-bar__links">
<div className="linked-events-bar__links__list">
<NavLinks
showModerationLink={showModerationLink}
Expand All @@ -144,45 +129,30 @@ class HeaderBar extends React.Component {
toModerationPage={toModerationPage}
/>
</div>
</Hidden>
<div />
<div className="linked-events-bar__links__mobile">
{!isInsideForm && (
<Button
variant="outlined"
className="linked-events-bar__links__create-events"
onClick={() => routerPush('/event/create/new')}
startIcon={<Add/>}
>
<FormattedMessage id={`create-${appSettings.ui_mode}`}/>
</Button>
)}
<Hidden mdUp>
<Menu className="linked-events-bar__icon" onClick={this.toggleNavbar} />
<Drawer anchor='right' open={this.state.navBarOpen} ModalProps={{onBackdropClick: this.toggleNavbar}}>
<div className="menu-drawer-mobile">
<NavLinks
showModerationLink={showModerationLink}
toMainPage={this.getNavigateMobile(toMainPage)}
toSearchPage={this.getNavigateMobile(toSearchPage)}
toHelpPage={this.getNavigateMobile(toHelpPage)}
toModerationPage={this.getNavigateMobile(toModerationPage)}
/>
</div>
</Drawer>
</Hidden>


<Nav className="ml-auto" navbar>
{!isInsideForm && (
<Button
className="linked-events-bar__links__create-events"
onClick={() => routerPush('/event/create/new')}
>
<span className="glyphicon glyphicon-plus"></span>
<FormattedMessage id={`create-${appSettings.ui_mode}`}/>
</Button> )}
</Nav>
</div>
</div>
</Toolbar>
</Collapse>
</Navbar>
</div>
)
}
}

const NavLinks = (props) => {
const {showModerationLink, toMainPage, toSearchPage, toHelpPage, toModerationPage} = props;
const moderationStyles = showModerationLink && makeStyles(theme => ({
root: {color: theme.palette.primary.main},
const moderationStyles = showModerationLink && (theme => ({

}))()

return (
Expand Down Expand Up @@ -219,10 +189,12 @@ HeaderBar.propTypes = {
userLocale: PropTypes.object,
setLocale: PropTypes.func,
location: PropTypes.object,
navBarOpen: PropTypes.bool,
showModerationLink: PropTypes.bool,
type: PropTypes.string,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
}


const mapStateToProps = (state) => ({
user: state.user,
userLocale: state.userLocale,
Expand Down
Loading

0 comments on commit a1fdbd2

Please sign in to comment.