diff --git a/client/package-lock.json b/client/package-lock.json index c6f743a..3801e9b 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -3145,6 +3145,11 @@ "randombytes": "2.0.6" } }, + "direction": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/direction/-/direction-0.1.5.tgz", + "integrity": "sha1-zl15f5fib4vnvv9T99xA4cGp7Ew=" + }, "dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -3867,6 +3872,11 @@ "estraverse": "4.2.0" } }, + "esrever": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/esrever/-/esrever-0.2.0.tgz", + "integrity": "sha1-lunSj08bGnZ4TNXUkOquAQ50B7g=" + }, "estraverse": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz", @@ -4544,6 +4554,11 @@ "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=", "dev": true }, + "get-document": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/get-document/-/get-document-1.0.0.tgz", + "integrity": "sha1-SCG85m8cJMsDMWAr5strEsTwHEs=" + }, "get-stdin": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", @@ -4562,6 +4577,14 @@ "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=", "dev": true }, + "get-window": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/get-window/-/get-window-1.1.2.tgz", + "integrity": "sha512-yjWpFcy9fjhLQHW1dPtg9ga4pmizLY8y4ZSHdGrAQ1NU277MRhnGnnLPxe19X8W5lWVsCZz++5xEuNozWMVmTw==", + "requires": { + "get-document": "1.0.0" + } + }, "getpass": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", @@ -5266,6 +5289,11 @@ "integrity": "sha512-YGG3ejvBNHRqu0559EOxxNFihD0AjpvHlC/pdGKd3X3ofe+CoJkYazwNJYTNebqpPKN+VVQbh4ZFn1DivMNuHA==", "dev": true }, + "immutable": { + "version": "3.8.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz", + "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=" + }, "import-lazy": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz", @@ -5521,6 +5549,11 @@ "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=", "dev": true }, + "is-empty": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-empty/-/is-empty-1.2.0.tgz", + "integrity": "sha1-3pu1snhzigWgsJpX4ftNSjQan2s=" + }, "is-equal-shallow": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz", @@ -5566,6 +5599,16 @@ "is-extglob": "1.0.0" } }, + "is-hotkey": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.2.tgz", + "integrity": "sha512-H05t1Tc+uCWLOjHtF1bZH3b/i7+RkjlhwFWDsroTwC0acCjXOVyjJ63yTnRGdNhV5bnKIcYnijgLAJtM0/Xqsw==" + }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-installed-globally": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz", @@ -5659,7 +5702,6 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", - "dev": true, "requires": { "isobject": "3.0.1" } @@ -5747,6 +5789,11 @@ "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", "dev": true }, + "is-window": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz", + "integrity": "sha1-LIlspT25feRdPDMTOmXYyfVjSA0=" + }, "is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", @@ -5773,8 +5820,12 @@ "isobject": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "dev": true + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" + }, + "isomorphic-base64": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/isomorphic-base64/-/isomorphic-base64-1.0.2.tgz", + "integrity": "sha1-9Caq6CVpuopOxcpzrSGkSrHueAM=" }, "isomorphic-fetch": { "version": "2.2.1", @@ -6912,6 +6963,11 @@ "integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=", "dev": true }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.0.tgz", @@ -10548,6 +10604,19 @@ "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==", "dev": true }, + "react-immutable-proptypes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-immutable-proptypes/-/react-immutable-proptypes-2.1.0.tgz", + "integrity": "sha1-Aj1vObsVyXwHHp5g0A0TbqxfoLQ=" + }, + "react-portal": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-portal/-/react-portal-3.2.0.tgz", + "integrity": "sha512-avb1FreAZAVCvNNyS2dCpxZiPYPJnAasHYPxdVBTROgNFeI+KSb+OoMHNsC1GbDawESCriPwCX+qKua6WSPIFw==", + "requires": { + "prop-types": "15.6.1" + } + }, "react-redux": { "version": "5.0.7", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz", @@ -11366,6 +11435,11 @@ "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=", "dev": true }, + "selection-is-backward": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/selection-is-backward/-/selection-is-backward-1.0.0.tgz", + "integrity": "sha1-l6VGMxiKURq6ZBn8XB+pG0Z+a+E=" + }, "selfsigned": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.2.tgz", @@ -11573,6 +11647,95 @@ "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=", "dev": true }, + "slate": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/slate/-/slate-0.33.5.tgz", + "integrity": "sha1-LJyxAW3vDpPVDeyfgM2vQijDhGE=", + "requires": { + "debug": "3.1.0", + "direction": "0.1.5", + "esrever": "0.2.0", + "is-empty": "1.2.0", + "is-plain-object": "2.0.4", + "lodash": "4.17.5", + "slate-dev-logger": "0.1.39", + "slate-schema-violations": "0.1.9", + "type-of": "2.0.1" + } + }, + "slate-base64-serializer": { + "version": "0.2.30", + "resolved": "https://registry.npmjs.org/slate-base64-serializer/-/slate-base64-serializer-0.2.30.tgz", + "integrity": "sha1-0zO1AL2gkH5fXQ9jJfuvso1u/1U=", + "requires": { + "isomorphic-base64": "1.0.2" + } + }, + "slate-dev-environment": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/slate-dev-environment/-/slate-dev-environment-0.1.1.tgz", + "integrity": "sha1-qqu1kNSU/yjbOyetd7WzrQiCcnE=", + "requires": { + "is-in-browser": "1.1.3" + } + }, + "slate-dev-logger": { + "version": "0.1.39", + "resolved": "https://registry.npmjs.org/slate-dev-logger/-/slate-dev-logger-0.1.39.tgz", + "integrity": "sha1-dEppuFA0JEcT5t5RSDr1cTw0WvQ=" + }, + "slate-hotkeys": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/slate-hotkeys/-/slate-hotkeys-0.1.1.tgz", + "integrity": "sha1-4aNiRzwh9VF2/w4AzEo6NP+E7Js=", + "requires": { + "is-hotkey": "0.1.2", + "slate-dev-environment": "0.1.1" + } + }, + "slate-plain-serializer": { + "version": "0.5.11", + "resolved": "https://registry.npmjs.org/slate-plain-serializer/-/slate-plain-serializer-0.5.11.tgz", + "integrity": "sha1-CT8dG8ANsJNsSgZG4oRu8T9ltlg=", + "requires": { + "slate-dev-logger": "0.1.39" + } + }, + "slate-prop-types": { + "version": "0.4.28", + "resolved": "https://registry.npmjs.org/slate-prop-types/-/slate-prop-types-0.4.28.tgz", + "integrity": "sha1-AmEzBTc1ExWRnx0cIW6N4K97Ogk=", + "requires": { + "slate-dev-logger": "0.1.39" + } + }, + "slate-react": { + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.12.5.tgz", + "integrity": "sha1-y+yM6jPdOCFylwRbOmzHu1UhQm8=", + "requires": { + "debug": "3.1.0", + "get-window": "1.1.2", + "is-window": "1.0.2", + "keycode": "2.2.0", + "lodash": "4.17.5", + "prop-types": "15.6.1", + "react-immutable-proptypes": "2.1.0", + "react-portal": "3.2.0", + "selection-is-backward": "1.0.0", + "slate-base64-serializer": "0.2.30", + "slate-dev-environment": "0.1.1", + "slate-dev-logger": "0.1.39", + "slate-hotkeys": "0.1.1", + "slate-plain-serializer": "0.5.11", + "slate-prop-types": "0.4.28" + } + }, + "slate-schema-violations": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/slate-schema-violations/-/slate-schema-violations-0.1.9.tgz", + "integrity": "sha1-AcaM+r7cG21/TBu4/ny+FxEjBZY=" + }, "slice-ansi": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz", @@ -12413,6 +12576,11 @@ "mime-types": "2.1.18" } }, + "type-of": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/type-of/-/type-of-2.0.1.tgz", + "integrity": "sha1-5yoXQYllaOn2KDeNgW1pEvfyOXI=" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", diff --git a/client/package.json b/client/package.json index dcc0864..5dcd5f0 100644 --- a/client/package.json +++ b/client/package.json @@ -5,12 +5,15 @@ "dependencies": { "axios": "^0.18.0", "bootstrap-css-only": "^4.1.0", + "immutable": "^3.8.2", "prop-types": "^15.5.10", "react": "^16.3.1", "react-dom": "^16.3.1", "react-redux": "^5.0.7", "react-router-dom": "^4.2.2", - "redux": "^3.7.2" + "redux": "^3.7.2", + "slate": "^0.33.5", + "slate-react": "^0.12.5" }, "devDependencies": { "eslint": "^4.19.1", diff --git a/client/src/components/NoteCard/noteCard.css b/client/src/components/NoteCard/noteCard.css index 45864e3..3a27498 100644 --- a/client/src/components/NoteCard/noteCard.css +++ b/client/src/components/NoteCard/noteCard.css @@ -49,20 +49,24 @@ color: var(--white-70); } -.noteContainer:hover { +.noteContainer:hover, .noteContainer.sel { box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12); background-color: var(--primary-color); } .noteContainer:hover h2, -.noteContainer:hover p { +.noteContainer.sel h2, +.noteContainer:hover p, +.noteContainer.sel p { color: var(--white-100); } -.noteContainer:hover .noteContentTop>span{ +.noteContainer:hover .noteContentTop>span, +.noteContainer.sel .noteContentTop>span{ color:var(--white-70); } -.noteContainer:hover .noteContentTop>div{ +.noteContainer:hover .noteContentTop>div, +.noteContainer.sel .noteContentTop>div{ visibility:visible; } diff --git a/client/src/components/NoteCard/noteCard.js b/client/src/components/NoteCard/noteCard.js index 307e75d..2a30469 100644 --- a/client/src/components/NoteCard/noteCard.js +++ b/client/src/components/NoteCard/noteCard.js @@ -2,27 +2,47 @@ import React, { Component } from "react"; import "./noteCard.css"; class NoteCard extends Component { + handleClick = ({ target, currentTarget }) => { + if (target.title === "") { + const ol = document.querySelector(".noteContainer.sel"); + if (ol) { + ol.classList.remove("sel"); + } + currentTarget.classList.add("sel"); + this.props.onClick(currentTarget.getAttribute("data-note-slug")); + } + }; render() { + const { updated_at, title, notes } = this.props.data; + debugger; + var day = new Date(Date.parse(updated_at)); + day = day.getDate()+'/'+day.getMonth()+'/'+day.getFullYear(); + console.log("fff", day); return ( -
+
- + - + - +
- Date + + {day} +
-

