Page MenuHomePhabricator

Orchestrate the workflow in responsive manner
Open, Needs TriagePublic

Description

As per the design, the section translation workflow screens should be a full screen view in small screens and an embedded view in large screens as illustrated with a sample here:

Compare contents - Layout mocks.png (768×1 px, 347 KB)

Current implementation has full screen view since we prioritized development for mobile. But since we won't have two code bases for two set of screens, it is important to consider a suitable way to have this responsiveness.

Event Timeline

I think we need to go with a vuex based approach where we store the app state and step in a store module. We need store module 'app' for that. It will have the current step, and we can have the main content area rendering based on that step. If mobile render it as full screen dialog. Mutating the step can change the history hash from store. This will avoid the need for 25K vuerouter library too. The app vuex store module has more use beyond this, such as saving and restoring last selected language from localstorage etc(but that is futuristic). he language selectors can be still dialogs(full screen or not).

A rough skeleton:

<main>
  <dashboard v-if="step=='dashboard'/>
  <cx-sx-article-selector v-if="step=='article-selector'/>
  <cx-sx-section-selector v-if="step=='section-selector'/>
  <cx-sx-section-tutorial v-if="step=='tutorial'/>
  <cx-sx-comparator v-if="step=='section-compare'/>
  <cx-sx-section-sentence-selector v-if="step=='sentence-selector'/>
  <cx-sx-section-sentence--mt-selector v-if="step=='sentence-mt-selector'/>
  <cx-sx-section-sentence-editor v-if="step=='sentence-editor'/>
</main>

The app store can then manage the back and forth transitions and animation directions too. Instead of passing params between dialog components, each dialog will require setting and fetching it from vuex app module. By mocking the app module, we will be able to rest a specific workflow step too.

Change 621679 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] WIP: CX3: Introduce routing

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

After considering the complications, I changed my mind. Rather than developing a small hack router, it would be better to use vue-router itself. https://gerrit.wikimedia.org/r/621679 illustrates this.

image.png (590×1 px, 42 KB)
image.png (462×1 px, 34 KB)

Change 621679 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] CX3: Introduce routing

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

Change 622345 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] CX vue routing: Add check if accessible route before redirection

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

Change 622345 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] CX vue routing: Add check if accessible route before redirection

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

Jpita added a subscriber: Jpita.

this doesn't look exactly like the design, is this not finished yet?

image.png (133×406 px, 4 KB)

Improvements on this ticket have been stalled for now. We'll come back to this later, this is why the ticket was moved to Quarter Backlog again.

Improvements on this ticket have been stalled for now. We'll come back to this later, this is why the ticket was moved to Quarter Backlog again.

There are also specific tickets for the responsive adaptations of specific steps:

Is the current one representing something not captured in the above. If yes, we can make it explicit in the description. If not, can we close the current one.