Commit 5a085982 authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf Committed by Nicolas Frandeboeuf
Browse files

Move settings & categories to top right menu

parent 310d4383
......@@ -56,7 +56,6 @@ const Menu = props => {
// Update the subsection in the links of the menu
const chartsSubsection = URL.sections.sub(props.match, 'charts', props.defaultChart);
const settingsSubsection = URL.sections.sub(props.match, 'settings', 'accounts');
return (
<nav className={props.isHidden ? 'menu-hidden' : ''}>
......@@ -75,15 +74,6 @@ const Menu = props => {
{/* Pass down the location so that the active class is set
when changing location. */}
<DuplicatesEntry currentAccountId={currentAccountId} location={props.location} />
<Entry path={URL.categories.url(currentAccountId)} icon="list-ul">
{$t('client.menu.categories')}
</Entry>
<Entry path={URL.settings.url(settingsSubsection, currentAccountId)} icon="cogs">
{$t('client.menu.settings')}
</Entry>
<Entry path={URL.about.url(currentAccountId)} icon="question">
{$t('client.menu.about')}
</Entry>
</ul>
<div className="sidebar-about">
......
import React from 'react';
import ReactDOM from 'react-dom';
import { NavLink } from 'react-router-dom';
import URL from '../../urls';
import { translate as $t } from '../../helpers';
class ParamMenu extends React.Component {
onKeydownHandler = event => {
if (event.key === 'Escape') {
this.props.onClick();
}
};
componentDidMount() {
document.addEventListener('keydown', this.onKeydownHandler);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.onKeydownHandler);
}
render() {
const modal = (
<div id="overlay" onClick={this.props.onClick}>
<div className="settings-dropdown-menu">
<ul>
<li>
<NavLink to={URL.categories.url(this.props.currentAccountId)}>
<span className="fa fa-list-ul" />
{$t('client.menu.categories')}
</NavLink>
</li>
<li>
<NavLink to={URL.settings.url('accounts', this.props.currentAccountId)}>
<span className="fa fa-bank" />
{$t('client.settings.tab_accounts')}
</NavLink>
</li>
<li>
<NavLink to={URL.settings.url('emails', this.props.currentAccountId)}>
<span className="fa fa-envelope" />
{$t('client.settings.tab_alerts')}
</NavLink>
</li>
<li>
<NavLink to={URL.settings.url('weboob', this.props.currentAccountId)}>
<span className="fa fa-plug" />
{$t('client.settings.tab_weboob')}
</NavLink>
</li>
<li>
<NavLink
to={URL.settings.url('customization', this.props.currentAccountId)}>
<span className="fa fa-paint-brush" />
{$t('client.settings.tab_customization')}
</NavLink>
</li>
<li>
<NavLink to={URL.settings.url('logs', this.props.currentAccountId)}>
<span className="fa fa-file-text" />
{$t('client.settings.tab_logs')}
</NavLink>
</li>
</ul>
<ul>
<li>
<NavLink to={URL.about.url(this.props.currentAccountId)}>
<span className="fa fa-question" />
{$t('client.menu.about')}
</NavLink>
</li>
</ul>
</div>
</div>
);
return ReactDOM.createPortal(modal, document.getElementById('portal'));
}
}
export default ParamMenu;
import React from 'react';
import PropTypes from 'prop-types';
import { Route, Switch, Redirect } from 'react-router-dom';
import URL from '../../urls';
import { translate as $t } from '../../helpers';
import BackupParameters from './backup';
import BankAccountsList from './bank-accesses';
......@@ -11,55 +10,35 @@ import EmailsParameters from './emails';
import LogsSection from './logs';
import WeboobParameters from './weboob';
import TabsContainer from '../ui/tabs.js';
const SettingsComponents = props => {
let currentAccountId = URL.settings.accountId(props.match);
let tabs = new Map();
tabs.set(URL.settings.url('accounts', currentAccountId), {
name: $t('client.settings.tab_accounts'),
component: BankAccountsList
});
tabs.set(URL.settings.url('emails', currentAccountId), {
name: $t('client.settings.tab_alerts'),
component: EmailsParameters
});
tabs.set(URL.settings.url('backup', currentAccountId), {
name: $t('client.settings.tab_backup'),
component: BackupParameters
});
tabs.set(URL.settings.url('weboob', currentAccountId), {
name: $t('client.settings.tab_weboob'),
component: WeboobParameters
});
tabs.set(URL.settings.url('customization', currentAccountId), {
name: $t('client.settings.tab_customization'),
component: CustomizationParameters
});
tabs.set(URL.settings.url('logs', currentAccountId), {
name: $t('client.settings.tab_logs'),
component: LogsSection
});
return (
<TabsContainer
tabs={tabs}
defaultTab={URL.settings.url('accounts', currentAccountId)}
selectedTab={props.location.pathname}
history={props.history}
location={props.location}
/>
<Switch>
<Route
path={URL.settings.url('accounts', currentAccountId)}
component={BankAccountsList}
/>
<Route
path={URL.settings.url('emails', currentAccountId)}
component={EmailsParameters}
/>
<Route
path={URL.settings.url('backup', currentAccountId)}
component={BackupParameters}
/>
<Route
path={URL.settings.url('weboob', currentAccountId)}
component={WeboobParameters}
/>
<Route
path={URL.settings.url('customization', currentAccountId)}
component={CustomizationParameters}
/>
<Route path={URL.settings.url('logs', currentAccountId)} component={LogsSection} />
<Redirect to={URL.settings.url('accounts', currentAccountId)} push={false} />
</Switch>
);
};
SettingsComponents.propTypes = {
// The history object, providing access to the history API.
// Automatically added by the Route component.
history: PropTypes.object.isRequired,
// Location object (contains the current path). Automatically added by react-router.
location: PropTypes.object.isRequired
};
export default SettingsComponents;
......@@ -54,6 +54,47 @@ small {
font-size: 85%;
}
/* Overlay */
#overlay {
z-index: 900;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
/* Parameters modale */
#overlay .settings-dropdown-menu {
position: fixed;
top: 35px;
right: 2ex;
z-index: 100;
padding: 0;
min-width: 250px;
font-size: 1.2rem;
}
#overlay .settings-dropdown-menu > ul {
margin: 0;
padding: 0;
}
#overlay .settings-dropdown-menu > ul li {
padding: 0.5em 1em;
list-style-type: none;
}
#overlay .settings-dropdown-menu > ul li a {
display: block;
color: inherit;
}
#overlay .settings-dropdown-menu > ul li .fa {
width: 1.5ex;
margin-right: 1em;
}
/* App layout */
header {
overflow: hidden;
......@@ -88,8 +129,8 @@ header .section-title {
text-overflow: ellipsis;
}
header .locale-selector {
margin-right: 5px;
header .settings-dropdown {
margin-right: 2ex;
}
main {
......
......@@ -26,6 +26,7 @@ import Settings from './components/settings';
import AccountWizard from './components/init/account-wizard';
import Menu from './components/menu';
import ParamMenu from './components/menu/params';
import Loading from './components/ui/loading';
import ThemeLoaderTag from './components/ui/theme-link';
......@@ -54,7 +55,8 @@ class BaseApp extends React.Component {
constructor(props) {
super(props);
this.state = {
isMenuHidden: this.props.isSmallScreen
isMenuHidden: this.props.isSmallScreen,
isSettingsMenuShown: false
};
}
......@@ -62,6 +64,10 @@ class BaseApp extends React.Component {
this.setState({ isMenuHidden: !this.state.isMenuHidden });
};
handleSettingsMenuToggle = () => {
this.setState({ isSettingsMenuShown: !this.state.isSettingsMenuShown });
};
handleWindowResize = throttle(event => {
let isSmallScreen = computeIsSmallScreen(event.target.innerWidth);
if (isSmallScreen !== this.props.isSmallScreen) {
......@@ -137,6 +143,16 @@ class BaseApp extends React.Component {
);
}
let maybeSettingsMenu = null;
if (this.state.isSettingsMenuShown) {
maybeSettingsMenu = (
<ParamMenu
currentAccountId={currentAccountId}
onClick={this.handleSettingsMenuToggle}
/>
);
}
return (
<ErrorReporter>
<Modal />
......@@ -148,6 +164,13 @@ class BaseApp extends React.Component {
<Link to="/">{$t('client.KRESUS')}</Link>
</h1>
<Route path={URL.sections.pattern} render={this.makeSectionTitle} />
<div className="settings-dropdown">
<span
className="fa fa-cogs clickable"
onClick={this.handleSettingsMenuToggle}
/>
{maybeSettingsMenu}
</div>
</header>
<main>
......
......@@ -197,6 +197,23 @@ input.check-validity:invalid {
margin-bottom: 0.5em;
}
/* Parameters modale */
#overlay .settings-dropdown-menu {
color: #444444;
background-color: white;
border-radius: 3px;
border: 1px solid #C0C0C0;
box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.2), 0 6px 18px 0 rgba(50, 54, 63, 0.2);
}
#overlay .settings-dropdown-menu > ul + ul {
border-top: 1px solid #C0C0C0;
}
#overlay .settings-dropdown-menu li:hover {
background-color: #F5F6F7;
}
header {
background-color: #303641;
color: white;
......
......@@ -38,6 +38,7 @@
<div id="app">
<span class="spinner"></span>
</div>
<div id="portal"></div>
<div id="postload"></div>
<script src="main.js"></script>
</body>
......
Supports Markdown
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