This is a contribution to this task request by @surpassinggoogle. This adds the quick post editor for Ulog Stories.
1. Repository
https://github.com/surpassinggoogle/UlogsV2
2. Task Request/Issue
@surpassinggoogle/task-request-we-modified-our-task-request-to-add-core-features-and-communities-to-ulogs-org-simplifying-the-1-5-task-drastically
https://github.com/surpassinggoogle/UlogsV2/issues/185
3. Pull Requests
https://github.com/surpassinggoogle/UlogsV2/pull/241
4. Testing
These were the tests manually done in Chrome:
- Click the Add A Ulog-Story button on the right side panel
- the Quick Ulog Story Editor modal should display
- the #ulog subtag dropdown should display between the upload photo icon and the "Post" button
- Write content then select a #ulog subtag from the dropdown
- post should successfully published
- user should be redirected to the post upon publish
- post's first tag should be #ulog
- post's second tag should be the selected subtag
5. Implementation
src/client/components/Sidebar/UlogStories.js
- added theUlogStoryEditor
component to modal
src/client/components/UlogStoryEditor/UlogStoryEditor.js
- the main Ulog Story Editor component
src/client/components/UlogStoryEditor/UlogStoryEditorFooter.js
- footer for ulog story editor; contains the ulog-subtag dropdown
src/client/components/UlogStoryEditor/UlogStoryEditor.less
- style sheet for ulog story editor
src/client/components/UlogStoryEditor/UlogStoryEditor-nightmode.less
- night-mode style sheet for ulog story editor
6. Feature in Action
7. Lesson Learned
One of the issues I encountered while doing this was that the dropdown options were not displaying when I clicked on the ulog-subtag dropdown. I was able to investigate the cause using Chrome's developer console and element inspector and eventually found out that it's related with the dropdown's z-index
which was set around 1000+.
I was able to resolve this by overriding the .ant-select-dropdown
style.
8. GitHub Account
This post was made from https://ulogs.org