Page MenuHomePhabricator

Create the Translate view
Closed, ResolvedPublic3 Story Points

Description

Value proposition (why do we need to do this)?

As a user, I want to be able to add translations for a file so I can use the file in my local language.

This follows up from T204596: Search image component for SVG Translate tool and T204849: SVG Translate tool: Language settings dialog.

Functionality/software changes

  • Once the user has picked an image, they land up in the Translate view.
  • Header:
    • Button to go back and pick another file
    • File title and link to see image on Commons
    • Language settings dialog link
    • Login button (non-functional)
  • Translation panel:
    • In the 'from' language dropdown show 'Default'. No working dropdown for this one - parsing the SVG is not part of this ticket.
      • From language switching is not part of this ticket!
    • The 'to' language dropdown should show 'Select a language'.**
      • To language switching is not part of this ticket!
    • Language labels on left -- we can have a placeholder string for this because parsing the SVG is not part of this ticket
    • Translation inputs on right
  • Image appears on the right (no preview functionality so far) - follows from T204596. This can be an empty box if the image fetching part is not complete yet.
    • Image is sticky on scroll
  • Buttons to upload image to Commons and download image above the image (both are non-functional for this ticket)

What this ticket does not include:

  • Preview functionality T207203
  • Upload/download functionality
  • Mobile compatibility (it's great if we get that for free but let's not include additional work for that in this ticket, it should be estimated separately)
  • From/to language switching behavior T207199
  • Parsing the SVG
  • Divider lines for clustering labels which fall under the same 'text' tag

User interface changes

Screenshots/mockups:

Mockup: https://prtksxna.github.io/svgtranslate-prototype/translate.html

Does this need QA?

Yes

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 10 2018, 10:55 PM
Niharika added a subscriber: Prtksxna.

@Prtksxna Flagging this for you. If anything in here can change based on Pau's feedback, let's discuss it tomorrow.

Prtksxna updated the task description. (Show Details)Oct 11 2018, 2:09 AM

I was wondering if the progress bar that runs on the top of the page should be part of this ticket too.

@Prtksxna Flagging this for you. If anything in here can change based on Pau's feedback, let's discuss it tomorrow.

Thanks @Niharika! Yes, let's do that.

Is the progress bar part of OOUI?

Is the progress bar part of OOUI?

Yep, but I have messed with the styles a bit.

I was wondering if the progress bar that runs on the top of the page should be part of this ticket too.

I will make that a part of another ticket. This one is kinda big already.

To be honest, I'm not a fan of the progress bar right now. Let's discuss it in our meeting.

Niharika updated the task description. (Show Details)Oct 11 2018, 5:30 PM
Niharika triaged this task as Normal priority.Oct 11 2018, 9:38 PM
Niharika updated the task description. (Show Details)Oct 12 2018, 11:51 PM
Niharika updated the task description. (Show Details)Oct 16 2018, 5:40 PM
Niharika updated the task description. (Show Details)Oct 16 2018, 5:43 PM
Niharika updated the task description. (Show Details)
Niharika updated the task description. (Show Details)Oct 16 2018, 5:51 PM
Niharika updated the task description. (Show Details)Oct 16 2018, 10:56 PM
Niharika set the point value for this task to 3.Oct 16 2018, 11:09 PM
Niharika moved this task from To be estimated/discussed to Estimated on the Community-Tech board.

https://github.com/wikimedia/svgtranslate/pull/16 covers the following bits of this:

  • Once the user has picked an image, they land up in the Translate view.
  • Button to go back and pick another file
  • File title and link to see image on Commons
  • Language settings dialog link (non-functional, will be done in T204849)
  • Login button (non-functional is functional, as part of the bundle)

The patch feels big enough for review with just those bits.

aezell added a subscriber: aezell.Oct 24 2018, 3:31 PM

@Samwilson I added a few comments.

We need to clarify whether or not we're including the File: in the page and window titles, and whether it gets translated.

Sorry, ignore that, I just realised we already had that discussion. :) Ditch the File.

I've extended the above patch to include everything in this ticket. It's ready for review. https://github.com/wikimedia/svgtranslate/pull/16

aezell added a comment.Nov 7 2018, 9:17 PM

I commented on the PR. There seems to be something wrong with the asset loading. Possibly it's just me?

Wasn't just you. Was just me not using Docker! :) Fixed now.

I've updated the test site: https://tools.wmflabs.org/svgtranslate-test/

