Skip to content

Commit 5b3305d

Browse files
peterjumapeterjuma
committed
Fix screen layout
1 parent 27ea2e7 commit 5b3305d

File tree

5 files changed

+203
-110
lines changed

5 files changed

+203
-110
lines changed

‎public/index.html

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,5 @@
2121
You need to enable JavaScript to run this app.
2222
</noscript>
2323
<div id="root"></div>
24-
<script>
25-
const script = document.createElement("script");
26-
script.src =
27-
"https://unpkg.com/@github/markdown-toolbar-element@latest/dist/index.js";
28-
script.type = "module";
29-
document.body.appendChild(script);
30-
</script>
3124
</body>
3225
</html>

‎src/NavbarMain.js

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,38 @@
11
import react from "react";
22

33
function NavbarMain(props) {
4-
var isActive = props.display
5-
var note = props.notesData;
6-
return (
7-
<div className={isActive===true? "nav-bar":"hidden"}>
8-
<div className="nav-right-icon">
9-
<i className="far fa-copy fa-lg btn" id="copyBtn" onClick={((e) => props.handleCopyNote(e, note))}></i>
10-
<i className="far fa-edit fa-lg btn" id="editbtn" data-action="updatenote" onClick={((e) => props.handleEditNote(e, note))}> </i>
11-
<i className="far fa-trash-alt fa-lg btn" aria-hidden="true" style={{float: "right"}} onClick={((e) => props.handleDeleteNote(e, note))}></i>
12-
<i className="far fa-arrow-alt-circle-down fa-lg btn" aria-hidden="true" style={{float: "right"}} onClick={((e) => props.handleDownloadNote(e, note))}></i>
13-
</div>
14-
</div>
15-
)
4+
var isActive = props.display;
5+
var note = props.notesData;
6+
return (
7+
<div className={isActive === true ? "nav-bar" : "hidden"}>
8+
<div>
9+
<i
10+
className="far fa-copy fa-lg btn"
11+
id="copyBtn"
12+
onClick={(e) => props.handleCopyNote(e, note)}
13+
></i>
14+
<i
15+
className="far fa-edit fa-lg btn"
16+
id="editbtn"
17+
data-action="updatenote"
18+
onClick={(e) => props.handleEditNote(e, note)}
19+
>
20+
{" "}
21+
</i>
22+
<i
23+
className="far fa-trash-alt fa-lg btn"
24+
aria-hidden="true"
25+
style={{ float: "right" }}
26+
onClick={(e) => props.handleDeleteNote(e, note)}
27+
></i>
28+
<i
29+
className="far fa-arrow-alt-circle-down fa-lg btn"
30+
aria-hidden="true"
31+
style={{ float: "right" }}
32+
onClick={(e) => props.handleDownloadNote(e, note)}
33+
></i>
34+
</div>
35+
</div>
36+
);
1637
}
17-
export default NavbarMain
38+
export default NavbarMain;

‎src/NavbarSidebar.js

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,45 @@
11
import react from "react";
22

33
function NavbarSidebar(props) {
4-
// console.log(props.homeContent);
5-
var note = {
6-
noteid: Math.random().toString(16).slice(2),
7-
notetitle: '',
8-
notebody: '',
9-
activepage: '',
10-
action: "addnote"
11-
}
12-
return (
13-
<div>
14-
<div className="nav-bar-left nav-bar">
15-
<div className="nav-left-icon">
16-
<i id="homeBtn" onClick={((e) => props.handleClickHomeBtn(e))} className="fa fa-home fa-lg btn" aria-hidden="true"></i>
17-
<h4>All Notes</h4>
18-
<i id="addNoteBtn" data-action="addnote" onClick={((e) => props.handleEditNote(e, note))} className="fa fa-plus fa-lg btn" aria-hidden="true"></i>
19-
</div>
20-
</div>
21-
<div className="search-bar">
22-
<i className="fa fa-search searchButton" aria-hidden="true"></i>
23-
<input
24-
type="search"
25-
placeholder="Search Notes"
26-
className="search-field"
27-
onChange={((e) => props.handleSearchNotes(e))}
28-
/>
29-
</div>
4+
// console.log(props.homeContent);
5+
var note = {
6+
noteid: Math.random().toString(16).slice(2),
7+
notetitle: "",
8+
notebody: "",
9+
activepage: "",
10+
action: "addnote",
11+
};
12+
return (
13+
<div>
14+
<div className="nav-bar-left">
15+
<div className="nav-left-icon">
16+
<i
17+
id="homeBtn"
18+
onClick={(e) => props.handleClickHomeBtn(e)}
19+
className="fa fa-home fa-lg btn"
20+
aria-hidden="true"
21+
></i>
22+
<h4>All Notes</h4>
23+
<i
24+
id="addNoteBtn"
25+
data-action="addnote"
26+
onClick={(e) => props.handleEditNote(e, note)}
27+
className="fa fa-plus fa-lg btn"
28+
aria-hidden="true"
29+
></i>
3030
</div>
31-
)
31+
</div>
32+
<div className="search-bar">
33+
<i className="fa fa-search searchButton" aria-hidden="true"></i>
34+
<input
35+
type="search"
36+
placeholder="Search Notes"
37+
className="search-field"
38+
onChange={(e) => props.handleSearchNotes(e)}
39+
/>
40+
</div>
41+
</div>
42+
);
3243
}
3344

34-
export default NavbarSidebar
45+
export default NavbarSidebar;

‎src/NoteEditor.js

Lines changed: 98 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,104 @@
11
import React from "react";
22

