self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-11-26 22:41:17 +02:00
Code Issues Releases Activity

All: Refactored themes to allow using the same ones in both desktop and mobile version

Browse Source 
Will also allow using them when exporting HTML or PDF from CLI.
This commit is contained in:
Laurent Cozic
2020-06-10 22:08:59 +01:00
parent d80cf6bf37
commit b7f5f848f2
71 changed files with 297 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ReactNativeClient/lib/components/base-screen.js
View File

@@ -1,27 +1,11 @@
const React = require('react');
const { StyleSheet } = require('react-native');
const { globalStyle, themeStyle } = require('lib/components/global-style.js');
const styleObject_ = {
screen: {
flex: 1,
backgroundColor: globalStyle.backgroundColor,
},
};
const styles_ = StyleSheet.create(styleObject_);
const { themeStyle } = require('lib/components/global-style.js');
const rootStyles_ = {};
class BaseScreenComponent extends React.Component {
styles() {
return styles_;
}
styleObject() {
return styleObject_;
}
rootStyle(themeId) {
const theme = themeStyle(themeId);

133
ReactNativeClient/lib/components/global-style.js
View File

@@ -1,56 +1,27 @@
const Setting = require('lib/models/Setting.js');
const { Platform } = require('react-native');
const { themeById } = require('lib/theme');
const globalStyle = {
const baseStyle = {
appearance: 'light',
fontSize: 16,
noteViewerFontSize: 16,
margin: 15, // No text and no interactive component should be within this margin
itemMarginTop: 10,
itemMarginBottom: 10,
backgroundColor: '#ffffff',
color: '#555555', // For regular text
colorError: 'red',
colorWarn: '#9A5B00',
colorFaded: '#777777', // For less important text
fontSizeSmaller: 14,
dividerColor: '#dddddd',
strongDividerColor: '#aaaaaa',
selectedColor: '#e5e5e5',
headerBackgroundColor: '#F0F0F0',
disabledOpacity: 0.2,
colorUrl: '#7B81FF',
textSelectionColor: '#0096FF',
appearance: 'light',
raisedBackgroundColor: '#0080EF',
raisedColor: '#003363',
raisedHighlightedColor: '#ffffff',
warningBackgroundColor: '#FFD08D',
// For WebView - must correspond to the properties above
htmlFontSize: '16px',
htmlColor: '#222222',
htmlBackgroundColor: 'white',
htmlDividerColor: 'rgb(230,230,230)',
htmlLinkColor: 'rgb(80,130,190)',
htmlLineHeight: '1.6em',
htmlCodeBackgroundColor: 'rgb(243, 243, 243)',
htmlCodeBorderColor: 'rgb(220, 220, 220)',
htmlCodeColor: 'rgb(0,0,0)',
codeThemeCss: 'atom-one-light.css',
lineHeight: '1.6em',
};
globalStyle.marginRight = globalStyle.margin;
globalStyle.marginLeft = globalStyle.margin;
globalStyle.marginTop = globalStyle.margin;
globalStyle.marginBottom = globalStyle.margin;
globalStyle.htmlMarginLeft = `${((globalStyle.marginLeft / 10) * 0.6).toFixed(2)}em`;
const themeCache_ = {};
function addExtraStyles(style) {
style.marginRight = style.margin;
style.marginLeft = style.margin;
style.marginTop = style.margin;
style.marginBottom = style.margin;
style.icon = {
color: style.color,
fontSize: 30,
@@ -60,7 +31,7 @@ function addExtraStyles(style) {
color: style.color,
backgroundColor: style.backgroundColor,
borderBottomWidth: 1,
borderColor: style.strongDividerColor,
borderColor: style.dividerColor,
paddingBottom: 0,
};
@@ -82,7 +53,7 @@ function addExtraStyles(style) {
};
style.urlText = {
color: style.colorUrl,
color: style.urlColor,
fontSize: style.fontSize,
};
@@ -123,80 +94,12 @@ function themeStyle(theme) {
theme = Setting.THEME_LIGHT;
}
if (themeCache_[theme]) return themeCache_[theme];
const cacheKey = [theme].join('-');
if (themeCache_[cacheKey]) return themeCache_[cacheKey];
const output = Object.assign({}, globalStyle);
if (theme == Setting.THEME_LIGHT) {
return addExtraStyles(output);
} else if (theme == Setting.THEME_OLED_DARK) {
output.backgroundColor = '#000000';
output.color = '#dddddd';
output.colorFaded = '#777777';
output.dividerColor = '#555555';
output.strongDividerColor = '#888888';
output.selectedColor = '#333333';
output.textSelectionColor = '#00AEFF';
output.appearance = 'dark';
output.headerBackgroundColor = '#2D3136';
output.raisedBackgroundColor = '#0F2051';
output.raisedColor = '#788BC3';
output.raisedHighlightedColor = '#ffffff';
output.htmlColor = 'rgb(220,220,220)';
output.htmlBackgroundColor = 'rgb(0,0,0)';
output.htmlLinkColor = 'rgb(166,166,255)';
output.htmlDividerColor = '#3D444E';
output.htmlLinkColor = 'rgb(166,166,255)';
output.htmlCodeColor = '#ffffff';
output.htmlTableBackgroundColor = 'rgb(0, 0, 0)';
output.htmlCodeBackgroundColor = 'rgb(47, 48, 49)';
output.htmlCodeBorderColor = 'rgb(70, 70, 70)';
output.codeThemeCss = 'atom-one-dark-reasonable.css';
output.colorUrl = '#7B81FF';
output.colorBright = 'rgb(220,220,220)';
themeCache_[theme] = output;
return addExtraStyles(themeCache_[theme]);
}
output.backgroundColor = '#1D2024';
output.color = '#dddddd';
output.colorFaded = '#777777';
output.dividerColor = '#555555';
output.strongDividerColor = '#888888';
output.selectedColor = '#333333';
output.textSelectionColor = '#00AEFF';
output.appearance = 'dark';
output.headerBackgroundColor = '#2D3136';
output.raisedBackgroundColor = '#0F2051';
output.raisedColor = '#788BC3';
output.raisedHighlightedColor = '#ffffff';
output.htmlColor = 'rgb(220,220,220)';
output.htmlBackgroundColor = 'rgb(29,32,36)';
output.htmlLinkColor = 'rgb(166,166,255)';
output.htmlDividerColor = '#3D444E';
output.htmlLinkColor = 'rgb(166,166,255)';
output.htmlCodeColor = '#ffffff';
output.htmlTableBackgroundColor = 'rgb(40, 41, 42)';
output.htmlCodeBackgroundColor = 'rgb(47, 48, 49)';
output.htmlCodeBorderColor = 'rgb(70, 70, 70)';
output.codeThemeCss = 'atom-one-dark-reasonable.css';
output.colorUrl = '#7B81FF';
output.colorBright = 'rgb(220,220,220)';
themeCache_[theme] = output;
return addExtraStyles(themeCache_[theme]);
const output = Object.assign({}, baseStyle, themeById(theme));
themeCache_[cacheKey] = addExtraStyles(output);
return themeCache_[cacheKey];
}
module.exports = { globalStyle, themeStyle, editorFont };
module.exports = { themeStyle, editorFont };

22
ReactNativeClient/lib/components/screen-header.js
View File

@@ -39,7 +39,7 @@ class ScreenHeaderComponent extends React.PureComponent {
const styleObject = {
container: {
flexDirection: 'column',
backgroundColor: theme.raisedBackgroundColor,
backgroundColor: theme.backgroundColor2,
alignItems: 'center',
shadowColor: '#000000',
elevation: 5,
@@ -52,7 +52,7 @@ class ScreenHeaderComponent extends React.PureComponent {
sideMenuButton: {
flex: 1,
alignItems: 'center',
backgroundColor: theme.raisedBackgroundColor,
backgroundColor: theme.backgroundColor2,
paddingLeft: theme.marginLeft,
paddingRight: 5,
marginRight: 2,
@@ -61,7 +61,7 @@ class ScreenHeaderComponent extends React.PureComponent {
},
iconButton: {
flex: 1,
backgroundColor: theme.raisedBackgroundColor,
backgroundColor: theme.backgroundColor2,
paddingLeft: 15,
paddingRight: 15,
paddingTop: PADDING_V,
@@ -73,18 +73,18 @@ class ScreenHeaderComponent extends React.PureComponent {
alignItems: 'center',
padding: 10,
borderWidth: 1,
borderColor: theme.raisedHighlightedColor,
borderColor: theme.colorBright2,
borderRadius: 4,
marginRight: 8,
},
saveButtonText: {
textAlignVertical: 'center',
color: theme.raisedHighlightedColor,
color: theme.colorBright2,
fontWeight: 'bold',
},
savedButtonIcon: {
fontSize: 20,
color: theme.raisedHighlightedColor,
color: theme.colorBright2,
width: 18,
height: 18,
},
@@ -96,11 +96,11 @@ class ScreenHeaderComponent extends React.PureComponent {
fontSize: 30,
paddingLeft: 10,
paddingRight: theme.marginRight,
color: theme.raisedColor,
color: theme.color2,
fontWeight: 'bold',
},
contextMenu: {
backgroundColor: theme.raisedBackgroundColor,
backgroundColor: theme.backgroundColor2,
},
contextMenuItem: {
backgroundColor: theme.backgroundColor,
@@ -120,7 +120,7 @@ class ScreenHeaderComponent extends React.PureComponent {
flex: 1,
textAlignVertical: 'center',
marginLeft: 10,
color: theme.raisedHighlightedColor,
color: theme.colorBright2,
fontWeight: 'bold',
fontSize: theme.fontSize,
paddingTop: 15,
@@ -136,7 +136,7 @@ class ScreenHeaderComponent extends React.PureComponent {
styleObject.topIcon = Object.assign({}, theme.icon);
styleObject.topIcon.flex = 1;
styleObject.topIcon.textAlignVertical = 'center';
styleObject.topIcon.color = theme.raisedColor;
styleObject.topIcon.color = theme.colorBright2;
styleObject.backButton = Object.assign({}, styleObject.iconButton);
styleObject.backButton.marginRight = 1;
@@ -376,7 +376,7 @@ class ScreenHeaderComponent extends React.PureComponent {
backgroundColor: theme.backgroundColor,
}}
headerStyle={{
color: theme.raisedHighlightedColor,
color: theme.colorBright2,
fontSize: theme.fontSize,
opacity: disabled ? theme.disabledOpacity : 1,
}}

4
ReactNativeClient/lib/components/screens/config.js
View File

@@ -222,7 +222,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
});
styles.settingControl.borderBottomWidth = 1;
styles.settingControl.borderBottomColor = theme.strongDividerColor;
styles.settingControl.borderBottomColor = theme.dividerColor;
styles.switchSettingText = Object.assign({}, styles.settingText);
styles.switchSettingText.width = '80%';
@@ -388,7 +388,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
<Text key="label" style={this.styles().switchSettingText}>
{md.label()}
</Text>
<Switch key="control" style={this.styles().switchSettingControl} trackColor={{ false: theme.strongDividerColor }} value={value} onValueChange={value => updateSettingValue(key, value)} />
<Switch key="control" style={this.styles().switchSettingControl} trackColor={{ false: theme.dividerColor }} value={value} onValueChange={value => updateSettingValue(key, value)} />
</View>
{descriptionComp}
</View>

2
ReactNativeClient/lib/components/screens/encryption-config.js
View File

@@ -112,7 +112,7 @@ class EncryptionConfigScreenComponent extends BaseScreenComponent {
const inputStyle = { flex: 1, marginRight: 10, color: theme.color };
inputStyle.borderBottomWidth = 1;
inputStyle.borderBottomColor = theme.strongDividerColor;
inputStyle.borderBottomColor = theme.dividerColor;
return (
<View key={mk.id}>

2
ReactNativeClient/lib/components/screens/folder.js
View File

@@ -107,7 +107,7 @@ class FolderScreenComponent extends BaseScreenComponent {
return (
<View style={this.rootStyle(this.props.theme).root}>
<ScreenHeader title={_('Edit notebook')} showSaveButton={true} saveButtonDisabled={saveButtonDisabled} onSaveButtonPress={() => this.saveFolderButton_press()} showSideMenuButton={false} showSearchButton={false} />
<TextInput placeholder={_('Enter notebook title')} placeholderTextColor={theme.colorFaded} underlineColorAndroid={theme.strongDividerColor} selectionColor={theme.textSelectionColor} keyboardAppearance={theme.keyboardAppearance} style={this.styles().textInput} autoFocus={true} value={this.state.folder.title} onChangeText={text => this.title_changeText(text)} />
<TextInput placeholder={_('Enter notebook title')} placeholderTextColor={theme.colorFaded} underlineColorAndroid={theme.dividerColor} selectionColor={theme.textSelectionColor} keyboardAppearance={theme.keyboardAppearance} style={this.styles().textInput} autoFocus={true} value={this.state.folder.title} onChangeText={text => this.title_changeText(text)} />
<dialogs.DialogBox
ref={dialogbox => {
this.dialogbox = dialogbox;

2
ReactNativeClient/lib/components/screens/note.js
View File

@@ -269,7 +269,7 @@ class NoteScreenComponent extends BaseScreenComponent {
},
markdownButtons: {
borderColor: theme.dividerColor,
color: theme.htmlLinkColor,
color: theme.urlColor,
},
};

23
ReactNativeClient/lib/components/screens/status.js
View File

@@ -1,20 +1,13 @@
const React = require('react');
const { StyleSheet, View, Text, Button, FlatList } = require('react-native');
const { View, Text, Button, FlatList } = require('react-native');
const Setting = require('lib/models/Setting.js');
const { connect } = require('react-redux');
const { ScreenHeader } = require('lib/components/screen-header.js');
const { ReportService } = require('lib/services/report.js');
const { _ } = require('lib/locale.js');
const { BaseScreenComponent } = require('lib/components/base-screen.js');
const { globalStyle, themeStyle } = require('lib/components/global-style.js');
const styles = StyleSheet.create({
body: {
flex: 1,
margin: globalStyle.margin,
},
});
const { themeStyle } = require('lib/components/global-style.js');
class StatusScreenComponent extends BaseScreenComponent {
static navigationOptions() {
@@ -38,6 +31,16 @@ class StatusScreenComponent extends BaseScreenComponent {
this.setState({ report: report });
}
styles() {
const theme = themeStyle(this.props.theme);
return {
body: {
flex: 1,
margin: theme.margin,
},
};
}
render() {
const theme = themeStyle(this.props.theme);
@@ -137,7 +140,7 @@ class StatusScreenComponent extends BaseScreenComponent {
return (
<View style={this.rootStyle(this.props.theme).root}>
<ScreenHeader title={_('Status')} />
<View style={styles.body}>{body}</View>
<View style={this.styles().body}>{body}</View>
<Button title={_('Refresh')} onPress={() => this.resfreshScreen()} />
</View>
);

7
ReactNativeClient/lib/components/side-menu-content-note.js
View File

@@ -3,7 +3,7 @@ const Component = React.Component;
const { TouchableOpacity, Text, StyleSheet, ScrollView, View } = require('react-native');
const { connect } = require('react-redux');
const Icon = require('react-native-vector-icons/Ionicons').default;
const { globalStyle, themeStyle } = require('lib/components/global-style.js');
const { themeStyle } = require('lib/components/global-style.js');
Icon.loadFont();
@@ -50,7 +50,8 @@ class SideMenuContentNoteComponent extends Component {
}
renderDivider(key) {
return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: globalStyle.dividerColor }} key={key}></View>;
const theme = themeStyle(this.props.theme);
return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: theme.dividerColor }} key={key}></View>;
}
renderSideBarButton(key, title, iconName, onPressHandler) {
@@ -89,7 +90,7 @@ class SideMenuContentNoteComponent extends Component {
const style = {
flex: 1,
borderRightWidth: 1,
borderRightColor: globalStyle.dividerColor,
borderRightColor: theme.dividerColor,
backgroundColor: theme.backgroundColor,
paddingTop: 10,
};

9
ReactNativeClient/lib/components/side-menu-content.js
View File

@@ -7,7 +7,7 @@ const Folder = require('lib/models/Folder.js');
const { Synchronizer } = require('lib/synchronizer.js');
const NavService = require('lib/services/NavService.js');
const { _ } = require('lib/locale.js');
const { globalStyle, themeStyle } = require('lib/components/global-style.js');
const { themeStyle } = require('lib/components/global-style.js');
const shared = require('lib/components/shared/side-menu-shared.js');
Icon.loadFont();
@@ -298,7 +298,8 @@ class SideMenuContentComponent extends Component {
}
makeDivider(key) {
return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: globalStyle.dividerColor }} key={key}></View>;
const theme = themeStyle(this.props.theme);
return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: theme.dividerColor }} key={key}></View>;
}
renderBottomPanel() {
@@ -354,7 +355,7 @@ class SideMenuContentComponent extends Component {
// HACK: inner height of ScrollView doesn't appear to be calculated correctly when
// using padding. So instead creating blank elements for padding bottom and top.
items.push(<View style={{ height: globalStyle.marginTop }} key="bottom_top_hack" />);
items.push(<View style={{ height: theme.marginTop }} key="bottom_top_hack" />);
items.push(this.renderSideBarButton('all_notes', _('All notes'), 'md-document', this.allNotesButton_press, this.props.notesParentType === 'SmartFilter'));
@@ -371,7 +372,7 @@ class SideMenuContentComponent extends Component {
const style = {
flex: 1,
borderRightWidth: 1,
borderRightColor: globalStyle.dividerColor,
borderRightColor: theme.dividerColor,
backgroundColor: theme.backgroundColor,
};