Visualize autocomplete for tags and mentions
javierarce opened this issue · comments
Here's the proposed solution for the tags: users write words and whenever they write a comma, the previous words becomes a tag. The input field can grow and shrink depending of its content.
Edit 30/01/18: this design is deprecated with the hasthag autocomplete: See decidim/decidim#2458
@xabier by "mention" in this context you mean writing down the name of another user of the platform, right?
@xabier by "mention" in this context you mean writing down the name of another user of the platform, right?
Yes, like Twitter or Github does
Ok, I've reviewed several approaches to displaying the mention interface (GitHub, Facebook, Dribbble, Twitter…) and I prefer the one from GitHub.
The main difference between all of them is the placement of the tooltip with the usernames. GitHub places the tooltip next to the @ symbol (which I find more natural), whereas the other three put the box after the text box (probably easier to code).
Here's my solution:
https://marvelapp.com/138c34jg/screen/37856856
As an added benefit, we can use the same design of the tooltip for the interface of the hashtag selector.
BTW, could someone put this ticket in the "In design" column of the main waffle board? I'm not sure I can do it myself.
@decidim/product after some publishes a text with a mention, should the username be highlighted and transformed in a link? Do we have (or plan to have) public profiles for users?
BTW, could someone put this ticket in the "In design" column of the main waffle board? I'm not sure I can do it myself.
Done it!
@decidim/product after some publishes a text with a mention, should the username be highlighted and transformed into a link? Do we have (or plan to have) public profiles for users?
Yes, this is the expected behaviour.
Regarding my previous comment about the placement of the usernames list… I'm probably going to change the design based on my work for decidim/decidim#2348. I just learn today about this issue, and I think it makes sense to use the same solution for both cases, even if one is meant for admins and the other one for users.
Stay tuned for a little adjustment of the mention autocomplete.
Ok, as I mentioned earlier, and based on the UI of decidim/decidim#2348, I decided to review this design so we have similar interfaces.
In this version the tooltip is always fixed to the bottom of the input or textarea and grows in width to adapt itself to the width of the field.
Something I didn't mention is that the up and down arrows, and the enter key could be used to select an item of the list:
