project-whiteboard
Description: A tool to help manage, organize and showcase projects.
Resources
Initial project design
Initial brainstorm of designing the project. The main tabs and the directory structure I initially wanted to implement are shown here.
Timeline and info pages design
I wanted a sticky panel in the info page where users can append bodies of text and resource images. The timeline page needed buttons to change how much the project has progressed, along with deleting the milestones.
Publishing feature design
This shows the logic behind the publishing feature. Using a base html template, a script will fill the data with the currently opened project, and jQuery will fetch the current html state to be written in a file; which will be zipped with its resources. The resulting zip file is the published project.
Timeline
- 1
- 2
- 3
- 4
Project started
6/13/2019Develop project
6/24/2019Finish README
TBDShow published project on GitHub Pages
TBDTasks
| Task | Status |
|---|---|
Fully implement tasks page: adding, editing and deleting tasks | |
Implement edit issue desc and deleting issues | |
Implement full functionality of info page: adding text, img, etc. | |
Implement full functionality of timeline page: adding/inserting milestones, edit and delete | |
Implement full functionality of resources page: adding resource images, deleting them, editing their desc | |
Implement publishing projects, as in generating static html to showcase entire project | |
Style everything | |
Implement prompt for exiting without saving | |
Implement date published in published projects | |
Migrate from local dir as save data to user AppData as save data dir | |
Implement deleting projects | |
Customize the home page more |
Issues
Closing the main window with unsaved changes results in losing those changes. remote.getCurrentWindow().on('close', ...) does not work as documented in Electron.
image orientation is not honored when adding resources
Resource description in publish preview page does not wrap when long enough, need to restyle to make it nicer visually.
Restyle the text elements in info body in publish preview page. When text is long, can span all across page; not so nice visually.
After publishing a project, the resulting index.html file has a title that is still appended with "publish preview".
Archive
Title: publishing feature
Description: Figure out how to implement the publishing feature, snapshot of html page with webContents.capturePage() ? or new browser window to show prev, confirm, etc.
Solution: Spawn a new window with base html code, use webContents.executeJavaScript() to fill page with project data, then use jQuery to fetch the html string of the entire page, storing it in a new file to be zipped. Went with show preview and have user press publish button at bottom to confirm.
Date: 6/21/2019
Title: linking imgs in published html
Description: can maybe use https://www.npmjs.com/package/archiver to generate zip file with published html and res/ folder containing imgs
Solution: same as description; used archiver to zip the processed html file with a res directory containing the resources.
Date: 6/21/2019
Title: disallow draggable imgs in res and info pages
Description: imgs can be dragged as in transparent copy of img following cursor; typically indicating copying img to target location on drop
Solution: Simply set their css pointer-events to none.
Date: 6/21/2019
Title: prompting for save before exit
Description: can click home while unsaved changes exist, resulting in losing those changes
Solution: implement a func to show dialog to confirm the user's intentions; using dialog.showMessageBox()
Date: 6/22/2019
Title: file paths broken in distribution
Description: after packaging with --asar option, file paths are broken
Solution: Instead of having save data in dir local to project dir, store them in appData using app.getPath('userData').
Date: 6/23/2019
Title: unfocusable new project title input box
Description: If there are no projects detected in the projects dir, after clicking ok in the error message box, the new project title input box is unfocusable.
Solution: Instead of using alert(), use dialog.showMessageBox()
Date: 6/24/2019