Hi developers,

I am currently working on the user interface on Wikibase's repository to edit badges. There exist several mockups [1] - especially [2] - but I got stuck while trying to implement them actually. The resource system of Wikibase is quite confusing and I am not sure if the way I tried it [3] does really make sense and is the right attempt. Here are some questions which came in my mind until now but I am sure there will be more questions later. However, I would be glad if you can help me already now to show me the right way.

First, I am not sure if the current attempt to add the HTML for the ui into the sitelink's row is useful. I saw that most of those popup bubble boxes are implemented as jquery widgets and added to the end of the document. However, this might become a bit too hard because while the options for a statement's rank are always the same but the badges are different for each sitelink. So perhaps it is better how I implemented it right now with the HTML hidden by default and positioned with position:absolute.

Another question is if we should implement the toggling of the bubble with plain CSS or by the use of javascript. In my opinion it is saner to do this with javascript and will create a better look and feel. However, I have no clue where the toggling logic should be put, so if this is a widget or comes to the edit tool.

One issue concerns the arrow/triangle of the box pointing to the star. Should this triangle created by a background image or by pure CSS?

All those questions are perhaps only the beginning but I'm sure we will have a great badges edit tool once this is finished.

Best regards, Bene*

[1] https://commons.wikimedia.org/wiki/Category:Wikidata_storyboards_-_Badges [2] https://commons.wikimedia.org/wiki/File:Site_link_badges_edit_interface_%283... [3] https://gerrit.wikimedia.org/r/#/c/124391/