Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
feat(App): Lay groundwork for general themeing support
- Loading branch information
|
@@ -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.