33
function NoteEditor(props) {
4-
var note = props.editNoteData;
5-
const ButtonStyle = {
6-
border: '1px solid #dcdcde'
7-
}
8-
return (
9-
<div className="main-editor">
10-
<div className="title-header">
11-
<input name="title" type="text" id="notetitle" data-action={note.action} value={note.notetitle} placeholder="Title" autoComplete="off" onChange={((e) => props.handleEditNote(e, note))} />
12-
</div>
13-
<div className="md-editor-tools" id="mdtools">
14-
<i className="fas fa-bold btn" onClick={((e) => props.processInput("bold"))}></i>
15-
<i className="fas fa-italic btn" onClick={((e) => props.processInput("italic"))}></i>
16-
<i className="fas fa-heading btn" onClick={((e) => props.processInput("heading"))}></i>
17-
<i className="fas fa-link btn" onClick={((e) => props.processInput("link"))}></i>
18-
<i className="fas fa-list-ol btn" onClick={((e) => props.processInput("olist"))}></i>
19-
<i className="fas fa-list btn" onClick={((e) => props.processInput("ulist"))}></i>
20-
<i className="fas fa-quote-left btn" onClick={((e) => props.processInput("blockquote"))}></i>
21-
<i className="far fa-image btn" onClick={((e) => props.processInput("image"))}></i>
22-
<i className="fas fa-terminal btn" onClick={((e) => props.processInput("backticks"))}></i>
23-
<i className="fas fa-code btn" onClick={((e) => props.processInput("codeblock"))}></i>
24-
<i className="far fa-check-square btn" onClick={((e) => props.processInput("tasklist"))}></i>
25-
<i className="fas fa-table btn" onClick={((e) => props.processInput("table"))}></i>
26-
<i className="fas fa-strikethrough btn" onClick={((e) => props.processInput("strike"))}></i>
27-
</div>
28-
<div className="md-txtarea">
29-
<textarea
30-
placeholder="Note"
31-
id="notebody"
32-
data-action={note.action}
33-
value={note.notebody}
34-
onChange={((e) => props.handleEditNote(e, note))}
35-
onPaste={((e) => props.handlePaste(e))}
36-
onKeyDown={((e) => props.handleKeyEvent(e))}
37-
/>
38-
</div>
39-
<div className="right-bottom-bar">
40-
<div className="saveCancelBar">
41-
<i className="far fa-save btn-save-cancel fa-2x" onClick={((e) => props.handleSaveNote(e, note))} data-action={note.action}></i>
42-
<i className="far fa-window-close btn-save-cancel fa-2x" onClick={((e) => props.handleCancel(e, note))}></i>
43-
</div>
44-
</div>
4+
var note = props.editNoteData;
5+
const ButtonStyle = {
6+
border: "1px solid #dcdcde",
7+
};
8+
return (
9+
<div className="main-editor">
10+
<div className="title-header">
11+
<input
12+
name="title"
13+
type="text"
14+
id="notetitle"
15+
data-action={note.action}
16+
value={note.notetitle}
17+
placeholder="Title"
18+
autoComplete="off"
19+
onChange={(e) => props.handleEditNote(e, note)}
20+
/>
21+
</div>
22+
<div className="md-editor-tools" id="mdtools">
23+
<i
24+
className="fas fa-bold btn"
25+
onClick={(e) => props.processInput("bold")}
26+
></i>
27+
<i
28+
className="fas fa-italic btn"
29+
onClick={(e) => props.processInput("italic")}
30+
></i>
31+
<i
32+
className="fas fa-heading btn"
33+
onClick={(e) => props.processInput("heading")}
34+
></i>
35+
<i
36+
className="fas fa-link btn"
37+
onClick={(e) => props.processInput("link")}
38+
></i>
39+
<i
40+
className="fas fa-list-ol btn"
41+
onClick={(e) => props.processInput("olist")}
42+
></i>
43+
<i
44+
className="fas fa-list btn"
45+
onClick={(e) => props.processInput("ulist")}
46+
></i>
47+
<i
48+
className="fas fa-quote-left btn"
49+
onClick={(e) => props.processInput("blockquote")}
50+
></i>
51+
<i
52+
className="far fa-image btn"
53+
onClick={(e) => props.processInput("image")}
54+
></i>
55+
<i
56+
className="fas fa-terminal btn"
57+
onClick={(e) => props.processInput("backticks")}
58+
></i>
59+
<i
60+
className="fas fa-code btn"
61+
onClick={(e) => props.processInput("codeblock")}
62+
></i>
63+
<i
64+
className="far fa-check-square btn"
65+
onClick={(e) => props.processInput("tasklist")}
66+
></i>
67+
<i
68+
className="fas fa-table btn"
69+
onClick={(e) => props.processInput("table")}
70+
></i>
71+
<i
72+
className="fas fa-strikethrough btn"
73+
onClick={(e) => props.processInput("strike")}
74+
></i>
75+
</div>
76+
<div className="md-txtarea">
77+
<textarea
78+
placeholder="Note"
79+
id="notebody"
80+
data-action={note.action}
81+
value={note.notebody}
82+
onChange={(e) => props.handleEditNote(e, note)}
83+
onPaste={(e) => props.handlePaste(e)}
84+
onKeyDown={(e) => props.handleKeyEvent(e)}
85+
/>
86+
<div className="right-bottom-bar">
87+
<div className="saveCancelBar">
88+
<i
89+
className="far fa-save btn-save-cancel fa-2x"
90+
onClick={(e) => props.handleSaveNote(e, note)}
91+
data-action={note.action}
92+
></i>
93+
<i
94+
className="far fa-window-close btn-save-cancel fa-2x"
95+
onClick={(e) => props.handleCancel(e, note)}
96+
></i>
97+
</div>
4598
</div>
46-
)
99+
</div>
100+
</div>
101+
);
47102
}
48103

49-
export default NoteEditor;
104+
export default NoteEditor;

0 commit comments

Comments
 (0)