New UI for dropdowns - GitLab SeaHorse

GitLAb Design System - SeaHorse Edition / Components / Menus

Redesign of dropdown UI Component

This is master issue that should also solve:

• #2836 (closed)
• #2574 (closed)
• #989 (closed)

Milestone changed to 8.2

@dzaporozhets please review https://gitlab.com/gitlab-org/gitlab-design/commit/e6a4ab5d08f790748a85ead0d9baa8664ae33da3 for sources. UI is final for all cases.

Reassigned to @dzaporozhets

mentioned in issue #989 (closed)

mentioned in issue #2836 (closed)

mentioned in issue #2574 (closed)

@creamzy wow that looks AMAZING!

@rspeicher @DouweM @vsizov who is interested in implementing this awesome control? I think it would require a lot of javascript coding.

We use Select2 library for dropdown. We can either extend it or write from scratch depends on what is easier.

@dzaporozhets I will check , thanks

I unassign it from me because I am not working on implementing it. This issue need a volunteer who will implement this awesome control

Assignee removed

Added ~32010 label

Feature request in #3360 (closed) will require this new dropdown UI.

Related to this one instead - #2785 (closed)

@creamzy We may want to remove the awaiting developer action label. Usually this label is used to mark merge requests where we have reviewed and are waiting for the developer to fix something. I think you're wanting a developer to actually pick this up?

@dblessing oh, sorry! I will not use it anymore not to confuse devs with my request. Thanks for explaining

@dblessing oh, sorry! I will not use it anymore not to confuse devs with my request. Thanks for explaining

Might be worth to take a look to selectize: http://brianreavis.github.io/selectize.js/

It's usually considered more extensible than select2.

Added frontend and removed ~32010 ~19492 labels

Milestone removed

Did this issue die? Whats the status?

@erikdonohoo not really, we have some minor changes/preparations that block it for this milestone, but we surely try to implement it as soon as we have manpower.

Reassigned to @jschatz1

I've created a jQuery plugin based off of the bootstrap dropdown as per the mockups. It has options for all the things in the mockup. I've tested it with 1000 items and it searches fast. It adds hidden input elements to the form in which it is contained with the name of the dropdown. It is customizable per the data that needs to be fed to it. Here is a animated GIF. I'll work on implementing it into gitlab.

cc @creamzy @skyruler @JobV

Looks great @jschatz1!!

Looking forward to hear from @skyruler and @creamzy.

Added a couple of things:

• Added a profile pics area and setting (cropped and centered)
• Added a subtitle (or twitter field)
• Added multi/single selection.
• Added header section for things outside of the usual list like "Unassigned"
• Added subscreens for adding a second screen for things like creating milestones on the fly.

Heres' 3 more gifs:

---

---

---

Now I'll implement in gitlab code cc @JobV @creamzy @skyruler

Hi @jschatz1 awesome job, but is it possible to do something more similar dropdown that @creamzy did?

current:

design:

@skyruler Yes absolutely. This was on a test index.html page. Once they go into gitlab it'll take on the styles that exists and I can alter them from there.

mentioned in merge request !2438 (merged)

@jschatz1 please move / close as you see fit.

Assignee removed

mentioned in merge request !2568 (closed)

mentioned in issue #2785 (closed)

mentioned in issue #13164 (closed)

This dropdown is important improvement for GitLab UI and should have a milestone

Milestone changed to 8.8

Reassigned to @jschatz1

mentioned in commit 8c0f551f

mentioned in merge request !3092 (merged)

mentioned in commit cb73470b

mentioned in merge request !3110 (merged)

mentioned in issue #12709 (closed)

mentioned in commit c6f51662

mentioned in commit 198926dc

mentioned in issue #14977 (closed)

Milestone changed to %8.9

Removed frontend label

Milestone changed to %8.10

Status changed to closed

Mentioned in issue #25212 (closed)