This is ready for QA.

I did a bit of QA review on this. Looking at https://tools.wmflabs.org/svgtranslate-test/File:Lake%20County%2050.svg -

  • The From dropdown is wider than the To dropdown, causing the alignment to break -

  • There is a lot of extra space between the input labels and the picture and the labels are too close to the left edge. For comparison -
ToolPrototype
  • The spacing between labels (vertically) is not as much as in the prototype (see above screenshots for comparison)
  • The footer should not contain the tutorial. That's only meant to be on the main page.

Some more design related stuff:

Type sizes and weights

The translate page has different weights and sizes than the home page.

ToolDesign

Download is a link now, not a button

(sorry this change happened recently)

ToolDesign

Footer design

Significantly different from the prototype (sorry, I should've noticed it on the first page too)

ToolDesign

Differences in margins

Niharika already pointed some of these out but I wanted to highlight a few more:

  • Remove gray margins on the side
  • Add padding on the sides inside the white container
  • Increase top padding a bit
ToolDesign

I just remembered that @Mooeypoo had shared that the tool becomes useless on large screens. I think we should limit the interface width to 1400px (CSS, not device pixels… retina 👀).

I just remembered that @Mooeypoo had shared that the tool becomes useless on large screens. I think we should limit the interface width to 1400px (CSS, not device pixels… retina 👀).

We're currently using @width-breakpoint-desktop-extrawide, which is 2000px; is this okay? The next smaller pre-defined one is @width-breakpoint-desktop-wide which is 1200px.

I guess 2000 should be fine, we can ask @Mooeypoo to test once this is done and adjust later if we feel the need 💻

Samwilson added a comment.EditedNov 27 2018, 7:12 AM

The From dropdown is wider than the To dropdown, causing the alignment to break

This is due to the fact that the From widget is a dropdown, and the To one is a button. On my setup the first is 363.1 wide and the second is 362.6, so I think probably just a difference in border calculation or something. As for alignment, I'm not sure what's breaking; are you still seeing the problem with the current dropdown-and-button configuration?

There is a lot of extra space between the input labels and the picture and the labels are too close to the left edge.

The space between the form inputs and the image happens when the image isn't as wide or wider than that space (and so it isn't scaled). I'm not quite sure what the desired appearance is here: do we want the image right-aligned under the upload button, or left aligned to keep a standard gutter between the form and the image? Or something else? The patch below adds the actual image in, so it's easier to test with differently-sized and proportioned images.

The left-margin for the form is fixed, with a max of 2000 px for the whole form (from @width-breakpoint-desktop-extrawide).

The spacing between labels (vertically) is not as much as in the prototype

Fixed. Added margin-bottom: 1.5rem, is that about right?

The footer should not contain the tutorial. That's only meant to be on the main page.

Fixed.

The translate page has different weights and sizes than the home page.

I'm not seeing any difference. They're not defined separately in the LESS files. It might be that the H1 is jumping down a bit on the translate page, due to the extra link above it. I've updated it to maintain that space above it even when there's no backlink; is this okay?:

Download is a link now, not a button

Is this a hard requirement? The download button is currently a form-submission button, because the current set of translations has to be POSTed to the server for the SVG to be built. We can replicate this behaviour in JS, but if it can stay as a button then we don't have to.

Footer design
Significantly different from the prototype

Yeah, sorry, I sort of mangled this didn't I? :) There are a few issues:

  1. the toolforge logo has English text in it, which can't be translated, so I switched it out for actual text. I've updated it to be grey and small-caps:
  2. The other link differences are due to not wanting to have multiple i18n messages to define each link and for them to be dependent on each other (e.g. View on [Github] instead of [View on Github] makes it easier for translators).
  3. And text changes were because we can re-use these same phrases from Event Metrics and so reduce the work for translators, and have more consistence between tools.

Differences in margins
Remove gray margins on the side
Add padding on the sides inside the white container
Increase top padding a bit

All done. The white area padding is all 2rem.


PR for all the above is ready for review at https://github.com/wikimedia/svgtranslate/pull/29

The From dropdown is wider than the To dropdown, causing the alignment to break

This is due to the fact that the From widget is a dropdown, and the To one is a button. On my setup the first is 363.1 wide and the second is 362.6, so I think probably just a difference in border calculation or something. As for alignment, I'm not sure what's breaking; are you still seeing the problem with the current dropdown-and-button configuration?

