Page MenuHomePhabricator

OOjs UI Demos: Make the generated code more discoverable
Closed, ResolvedPublic

Assigned To
Authored By
Prtksxna
May 31 2017, 6:49 PM
Referenced Files
F8400599: image.png
Jun 7 2017, 5:57 PM
F8399574: image.png
Jun 7 2017, 2:50 PM
F8399612: image.png
Jun 7 2017, 2:50 PM
F8222308: Screen Shot 2017-06-01 at 12.17.08 AM.png
May 31 2017, 6:49 PM
Tokens
"Orange Medal" token, awarded by Prtksxna.

Description

Currently the code generated for the widgets is hidden behind the obscure button:

Screen Shot 2017-06-01 at 12.17.08 AM.png (97×782 px, 14 KB)


  • Should we change this?
  • To what?

Event Timeline

Yes, we should. The button is not self-explaining and the functionality too important.
Early ideas are to turn this into a labelled-button

  • “Show code” (Console gets negelected)
  • “Show code and console“

With a normal button style it's getting very crowded (here just with label “Code”, still):

image.png (784×1 px, 113 KB)

I'm inclined to prefer a frameless inspired element:

image.png (766×1 px, 112 KB)

Still, pretty crowded. Probably going for first element featuring “Show code ↓” (or first per section) and for the rest we gonna show just the “↓” and full label on :hover/:active?

Probably going for first element featuring “Show code ↓” (or first per section) and for the rest we gonna show just the “↓” and full label on :hover/:active?

Sounds good to me.

It would look a lot less intrusive if it wasn't bold and blue. :/

Change 357857 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] demos: Indicate code toggle clearer

https://gerrit.wikimedia.org/r/357857

Change 357857 merged by jenkins-bot:
[oojs/ui@master] demos: Indicate code toggle clearer

https://gerrit.wikimedia.org/r/357857

Volker_E claimed this task.
Volker_E moved this task from Reviewing to OOjs-UI-0.22.2 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.22.2); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.