generateTheme function, refactor

stable/1.0.x
Alex Gleason 2020-05-31 00:21:41 -05:00
rodzic d5632851fe
commit 2c0ee3f29d
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
4 zmienionych plików z 28 dodań i 17 usunięć

Wyświetl plik

@ -1,8 +1,17 @@
export const SET_THEME = 'SET_THEME'; 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) { export function setTheme(themeData) {
return { return {
type: SET_THEME, type: THEME_SET,
themeData, themeData,
}; };
} }

Wyświetl plik

@ -24,8 +24,7 @@ import { fetchMe } from 'soapbox/actions/me';
import PublicLayout from 'soapbox/features/public_layout'; import PublicLayout from 'soapbox/features/public_layout';
import { getSettings } from 'soapbox/actions/settings'; import { getSettings } from 'soapbox/actions/settings';
import { themeDataToCss } from 'soapbox/utils/theme'; import { themeDataToCss } from 'soapbox/utils/theme';
import { setTheme } from 'soapbox/actions/theme'; import { generateTheme } from 'soapbox/actions/theme';
import { Map as ImmutableMap } from 'immutable';
export const store = configureStore(); export const store = configureStore();
const hydrateAction = hydrateStore(initialState); const hydrateAction = hydrateStore(initialState);
@ -77,10 +76,7 @@ class SoapboxMount extends React.PureComponent {
}; };
componentDidMount() { componentDidMount() {
this.props.dispatch(setTheme(ImmutableMap({ this.props.dispatch(generateTheme('#1ca82b', 'light'));
// 'brand-color': '#0482d8',
'brand-color': '#1ca82b',
})));
} }
render() { render() {

Wyświetl plik

@ -1,5 +1,6 @@
import { import {
SET_THEME, THEME_SET,
THEME_GENERATE,
} from '../actions/theme'; } from '../actions/theme';
import { Map as ImmutableMap } from 'immutable'; import { Map as ImmutableMap } from 'immutable';
import { brightness, hue, convert } from 'chromatism'; import { brightness, hue, convert } from 'chromatism';
@ -11,19 +12,26 @@ const cssrgba = (color, a) => {
return `rgba(${[r, g, b, a].join(',')})`; return `rgba(${[r, g, b, a].join(',')})`;
}; };
const populate = themeData => { export const generateTheme = (brandColor, mode) => {
const { 'brand-color': brandColor } = themeData.toObject();
return ImmutableMap({ return ImmutableMap({
'brand-color': brandColor,
'accent-color': brightness(10, hue(-3, brandColor).hex).hex, 'accent-color': brightness(10, hue(-3, brandColor).hex).hex,
'brand-color-faint': cssrgba(brandColor, 0.1), 'brand-color-faint': cssrgba(brandColor, 0.1),
'highlight-text-color': brandColor, 'highlight-text-color': brandColor,
}).merge(themeData); });
};
export const setTheme = themeData => {
const { 'brand-color': brandColor } = themeData.toObject();
return ImmutableMap(generateTheme(brandColor, 'light')).merge(themeData);
}; };
export default function theme(state = initialState, action) { export default function theme(state = initialState, action) {
switch(action.type) { switch(action.type) {
case SET_THEME: case THEME_GENERATE:
return populate(ImmutableMap(action.themeData)); return generateTheme(action.brandColor, action.mode);
case THEME_SET:
return setTheme(ImmutableMap(action.brandColor));
default: default:
return state; return state;
} }

Wyświetl plik

@ -1,9 +1,7 @@
$nav-ui-background-color: var(--brand-color) !default;
.tabs-bar { .tabs-bar {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
background: $nav-ui-background-color; background: var(--brand-color);
flex: 0 0 auto; flex: 0 0 auto;
overflow-y: auto; overflow-y: auto;
height: 50px; height: 50px;