Human-Connection icon indicating copy to clipboard operation
Human-Connection copied to clipboard

πŸš€ [Feature] Explain Editor Icons with a hover/Mouseover

Open datenbrei opened this issue 6 years ago β€’ 11 comments

:rocket: Feature

Currently users don't know and have no explanation, what the menu items in the editor mean. Therefore it would be good, if the icons would be explained by a tooltip.

Design & Layout

Here is the current layout and nobody knows, what the single icons mean. editor

Additional context

The editor will also be explained in an FAQ.

datenbrei avatar Oct 18 '19 06:10 datenbrei

Should I give it a go?? Beginner here..

smapets avatar Dec 26 '19 21:12 smapets

@drowvoloper @smapets Thank you very much for your offer to work on this issue and sorry for waiting. I just found this issue as stale and reopened it because the feature is will welcomed by the users. I hope you're still interested in it and ask @Tirokk to contact you and provide you with further info.

Ideally, the tooltip includes the respective keyboard shortcut keys (Win/Mac) and the markdown (?), plus the text should be shown in the respective language.

I see two versions for this in the UI:

a) Show this info in a separate tooltip for each toolbar button like GitHub does it: hc-post-editor-toolbar-tooltip

b) Show a list of button icons, explanation (e.g. "bold"), keyboard shortcut, markdown - accessible by hovering/clicking a question mark aside of the toolbar.

First, we need to find answers to these questions:

  • Which one is better or is there another solution?
  • For version a: Should the markdown be included?

@Tirokk Let's discuss this at our next meeting.

sushidave avatar Jun 11 '20 20:06 sushidave

Okidoki @sushidave !

Tirokk avatar Jun 17 '20 13:06 Tirokk

@Tirokk Regarding the question which one would be better, a tooltip for each button OR the list, and if the markdown code should be displayed:

What do you think of this solution...

  1. Add a tooltip for each button showing the description and the keyboard shortcut (if existing), like on GitHub. Example: "Add italic text <Ctrl+i>" resp. "Add italic text <cmd+i>"), depending on the OS. Displaying the tooltips should be triggered by "click" or for touchscreens by "touch and hold".
  2. Show an explanation of the function, keyboard shortcut and markdown in a popup, similar to the list in this FAQ. The popup should be displayed if the mouse pointer hovers over the question mark icon next to the toolbar. On touchscreens the popup should be triggered by "touch".

These two features can be implement independantly. If you are in favour of this solution I would create a new issue for the second feature.

sushidave avatar Jun 22 '20 09:06 sushidave

Yes, @sushidave . This sound suitable. πŸ‘πŸΌ

Tirokk avatar Jun 24 '20 12:06 Tirokk

@Tirokk Thank you. Issue #3673 created to cover the explanation (legend).

So, the markdown part won't be covered by this issue here. Please advise @drowvoloper and @smapets how to proceed. Thanks.

sushidave avatar Jun 24 '20 13:06 sushidave

At the moment I haven’t the role or rights here to give anyone permissions. Hope this will change soon … @sushidave

Tirokk avatar Jul 08 '20 06:07 Tirokk

Hi @Tirokk @sushidave! 🐨 I'm new to contributing to open source projects and really interested in your project. I'd love to take a crack at this issue if that's OK?

I'm going through the contribution guidelines, and noticed the discord invite links seem to be expired - is there an updated link somewhere?

heysivani avatar Nov 27 '20 01:11 heysivani

γŠγ―γ‚ˆγ†γ”γ–γ„γΎγ™ @heysivani -san (-: Welcome to this project and thanks very much for your readiness to contribute! This repository has been discontinued and development goes on on its fork called Ocelot.Social. This issue has been copied there and it looks as if another contributor is working on it already. @Tirokk will provide you with an invitation to join the current communication channels of the developers, so that you can find a good alternative together.

sushidave avatar Nov 27 '20 09:11 sushidave

@sushidave γŠγ―γ‚ˆγ† again! Thank you for letting me know, I'll head over to the new fork and have a look at what I can do :)

heysivani avatar Dec 04 '20 00:12 heysivani

@heysivani γ©γ©γ†γŸγ—γΎγ—γΎγ¦ and see you there (-:

sushidave avatar Dec 07 '20 16:12 sushidave