From 6a30fc319895efefc097ef0634f77c67ad1db7a3 Mon Sep 17 00:00:00 2001 From: misterrager8 Date: Tue, 7 Mar 2023 14:12:42 -0500 Subject: [PATCH] v3.9.5 (New UI w horizontal nav) --- .gitignore | 2 +- mdlab/static/{index.css => App.css} | 8 +- mdlab/static/App.jsx | 419 +++++++++------------------- mdlab/templates/index.html | 2 +- setup.py | 2 +- 5 files changed, 142 insertions(+), 291 deletions(-) rename mdlab/static/{index.css => App.css} (87%) diff --git a/.gitignore b/.gitignore index 5d926f8..c9d7d3e 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,4 @@ MarkdownLab.egg-info/ *.pyc .DS_Store -todos.json +todos.txt diff --git a/mdlab/static/index.css b/mdlab/static/App.css similarity index 87% rename from mdlab/static/index.css rename to mdlab/static/App.css index a30c418..774f48d 100644 --- a/mdlab/static/index.css +++ b/mdlab/static/App.css @@ -28,12 +28,12 @@ html[data-theme='mint'] { --primary-txt: #00382a; } -body, .form-control, .form-control:focus, .dropdown-item, .dropdown-menu, .btn-outline-secondary, .modal-content { +body, nav, .form-control, .form-control:focus, .dropdown-item, .dropdown-menu, .btn-outline-secondary, .modal-content { background-color: var(--primary-bg); color: var(--primary-txt); } -.btn-outline-secondary:hover, .dropdown-toggle.show, .selected, .btn.active { +.btn-outline-secondary:hover, .dropdown-toggle.show, .selected, .btn.active, .dropdown-item:hover, .dropdown-item.active { background-color: var(--primary-txt) !important; border-color: var(--primary-txt) !important; color: var(--primary-bg) !important; @@ -98,3 +98,7 @@ div#note-reader code { .selected { border-radius: 3px; } + +.text-secondary { + color: var(--primary-txt) !important; +} diff --git a/mdlab/static/App.jsx b/mdlab/static/App.jsx index 9fceabb..b85bd19 100644 --- a/mdlab/static/App.jsx +++ b/mdlab/static/App.jsx @@ -1,134 +1,71 @@ -var beforeSel; -var afterSel; - -function Navbar(props) { - const [theme, setTheme] = React.useState(localStorage.getItem('MarkdownLab')); - - const changeTheme = (theme_) => { - localStorage.setItem('MarkdownLab', theme_); - document.documentElement.setAttribute('data-theme', theme_); - setTheme(theme_); - } - - React.useEffect(() => { - changeTheme(theme); - }, []); - - return ( -
-
- props.fn()} className="btn btn-outline-secondary"> - {theme} - - About -
-
- ); -} - -function FolderItem(props) { - return ( -
- props.fn(props.folder.name)}>{props.folder.name} -
- ); -} - -function NoteItem(props) { - return ( -
- props.fn(props.note.folder, props.note.name)}>{props.note.stem} -
{props.note.last_modified}
-
- ); -} - function App() { - const [showFolders, setShowFolders] = React.useState(localStorage.getItem('show-folders')==='true'); - const [loading, setLoading] = React.useState(false); - const [folders, setFolders] = React.useState([]); - const [folder, setFolder] = React.useState([]); + const [currentFolder, setCurrentFolder] = React.useState([]); - const [note, setNote] = React.useState([]); const [notes, setNotes] = React.useState([]); + const [currentNote, setCurrentNote] = React.useState([]); - const [deletingNote, setDeletingNote] = React.useState(false); - const [deletingFolder, setDeletingFolder] = React.useState(false); + const [loading, setLoading] = React.useState(false); + const [deleting, setDeleting] = React.useState(false); const [saved, setSaved] = React.useState(false); const [mode, setMode] = React.useState('view'); - const exitAll = () => { - setFolder([]); - setNote([]); - } + const [theme, setTheme] = React.useState(localStorage.getItem('MarkdownLab')); - const getFolders = () => { - setLoading(true); - $.get('/get_folders', function(data) { - setFolders(data.folders); - setLoading(false); - }); + const changeTheme = (theme_) => { + localStorage.setItem('MarkdownLab', theme_); + document.documentElement.setAttribute('data-theme', theme_); + setTheme(theme_); } - const getFavorites = () => { - setFolder([]); + const createFolder = () => { setLoading(true); - $.get('/get_favorites', function(data) { - setNotes(data.favs); + $.get('/create_folder', function(data) { + setCurrentFolder(data); + setNotes(data.notes); + getFolders(); setLoading(false); }); } - const getAll = () => { - setFolder([]); + const getFolder = (name) => { setLoading(true); - $.get('/get_all_notes', function(data) { + $.get('/get_folder', { + name: name + }, function(data) { + setCurrentFolder(data); setNotes(data.notes); setLoading(false); }); } - const createFolder = () => { + const getFolders = () => { setLoading(true); - $.get('/create_folder', function(data) { - setFolder(data); - setNote([]); - getFolders(); + $.get('/get_folders', function(data) { + setFolders(data.folders); setLoading(false); - setTimeout(function(){$('#folder-name').select();}, 250); }); } - const getFolder = (name) => { + const getFavorites = () => { setLoading(true); - $.get('/get_folder', { - name: name - }, function(data) { - setFolder(data); - setNote([]); - localStorage.setItem('last-folder-opened', data.name); + $.get('/get_favorites', function(data) { + currentFolder.name !== 'Favorites' && setCurrentFolder({name : 'Favorites'}); + setNotes(data.favs); setLoading(false); }); } const renameFolder = (e) => { - setLoading(true); e.preventDefault(); + setLoading(true); $.post('/rename_folder', { - folder: folder.name, + folder: currentFolder.name, new_name: $('#folder-name').val() }, function(data) { getFolders(); - setFolder(data); + getFolder(data.name); setLoading(false); }); } @@ -136,10 +73,9 @@ function App() { const deleteFolder = () => { setLoading(true); $.get('/delete_folder', { - name: folder.name + name: currentFolder.name, }, function(data) { - setFolder([]); - setDeletingFolder(false); + setCurrentFolder([]); getFolders(); setLoading(false); }); @@ -148,28 +84,22 @@ function App() { const createNote = () => { setLoading(true); $.get('/create_note', { - folder: folder.name + folder: currentFolder.name }, function(data) { - setNote(data.note); - setFolder(data.folder); - setMode('edit'); + setCurrentNote(data.note); setLoading(false); - setTimeout(function(){$('#note-name').select();}, 250); }); - } + } const saveNote = (e) => { e.preventDefault(); + setLoading(true); $.post('/save_note', { - folder: folder.name, - url: $('#url').val() + folder: currentFolder.name, + url: $('#page-url').val() }, function(data) { - setNote(data.note); - setFolder(data.folder); - setMode('edit'); + setCurrentNote(data.note); setLoading(false); - $('#save-note').modal('toggle'); - setTimeout(function(){$('#note-name').select();}, 250); }); } @@ -179,231 +109,148 @@ function App() { folder: folder, name: name }, function(data) { - setNote(data); + setCurrentNote(data); setLoading(false); }); } - const editNote = () => { - setLoading(true); - $.post('/edit_note', { - folder: note.folder, - name: note.name, - content: $('#content').val() - }, function(data) { - setNote(data); - setSaved(true); - setLoading(false); - setTimeout(function() { setSaved(false); }, 1500); - }); - } - - const searchNotes = (e) => { + const renameNote = (e) => { e.preventDefault(); setLoading(true); - setFolder([]); - $.post('/search', { - query: $('#query').val() + $.post('/rename_note', { + folder: currentNote.folder, + name: currentNote.name, + new_name: $('#note-name').val() }, function(data) { - setNotes(data.results); + getFolder(data.folder.name); + setTimeout(function() { getNote(data.note.folder, data.note.name); }, 250); setLoading(false); }); } - const renameNote = (e) => { + const editNote = () => { setLoading(true); - e.preventDefault(); - $.post('/rename_note', { - folder: note.folder, - name: note.name, - new_name: $('#note-name').val() + $.post('/edit_note', { + folder: currentNote.folder, + name: currentNote.name, + content: $('#content').val() }, function(data) { - setNote(data.note); - setFolder(data.folder); + getNote(currentNote.folder, currentNote.name); setLoading(false); + setSaved(true); + setTimeout(function() { setSaved(false); }, 1500); }); } const toggleFavorite = () => { setLoading(true); $.get('/toggle_favorite', { - folder: note.folder, - name: note.name + folder: currentNote.folder, + name: currentNote.name }, function(data) { - getNote(note.folder, note.name); + getNote(currentNote.folder, currentNote.name); + currentFolder.name === 'Favorites' && getFavorites(); setLoading(false); }); } - + const deleteNote = () => { setLoading(true); $.get('/delete_note', { - folder: note.folder, - name: note.name + folder: currentNote.folder, + name: currentNote.name }, function(data) { - getFolder(note.folder); - setDeletingNote(false); + getFolder(currentFolder.name); + setDeleting(false); setLoading(false); }); } - const getSelection = (event) => { - var sel = $('#content').val().substring(event.currentTarget.selectionStart, event.currentTarget.selectionEnd); - beforeSel = $('#content').val().substring(0, event.currentTarget.selectionStart); - afterSel = $('#content').val().substring(event.currentTarget.selectionEnd); - $('#format').val(sel); - } - - const formatText = (type_) => { - var mid = $('#format').val(); - switch (type_) { - case 'bold': - var newMid = `${beforeSel}**${mid}**${afterSel}`; - break; - case 'italic': - var newMid = `${beforeSel}*${mid}*${afterSel}`; - break; - case 'link': - var newMid = `${beforeSel}[${mid}](url)${afterSel}`; - break; - case 'heading': - var newMid = `${beforeSel}

${mid}

${afterSel}`; - break; - case 'numlist': - var newMid = `${beforeSel}\n1. ${mid}\n${afterSel}`; - break; - case 'bullist': - var newMid = `${beforeSel}\n- ${mid}\n${afterSel}`; - break; - case 'time': - var newMid = `${beforeSel}${new Date().toLocaleString()}${afterSel}`; - break; - case 'image': - var newMid = `${beforeSel}![${mid}](url)${afterSel}`; - break; - case 'capitalize': - var newMid = `${beforeSel}${mid.toUpperCase()}${afterSel}`; - break; - case 'hrule': - var newMid = `${beforeSel}\n---\n${afterSel}`; - break; - case 'highlight': - var newMid = `${beforeSel}${mid}${afterSel}`; - break; - case 'code': - var newMid = `${beforeSel}\n ${afterSel}`; - } - $('#content').val(newMid); - $('#content').trigger('change'); - } - React.useEffect(() => { + changeTheme(theme); getFolders(); - getFolder(localStorage.getItem('last-folder-opened')); }, []); React.useEffect(() => { - setNotes(folder.notes ? folder.notes : []); - }, [folder]); - - React.useEffect(() => { - localStorage.setItem('show-folders', showFolders ? 'true' : 'false'); - }, [showFolders]); + setCurrentNote([]); + }, [currentFolder]); return (
- -
- {loading && } - setShowFolders(!showFolders)} > {(showFolders ? 'Hide ' : 'Show ') + 'Folders'} - {folder.length !== 0 && ( New)} - - -
-
-
-
saveNote(e)}> - -
-
-
-
- {note.length !== 0 && toggleFavorite()} className={'btn btn-' + (!note.favorited ? 'outline-' : '') + 'warning'}> {'Favorite' + (note.favorited ? 'd' : '')}} - {note.length !== 0 && setDeletingNote(!deletingNote)} className="btn btn-outline-danger"> Delete Note} - {(note.length !== 0 && deletingNote) && deleteNote()} className="btn text-danger">Delete?} -
-
- {(folders.length !== 0 && showFolders) && -
- -
searchNotes(e)} className="input-group input-group-sm my-3"> - - -
-
- getAll()}> All Notes +
} -
- {folder.length !== 0 && -
-
renameFolder(e)} className="input-group"> - - -
-
} - {notes.map((x, id) => )} - {folder.length !== 0 && - } + {currentFolder.length === 0 ? 'Select Folder' : currentFolder.name} + - {note.length !== 0 && -
-
Last Modified: {note.last_modified}
-
renameNote(e)}>
-
- - setMode('view')} className={'btn btn-outline-secondary' + (mode === 'view' ? ' active' : '')}> View - setMode('edit')} className={'btn btn-outline-secondary' + (mode === 'edit' ? ' active' : '')}> Edit - + {currentFolder.length !== 0 && + + + {currentNote.length === 0 ? 'Select Note' : currentNote.stem} + + + } + + {currentNote.length !== 0 && +
+
renameNote(e)}>
+
Last Modified: {currentNote.last_modified}
+
+ {mode === 'edit' && - - editNote()} className="btn btn-outline-success"> - formatText('bold')} className="btn btn-outline-secondary"> - formatText('italic')} className="btn btn-outline-secondary"> - formatText('numlist')} className="btn btn-outline-secondary"> - formatText('bullist')} className="btn btn-outline-secondary"> - formatText('link')} className="btn btn-outline-secondary"> - formatText('capitalize')} className="btn btn-outline-secondary"> - formatText('heading')} className="btn btn-outline-secondary"> - formatText('code')} className="btn btn-outline-secondary"> - formatText('time')} className="btn btn-outline-secondary"> - formatText('image')} className="btn btn-outline-secondary"> - formatText('hrule')} className="btn btn-outline-secondary"> - formatText('highlight')} className="btn btn-outline-secondary"> - } + + editNote()}> + + + + + + + + + + + + + }
{mode === 'view' ? ( -
+
) : ( -
- - -
+ )} -
} -
+
+ }
); } diff --git a/mdlab/templates/index.html b/mdlab/templates/index.html index bbdcc65..18f8def 100644 --- a/mdlab/templates/index.html +++ b/mdlab/templates/index.html @@ -7,7 +7,7 @@ - + Markdown Lab diff --git a/setup.py b/setup.py index 300ffc8..8cb4d89 100644 --- a/setup.py +++ b/setup.py @@ -2,7 +2,7 @@ setuptools.setup( name="MarkdownLab", - version="3.9.0", + version="3.9.5", entry_points={"console_scripts": ["mdlab=mdlab.__main__:cli"]}, long_description=open("README.md").read(), license=open("LICENSE.md").read(),