Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 32c11f1

Browse files
App improvements: backend & modern layout (#8)
* Remove unused files * Ignore removed unused files The reason for having each .binlog file ignored separately is to prevent the Git from ignoring other binlogs files in the future by mistake if there are any new added which are necessary. * Fix: Component Exception when reaching <br/> * Fix: memory leak when resizing the app window The resizing of the window app has a memory leak caused by the asynchronous calls still running on the unmounted components (which applies to both Note main panel and note widget). To fix that, the simple mounted status has been added which is checked each time the component is about to be updated, so once the component is unmounted the rerender will not happen. * Display the navigation pane on the left * Improve navigation panel layout This improvements adds the icons of each page displayed on both navigation panel modes (hidden and expanded). It also changes the color of the panel. * Make all the pages transparent on UWP layer * Fix notes main panel * Make the TitleBar transparent The Title bar of the application is the most default app element that is shown to the user, that is why, to make it more custom and to make the application look more modern, the title bar was made transparent. The transparency means that: * the content of the app is extended to the full size of the whole window, * the color of the title bar is set to transparent, * the background color of the window manipulation buttons (maximize, minimize, close) is set to transparent It makes them still being visible and fully operative, but are blended into the app window NOTE: The title bar has still it's default size, so to drag the window, or double click, it's still possible to manipulate the title bar as it would still be there. * Add gradient to the application's page Each page of the application has been provided with the gradient set as a background. This feature is implemented on the UWP side due to no decent support for the gradient on the React Native side (especially no support for Windows). The gradient is set as the direct child of the Background property of the ReactRootView component of the XAML RNW element. * Simplify the layout of the note widget The note widget had more elements in it than it should have. To simplify the design and to make it more user-friendly, the layout has been reduced only to the tile of the note and it's short message. More details will be done as the other pages responsibility.
1 parent 226c21f commit 32c11f1

File tree

21 files changed

+144
-127
lines changed

21 files changed

+144
-127
lines changed

‎.buckconfig‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,7 @@ buck-out/
5757

5858
# CocoaPods
5959
/ios/Pods/
60+
61+
# Windows build items
62+
Deploy.binlog
63+
msbuild.binlog

‎.watchmanconfig‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎App.js‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎Deploy.binlog‎

-543 KB
Binary file not shown.

‎index.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,10 @@
33
*/
44

55
import {AppRegistry} from 'react-native';
6-
import App from './App';
7-
import {name as appName} from './app.json';
86

97
import NotesMainPanel from './src/NotesMainPanel';
108
import UserAccountPanel from './src/UserAccountPanel';
119
import ApplicationSettingsPanel from './src/ApplicationSettingsPanel';
1210
import NoteWidgetDetailsPanel from './src/NoteWidgetDetailsPanel';
1311
import CreateNotePanel from './src/CreateNotePanel';
1412

15-
AppRegistry.registerComponent(appName, () => App);

‎msbuild.binlog‎

-1.55 MB
Binary file not shown.

‎src/NotesMainPanel.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
FlatList,
1212
NativeModules,
1313
StyleSheet,
14+
Text,
1415
View,
1516
} from 'react-native';
1617
import NoteWidget from './Widgets/NoteWidget';
@@ -28,6 +29,7 @@ class NotesMainPanel extends React.Component {
2829
notes: [],
2930
dimensions: {window, screen},
3031
columns: this.calculateColumnWidth(window),
32+
isMounted: false,
3133
}
3234
};
3335

