search

codu-code / codu

Codú's open-source codebase. A space for coders. Visit our community!
https://codu.co/
Apache License 2.0
141 stars 145 forks source link

Modify tooltip on alpha editor #1195

Closed John-Paul-Larkin closed 3 weeks ago

John-Paul-Larkin commented 3 weeks ago

Context

We had a detailed discussion about this on Stream https://www.twitch.tv/videos/2287459683 - starting from 01:04:00

Expected Behavior

Expected behaviour for this tooltip is as follows: Block level modifiers should be to the left in a dropdown, to include: Heading, Subheading, Text, Quote

A dividing line should be in the center.

Inline level modifiers should be to the right, to include: Bold, Italic, Hyperlink

Note the Horizontal rule is not required on the tooltip.

Screenshots

Tootltip

Additional info

The alpha editor can be found at :

app>(app)>alpha>new

Any questions feel free to ask.

dineshsutihar commented 3 weeks ago

Can you assign it to me? @John-Paul-Larkin

dineshsutihar commented 3 weeks ago

Expected Behavior

Expected behaviour for this tooltip is as follows: Block level modifiers should be to the left in a dropdown, to include: Heading, Subheading, Text, Quote

A dividing line should be in the center.

Inline level modifiers should be to the right, to include: Bold, Italic, Hyperlink

What about the other options? Should I remove them? @John-Paul-Larkin Tooltip Dropdown old image

John-Paul-Larkin commented 3 weeks ago

Hi @dineshsutihar Yes please remove the extra options. Leave : Heading, Subheading, Text, Quote

The other options will be included on the slash menu.

dineshsutihar commented 3 weeks ago

Hi @John-Paul-Larkin, could you take a look at this? Let me know if any changes are required. tooltip normal

tooltip image with active state

github-actions[bot] commented 3 weeks ago

Uh oh! @dineshsutihar, the image you shared is missing helpful alt text. Check https://github.com/codu-code/codu/issues/1195#issuecomment-2446920531.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

John-Paul-Larkin commented 3 weeks ago

This look great to me, but please wait for @NiallJoeMaher to agree, since we do not want any further confusion. Thanks @dineshsutihar

dineshsutihar commented 3 weeks ago

I've created a draft PR so that you and @NiallJoeMaher can review both the code and design 🖥️✨. Hopefully, this makes it easier to do a more in-depth review 🔍. Let me know if any changes are needed!