Permalink
Browse files

feat(App): Lay groundwork for general themeing support

  • Loading branch information...
adlk committed Nov 24, 2018
1 parent 0440c74 commit 4ea044ae6b2e27e48d45bc3be1c366f4882bbda5
@@ -7,11 +7,20 @@ import { exec } from 'child_process';
import dotenv from 'dotenv';
import sassVariables from 'gulp-sass-variables';
import { removeSync } from 'fs-extra';
import kebabCase from 'kebab-case';
import hexRgb from 'hex-rgb';
import config from './package.json';
import * as rawStyleConfig from './src/theme/default/legacy.js';
dotenv.config();
const styleConfig = Object.keys(rawStyleConfig).map((key) => {
const isHex = /^#[0-9A-F]{6}$/i.test(rawStyleConfig[key]);
return ({ [`$raw_${kebabCase(key)}`]: isHex ? hexRgb(rawStyleConfig[key], { format: 'array' }).splice(0, 3).join(',') : rawStyleConfig[key] });
});
const paths = {
src: 'src',
dest: 'build',
@@ -83,9 +92,9 @@ export function html() {
export function styles() {
return gulp.src(paths.styles.src)
.pipe(sassVariables({
.pipe(sassVariables(Object.assign({
$env: process.env.NODE_ENV === 'development' ? 'development' : 'production',
}))
}, ...styleConfig)))
.pipe(sass({
includePaths: [
'./node_modules',

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -11,7 +11,7 @@
"private": true,
"scripts": {
"prestart": "npm run rebuild",
"start": "DEBUG=Franz:* electron ./build",
"start": "electron ./build",
"start:local": "cross-env LOCAL_API=1 npm start",
"start:live": "cross-env LIVE_API=1 npm start",
"dev": "cross-env NODE_ENV=development gulp dev",
@@ -67,6 +67,7 @@
"react-dropzone": "^4.2.1",
"react-electron-web-view": "^2.0.1",
"react-intl": "^2.3.0",
"react-jss": "8.6.1",
"react-loader": "^2.4.0",
"react-router": "^3.0.2",
"react-router-transition": "^0.1.1",
@@ -108,7 +109,9 @@
"gulp-sass": "^4.0.2",
"gulp-sass-variables": "^1.1.1",
"gulp-server-livereload": "^1.9.2",
"hex-rgb": "3.0.0",
"husky": "^1.1.4",
"kebab-case": "1.0.0",
"node-sass": "^4.7.2",
"prettier": "1.15.2"
},
@@ -32,8 +32,7 @@ const messages = defineMessages({
},
});
@inject('stores') @observer
export default class SettingsNavigation extends Component {
export default @inject('stores') @observer class SettingsNavigation extends Component {
static propTypes = {
serviceCount: PropTypes.number.isRequired,
};
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
import { ThemeProvider } from 'react-jss';
import AppStore from '../../stores/AppStore';
import RecipesStore from '../../stores/RecipesStore';
@@ -109,26 +110,28 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
);
return (
<AppLayout
isFullScreen={app.isFullScreen}
isOnline={app.isOnline}
showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
appUpdateIsDownloaded={app.updateStatus === app.updateStatusTypes.DOWNLOADED}
sidebar={sidebar}
services={servicesContainer}
news={news.latest}
removeNewsItem={hide}
reloadServicesAfterUpdate={reloadUpdatedServices}
installAppUpdate={installUpdate}
globalError={globalError.error}
showRequiredRequestsError={requests.showRequiredRequestsError}
areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
retryRequiredRequests={retryRequiredRequests}
areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
darkMode={settings.all.app.darkMode}
>
{React.Children.count(children) > 0 ? children : null}
</AppLayout>
<ThemeProvider theme={ui.theme}>
<AppLayout
isFullScreen={app.isFullScreen}
isOnline={app.isOnline}
showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
appUpdateIsDownloaded={app.updateStatus === app.updateStatusTypes.DOWNLOADED}
sidebar={sidebar}
services={servicesContainer}
news={news.latest}
removeNewsItem={hide}
reloadServicesAfterUpdate={reloadUpdatedServices}
installAppUpdate={installUpdate}
globalError={globalError.error}
showRequiredRequestsError={requests.showRequiredRequestsError}
areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
retryRequiredRequests={retryRequiredRequests}
areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
darkMode={settings.all.app.darkMode}
>
{React.Children.count(children) > 0 ? children : null}
</AppLayout>
</ThemeProvider>
);
}
}
@@ -1,6 +1,8 @@
import { action, observable, computed } from 'mobx';
import Store from './lib/Store';
import * as themeDefault from '../theme/default';
import * as themeDark from '../theme/dark';
export default class UIStore extends Store {
@observable showServicesUpdatedInfoBar = false;
@@ -20,6 +22,14 @@ export default class UIStore extends Store {
return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.isAppMuted;
}
@computed get theme() {
if (this.stores.settings.all.app.darkMode) {
return Object.assign({}, themeDefault, themeDark);
}
return themeDefault;
}
// Actions
@action _openSettings({ path = '/settings' }) {
const settingsPath = path !== '/settings' ? `/settings/${path}` : path;
Oops, something went wrong.

0 comments on commit 4ea044a

Please sign in to comment.