Commit 20863195 authored by Eugen Rochko's avatar Eugen Rochko

Move items in navigation to dropdown, link blog and merch

parent 9c4eccd1
import React, { PureComponent } from 'react';
import classNames from 'classnames';
export default class Dropdown extends PureComponent {
state = {
opened: false
};
renderMenu () {
const { value, options, asLinks } = this.props;
return (
<div className='dropdown__menu'>
{options.map(option => asLinks ? (
<a href={option.value} className='dropdown__option' target='_blank'>
{option.label}
</a>
) : (
<div key={option.value} className={classNames('dropdown__option', { active: option.value === value })} onClick={this.handleOptionClick.bind(this, option.value)}>
{option.label}
</div>
))}
</div>
);
}
handleOptionClick = (value) => {
if (this.props.onChange) {
this.props.onChange(value);
}
this.setState({ opened: false });
}
handleClick = () => {
this.setState({ opened: !this.state.opened });
}
handleDocumentClick = e => {
if (this.node && !this.node.contains(e.target)) {
this.setState({ opened: false });
}
}
componentDidMount () {
document.addEventListener('click', this.handleDocumentClick, false);
document.addEventListener('touchend', this.handleDocumentClick, false);
}
componentWillUnmount () {
document.removeEventListener('click', this.handleDocumentClick, false);
document.removeEventListener('touchend', this.handleDocumentClick, false);
}
setRef = c => {
this.node = c;
}
render () {
const { opened } = this.state;
const { label } = this.props;
return (
<div className={classNames('dropdown', { active: opened })} ref={this.setRef}>
<div className='dropdown__control' tabIndex='0' role='button' onClick={this.handleClick}>{label} <i className='dropdown__arrow ion-ios-arrow-down' /></div>
{opened && this.renderMenu()}
</div>
);
}
}
import React, { PureComponent } from 'react'; import React from 'react';
import classNames from 'classnames'; import Dropdown from './Dropdown';
import flagEn from 'twemoji/2/svg/1f1ec-1f1e7.svg'; import flagEn from 'twemoji/2/svg/1f1ec-1f1e7.svg';
import flagFr from 'twemoji/2/svg/1f1eb-1f1f7.svg'; import flagFr from 'twemoji/2/svg/1f1eb-1f1f7.svg';
...@@ -27,62 +27,11 @@ const options = [ ...@@ -27,62 +27,11 @@ const options = [
{ value: 'ar', label: <span><img src={flagAr} className='emoji' alt='' /> العربية</span> }, { value: 'ar', label: <span><img src={flagAr} className='emoji' alt='' /> العربية</span> },
]; ];
export default class LanguageSelect extends PureComponent { export default ({ value, onChange }) => (
state = { <Dropdown
opened: false options={options}
}; value={value}
label='文A'
renderMenu () { onChange={onChange}
const { value } = this.props; />
);
return (
<div className='dropdown__menu'>
{options.map(option => (
<div key={option.value} className={classNames('dropdown__option', { active: option.value === value })} onClick={this.handleOptionClick.bind(this, option.value)}>
{option.label}
</div>
))}
</div>
);
}
handleOptionClick = (value) => {
this.props.onChange(value);
this.setState({ opened: false });
}
handleClick = () => {
this.setState({ opened: !this.state.opened });
}
handleDocumentClick = e => {
if (this.node && !this.node.contains(e.target)) {
this.setState({ opened: false });
}
}
componentDidMount () {
document.addEventListener('click', this.handleDocumentClick, false);
document.addEventListener('touchend', this.handleDocumentClick, false);
}
componentWillUnmount () {
document.removeEventListener('click', this.handleDocumentClick, false);
document.removeEventListener('touchend', this.handleDocumentClick, false);
}
setRef = c => {
this.node = c;
}
render () {
const { opened } = this.state;
return (
<div className={classNames('dropdown', { active: opened })} ref={this.setRef}>
<div className='dropdown__control' tabIndex='0' role='button' onClick={this.handleClick}>A <i className='dropdown__arrow ion-ios-arrow-down' /></div>
{opened && this.renderMenu()}
</div>
);
}
}
...@@ -3,9 +3,17 @@ import { Link } from 'react-router-dom'; ...@@ -3,9 +3,17 @@ import { Link } from 'react-router-dom';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import LanguageSelectContainer from './LanguageSelectContainer'; import LanguageSelectContainer from './LanguageSelectContainer';
import Dropdown from './Dropdown';
import mastodonLogo from './assets/logo_full.svg'; import mastodonLogo from './assets/logo_full.svg';
const options = [
{ value: 'https://medium.com/tootsuite', label: <FormattedMessage id='nav.blog' defaultMessage='Blog' />},
{ value: 'https://discourse.joinmastodon.org', label: <FormattedMessage id='nav.support' defaultMessage='Support' /> },
{ value: 'https://github.com/tootsuite/documentation', label: <FormattedMessage id='nav.docs' defaultMessage='Documentation' /> },
{ value: 'https://www.designbyhumans.com/shop/sticker/mastodon-logo-sticker/791326/', label: <FormattedMessage id='nav.merch' defaultMessage='Merch' /> },
];
const Navigation = () => ( const Navigation = () => (
<div className='navbar container'> <div className='navbar container'>
<ul className='left'> <ul className='left'>
...@@ -17,10 +25,9 @@ const Navigation = () => ( ...@@ -17,10 +25,9 @@ const Navigation = () => (
</ul> </ul>
<ul className='right'> <ul className='right'>
<li className='optional-link'><a href='https://discourse.joinmastodon.org'><FormattedMessage id='nav.support' defaultMessage='Support' /></a></li>
<li className='optional-link-2'><a href='https://github.com/tootsuite/documentation'><FormattedMessage id='nav.docs' defaultMessage='Documentation' /></a></li>
<li><Link to='/sponsors'><FormattedMessage id='nav.sponsors' defaultMessage='Sponsors' /></Link></li> <li><Link to='/sponsors'><FormattedMessage id='nav.sponsors' defaultMessage='Sponsors' /></Link></li>
<li><a href='https://github.com/tootsuite/mastodon'><FormattedMessage id='nav.code' defaultMessage='Source code' /></a></li> <li><a href='https://github.com/tootsuite/mastodon'><FormattedMessage id='nav.code' defaultMessage='Source code' /></a></li>
<li><Dropdown asLinks label={<FormattedMessage id='nav.resources' defaultMessage='Resources' />} options={options} /></li>
<li><LanguageSelectContainer /></li> <li><LanguageSelectContainer /></li>
</ul> </ul>
</div> </div>
......
...@@ -33,7 +33,7 @@ $phi: 1.6180339887498948482; ...@@ -33,7 +33,7 @@ $phi: 1.6180339887498948482;
a { a {
display: flex; display: flex;
align-content: center; justify-content: center;
align-items: center; align-items: center;
color: $lighter; color: $lighter;
......
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
$transition-in: 100ms linear; $transition-in: 100ms linear;
$transition-out: 250ms linear; $transition-out: 250ms linear;
.dropdown { .dropdown,
.navbar ul .dropdown {
position: relative; position: relative;
.emoji { .emoji {
...@@ -56,6 +57,7 @@ $transition-out: 250ms linear; ...@@ -56,6 +57,7 @@ $transition-out: 250ms linear;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
text-align: left; text-align: left;
transition: none;
&:last-child { &:last-child {
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
...@@ -64,7 +66,9 @@ $transition-out: 250ms linear; ...@@ -64,7 +66,9 @@ $transition-out: 250ms linear;
&:hover, &:hover,
&.active { &.active {
color: $darkest;
background-color: $lighter; background-color: $lighter;
transition: none;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment