Skip to content
This repository has been archived by the owner on Jun 15, 2022. It is now read-only.

Commit

Permalink
Remove scrollview from compose, defaults to just 1 editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@moughxyz
moughxyz committed Oct 29, 2018
1 parent c4d9509 commit dc9e87a
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 93 deletions.
1 change: 1 addition & 0 deletions src/Styles.js
View file
Expand Up @@ -446,6 +446,7 @@ export default class GlobalStyles {
},

noteText: {
flexGrow: 1,
marginTop: 0,
paddingTop: 10,
color: constants.mainTextColor,
Expand Down
2 changes: 1 addition & 1 deletion src/containers/NoteCell.js
View file
Expand Up @@ -204,7 +204,7 @@ export default class NoteCell extends React.PureComponent {
}

{(note.content.preview_plain != null && !this.state.options.hidePreviews) &&
<Text style={this.aggregateStyles(this.styles.noteText, this.styles.noteTextSelected, this.state.selected)}> {note.content.preview_plain} </Text>
<Text numberOfLines={2} style={this.aggregateStyles(this.styles.noteText, this.styles.noteTextSelected, this.state.selected)}> {note.content.preview_plain} </Text>
}

{(!note.content.preview_plain && !this.state.options.hidePreviews && note.safeText().length > 0) &&
Expand Down
127 changes: 36 additions & 91 deletions src/screens/Compose.js
View file
Expand Up @@ -317,18 +317,6 @@ export default class Compose extends Abstract {
});
}

onScroll = (e) => {
let xOffset = e.nativeEvent.contentOffset.x;
let contentWidth = this.scrollViewContentWidth;
let pageNum = Math.ceil(xOffset / contentWidth);

this.setState({currentPage: pageNum});
}

onContentSizeChange = (width, height) => {
this.scrollViewContentWidth = width;
}

