Mailspring/internal_packages/theme-picker/lib/theme-picker.jsx

98 lines
3.1 KiB
React
Raw Normal View History

import React from 'react';
import Actions from '../../../src/flux/actions'
import {Flexbox, RetinaImg} from 'nylas-component-kit';
import ThemeOption from './theme-option';
class ThemePicker extends React.Component {
static displayName = 'ThemePicker';
constructor(props) {
super(props);
this.themes = NylasEnv.themes;
this.state = this._getState();
}
componentDidMount() {
this.disposable = this.themes.onDidChangeActiveThemes(() => {
this.setState(this._getState());
});
}
componentWillUnmount() {
this.disposable.dispose();
}
_getState() {
return {
themes: this.themes.getLoadedThemes(),
activeTheme: this.themes.getActiveTheme().name,
}
}
_setActiveTheme(theme) {
const prevActiveTheme = this.state.activeTheme;
this.themes.setActiveTheme(theme);
this._rewriteIFrame(prevActiveTheme, theme);
}
_rewriteIFrame(prevActiveTheme, activeTheme) {
const prevActiveThemeDoc = document.querySelector(`.theme-preview-${prevActiveTheme}`).contentDocument;
const prevActiveElement = prevActiveThemeDoc.querySelector(".theme-option.active-true");
prevActiveElement.className = "theme-option active-false";
const activeThemeDoc = document.querySelector(`.theme-preview-${activeTheme}`).contentDocument;
const activeElement = activeThemeDoc.querySelector(".theme-option.active-false");
activeElement.className = "theme-option active-true";
}
_renderThemeOptions() {
const internalThemes = ['ui-ubuntu', 'ui-taiga', 'ui-darkside', 'ui-dark', 'ui-light'];
const sortedThemes = [].concat(this.state.themes);
sortedThemes.sort((a, b) => {
return (internalThemes.indexOf(a.name) - internalThemes.indexOf(b.name)) * -1;
});
return sortedThemes.map((theme) =>
<ThemeOption
key={theme.name}
theme={theme}
active={this.state.activeTheme === theme.name}
onSelect={() => this._setActiveTheme(theme.name)} />
);
}
render() {
return (
<div className="theme-picker" tabIndex="1">
<Flexbox direction="column">
<RetinaImg
className="theme-picker-x"
style={{width: "14", height: "14", WebkitFilter: "none"}}
name="picker-close.png"
mode={RetinaImg.Mode.ContentDark}
onMouseDown={() => Actions.closeModal()} />
2016-03-11 07:18:52 +08:00
<h4 style={{color: "#434648"}}>Themes</h4>
<div style={{color: "rgba(35, 31, 32, 0.5)", fontSize: "12px"}}>Click any theme to apply:</div>
<div style={{margin: "10px 5px 0 5px", height: "290px", overflow: "auto"}}>
<Flexbox
direction="row"
height="auto"
style={{alignItems: "flex-start", flexWrap: "wrap"}}>
{this._renderThemeOptions()}
</Flexbox>
</div>
2016-03-11 07:18:52 +08:00
<div className="create-theme">
<a
href="https://github.com/nylas/N1-theme-starter"
style={{color: "#3187e1"}}>
Create a Theme
</a>
2016-03-11 07:18:52 +08:00
</div>
</Flexbox>
</div>
);
}
}
export default ThemePicker;