Page MenuHomePhabricator
Create Task
Maniphest T320410

Design: Function editor, redefine separation between fields and blocks.
Closed, ResolvedPublic
Actions

Assigned To
AAlhazwani-WMF
Authored By
gengh
Oct 10 2022, 12:51 PM
Tags
Referenced Files
F36077680: image.png
Jan 9 2023, 5:37 PM
F36077676: image.png
Jan 9 2023, 5:37 PM
F36077667: image.png
Jan 9 2023, 5:37 PM
F36077642: image.png
Jan 9 2023, 5:37 PM
F36076860: image.png
Jan 9 2023, 3:17 PM
F35560861: Screenshot 2022-10-10 at 14-49-15 Create a new ZObject - Wikifunctions.png
Oct 10 2022, 12:51 PM
Subscribers
DVrandecic
gengh

Description

Description

In mobile function editor, the separation between fields and language blocks is unclear, and it makes function creation process a bit confusing.
An example:

Screenshot 2022-10-10 at 14-49-15 Create a new ZObject - Wikifunctions.png (2×402 px, 123 KB)

Devices

  • Desktop
  • Small screens/mobile

Design proposal

Figma file https://www.figma.com/file/nUPU2V5n4llBx7XfiLKosw/T320410?node-id=0:1&t=dzsmMNQT9OggCzE4-1

First visit

image.png (1×1 px, 393 KB)

Add a second (or nth) input

image.png (1×1 px, 371 KB)

Add labels in another language

image.png (1×1 px, 339 KB)

Remove first input

image.png (1×1 px, 318 KB)

Completion checklist

Related Objects
Search...

Event Timeline

gengh renamed this task from Design: Function editor, define separation between fields and blocks. to Design: Function editor, redefine separation between fields and blocks..Oct 10 2022, 12:51 PM
gengh created this task.
gengh moved this task from To Triage to Phase θ – Throttling on the Abstract Wikipedia team board.
gengh edited projects, added Abstract Wikipedia team (Phase θ – Throttling); removed Abstract Wikipedia team.
gengh moved this task from Incoming to Ready: G4. Function view on the Abstract Wikipedia team (Phase θ – Throttling) board.
gengh added a project: WikiLambda Front-end.
AAlhazwani-WMF mentioned this in T323805: Design: edit a function definition.Dec 19 2022, 12:13 PM
AAlhazwani-WMF added a parent task: T323805: Design: edit a function definition.Dec 19 2022, 12:34 PM
AAlhazwani-WMF mentioned this in T322132: FunctionDefinition: update copy for input fields.Jan 5 2023, 5:16 PM
AAlhazwani-WMF claimed this task.Jan 9 2023, 2:04 PM
AAlhazwani-WMF added a comment.Jan 9 2023, 3:17 PM

Here's a first design proposal for how we could improve the layout and the spacing for the function definition page on mobile:

  1. Add separators between sections
  2. Use the default Codex components whenever possible, e.g.
  3. Set spacing (margins and paddings) on a base 8 grid (4, 8, 16, 24)

image.png (1×1 px, 405 KB)

If this looks reasonable, and in scope with the given task, I'll go ahead and put together the different variants!

AAlhazwani-WMF updated the task description. (Show Details)Jan 9 2023, 5:37 PM
AAlhazwani-WMF added a subscriber: DVrandecic.

The task description has been updated! cc @DVrandecic for general feedback, and @gengh for engineering (:

AAlhazwani-WMF moved this task from Ready: G4. Function view to QA / Ready to close on the Abstract Wikipedia team (Phase θ – Throttling) board.Jan 10 2023, 10:31 AM
gengh mentioned this in T326656: FunctionEditor: Implement separation between fields and blocks changes.Jan 10 2023, 4:51 PM
DVrandecic added a comment.Jan 10 2023, 9:50 PM

Approved. To be implemented through T326656

DVrandecic updated the task description. (Show Details)Jan 10 2023, 9:50 PM
DVrandecic closed this task as Resolved.Jan 10 2023, 9:54 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits