Remove theming cruft
This commit is contained in:
parent
eb9517873d
commit
d21db82247
5 changed files with 20 additions and 73 deletions
|
@ -1,17 +0,0 @@
|
|||
export const THEME_SET = 'THEME_SET';
|
||||
export const THEME_GENERATE = 'THEME_GENERATE';
|
||||
|
||||
export function generateTheme(brandColor, mode) {
|
||||
return {
|
||||
type: THEME_GENERATE,
|
||||
brandColor,
|
||||
mode,
|
||||
};
|
||||
}
|
||||
|
||||
export function setTheme(themeData) {
|
||||
return {
|
||||
type: THEME_SET,
|
||||
themeData,
|
||||
};
|
||||
}
|
|
@ -23,8 +23,7 @@ import { fetchSoapboxConfig } from 'soapbox/actions/soapbox';
|
|||
import { fetchMe } from 'soapbox/actions/me';
|
||||
import PublicLayout from 'soapbox/features/public_layout';
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import { themeDataToCss } from 'soapbox/utils/theme';
|
||||
import { generateTheme } from 'soapbox/actions/theme';
|
||||
import { generateThemeCss } from 'soapbox/utils/theme';
|
||||
|
||||
export const store = configureStore();
|
||||
const hydrateAction = hydrateStore(initialState);
|
||||
|
@ -49,9 +48,8 @@ const mapStateToProps = (state) => {
|
|||
dyslexicFont: settings.get('dyslexicFont'),
|
||||
demetricator: settings.get('demetricator'),
|
||||
locale: settings.get('locale'),
|
||||
themeCss: themeDataToCss(state.get('theme')),
|
||||
themeCss: generateThemeCss(state.getIn(['soapbox', 'brandColor'])),
|
||||
themeMode: settings.get('themeMode'),
|
||||
brandColor: state.getIn(['soapbox', 'brandColor']),
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -67,25 +65,10 @@ class SoapboxMount extends React.PureComponent {
|
|||
demetricator: PropTypes.bool,
|
||||
locale: PropTypes.string.isRequired,
|
||||
themeCss: PropTypes.string,
|
||||
brandColor: PropTypes.string,
|
||||
themeMode: PropTypes.string,
|
||||
dispatch: PropTypes.func,
|
||||
};
|
||||
|
||||
maybeUpdateTheme = prevProps => {
|
||||
const updates = [
|
||||
this.props.brandColor !== prevProps.brandColor,
|
||||
this.props.themeMode !== prevProps.themeMode,
|
||||
];
|
||||
if (updates.some(u => u)) this.props.dispatch(
|
||||
generateTheme(this.props.brandColor, this.props.themeMode)
|
||||
);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
this.maybeUpdateTheme(prevProps);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { me, themeCss, locale } = this.props;
|
||||
if (me === null) return null;
|
||||
|
|
|
@ -42,7 +42,6 @@ import soapbox from './soapbox';
|
|||
import instance from './instance';
|
||||
import me from './me';
|
||||
import auth from './auth';
|
||||
import theme from './theme';
|
||||
|
||||
const reducers = {
|
||||
dropdown_menu,
|
||||
|
@ -88,7 +87,6 @@ const reducers = {
|
|||
instance,
|
||||
me,
|
||||
auth,
|
||||
theme,
|
||||
};
|
||||
|
||||
export default combineReducers(reducers);
|
||||
|
|
|
@ -1,35 +0,0 @@
|
|||
import {
|
||||
THEME_SET,
|
||||
THEME_GENERATE,
|
||||
} from '../actions/theme';
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
|
||||
const initialState = ImmutableMap();
|
||||
|
||||
const hex2rgb = c => c.substr(1).match(/../g).map(x => + `0x${x}`);
|
||||
|
||||
export const generateTheme = (brandColor, mode = 'light') => {
|
||||
if (!brandColor) return false;
|
||||
const [ r, g, b ] = hex2rgb(brandColor);
|
||||
return ImmutableMap({
|
||||
'brand-color-r': r,
|
||||
'brand-color-g': g,
|
||||
'brand-color-b': b,
|
||||
});
|
||||
};
|
||||
|
||||
export const setTheme = themeData => {
|
||||
const { 'brand-color': brandColor } = themeData.toObject();
|
||||
return ImmutableMap(generateTheme(brandColor, 'light')).merge(themeData);
|
||||
};
|
||||
|
||||
export default function theme(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case THEME_GENERATE:
|
||||
return generateTheme(action.brandColor, action.mode);
|
||||
case THEME_SET:
|
||||
return setTheme(ImmutableMap(action.brandColor));
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
|
@ -1,3 +1,21 @@
|
|||
import { Map as ImmutableMap } from 'immutable';
|
||||
|
||||
const hex2rgb = c => c.substr(1).match(/../g).map(x => + `0x${x}`);
|
||||
|
||||
export const generateThemeCss = brandColor => {
|
||||
if (!brandColor) return null;
|
||||
return themeDataToCss(brandColorToThemeData(brandColor));
|
||||
};
|
||||
|
||||
export const brandColorToThemeData = brandColor => {
|
||||
const [ r, g, b ] = hex2rgb(brandColor);
|
||||
return ImmutableMap({
|
||||
'brand-color-r': r,
|
||||
'brand-color-g': g,
|
||||
'brand-color-b': b,
|
||||
});
|
||||
};
|
||||
|
||||
export const themeDataToCss = themeData => (
|
||||
themeData
|
||||
.entrySeq()
|
||||
|
|
Loading…
Reference in a new issue