Title

+

{title}

- I am some paragraph
- I am line two of the paragraph + {notes}

); diff --git a/client/src/components/partial/Navbar/navbar.js b/client/src/components/partial/Navbar/navbar.js index acf3924..953b239 100644 --- a/client/src/components/partial/Navbar/navbar.js +++ b/client/src/components/partial/Navbar/navbar.js @@ -30,10 +30,10 @@ class Navbar extends Component { settingLink = false; } this.setState({ searchVisible, settingLink }, () => { - if(!isMobile && this.props.pathname === '/settings') { - this.props.history.push('/'); + if (!isMobile && this.props.pathname === "/settings") { + this.props.history.push("/"); setTimeout(() => { - document.querySelector('.drop-triger').click(); + document.querySelector(".drop-triger").click(); }, 600); } }); @@ -111,10 +111,13 @@ class Navbar extends Component { +
{this.isMobile() ? ( diff --git a/client/src/components/partial/utils/index.js b/client/src/components/partial/utils/index.js new file mode 100644 index 0000000..ab4b99f --- /dev/null +++ b/client/src/components/partial/utils/index.js @@ -0,0 +1,43 @@ +class utils { + genPage = text => { + let file = null; + const data = new Blob([text], { type: "text/md" }); + if (file !== null) { + window.URL.revokeObjectURL(file); + } + file = window.URL.createObjectURL(data); + return file; + }; + download = text => { + const url = this.genPage(text); + const el = document.createElement("a"); + el.href = url; + el.download = "Page.md"; + el.click(); + }; + selectText = (el, callback) => { + el = typeof el === "string" ? document.querySelector(el) : el; + let range; + if (document.selection) { + range = document.body.createTextRange(); + range.moveToElementText(el); + range.select(); + } else if (window.getSelection) { + range = document.createRange(); + range.selectNode(el); + window.getSelection().removeAllRanges(); + window.getSelection().addRange(range); + } + if(typeof callback === "function") { + callback(); + } + }; + copy = el => { + this.selectText(el, function() { + document.execCommand("copy"); + }); + }; +} + +const utils = new basicUtils(); +export default utils; diff --git a/client/src/pages/Home/Home.css b/client/src/pages/Home/Home.css index cc90030..ac9b518 100644 --- a/client/src/pages/Home/Home.css +++ b/client/src/pages/Home/Home.css @@ -3,7 +3,6 @@ flex: 1; flex-direction: row; height: 100vh; - } #leftContainer { display: flex; @@ -31,6 +30,16 @@ linear-gradient(rgba(0,0,0,.04) 2px, transparent 0); background-size: 100% 2em; } +#editorContainer { + display: flex; + flex: 1; + position: absolute; + width: 100%; + top: 75px; + left: 0; + right: 0; + bottom: 65px; +} #notesCardContainer { display: grid; width: 100%; @@ -39,6 +48,9 @@ justify-content: space-evenly; padding-bottom: 60px; } +.d-none { + display: none; +} /** Small devices (landscape phones, 576px and up) **/ @media (min-width: 576px) { @@ -56,6 +68,11 @@ /** Large devices (desktops, 992px and up) **/ @media (min-width: 992px) { + #editorContainer { + display: grid; + position: relative; + top: 0; + } #notesCardContainer { padding-bottom: 0; } diff --git a/client/src/pages/Home/Home.js b/client/src/pages/Home/Home.js index a7f7b2b..a6a6403 100644 --- a/client/src/pages/Home/Home.js +++ b/client/src/pages/Home/Home.js @@ -2,11 +2,78 @@ import React, { Component, Fragment } from "react"; import Navbar from "../../components/partial/Navbar/navbar.js"; import LeftMenu from "../../components/partial/LeftMenu/leftMenu"; import NoteCard from "../../components/NoteCard/noteCard"; +import Notepad from "../Notepad"; import "./Home.css"; class Home extends Component { + constructor(props) { + super(props); + this.state = { + hideCards: false, + showPad: false, + allData: [] + }; + } + + componentWillMount(){ + var _this = this; + var allData = []; + fetch(`http://localhost:8080/notes/`) + .then( function(response) { + return response.json(); + }) + .then( function(response) { + var res = response; + res.notes.map(eachRes => { + allData.push(eachRes); + }); + _this.setState({ allData: allData}); + }) + }; + + + isMobile = () => { + const width = window.innerWidth; + return width < 992; + }; + toggleView = showPad => { + this.setState({ + showPad, + hideCards: showPad === true ? this.isMobile() : false + }); + if (showPad === false) { + const ol = document.querySelector(".noteContainer.sel"); + if (ol) { + ol.classList.remove("sel"); + } + } + }; + updateNotepadValue = noteId => { + let newState = { showPad: true }; + if (this.isMobile()) { + newState.hideCards = true; + } + this.setState(newState); + }; + handleResize = () => { + this.setState(prv => ({ + hideCards: this.isMobile() ? !!prv.showPad : false + })); + }; + componentDidMount() { + window.addEventListener("resize", this.handleResize); + } + componentWillUnmount() { + window.removeEventListener("resize", this.handleResize); + } render() { + var notes = []; + console.log(this.state.allData); + this.state.allData.map(a => { + notes.push(); + }); + //console.log(notes); return ( @@ -15,14 +82,24 @@ class Home extends Component {
-
- - - - - - - +
+ +
+
+ {/* + + + + + + */} + {notes}
diff --git a/client/src/pages/Notepad/Notepad.css b/client/src/pages/Notepad/Notepad.css new file mode 100644 index 0000000..c74dd20 --- /dev/null +++ b/client/src/pages/Notepad/Notepad.css @@ -0,0 +1,92 @@ +@import "../../components/partial/themes/dark.css"; + +.editorInnerContainer { + display: flex; + flex: 1; + flex-direction: column; + background-color: var(--white-100); + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14); + border-radius: 5px; + margin-left: 20px; + margin-right: 20px; + padding-left: 10px; + padding-right: 10px; +} +.editorTop { + display: flex; + width: 100%; + margin-top: 10px; + margin-bottom: 15px; + border-bottom: 1px solid var(--warm-grey); +} +.title { + flex: 1; +} +.tools { + display: flex; + align-items: center; +} +.tools > a { + color: var(--warm-grey); + padding: 10px; +} +.tools > a:hover { + color: var(--black); +} +.title > input[type=text] { + width: 100%; + height: 50px; + font-size: 22px; + font-weight: 700; + line-height: 17px; + color: var(--black); + text-overflow: ellipsis; + border: none; +} +.editorBody { + display: flex; + flex: 1; +} +.editorBody > textarea { + width: 100%; + color: var(--brownish-grey); + height: inherit; + resize: none; + border: none; +} +.title > input[type=text]:disabled, .editorBody > textarea { + background-color: var(--white-100); +} +#download, #share { + display: none; +} +/** Small devices (landscape phones, 576px and up) **/ +@media (min-width: 576px) { +} + +/** Medium devices (tablets, 768px and up) **/ +@media (min-width: 768px) { +} + +/** Large devices (desktops, 992px and up) **/ +@media (min-width: 992px) { + .editorInnerContainer { + margin-left: 25px; + margin-right: 25px; + padding-left: 15px; + padding-right: 15px; + } + .editorBody > textarea { + height: 300px; + } + .tools > a { + padding: 12px; + } + #download, #share { + display: block; + } +} + +/** Extra large devices (large desktops, 1200px and up) **/ +@media (min-width: 1200px) { +} \ No newline at end of file diff --git a/client/src/pages/Notepad/Notepad.js b/client/src/pages/Notepad/Notepad.js new file mode 100644 index 0000000..e561d26 --- /dev/null +++ b/client/src/pages/Notepad/Notepad.js @@ -0,0 +1,85 @@ +import React, { Component, Fragment } from "react"; + +import "./Notepad.css"; + +class Notepad extends Component { + state = { + previewMode: true + }; + edit = e => { + e.preventDefault(); + if (this.state.previewMode) { + this.setState({ previewMode: false }, () => { + this.refs.notepad.focus(); + if (typeof this.refs.notepad.selectionStart === "number") { + this.refs.notepad.selectionStart = this.refs.notepad.selectionEnd = this.refs.notepad.value.length; + } else if (typeof this.refs.notepad.createTextRange !== "undefined") { + let range = this.refs.notepad.createTextRange(); + range.collapse(false); + range.select(); + } + }); + } + }; + goBack = e => { + e.preventDefault(); + this.props.toggleView(false); + }; + render() { + return ( + +
+
+
+ +
+ {this.state.previewMode ? ( + + ) : null} +
+
+