self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-24 08:12:24 +02:00
Code Issues Releases Activity

Button styling

Browse Source
This commit is contained in:
Laurent Cozic 2017-07-16 00:30:54 +01:00
parent 12c163ef73
commit e2d426a986
3 changed files with 59 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { View, Text, Button, StyleSheet } from 'react-native';
import { View, Text, Button, StyleSheet, TouchableOpacity } from 'react-native';
import { Log } from 'lib/log.js';
import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
import { _ } from 'lib/locale.js';
@ -9,14 +9,44 @@ import { FileApi } from 'lib/file-api.js';
import { FileApiDriverOneDrive } from 'lib/file-api-driver-onedrive.js';
import { reg } from 'lib/registry.js'
const styles = StyleSheet.create({
let styleObject = {
divider: {
marginVertical: 5,
marginHorizontal: 2,
borderBottomWidth: 1,
borderColor: '#ccc'
},
});
sideMenuButton: {
flex: 1,
backgroundColor: "#0482E3",
paddingLeft: 15,
paddingRight: 15,
marginRight: 10,
},
sideMenuButtonText: {
textAlignVertical: 'center',
color: "#ffffff",
fontWeight: 'bold',
flex: 1,
},
backButton: {
flex: 1,
backgroundColor: "#0482E3",
paddingLeft: 15,
paddingRight: 15,
marginRight: 10,
},
backButtonText: {
textAlignVertical: 'center',
color: "#ffffff",
fontWeight: 'bold',
flex: 1,
},
};
styleObject.backButtonDisabled = Object.assign({}, styleObject.backButton, { backgroundColor: "#c6c6c6" });
const styles = StyleSheet.create(styleObject);
class ScreenHeaderComponent extends Component {
@ -49,6 +79,27 @@ class ScreenHeaderComponent extends Component {
}
render() {
function sideMenuButton(styles, onPress) {
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.sideMenuButton}>
<Text style={styles.sideMenuButtonText}>☰</Text>
</View>
</TouchableOpacity>
);
}
function backButton(styles, onPress, disabled) {
return (
<TouchableOpacity onPress={onPress} disabled={disabled}>
<View style={disabled ? styles.backButtonDisabled : styles.backButton}>
<Text style={styles.backButtonText}>&lt;</Text>
</View>
</TouchableOpacity>
);
}
let key = 0;
let menuOptionComponents = [];
for (let i = 0; i < this.props.menuOptions.length; i++) {
@ -77,8 +128,8 @@ class ScreenHeaderComponent extends Component {
return (
<View style={{ flexDirection: 'row', paddingLeft: 10, paddingTop: 10, paddingBottom: 10, paddingRight: 0, backgroundColor: '#ffffff', alignItems: 'center' }} >
<Button title="☰" onPress={() => this.sideMenuButton_press()} />
<Button disabled={!this.props.historyCanGoBack} title="<" onPress={() => this.backButton_press()}></Button>
{ sideMenuButton(styles, () => this.sideMenuButton_press()) }
{ backButton(styles, () => this.backButton_press(), !this.props.historyCanGoBack) }
<Text style={{ flex:1, marginLeft: 10 }} >{title}</Text>
<Menu onSelect={(value) => this.menu_select(value)}>
<MenuTrigger>

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

@ -106,7 +106,7 @@ class FolderScreenComponent extends BaseScreenComponent {
return (
<View style={this.styles().screen}>
<ScreenHeader navState={this.props.navigation.state} />
<TextInput value={this.state.folder.title} onChangeText={(text) => this.title_changeText(text)} />
<TextInput autoFocus={true} value={this.state.folder.title} onChangeText={(text) => this.title_changeText(text)} />
{ actionButtonComp }
<dialogs.DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
</View>

4
ReactNativeClient/lib/synchronizer.js
View File

@ -53,7 +53,7 @@ class Synchronizer {
if (report.updatedRemote) lines.push(_('Updated remote items: %d.', report.updatedRemote));
if (report.deleteLocal) lines.push(_('Deleted local items: %d.', report.deleteLocal));
if (report.deleteRemote) lines.push(_('Deleted remote items: %d.', report.deleteRemote));
if (report.state) lines.push(_('State: %s.', report.state));
if (report.state) lines.push(_('State: %s.', report.state.replace(/_/g, ' ')));
return lines;
}
@ -154,7 +154,7 @@ class Synchronizer {
let synchronizationId = time.unixMs().toString();
this.state_ = 'started';
this.state_ = 'in_progress';
this.logSyncOperation('starting', null, null, 'Starting synchronization... [' + synchronizationId + ']');