Page MenuHomePhabricator

CX2: Expand dialogs to fill the document space
Closed, ResolvedPublic

Description

Modal dialogs are used to edit complex content such as references or image galleries. Currently the dialog isolates its contents from the tools sidebar, and it is not always intuitive that the tools present in the sidebar can affect the content in the dialog.

This ticket proposes to keep the document-sidebar metaphor also when editing dialogs. Dialogs will be presented as documents by adjusting the sizing of the dialogs to fill all the current viewport except the sidebar. In this way, the document the user was editing gets replaced by a new document on top.

This prototype and the mockups below illustrate a sequence where a reference is edited, the details view appear, and a link is selected showing the link card as a result.

CX-refs-initial.png (720×1 px, 242 KB)
CX-refs-dialog.png (720×1 px, 48 KB)
CX-ref-dialog-selected.png (720×1 px, 55 KB)

Some considerations:

  • This representation, more aligned with the mobile version, can also help with smaller screens.
  • Button overlap. Cancel button appears where the option to go back usually is, this is good to establish the area as the way to go back. However, the "Apply changes" button appears where the "publish" button is, which despite being aligned in terms of moving forward can cause accidental clicks. We may need to think how to reduce the chances of accidental clicks (e.g., transition the publish header back into active with a slower transition).

Event Timeline

Pginer-WMF moved this task from Backlog to Priority backlog on the Language-2018-July-September board.
Pginer-WMF moved this task from Needs Triage to CX2 on the ContentTranslation board.

Change 443037 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Expand dialogs to fill the document space

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

Change 443037 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Expand dialogs to fill the document space

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

Change 443869 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Make all tool dialogs cover content

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

Change 443869 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Make all tool dialogs cover content

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

Checked in cx2-testing - looks as per the mockup.

@Pginer-WMF - there is one, probably already known, issue: ContentTransaltion does not differentiate between types of references ( cite book, cite web, cite IETF etc) - they are all marked as Reference:

Screen Shot 2018-07-12 at 4.42.49 PM.png (246×1 px, 105 KB)

vs.
Screen Shot 2018-07-12 at 4.42.28 PM.png (201×825 px, 88 KB)

On the ContentTranslation clicking on Edit will display the Basic Reference inspector (not template-based dialog) :

Screen Shot 2018-07-12 at 4.49.05 PM.png (450×919 px, 51 KB)

In VE there will be different, template-based editing dialogs, e.g. if the above reference will be edited on the page (en:Transport Layer Security)

Screen Shot 2018-07-12 at 4.58.03 PM.png (529×587 px, 113 KB)

@Pginer-WMF - there is one, probably already known, issue: ContentTransaltion does not differentiate between types of references ( cite book, cite web, cite IETF etc) - they are all marked as Reference:

I noted the difference before, but all the details and information you provided was very useful to create the ticket and finally report it as T199512: CX2: Improve support for different types of references.

Improving the support for references and templates is a goal for this quarter, so feel free to report more issues in this area.

Thanks, @Etonkovidova!

@Etonkovidova Yes the problem exists and different types of references don't behave like in VE. @Pginer-WMF did a good job and captured that in a separate ticket.

That being said, scope of this ticket is that document area needs to be covered by dialogs and non-directly related issues are to be dealt with separately.

@Petar.petkovic - thx. All is working as expected; I am closing the ticket.