Commit 9ac348a0 authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf Committed by Nicolas Frandeboeuf
Browse files

Simplify themes: keep only light/dark and add a switch

parent 6de3be48
Pipeline #206321 passed with stages
in 10 minutes and 44 seconds
import React from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import { get, actions } from '../../store';
import URL from '../../urls';
import { translate as $t } from '../../helpers';
import DisplayIf from '../ui/display-if';
const ThemeSwitcher = connect(
state => ({
isDarkMode: get.boolSetting(state, 'dark-mode')
}),
dispatch => ({
handleClick: event => {
event.stopPropagation();
},
handleDarkModeToggle: event => {
actions.setDarkMode(dispatch, event.target.checked);
}
})
)(props => {
return (
<div className="theme-switcher" onClick={props.handleClick}>
<span className="fa fa-sun-o" />
<span>Light</span>
<input
type="checkbox"
name="dark-mode"
onChange={props.handleDarkModeToggle}
checked={props.isDarkMode}
/>
<span>Dark</span>
<span className="fa fa-moon-o" />
</div>
);
});
class DropdownContent extends React.PureComponent {
componentDidMount() {
document.addEventListener('keydown', this.props.onKeydown);
......@@ -91,6 +125,11 @@ export default class DropdownMenu extends React.PureComponent {
</NavLink>
</li>
</ul>
<ul>
<li>
<ThemeSwitcher />
</li>
</ul>
<ul>
<li>
<NavLink to={URL.about.url()}>
......
......@@ -9,52 +9,19 @@ import LocaleSelector from './locale-selector';
const CustomizationOptions = connect(
state => {
return {
themes: get.themes(state),
currentTheme: get.setting(state, 'theme'),
isDiscoveryModeEnabled: get.boolSetting(state, 'discovery-mode')
};
},
dispatch => {
return {
changeTheme(theme) {
actions.setTheme(dispatch, theme);
},
setDiscoverySetting(value) {
actions.setBoolSetting(dispatch, 'discovery-mode', value);
}
};
}
)(props => {
let handleThemeChange = event => props.changeTheme(event.target.value);
let handleDiscoveryCHange = event => props.setDiscoverySetting(event.target.checked);
let themes = null;
if (props.themes.length < 2) {
themes = <p className="alerts warning">{$t('client.settings.customization.no_themes')}</p>;
} else {
let options = props.themes.map(t => {
return (
<option value={t} key={t}>
{t}
</option>
);
});
themes = (
<p className="wrap-on-mobile">
<label htmlFor="theme-selector">
{$t('client.settings.customization.choose_theme')}
</label>
<select
id="theme-selector"
className="form-element-block"
defaultValue={props.currentTheme}
onChange={handleThemeChange}>
{options}
</select>
</p>
);
}
return (
<form className="settings-form settings-container">
<p className="wrap-on-mobile">
......@@ -64,8 +31,6 @@ const CustomizationOptions = connect(
<LocaleSelector className="form-element-block" id="locale-selector" />
</p>
{themes}
<p>
<label htmlFor="discovery-mode">
{$t('client.settings.customization.discovery_label')}
......
......@@ -34,7 +34,7 @@ class ThemeLink extends React.Component {
onLoadHandler = () => {
this.clearTimers();
this.props.setThemeLoaded(this.props.theme, true);
this.props.setThemeLoaded(true);
if (this.props.onLoad) {
this.props.onLoad(true);
}
......@@ -43,7 +43,7 @@ class ThemeLink extends React.Component {
onErrorHandler = () => {
this.clearTimers();
this.props.setThemeLoaded(this.props.theme, false);
this.props.setThemeLoaded(false);
if (this.props.onLoad) {
this.props.onLoad(false);
}
......@@ -103,13 +103,13 @@ ThemeLink.propTypes = {
const ThemeLoaderTag = connect(
state => {
return {
theme: get.setting(state, 'theme')
theme: get.boolSetting(state, 'dark-mode') ? 'dark' : 'light'
};
},
dispatch => {
return {
setThemeLoaded: (theme, loaded) => {
actions.finishThemeLoad(dispatch, theme, loaded);
setThemeLoaded: loaded => {
actions.finishThemeLoad(dispatch, loaded);
}
};
}
......
......@@ -85,7 +85,7 @@ small {
list-style-type: none;
}
#overlay .settings-dropdown-menu > ul li a {
#overlay .settings-dropdown-menu > ul li > * {
display: block;
color: inherit;
padding: 0.5em 1em;
......@@ -93,9 +93,29 @@ small {
#overlay .settings-dropdown-menu > ul li .fa {
width: 1.5ex;
}
#overlay .settings-dropdown-menu > ul li > * > * {
margin-right: 1em;
}
#overlay .settings-dropdown-menu input[type='checkbox'] {
border: 1px solid currentColor;
}
#overlay .settings-dropdown-menu > ul li > .theme-switcher {
display: flex;
align-items: center;
}
#overlay .settings-dropdown-menu > ul li > .theme-switcher :last-child {
margin-right: 0;
}
#overlay .settings-dropdown-menu > ul li > .theme-switcher > span:not(.fa) {
flex-grow: 1;
}
/* App layout */
header {
overflow: hidden;
......
......@@ -437,20 +437,15 @@ export const actions = {
dispatch(Ui.toggleSearchDetails(show));
},
setTheme(dispatch, theme) {
assertDefined(dispatch);
setDarkMode(dispatch, value) {
assert(typeof value === 'boolean', 'value must be a boolean');
dispatch(Ui.startThemeLoad());
dispatch(Settings.set('theme', theme));
dispatch(Settings.set('dark-mode', value.toString()));
},
finishThemeLoad(dispatch, theme, loaded) {
finishThemeLoad(dispatch, loaded) {
assertDefined(dispatch);
if (!loaded && theme !== 'default') {
debug('Could not load theme, revert to default theme.');
dispatch(Settings.set('theme', 'default'));
} else {
dispatch(Ui.finishThemeLoad(loaded));
}
dispatch(Ui.finishThemeLoad(loaded));
},
setIsSmallScreen(dispatch, isSmall) {
......
......@@ -23,7 +23,7 @@ import {
import Errors, { genericErrorHandler } from '../errors';
/* Those settings are stored in the browser local storage only. */
const localSettings = ['theme'];
const localSettings = ['dark-mode'];
function getLocalSettings() {
if (window && window.localStorage) {
......
......@@ -367,7 +367,8 @@ export function initialState(isDemoEnabled) {
slug: null,
state: null
},
isMenuHidden: computeIsSmallScreen()
isMenuHidden: computeIsSmallScreen(),
isDarkMode: false
},
{}
);
......@@ -426,3 +427,7 @@ export function isMenuHidden(state) {
export function isDemoMode(state) {
return state.isDemoMode;
}
export function isDarkMode(state) {
return state.isDarkMode;
}
/* Banks list component and account list component */
main nav .bank-details .icon {
border-radius: 5%;
border: 3px solid #FFFFFF;
}
main nav .bank-details .bank-name {
color: #FFFFFF;
}
main nav .bank-details .bank-name button {
color: inherit;
text-align: left;
}
main nav .bank-details > li.active .bank-name,
main nav .bank-details > li .bank-name button:hover,
main nav .bank-details > li .bank-name button:focus {
font-weight: bold;
}
main nav .bank-details .bank-name .bank-sum {
color: #AFB0B3;
}
main nav .bank-details > li {
border-left: 4px solid grey;
color: #494F59;
}
main nav .bank-details > li.active {
border-color: #D0E9C6;
}
main nav .bank-details a {
color: #FFFFFF;
}
main nav .bank-details .amount.positive {
color: #00A651;
}
main nav .bank-details .amount.negative {
color: #F26C4F;
}
main nav .bank-details > li > .accounts > li > a:hover,
main nav .bank-details > li > .accounts > li > a:focus {
border-left: 4px solid #82D8AC;
background-color: rgba(255, 255, 255, 0.25);
color: #FFFFFF;
}
main nav .bank-details > li > .accounts > li a.active {
border-left: 4px solid #00A651;
color: #FFFFFF;
}
main nav .bank-details > li > .accounts > li a {
color: #AFB0B3;
border-left: 4px solid transparent;
}
/* Sidebar list of sections (operations, settings, etc.) */
main nav .sidebar-section-list li span.badge {
background-color: white;
color: #2B303A;
}
.sidebar-section-list li {
border-bottom: 2px solid #343A45;
background: #303641;
}
.sidebar-section-list li > a {
color: #AFB0B3;
}
.sidebar-section-list li > a:hover,
.sidebar-section-list li > a:focus {
background-color: rgba(255, 255, 255, 0.25);
color: #FFFFFF;
}
.sidebar-section-list li > a.active {
background: #2B303A;
color: #FFFFFF;
}
/* Operations list component */
.operation-toolbar {
border: none;
}
.operation-toolbar ul {
background-color: transparent;
}
.operation-toolbar > form {
border: none;
}
/* Main panel, with form and operations */
.operation-table caption {
color: #777777;
}
.operation-table > tbody > tr {
border-right-color: #EAEAEA;
}
.operation-table td.amount {
font-weight: bold;
}
.operation-table > tbody > tr.income td.amount {
color: #00A651;
}
.operation-table td.modale-button > button {
color: #337AB7;
}
@import '~../light/fonts.css';
@import '~../light/icons.css';
@import '~../light/forms.css';
@import '~../light/loading.css';
@import '~../light/error-reporter.css';
@import '~../light/header.css';
@import '~../light/settings-menu.css';
@import '~../light/menu/about.css';
@import '~../light/modals.css';
@import '~../light/sections/onboarding.css';
@import '~../light/sections/categories.css';
@import '~../light/sections/duplicates.css';
@import '~../light/sections/about.css';
@import '~../light/sections/reports/account-summary.css';
@import '~../light/sections/reports/search-summary.css';
@import '~./menu/banks.css';
@import '~./menu/sections.css';
@import '~./sections/reports/reports.css';
body {
color: #717171;
background: #3D424C;
}
a,
a:hover,
a:focus {
color: #337AB7;
text-decoration: none;
outline: 0;
}
#content {
background: #FFFFFF;
}
main nav {
background-color: #2B303A;
color: white;
}
.account-summary {
color: white;
background-color: var(--wells-balance-color);
border-radius: 3px;
border: none;
padding-left: 1em;
box-shadow: none;
}
.account-summary .icon {
position: static;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
width: 2em;
display: inline-block;
height: 2em;
line-height: 2em;
margin-right: 1em;
}
@media (max-width: 768px) {
.account-summary {
display: block;
padding: 0.5em;
}
.account-summary .icon {
margin-top: 10px;
}
}
.search-summary li.received,
.search-summary li.spent,
.search-summary li.saved {
border: none;
color: white;
}
.search-summary li.received {
background-color: var(--wells-received-color);
}
.search-summary li.spent {
background-color: var(--wells-spent-color);
}
.search-summary li.saved {
background-color: var(--wells-saved-color);
}
......@@ -22,12 +22,12 @@ DefaultSettings.set('duplicate-threshold', '24');
DefaultSettings.set('email-recipient', '');
DefaultSettings.set('locale', 'en');
DefaultSettings.set('migration-version', '0');
DefaultSettings.set('theme', 'default');
DefaultSettings.set('weboob-auto-merge-accounts', 'true');
DefaultSettings.set('weboob-auto-update', 'true');
DefaultSettings.set('weboob-enable-debug', 'false');
DefaultSettings.set('weboob-fetch-threshold', '1');
DefaultSettings.set('demo-mode', 'false');
DefaultSettings.set('discovery-mode', 'true');
DefaultSettings.set('dark-mode', 'false');
export default DefaultSettings;
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