mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-14 21:57:55 +08:00
ba0312501a
Summary: Adds a new visual theme picker to the menu that allows users to select different themes based on color palettes and then change their themes live. Test Plan: Test included. Reviewers: evan, bengotow Reviewed By: evan, bengotow Differential Revision: https://phab.nylas.com/D2669
102 lines
3.5 KiB
JavaScript
102 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import fs from 'fs-plus';
|
|
import path from 'path';
|
|
|
|
import {EventedIFrame} from 'nylas-component-kit';
|
|
import LessCompileCache from '../../../src/less-compile-cache'
|
|
|
|
|
|
class ThemeOption extends React.Component {
|
|
static propTypes = {
|
|
theme: React.PropTypes.object.isRequired,
|
|
active: React.PropTypes.bool.isRequired,
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.lessCache = null;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this._writeContent();
|
|
}
|
|
|
|
_getImportPaths() {
|
|
const themes = [this.props.theme];
|
|
// Pulls the theme package for Light as the base theme
|
|
for (const theme of NylasEnv.themes.getActiveThemes()) {
|
|
if (theme.name === NylasEnv.themes.baseThemeName()) {
|
|
themes.push(theme);
|
|
}
|
|
}
|
|
const themePaths = [];
|
|
for (const theme of themes) {
|
|
themePaths.push(theme.getStylesheetsPath());
|
|
}
|
|
return themePaths.filter((themePath) => fs.isDirectorySync(themePath));
|
|
}
|
|
|
|
_loadStylesheet(stylesheetPath) {
|
|
if (path.extname(stylesheetPath) === '.less') {
|
|
return this._loadLessStylesheet(stylesheetPath);
|
|
}
|
|
return fs.readFileSync(stylesheetPath, 'utf8');
|
|
}
|
|
|
|
_loadLessStylesheet(lessStylesheetPath) {
|
|
const {configDirPath, resourcePath} = NylasEnv.getLoadSettings();
|
|
if (this.lessCache) {
|
|
this.lessCache.setImportPaths(this._getImportPaths());
|
|
} else {
|
|
const importPaths = this._getImportPaths();
|
|
this.lessCache = new LessCompileCache({configDirPath, resourcePath, importPaths});
|
|
}
|
|
const themeVarPath = path.relative(`${resourcePath}/internal_packages/theme-picker/preview-styles`,
|
|
this.props.theme.getStylesheetsPath());
|
|
let varImports = `@import "../../../static/variables/ui-variables";`
|
|
if (fs.existsSync(`${this.props.theme.getStylesheetsPath()}/ui-variables.less`)) {
|
|
varImports += `@import "${themeVarPath}/ui-variables";`
|
|
}
|
|
if (fs.existsSync(`${this.props.theme.getStylesheetsPath()}/theme-colors.less`)) {
|
|
varImports += `@import "${themeVarPath}/theme-colors";`
|
|
}
|
|
const less = fs.readFileSync(lessStylesheetPath, 'utf8');
|
|
return this.lessCache.cssForFile(lessStylesheetPath, [varImports, less].join('\n'));
|
|
}
|
|
|
|
_writeContent() {
|
|
const domNode = React.findDOMNode(this);
|
|
const doc = domNode.contentDocument;
|
|
if (!doc) return;
|
|
|
|
const {resourcePath} = NylasEnv.getLoadSettings();
|
|
|
|
const html = `<!DOCTYPE html>
|
|
<style>${this._loadStylesheet(`${resourcePath}/internal_packages/theme-picker/preview-styles/theme-option.less`)}</style>
|
|
<body>
|
|
<div class="theme-option active-${this.props.active}">
|
|
<div class="theme-name ">${this.props.theme.displayName}</div>
|
|
<div class="swatches" style="display:flex;flex-direction:row;">
|
|
<div class="swatch font-color"></div>
|
|
<div class="swatch active-color"></div>
|
|
<div class="swatch toolbar-color"></div>
|
|
</div>
|
|
<div class="divider-black"></div>
|
|
<div class="divider-white"></div>
|
|
<div class="strip"></div>
|
|
</div>
|
|
</body>`
|
|
|
|
doc.open();
|
|
doc.write(html);
|
|
doc.close();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<EventedIFrame ref="iframe" className={`theme-preview-${this.props.theme.name}`} frameBorder="0" width="105px" height="65px" flex="1" style={{pointerEvents: "none"}} />
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ThemeOption;
|