@@ -80,10 +82,15 @@ class NotesMainPanel extends React.Component {
8082
const styles = StyleSheet.create({
8183
mainContainer: {
8284
flex: 1,
85+
margin: 25,
8386
flexDirection: "column",
84-
margin: 20,
8587
backgroundColor: "transparent",
88+
justifyContent: "space-around",
8689
},
90+
welcomeText: {
91+
fontSize: 25,
92+
fontFamily: "Papyrus",
93+
}
8794
});
8895

8996

‎src/UserAccountPanel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class UserAccountPanel extends React.Component {
2020
<View style={styles.panelContent}>
2121
<Text>UserAccountPanel</Text>
2222
<Text>This panel will have all the features of User's account.</Text>
23-
<Text><br/>Further implementation will yet be done!</Text>
23+
<Text>Further implementation will yet be done!</Text>
2424
</View>
2525
</View>
2626
);

‎src/Widgets/NoteWidget.js‎

Lines changed: 38 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @flow strict-local
44
*/
55

6-
import React, {useState, useEffect} from 'react';
6+
import React, {useState, useEffect,useRef} from 'react';
77
import {
88
AppRegistry,
99
StyleSheet,
@@ -20,46 +20,45 @@ export default function NoteWidget(props){
2020

2121
const [title, setTitle] = useState("");
2222
const [shortMessage, setShortMessage] = useState("");
23+
const isMounted = useRef(null);
2324

2425
useEffect(() => {
26+
isMounted.current = true;
2527
getNoteTitle();
2628
getNoteShortMessage();
29+
return () => {
30+
isMounted.current = false;
31+
}
2732
}, []);
2833

2934
const enterNote = () => {
3035
NativeModules.NoteWidgetClickHandler.openWidget(ID);
3136
};
3237

33-
3438
const getNoteTitle = () => {
3539
NativeModules.Database.getNoteTitle(ID)
36-
.then(result => setTitle(result))
40+
.then(result => {isMounted&&setTitle(result)})
3741
.catch(error => Alert.alert("ERROR!", `${error}`));
3842
};
3943

4044
const getNoteShortMessage = () => {
4145
NativeModules.Database.getNoteShortPost(ID)
42-
.then(result => setShortMessage(result))
46+
.then(result => {isMounted&&setShortMessage(result)})
4347
.catch(error => Alert.alert("ERROR!", `${error}`));
4448
};
4549

4650
return(
47-
<TouchableHighlight onPress={enterNote} style={styles.noteWidget} underlayColor={'transparent'}>
48-
<View style={{width: width}}>
49-
50-
<View style={styles.noteHeader}>
51-
<Text>{ID}</Text>
52-
<View style={styles.noteTitle}>
53-
<Text style={{textAlign: "center"}}>
54-
{title}
55-
</Text>
56-
</View>
57-
</View>
51+
<TouchableHighlight onPress={enterNote} style={[styles.noteWidget, {width: width}]} underlayColor={'transparent'}>
52+
<View style={styles.noteContent}>
5853

59-
<View style={styles.noteSeparator}></View>
54+
<View style={styles.noteTitle}>
55+
<Text style={styles.noteTitleText}>
56+
{title}
57+
</Text>
58+
</View>
6059

61-
<View style={styles.noteMainContent}>
62-
<Text>
60+
<View style={styles.message}>
61+
<Textstyle={styles.messageText}>
6362
{shortMessage}
6463
</Text>
6564
</View>
@@ -73,37 +72,34 @@ export default function NoteWidget(props){
7372

7473
const styles = StyleSheet.create({
7574
noteWidget: {
76-
borderColor: "grey",
77-
borderWidth: 1,
75+
borderColor: "rgba(170,170,170,0.1)",
76+
borderWidth: 5,
7877
margin: 20,
79-
backgroundColor: "whitesmoke",
80-
borderRadius: 10,
81-
shadowOffset: {x: 5, y: 50},
82-
shadowColor: "black",
83-
elevation: 10,
84-
opacity: 0.8
78+
backgroundColor: "white",
79+
borderRadius: 5,
80+
opacity: 1,
81+
height: 160,
8582
},
86-
noteHeader: {
83+
noteContent: {
8784
flex: 1,
88-
flexDirection: "row",
89-
margin: 5,
85+
flexDirection: "column",
86+
justifyContent: "space-evenly",
87+
margin: 10
9088
},
9189
noteTitle: {
92-
alignSelf: "center",
93-
alignContent: "center",
94-
alignItems: "center",
95-
textAlign: "center",
96-
marginHorizontal: 10,
90+
margin: 10
9791
},
98-
noteSeparator: {
99-
borderColor: "black",
100-
borderWidth: 0.5,
101-
marginTop: 5,
102-
marginBottom: 10,
103-
alignSelf: "stretch"
92+
noteTitleText: {
93+
color: "#6c47ff",
94+
fontFamily: "Georgia",
95+
fontSize: 12,
96+
fontWeight: "100",
10497
},
105-
noteMainContent: {
106-
margin: 10
98+
message: {
99+
margin: 10,
100+
},
101+
messageText: {
102+
fontSize: 12
107103
}
108104
});
109105

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /