search

decidim-archive / design

⚠️ [DEPRECATED] Design of the Decidim framework
1 stars 3 forks source link

Visualize autocomplete for tags and mentions #179

Closed javierarce closed 6 years ago

javierarce commented 6 years ago

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.

tags

Edit 30/01/18: this design is deprecated with the hasthag autocomplete: See https://github.com/decidim/decidim/issues/2458

javierarce commented 6 years ago

@xabier by "mention" in this context you mean writing down the name of another user of the platform, right?

xabier commented 6 years ago

@javierarce

@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

javierarce commented 6 years ago

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:

mentions

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.

javierarce commented 6 years ago

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.

javierarce commented 6 years ago

@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?

arnaumonty commented 6 years ago

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.

javierarce commented 6 years ago

Thanks, @arnaumonty!

Yes, this is the expected behaviour.

Great!

javierarce commented 6 years ago

Regarding my previous comment about the placement of the usernames list… I'm probably going to change the design based on my work for https://github.com/decidim/decidim/issues/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.

javierarce commented 6 years ago

Ok, as I mentioned earlier, and based on the UI of https://github.com/decidim/decidim/issues/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:

mentions 2nd version