render() {
if(this.state.lockContent) {
return (<LockedView />);
Expand All @@ -342,25 +330,11 @@ export default class Compose extends Abstract {
*/

var noteEditor = ComponentManager.get().editorForNote(this.note);
// const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');

let windowWidth = this.state.windowWidth || Dimensions.get('window').width;
var scrollViewWidth = noteEditor ? windowWidth * 2.0 : windowWidth;
var shouldDisplayEditor = noteEditor != null;

if(noteEditor && this.state.currentPage == 1) {
shouldDisplayEditor = false;
}

return (
<View
style={[this.styles.container, GlobalStyles.styles().container]}
onLayout={(e) => {
let width = e.nativeEvent.layout.width;
this.setState({windowWidth: width})
}}
>

<View style={[this.styles.container, GlobalStyles.styles().container]}>
{this.note.locked &&
<View style={this.styles.lockedContainer}>
<Icon name={Icons.nameForIcon("lock")} size={20} color={GlobalStyles.constants().mainBackgroundColor} />
Expand All @@ -381,77 +355,48 @@ export default class Compose extends Abstract {
editable={!this.note.locked}
/>

<ScrollView
onScroll={this.onScroll}
onContentSizeChange={this.onContentSizeChange}
horizontal={true}
pagingEnabled={true}
bounces={false}
contentContainerStyle={{width: scrollViewWidth}}
>

{(this.state.loadingWebView || this.state.webViewError) &&
<View style={[this.styles.loadingWebViewContainer]}>
<Text style={[this.styles.loadingWebViewText, {fontWeight: 'bold'}]}>
{this.state.webViewError ? "Unable to Load Editor" : "Loading Editor..."}
</Text>
<Text style={[this.styles.loadingWebViewText]}>Swipe to switch to plain.</Text>
</View>
}

{/* Place an empty container before the webview so that the plain editor does not flex grow to occupy all space. */}
{(noteEditor != null && !shouldDisplayEditor) &&
<View style={[this.styles.noteTextContainer, {width: windowWidth}]} />
}

{shouldDisplayEditor &&
<Webview
key={noteEditor.uuid}
noteId={this.note.uuid}
editorId={noteEditor.uuid}
onLoadStart={() => {this.setState({loadingWebView: true})}}
onLoadEnd={() => {this.setState({loadingWebView: false, webViewError: false})}}
onLoadError={() => {this.setState({webViewError: true})}}
/>
}

{/* Place an empty container so that the webview does not flex grow to occupy all space. */}
{shouldDisplayEditor &&
<View style={this.styles.noteTextContainer} />
}
{(this.state.loadingWebView || this.state.webViewError) &&
<View style={[this.styles.loadingWebViewContainer]}>
<Text style={[this.styles.loadingWebViewText, {fontWeight: 'bold'}]}>
{this.state.webViewError ? "Unable to Load Editor" : "Loading Editor..."}
</Text>
</View>
}

{!shouldDisplayEditor && Platform.OS == "android" &&
<View style={[this.styles.noteTextContainer]}>
<TextView style={[GlobalStyles.stylesForKey("noteText"), this.styles.textContentAndroid]}
ref={(ref) => this.input = ref}
autoFocus={this.note.dummy}
value={this.note.text}
selectionColor={GlobalStyles.lighten(GlobalStyles.constants().mainTintColor, 0.35)}
handlesColor={GlobalStyles.constants().mainTintColor}
onChangeText={this.onTextChange}
editable={!this.note.locked}
/>
</View>
}
{shouldDisplayEditor &&
<Webview
key={noteEditor.uuid}
noteId={this.note.uuid}
editorId={noteEditor.uuid}
onLoadStart={() => {this.setState({loadingWebView: true})}}
onLoadEnd={() => {this.setState({loadingWebView: false, webViewError: false})}}
onLoadError={() => {this.setState({webViewError: true})}}
/>
}

{!shouldDisplayEditor && Platform.OS == "ios" &&
<TextView style={[GlobalStyles.stylesForKey("noteText"), {paddingBottom: 10, width: windowWidth}]}
{!shouldDisplayEditor && Platform.OS == "android" &&
<View style={[this.styles.noteTextContainer]}>
<TextView style={[GlobalStyles.stylesForKey("noteText"), this.styles.textContentAndroid]}
ref={(ref) => this.input = ref}
autoFocus={false}
autoFocus={this.note.dummy}
value={this.note.text}
keyboardDismissMode={'interactive'}
selectionColor={GlobalStyles.lighten(GlobalStyles.constants().mainTintColor)}
selectionColor={GlobalStyles.lighten(GlobalStyles.constants().mainTintColor, 0.35)}
handlesColor={GlobalStyles.constants().mainTintColor}
onChangeText={this.onTextChange}
editable={!this.note.locked}
/>
}

</ScrollView>
</View>
}

{App.isIOS &&
// Required for iOS back swipe gesture to work with ScrollView
<View
style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: 10 }}
{!shouldDisplayEditor && Platform.OS == "ios" &&
<TextView style={[GlobalStyles.stylesForKey("noteText"), {paddingBottom: 10}]}
ref={(ref) => this.input = ref}
autoFocus={false}
value={this.note.text}
keyboardDismissMode={'interactive'}
selectionColor={GlobalStyles.lighten(GlobalStyles.constants().mainTintColor)}
onChangeText={this.onTextChange}
editable={!this.note.locked}
/>
}
</View>
Expand Down Expand Up @@ -494,7 +439,7 @@ export default class Compose extends Abstract {
loadingWebViewContainer: {
position: "absolute",
height: "100%",
width: "50%",
width: "100%",
bottom: 0,
zIndex: 300,
display: "flex",
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Filter.js
View file
Expand Up @@ -358,7 +358,7 @@ export default class Filter extends Abstract {
}

{ this.note &&
<EditorsSection editors={this.getEditors()} selectedEditor={ComponentManager.get().editorForNote(this.note)} title={"Edit With Web Editor"} onEditorSelect={this.onEditorSelect.bind(this)}/>
<EditorsSection editors={this.getEditors()} selectedEditor={ComponentManager.get().editorForNote(this.note)} title={"Edit With"} onEditorSelect={this.onEditorSelect.bind(this)}/>
}

<TagsSection
Expand Down

0 comments on commit dc9e87a

Please sign in to comment.