Commit bde748e4 authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf
Browse files

Move about section to menu

parent 55b295fd
Pipeline #9397 passed with stage
in 3 minutes and 30 seconds
import React from 'react';
import { translate as $t } from '../../helpers';
import packageConfig from '../../../package.json';
class AboutComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
showDetails: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
if (e.target.tagName !== 'A') {
this.setState({
showDetails: !this.state.showDetails
});
}
}
render() {
let details;
if (this.state.showDetails) {
details = (
<div>
<p className="desc">{ $t('client.about') }</p>
<ul>
<li>
<a
href="https://framagit.org/bnjbvr/kresus"
target="_blank">
{ $t('client.menu.about.sources') }
<span className="fa fa-code"></span>
</a>
</li>
<li>
<a
href="https://forum.cozy.io/t/app-kresus"
target="_blank">
{ $t('client.menu.about.forum_thread') }
<span className="fa fa-cloud"></span>
</a>
</li>
<li>
<a
href="https://blog.benj.me/tag/kresus"
target="_blank">
{ $t('client.menu.about.blog') }
<span className="fa fa-pencil-square-o"></span>
</a>
</li>
</ul>
</div>
);
}
let toggleSpan = this.state.showDetails ? 'down' : 'up';
return (
<div>
<p className="sidebar-about-main" onClick={ this.handleClick }>
<span className={ `toggle fa fa-angle-${toggleSpan}` }></span>
<a href="https://kresus.org">KRESUS</a>&nbsp;
{ packageConfig.version } &nbsp;
{ $t('client.menu.about.license') }&nbsp;
<a href="https://framagit.org/bnjbvr/kresus/blob/master/LICENSE"
target="_blank">
{ packageConfig.license }
</a>
</p>
{ details }
</div>
);
}
}
export default AboutComponent;
import React from 'react';
import { translate as $t } from '../../../helpers';
import packageConfig from '../../../../package.json';
let About = () => (
<div className="top-panel panel panel-default about">
<div className="panel-heading">
<h3 className="title panel-title">{ $t('client.settings.tab_about') }</h3>
</div>
<div className="panel-body">
<h3 className="app-title">KRESUS</h3>
<span>
Version: <code>{ packageConfig.version }</code> &nbsp;
{ $t('client.settings.license') }: <code>{ packageConfig.license }</code>
</span>
<p>{ $t('client.about') }</p>
<div className="btn-group">
<a className="btn btn-default"
href="https://framagit.org/bnjbvr/kresus"
target="_blank">
<i className="fa fa-code"></i> { $t('client.settings.sources') }
</a>
<a className="btn btn-default"
href="https://forum.cozy.io/t/app-kresus"
target="_blank">
<i className="fa fa-cloud"></i> { $t('client.settings.forum_thread') }
</a>
<a className="btn btn-default"
href="https://blog.benj.me/tag/kresus"
target="_blank">
<i className="fa fa-pencil-square-o"></i> { $t('client.settings.blog') }
</a>
</div>
</div>
</div>
);
export default About;
......@@ -2,7 +2,6 @@ import React from 'react';
import { assert, translate as $t } from '../../helpers';
import About from './about';
import BankAccountsList from './bank-accesses';
import DefaultParameters from './default-parameters';
import BackupParameters from './backup';
......@@ -40,9 +39,6 @@ export default class SettingsComponents extends React.Component {
case 'defaults':
Tab = <DefaultParameters/>;
break;
case 'about':
Tab = <About/>;
break;
case 'backup':
Tab = <BackupParameters/>;
break;
......@@ -110,12 +106,6 @@ export default class SettingsComponents extends React.Component {
{ $t('client.settings.tab_weboob') }
</a>
</li>
<li role="presentation"
className={ maybeActive('about') }>
<a href="#" onClick={ this.show('about') }>
{ $t('client.settings.tab_about') }
</a>
</li>
</ul>
</div>
</nav>
......
......@@ -146,6 +146,9 @@ ul {
overflow: auto;
clear: both;
z-index: 1000;
display: flex;
flex-direction: column;
}
/* Sidebar list of sections (operations, settings, etc.) */
......@@ -304,6 +307,58 @@ ul {
color: #08ad3c;
}
.sidebar-about {
flex: auto;
min-height: 170px;
position: relative;
overflow: auto;
text-align: right;
color: #FFFFFF;
}
.sidebar-about > div {
position: absolute;
bottom: 5px;
box-sizing: border-box;
width: 100%;
padding: 0 2%;
}
.sidebar-about-main {
cursor: pointer;
}
.sidebar-about-main:only-child {
margin: 0;
}
.sidebar-about span.toggle {
cursor: inherit;
float: left;
font-size: 1.5em;
}
.sidebar-about .desc {
color: #afb0b3;
}
.sidebar-about a {
color: #FFFFFF;
font-weight: bold;
}
.sidebar-about a:hover {
font-style: italic;
}
.sidebar-about li {
list-style: none;
}
.sidebar-about li .fa {
margin-left: 10px;
}
/* Operations list component */
/* Wells (panels with amount at the top */
.operation-wells {
......
......@@ -18,6 +18,7 @@ import Settings from './components/settings';
import AccountWizard from './components/init/account-wizard';
import WeboobInstallReadme from './components/init/weboob-readme';
import Loading from './components/ui/loading';
import About from './components/menu/about';
// Now this really begins.
class BaseApp extends React.Component {
......@@ -151,6 +152,10 @@ class BaseApp extends React.Component {
</li>
</ul>
</div>
<div className="sidebar-about">
<About />
</div>
</div>
<div className="col-sm-3"></div>
......
......@@ -87,7 +87,14 @@ module.exports = {
sublists: 'Accounts',
reports: 'Reports',
budget: 'Budget',
support: 'Support'
support: 'Support',
different_currencies: 'Different currencies',
about: {
blog: 'Blog',
forum_thread: 'Cozy forum thread',
license: 'License',
sources: 'Sources'
}
},
operations: {
......@@ -197,7 +204,6 @@ module.exports = {
title: 'Settings',
tab_accounts: 'Bank accounts',
tab_about: 'About',
tab_backup: 'Backup / restore data',
tab_defaults: 'Default parameters',
tab_emails: 'Emails',
......@@ -257,11 +263,7 @@ module.exports = {
},
default_chart_type: 'Default amount type',
default_chart_period: 'Default period',
blog: 'Blog',
forum_thread: 'Cozy forum thread',
license: 'License',
sources: 'Sources'
default_chart_period: 'Default period'
},
similarity: {
......
......@@ -87,7 +87,14 @@ module.exports = {
sublists: 'Comptes',
reports: 'Relevé',
budget: 'Budget',
support: 'Support'
support: 'Support',
different_currencies: 'Devises différentes',
about: {
blog: 'Blog',
forum_thread: 'Sujet sur le forum de Cozy',
license: 'Licence',
sources: 'Sources',
}
},
operations: {
......@@ -197,7 +204,6 @@ module.exports = {
title: 'Paramètres',
tab_accounts: 'Comptes bancaires',
tab_about: 'À propos',
tab_backup: 'Sauvegarde et restauration',
tab_defaults: 'Paramètres par défaut',
tab_emails: 'Emails',
......@@ -257,11 +263,7 @@ module.exports = {
},
default_chart_type: `Type d'opérations par défaut`,
default_chart_period: 'Période par défaut',
blog: 'Blog',
forum_thread: 'Sujet sur le forum de Cozy',
license: 'Licence',
sources: 'Sources',
default_chart_period: 'Période par défaut'
},
similarity: {
......
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