From b02a0a2ef48987e561bc292d3b2e98d6ad2bfb92 Mon Sep 17 00:00:00 2001 From: piotrruss Date: Wed, 18 Aug 2021 19:34:37 +0200 Subject: splash screens, export note --- apps/Notes/Notes.module.scss | 47 ++++++++++++++++++++++++++++++++++----- apps/Notes/components/Actions.js | 2 +- apps/Notes/components/List.js | 7 +++--- apps/Notes/components/ListItem.js | 11 ++++++--- apps/Notes/components/NoteView.js | 9 ++++---- apps/Notes/components/Splash.js | 13 +++++++++++ apps/Notes/helpers/noteActions.js | 15 +++++++++++++ 7 files changed, 88 insertions(+), 16 deletions(-) create mode 100644 apps/Notes/components/Splash.js (limited to 'apps') diff --git a/apps/Notes/Notes.module.scss b/apps/Notes/Notes.module.scss index e91dab9..babffa2 100644 --- a/apps/Notes/Notes.module.scss +++ b/apps/Notes/Notes.module.scss @@ -57,9 +57,8 @@ flex-grow: 1; } - & > span:nth-child(2), - & > span:nth-child(3) { - margin-left: .5em; + & > span:nth-child(n+2){ + margin-left: .25em; padding: .15em .5em; line-height: 1em; border-radius: 50%; @@ -76,8 +75,7 @@ border-radius: .5em; cursor: pointer; - & > td:first-of-type > span:nth-child(2), - & > td:first-of-type > span:nth-child(3) { + & > td:first-of-type > span:nth-child(n+2){ color: #666; visibility: visible; opacity: 1; @@ -91,6 +89,11 @@ } & > td:first-of-type > span:nth-child(3):hover { + background-color: #ffffde; + color: #333; + } + + & > td:first-of-type > span:nth-child(4):hover { background-color: #ffdede; color: #333; } @@ -229,3 +232,37 @@ } } +.loader, +.connection { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + flex-direction: column; + + @keyframes rotating { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + svg { + font-size: 600%; + color: #ccc; + } + + p { + padding-top: 1em; + color: #ccc; + font-weight: 600; + } +} + +.loader { + svg { + animation: rotating 1s linear infinite; + } +} diff --git a/apps/Notes/components/Actions.js b/apps/Notes/components/Actions.js index 7f60ffa..8f08103 100644 --- a/apps/Notes/components/Actions.js +++ b/apps/Notes/components/Actions.js @@ -26,7 +26,7 @@ const Actions = ({ fetchedNote={fetchedNote} /> ) - case 'import': return ( + case 'importNote': return ( { const [fetchedNote, setFetchedNote] = useState() @@ -17,10 +18,10 @@ const List = () => { redirectToVerify: true, }) - if (error) return

Failed to fetch notes

+ if (error) return if (!user || !user.isLoggedIn || !user.isVerified || !notes || !sortFn) { - return

Loading...

+ return } return ( @@ -30,7 +31,7 @@ const List = () => { <>
setAction('addNote')}>New note
-
setAction('import')}>Import
+
setAction('importNote')}>Import
{}}>Export
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js index 5d3b91f..47dea3b 100644 --- a/apps/Notes/components/ListItem.js +++ b/apps/Notes/components/ListItem.js @@ -1,10 +1,10 @@ import styles from '../Notes.module.scss' import React, { useContext } from 'react' import fetchJson from 'lib/fetchJson' -import {getNote, removeNote} from '../helpers/noteActions.js' +import {getNote, exportNote, removeNote} from '../helpers/noteActions.js' import useNotes from '../hooks/useNotes' import Context from 'context'; -import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons' +import { faEdit, faDownload, faTrash } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' const datestring = date => { @@ -34,7 +34,12 @@ const ListItem = ({note, setAction, setFetchedNote}) => { removeNote(e, note._id, mutateNotes, setPopup, setAction)} + onClick={e => {e.stopPropagation(); exportNote(note)}} + > + + + removeNote(e, note._id, mutateNotes, setPopup, setAction)} > diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js index 7d93b16..14ec045 100644 --- a/apps/Notes/components/NoteView.js +++ b/apps/Notes/components/NoteView.js @@ -2,7 +2,7 @@ import styles from '../Notes.module.scss' import React, {useContext} from 'react'; import Context from 'context'; import useNotes from '../hooks/useNotes' -import {removeNote} from '../helpers/noteActions.js' +import {removeNote, exportNote} from '../helpers/noteActions.js' import copyToClipboard from '../helpers/copyToClipboard.js' const NoteView = ({fetchedNote, setFetchedNote, setAction}) => { @@ -20,10 +20,11 @@ const NoteView = ({fetchedNote, setFetchedNote, setAction}) => { return (
-
{ setFetchedNote(); setAction('') }}>Back
+
{setFetchedNote(); setAction('')}}>Back
copyToClipboard(content, setPopup)}>Copy
-
{ setAction('editNote')}}>Edit
-
{ removeNote(e, _id, mutateNotes, setPopup, setAction) }}>Remove
+
{setAction('editNote')}}>Edit
+
exportNote(fetchedNote)}>Export
+
{removeNote(e, _id, mutateNotes, setPopup, setAction)}}>Remove
diff --git a/apps/Notes/components/Splash.js b/apps/Notes/components/Splash.js new file mode 100644 index 0000000..bc52e1b --- /dev/null +++ b/apps/Notes/components/Splash.js @@ -0,0 +1,13 @@ +import styles from '../Notes.module.scss' +import React from 'react' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faBan, faSpinner } from '@fortawesome/free-solid-svg-icons' + +const Splash = ({type}) => ( +
+ +

{type === 'connection' ? 'No connection' : 'Loading...'}

+
+) + +export default Splash diff --git a/apps/Notes/helpers/noteActions.js b/apps/Notes/helpers/noteActions.js index c296c97..f90e1c7 100644 --- a/apps/Notes/helpers/noteActions.js +++ b/apps/Notes/helpers/noteActions.js @@ -102,3 +102,18 @@ export const removeNote = (e, _id, mutateNotes, setPopup, setAction) => { }) } +export const exportNote = async note => { + const {title} = note + const {content} = note.content + ? note + : await fetchJson(`/api/note/${note.noteId}`) + + const a = document.createElement('a'); + const file = new Blob([content], {type: 'text/plain'}); + + a.href= URL.createObjectURL(file); + a.download = title.toLowerCase().replaceAll(' ', '-')+'.txt'; + a.click(); + + URL.revokeObjectURL(a.href); +} -- cgit v1.2.3