self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-27 10:32:58 +02:00
Code Issues Releases Activity

Styled Dropbox mobile GUI

Browse Source
This commit is contained in:
Laurent Cozic 2018-03-27 17:41:19 +00:00
parent 96fb7c2087
commit 2280fb5c43
3 changed files with 50 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ const globalStyle = {
dividerColor: "#dddddd",
selectedColor: '#e5e5e5',
disabledOpacity: 0.2,
colorUrl: '#000CFF',
raisedBackgroundColor: "#0080EF",
raisedColor: "#003363",
@ -89,10 +90,17 @@ function addExtraStyles(style) {
fontSize: style.fontSize,
};
style.urlText = {
color: style.colorUrl,
fontSize: style.fontSize,
};
return style;
}
function themeStyle(theme) {
if (!theme) throw new Error('Theme not set');
if (themeCache_[theme]) return themeCache_[theme];
let output = Object.assign({}, globalStyle);

58
ReactNativeClient/lib/components/screens/dropbox-login.js
View File

@ -1,5 +1,5 @@
const React = require('react'); const Component = React.Component;
const { View, Button, Text, TextInput, TouchableOpacity } = require('react-native');
const { View, Button, Text, TextInput, TouchableOpacity, StyleSheet } = require('react-native');
const { connect } = require('react-redux');
const { ScreenHeader } = require('lib/components/screen-header.js');
const { _ } = require('lib/locale.js');
@ -7,12 +7,15 @@ const { BaseScreenComponent } = require('lib/components/base-screen.js');
const DialogBox = require('react-native-dialogbox').default;
const { dialogs } = require('lib/dialogs.js');
const Shared = require('lib/components/shared/dropbox-login-shared');
const { themeStyle } = require('lib/components/global-style.js');
class DropboxLoginScreenComponent extends BaseScreenComponent {
constructor() {
super();
this.styles_ = {};
this.shared_ = new Shared(
this,
(msg) => dialogs.info(this, msg),
@ -24,22 +27,45 @@ class DropboxLoginScreenComponent extends BaseScreenComponent {
this.shared_.refreshUrl();
}
styles() {
const themeId = this.props.theme;
const theme = themeStyle(themeId);
if (this.styles_[themeId]) return this.styles_[themeId];
this.styles_ = {};
let styles = {
container: {
padding: theme.margin,
},
stepText: Object.assign({}, theme.normalText, { marginBottom: theme.margin }),
urlText: Object.assign({}, theme.urlText, { marginBottom: theme.margin }),
}
this.styles_[themeId] = StyleSheet.create(styles);
return this.styles_[themeId];
}
render() {
const theme = themeStyle(this.props.theme);
return (
<View style={this.styles().screen}>
<ScreenHeader title={_('Login with Dropbox')}/>
<Text>{_('To allow Joplin to synchronise with Dropbox, please follow the steps below:')}</Text>
<Text>{_('Step 1: Open this URL in your browser to authorise the application:')}</Text>
<View>
<TouchableOpacity onPress={this.shared_.loginUrl_click}>
<Text>{this.state.loginUrl}</Text>
</TouchableOpacity>
</View>
<Text>{_('Step 2: Enter the code provided by Dropbox:')}</Text>
<TextInput value={this.state.authCode} onChangeText={this.shared_.authCodeInput_change}/>
<View style={this.styles().container}>
<Text style={this.styles().stepText}>{_('To allow Joplin to synchronise with Dropbox, please follow the steps below:')}</Text>
<Text style={this.styles().stepText}>{_('Step 1: Open this URL in your browser to authorise the application:')}</Text>
<View>
<TouchableOpacity onPress={this.shared_.loginUrl_click}>
<Text style={this.styles().urlText}>{this.state.loginUrl}</Text>
</TouchableOpacity>
</View>
<Text style={this.styles().stepText}>{_('Step 2: Enter the code provided by Dropbox:')}</Text>
<TextInput value={this.state.authCode} onChangeText={this.shared_.authCodeInput_change} style={theme.lineInput}/>
<Button disabled={this.state.checkingAuthToken} title={_("Submit")} onPress={this.shared_.submit_click}></Button>
<Button disabled={this.state.checkingAuthToken} title={_("Submit")} onPress={this.shared_.submit_click}></Button>
</View>
<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
</View>
@ -48,10 +74,10 @@ class DropboxLoginScreenComponent extends BaseScreenComponent {
}
const DropboxLoginScreen = connect(
(state) => {
return {};
}
)(DropboxLoginScreenComponent)
const DropboxLoginScreen = connect((state) => {
return {
theme: state.settings.theme,
};
})(DropboxLoginScreenComponent)
module.exports = { DropboxLoginScreen };

1
ReactNativeClient/lib/components/shared/dropbox-login-shared.js
View File

@ -41,7 +41,6 @@ class Shared {
this.comp_.props.dispatch({ type: 'NAV_BACK' });
reg.scheduleSync();
} catch (error) {
console.error(error);
await showErrorMessageBox(_('Could not authorise application:\n\n%s\n\nPlease try again.', error.message));
} finally {
this.comp_.setState({ checkingAuthToken: false });