ULOG #23: Adding the Ulog-Stories Quick Post Editor

in #ulog5 years ago

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

https://steemit.com/utopian-io/@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:

  1. 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
  2. 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

  1. src/client/components/Sidebar/UlogStories.js - added the UlogStoryEditor component to modal
    image.png
  2. src/client/components/UlogStoryEditor/UlogStoryEditor.js - the main Ulog Story Editor component
    image.png
  3. src/client/components/UlogStoryEditor/UlogStoryEditorFooter.js - footer for ulog story editor; contains the ulog-subtag dropdown
    image.png
  4. src/client/components/UlogStoryEditor/UlogStoryEditor.less - style sheet for ulog story editor
    image.png
  5. src/client/components/UlogStoryEditor/UlogStoryEditor-nightmode.less - night-mode style sheet for ulog story editor
    image.png

6. Feature in Action

ulog-quick-post-editor.gif

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.

image.png

8. GitHub Account

https://github.com/eastmaels

This post was made from https://ulogs.org

Sort:  

Thank you for your contribution. I love reading your post and it always of high quality. The only thing is missing I guess is why uLog Stories is needed when you have a normal editor, it would be nice to include that. The code is of high quality, the comments are proper and the commit messages are concise.


If you need any clarification about the given score, please ask.


Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

Thank you for the feedback @codingdefined. Although I have an idea on why this feature is being requested by @surpassinggoogle, I think it's best for him to provide the reason being the project owner.

Posted using Partiko Android

Thank you for your review, @codingdefined! Keep up the good work!

Hi @eastmael!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @eastmael!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.29
TRX 0.12
JST 0.035
BTC 65916.61
ETH 3431.41
USDT 1.00
SBD 4.66