You've already forked joplin
mirror of
https://github.com/laurent22/joplin.git
synced 2025-06-15 23:00:36 +02:00
Support for dark/light theme
This commit is contained in:
Laurent Cozic
@ -9,7 +9,7 @@ import { Setting } from 'lib/models/setting.js';
|
||||
import { FileApi } from 'lib/file-api.js';
|
||||
import { FileApiDriverOneDrive } from 'lib/file-api-driver-onedrive.js';
|
||||
import { reg } from 'lib/registry.js'
|
||||
import { globalStyle } from 'lib/components/global-style.js';
|
||||
import { themeStyle } from 'lib/components/global-style.js';
|
||||
|
||||
// Rather than applying a padding to the whole bar, it is applied to each
|
||||
// individual component (button, picker, etc.) so that the touchable areas
|
||||
@ -17,114 +17,128 @@ import { globalStyle } from 'lib/components/global-style.js';
|
||||
// default height.
|
||||
const PADDING_V = 10;
|
||||
|
||||
let styleObject = {
|
||||
container: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: globalStyle.raisedBackgroundColor,
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000000',
|
||||
elevation: 5,
|
||||
},
|
||||
folderPicker: {
|
||||
flex:1,
|
||||
color: globalStyle.raisedHighlightedColor,
|
||||
// Note: cannot set backgroundStyle as that would remove the arrow in the component
|
||||
},
|
||||
divider: {
|
||||
borderBottomWidth: 1,
|
||||
borderColor: globalStyle.dividerColor,
|
||||
backgroundColor: "#0000ff"
|
||||
},
|
||||
sideMenuButton: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
backgroundColor: globalStyle.raisedBackgroundColor,
|
||||
paddingLeft: globalStyle.marginLeft,
|
||||
paddingRight: 5,
|
||||
marginRight: 2,
|
||||
paddingTop: PADDING_V,
|
||||
paddingBottom: PADDING_V,
|
||||
},
|
||||
iconButton: {
|
||||
flex: 1,
|
||||
backgroundColor: globalStyle.raisedBackgroundColor,
|
||||
paddingLeft: 15,
|
||||
paddingRight: 15,
|
||||
paddingTop: PADDING_V,
|
||||
paddingBottom: PADDING_V,
|
||||
},
|
||||
saveButton: {
|
||||
flex: 0,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: globalStyle.raisedHighlightedColor,
|
||||
borderRadius: 4,
|
||||
marginRight: 8,
|
||||
},
|
||||
saveButtonText: {
|
||||
textAlignVertical: 'center',
|
||||
color: globalStyle.raisedHighlightedColor,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
savedButtonIcon: {
|
||||
fontSize: 20,
|
||||
color: globalStyle.raisedHighlightedColor,
|
||||
width: 18,
|
||||
height: 18,
|
||||
},
|
||||
saveButtonIcon: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
},
|
||||
contextMenuTrigger: {
|
||||
fontSize: 25,
|
||||
paddingRight: globalStyle.marginRight,
|
||||
color: globalStyle.raisedColor,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
contextMenu: {
|
||||
backgroundColor: globalStyle.raisedBackgroundColor,
|
||||
},
|
||||
contextMenuItem: {
|
||||
backgroundColor: globalStyle.backgroundColor,
|
||||
},
|
||||
contextMenuItemText: {
|
||||
flex: 1,
|
||||
textAlignVertical: 'center',
|
||||
paddingLeft: globalStyle.marginLeft,
|
||||
paddingRight: globalStyle.marginRight,
|
||||
paddingTop: globalStyle.itemMarginTop,
|
||||
paddingBottom: globalStyle.itemMarginBottom,
|
||||
color: globalStyle.color,
|
||||
backgroundColor: globalStyle.backgroundColor,
|
||||
fontSize: globalStyle.fontSize,
|
||||
},
|
||||
titleText: {
|
||||
flex: 1,
|
||||
marginLeft: 0,
|
||||
color: globalStyle.raisedHighlightedColor,
|
||||
fontWeight: 'bold',
|
||||
fontSize: globalStyle.fontSize,
|
||||
}
|
||||
};
|
||||
|
||||
styleObject.topIcon = Object.assign({}, globalStyle.icon);
|
||||
styleObject.topIcon.flex = 1;
|
||||
styleObject.topIcon.textAlignVertical = 'center';
|
||||
styleObject.topIcon.color = globalStyle.raisedColor;
|
||||
|
||||
styleObject.backButton = Object.assign({}, styleObject.iconButton);
|
||||
styleObject.backButton.marginRight = 1;
|
||||
|
||||
styleObject.backButtonDisabled = Object.assign({}, styleObject.backButton, { opacity: globalStyle.disabledOpacity });
|
||||
styleObject.saveButtonDisabled = Object.assign({}, styleObject.saveButton, { opacity: globalStyle.disabledOpacity });
|
||||
|
||||
const styles = StyleSheet.create(styleObject);
|
||||
|
||||
class ScreenHeaderComponent extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.styles_ = {};
|
||||
}
|
||||
|
||||
styles() {
|
||||
const themeId = Setting.value('theme');
|
||||
if (this.styles_[themeId]) return this.styles_[themeId];
|
||||
this.styles_ = {};
|
||||
|
||||
const theme = themeStyle(themeId);
|
||||
|
||||
let styleObject = {
|
||||
container: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: theme.raisedBackgroundColor,
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000000',
|
||||
elevation: 5,
|
||||
},
|
||||
folderPicker: {
|
||||
flex:1,
|
||||
color: theme.raisedHighlightedColor,
|
||||
// Note: cannot set backgroundStyle as that would remove the arrow in the component
|
||||
},
|
||||
divider: {
|
||||
borderBottomWidth: 1,
|
||||
borderColor: theme.dividerColor,
|
||||
backgroundColor: "#0000ff"
|
||||
},
|
||||
sideMenuButton: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
backgroundColor: theme.raisedBackgroundColor,
|
||||
paddingLeft: theme.marginLeft,
|
||||
paddingRight: 5,
|
||||
marginRight: 2,
|
||||
paddingTop: PADDING_V,
|
||||
paddingBottom: PADDING_V,
|
||||
},
|
||||
iconButton: {
|
||||
flex: 1,
|
||||
backgroundColor: theme.raisedBackgroundColor,
|
||||
paddingLeft: 15,
|
||||
paddingRight: 15,
|
||||
paddingTop: PADDING_V,
|
||||
paddingBottom: PADDING_V,
|
||||
},
|
||||
saveButton: {
|
||||
flex: 0,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.raisedHighlightedColor,
|
||||
borderRadius: 4,
|
||||
marginRight: 8,
|
||||
},
|
||||
saveButtonText: {
|
||||
textAlignVertical: 'center',
|
||||
color: theme.raisedHighlightedColor,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
savedButtonIcon: {
|
||||
fontSize: 20,
|
||||
color: theme.raisedHighlightedColor,
|
||||
width: 18,
|
||||
height: 18,
|
||||
},
|
||||
saveButtonIcon: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
},
|
||||
contextMenuTrigger: {
|
||||
fontSize: 25,
|
||||
paddingRight: theme.marginRight,
|
||||
color: theme.raisedColor,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
contextMenu: {
|
||||
backgroundColor: theme.raisedBackgroundColor,
|
||||
},
|
||||
contextMenuItem: {
|
||||
backgroundColor: theme.backgroundColor,
|
||||
},
|
||||
contextMenuItemText: {
|
||||
flex: 1,
|
||||
textAlignVertical: 'center',
|
||||
paddingLeft: theme.marginLeft,
|
||||
paddingRight: theme.marginRight,
|
||||
paddingTop: theme.itemMarginTop,
|
||||
paddingBottom: theme.itemMarginBottom,
|
||||
color: theme.color,
|
||||
backgroundColor: theme.backgroundColor,
|
||||
fontSize: theme.fontSize,
|
||||
},
|
||||
titleText: {
|
||||
flex: 1,
|
||||
marginLeft: 0,
|
||||
color: theme.raisedHighlightedColor,
|
||||
fontWeight: 'bold',
|
||||
fontSize: theme.fontSize,
|
||||
}
|
||||
};
|
||||
|
||||
styleObject.topIcon = Object.assign({}, theme.icon);
|
||||
styleObject.topIcon.flex = 1;
|
||||
styleObject.topIcon.textAlignVertical = 'center';
|
||||
styleObject.topIcon.color = theme.raisedColor;
|
||||
|
||||
styleObject.backButton = Object.assign({}, styleObject.iconButton);
|
||||
styleObject.backButton.marginRight = 1;
|
||||
|
||||
styleObject.backButtonDisabled = Object.assign({}, styleObject.backButton, { opacity: theme.disabledOpacity });
|
||||
styleObject.saveButtonDisabled = Object.assign({}, styleObject.saveButton, { opacity: theme.disabledOpacity });
|
||||
|
||||
this.styles_[themeId] = StyleSheet.create(styleObject);
|
||||
return this.styles_[themeId];
|
||||
}
|
||||
|
||||
sideMenuButton_press() {
|
||||
this.props.dispatch({ type: 'SIDE_MENU_TOGGLE' });
|
||||
}
|
||||
@ -173,7 +187,7 @@ class ScreenHeaderComponent extends Component {
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress}>
|
||||
<View style={styles.sideMenuButton}>
|
||||
<Icon name='md-menu' style={styleObject.topIcon} />
|
||||
<Icon name='md-menu' style={styles.topIcon} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
@ -218,32 +232,32 @@ class ScreenHeaderComponent extends Component {
|
||||
for (let i = 0; i < this.props.menuOptions.length; i++) {
|
||||
let o = this.props.menuOptions[i];
|
||||
menuOptionComponents.push(
|
||||
<MenuOption value={o.onPress} key={'menuOption_' + key++} style={styles.contextMenuItem}>
|
||||
<Text style={styles.contextMenuItemText}>{o.title}</Text>
|
||||
<MenuOption value={o.onPress} key={'menuOption_' + key++} style={this.styles().contextMenuItem}>
|
||||
<Text style={this.styles().contextMenuItemText}>{o.title}</Text>
|
||||
</MenuOption>);
|
||||
}
|
||||
|
||||
if (menuOptionComponents.length) {
|
||||
menuOptionComponents.push(<View key={'menuOption_' + key++} style={styles.divider}/>);
|
||||
menuOptionComponents.push(<View key={'menuOption_' + key++} style={this.styles().divider}/>);
|
||||
}
|
||||
|
||||
menuOptionComponents.push(
|
||||
<MenuOption value={() => this.log_press()} key={'menuOption_' + key++} style={styles.contextMenuItem}>
|
||||
<Text style={styles.contextMenuItemText}>{_('Log')}</Text>
|
||||
<MenuOption value={() => this.log_press()} key={'menuOption_' + key++} style={this.styles().contextMenuItem}>
|
||||
<Text style={this.styles().contextMenuItemText}>{_('Log')}</Text>
|
||||
</MenuOption>);
|
||||
|
||||
menuOptionComponents.push(
|
||||
<MenuOption value={() => this.status_press()} key={'menuOption_' + key++} style={styles.contextMenuItem}>
|
||||
<Text style={styles.contextMenuItemText}>{_('Status')}</Text>
|
||||
<MenuOption value={() => this.status_press()} key={'menuOption_' + key++} style={this.styles().contextMenuItem}>
|
||||
<Text style={this.styles().contextMenuItemText}>{_('Status')}</Text>
|
||||
</MenuOption>);
|
||||
|
||||
if (menuOptionComponents.length) {
|
||||
menuOptionComponents.push(<View key={'menuOption_' + key++} style={styles.divider}/>);
|
||||
menuOptionComponents.push(<View key={'menuOption_' + key++} style={this.styles().divider}/>);
|
||||
}
|
||||
|
||||
menuOptionComponents.push(
|
||||
<MenuOption value={() => this.config_press()} key={'menuOption_' + key++} style={styles.contextMenuItem}>
|
||||
<Text style={styles.contextMenuItemText}>{_('Configuration')}</Text>
|
||||
<MenuOption value={() => this.config_press()} key={'menuOption_' + key++} style={this.styles().contextMenuItem}>
|
||||
<Text style={this.styles().contextMenuItemText}>{_('Configuration')}</Text>
|
||||
</MenuOption>);
|
||||
|
||||
const createTitleComponent = () => {
|
||||
@ -256,29 +270,29 @@ class ScreenHeaderComponent extends Component {
|
||||
}
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<Picker style={styles.folderPicker} selectedValue={p.selectedValue} onValueChange={(itemValue, itemIndex) => { if (p.onValueChange) p.onValueChange(itemValue, itemIndex); }}>
|
||||
<Picker style={this.styles().folderPicker} selectedValue={p.selectedValue} onValueChange={(itemValue, itemIndex) => { if (p.onValueChange) p.onValueChange(itemValue, itemIndex); }}>
|
||||
{ items }
|
||||
</Picker>
|
||||
</View>
|
||||
);
|
||||
} else {
|
||||
let title = 'title' in this.props && this.props.title !== null ? this.props.title : '';
|
||||
return <Text style={styles.titleText}>{title}</Text>
|
||||
return <Text style={this.styles().titleText}>{title}</Text>
|
||||
}
|
||||
}
|
||||
|
||||
const titleComp = createTitleComponent();
|
||||
|
||||
return (
|
||||
<View style={styles.container} >
|
||||
{ sideMenuButton(styles, () => this.sideMenuButton_press()) }
|
||||
{ backButton(styles, () => this.backButton_press(), !this.props.historyCanGoBack) }
|
||||
{ saveButton(styles, () => { if (this.props.onSaveButtonPress) this.props.onSaveButtonPress() }, this.props.saveButtonDisabled === true, this.props.showSaveButton === true) }
|
||||
<View style={this.styles().container} >
|
||||
{ sideMenuButton(this.styles(), () => this.sideMenuButton_press()) }
|
||||
{ backButton(this.styles(), () => this.backButton_press(), !this.props.historyCanGoBack) }
|
||||
{ saveButton(this.styles(), () => { if (this.props.onSaveButtonPress) this.props.onSaveButtonPress() }, this.props.saveButtonDisabled === true, this.props.showSaveButton === true) }
|
||||
{ titleComp }
|
||||
{ searchButton(styles, () => this.searchButton_press()) }
|
||||
<Menu onSelect={(value) => this.menu_select(value)} style={styles.contextMenu}>
|
||||
{ searchButton(this.styles(), () => this.searchButton_press()) }
|
||||
<Menu onSelect={(value) => this.menu_select(value)} style={this.styles().contextMenu}>
|
||||
<MenuTrigger style={{ paddingTop: PADDING_V, paddingBottom: PADDING_V }}>
|
||||
<Text style={styles.contextMenuTrigger}> ⋮</Text>
|
||||
<Text style={this.styles().contextMenuTrigger}> ⋮</Text>
|
||||
</MenuTrigger>
|
||||
<MenuOptions>
|
||||
{ menuOptionComponents }
|
||||
@ -299,6 +313,7 @@ const ScreenHeader = connect(
|
||||
return {
|
||||
historyCanGoBack: state.historyCanGoBack,
|
||||
locale: state.settings.locale,
|
||||
theme: state.settings.theme,
|
||||
};
|
||||
}
|
||||
)(ScreenHeaderComponent)
|
||||
|
||||
Reference in New Issue
Block a user