I'm seeing a bigger difference in widths - 298 vs 285. The dropdown is wide enough to extend above the input labels which shouldn't happen - see screenshots above by me and Prateek.

There is a lot of extra space between the input labels and the picture and the labels are too close to the left edge.

The space between the form inputs and the image happens when the image isn't as wide or wider than that space (and so it isn't scaled). I'm not quite sure what the desired appearance is here: do we want the image right-aligned under the upload button, or left aligned to keep a standard gutter between the form and the image? Or something else? The patch below adds the actual image in, so it's easier to test with differently-sized and proportioned images.

I think the patch to add the actual image isn't merged yet. It would be extremely helpful to test with it once it's in. @Prtksxna correct me if you disagree but I think keeping the image left aligned with a standard gutter between the form and image is probably what's desired.

The left-margin for the form is fixed, with a max of 2000 px for the whole form (from @width-breakpoint-desktop-extrawide).

The left margin/padding is bigger in the prototype, per Prateek's comment above - can we increase that a bit?

The spacing between labels (vertically) is not as much as in the prototype

Fixed. Added margin-bottom: 1.5rem, is that about right?

Yup, seems good now!

The footer should not contain the tutorial. That's only meant to be on the main page.

Fixed.

Thanks!

Download is a link now, not a button

Is this a hard requirement? The download button is currently a form-submission button, because the current set of translations has to be POSTed to the server for the SVG to be built. We can replicate this behaviour in JS, but if it can stay as a button then we don't have to.

@Prtksxna how about we make this into a gray-er button so it's less eye-catchy?

Differences in margins
Remove gray margins on the side
Add padding on the sides inside the white container
Increase top padding a bit

All done. The white area padding is all 2rem.

Is this up on the site? I don't see the padding on the left of the text labels.

I'm seeing a bigger difference in widths - 298 vs 285. The dropdown is wide enough to extend above the input labels which shouldn't happen - see screenshots above by me and Prateek.

My mistake, I wasn't looking properly. How about a 30%/20%/50% spacing like this?:

That way the 'to' is centred above the edge of the input fields.

I think the patch to add the actual image isn't merged yet. It would be extremely helpful to test with it once it's in.

Sorry, I meant that I've made that change in PR29 along with these other fixes. It's a minor thing, and makes this easier to test.

@Prtksxna correct me if you disagree but I think keeping the image left aligned with a standard gutter between the form and image is probably what's desired.

The buttons hang over the right side then:

But either left, centre, or right alignment is fine; it's scaling that we probably want to avoid.

The left margin/padding is bigger in the prototype, per Prateek's comment above - can we increase that a bit?

Done.

Is this up on the site? I don't see the padding on the left of the text labels.

No, sorry I did switch the staging site to it, but then changed it back again for something else. And anyway, if we're moving to this merge-before-QA workflow, then I should probably just keep adding screenshots here and we should aim to merge PR29 before more iterations of design.

I'm seeing a bigger difference in widths - 298 vs 285. The dropdown is wide enough to extend above the input labels which shouldn't happen - see screenshots above by me and Prateek.

My mistake, I wasn't looking properly. How about a 30%/20%/50% spacing like this?:

That way the 'to' is centred above the edge of the input fields.

Much better, thanks! Is there a way to equalize the widths of the two? The To looks much wider than From.

@Prtksxna correct me if you disagree but I think keeping the image left aligned with a standard gutter between the form and image is probably what's desired.

The buttons hang over the right side then:

But either left, centre, or right alignment is fine; it's scaling that we probably want to avoid.

Hmm, yeah, that looks odd. I'll let Prateek call on this one.

Much better, thanks! Is there a way to equalize the widths of the two? The To looks much wider than From.

Where should the "to" go if the dropdowns are the same size? Same place, or centered between the dropdowns?

Centred it is.

So now I think we're just left with two questions:

  • the alignment of the image, and
  • the download button style.

Over to you @Prtksxna :)

Niharika closed this task as Resolved.Dec 10 2018, 9:51 PM
Niharika moved this task from QA to Q2 2018-19 on the Community-Tech-Sprint board.

Looks good to me! @Prtksxna take a look and we can open follow up tickets for any more design fixes we want.

Looks good to me! @Prtksxna take a look and we can open follow up tickets for any more design fixes we want.

Looks good. Noted some minor changes in T212293: Change font stack and letter spacing and T212294: Align image to translate with the first text box.