Change Details

As part of MinT for Wiki Readers MVP (T359072), this ticket proposes to support the translation-related options in the Translation view (T359801). When users are reading machine translated content, the "Machine translation indicator" is visible all the time and provides access to the set of options detailed in this ticket. {F42467191, size=full} # Design details To keep the options in context, they are provided as part of a panel at the bottom of the screen. This step includes the following elements: - **Overlay.** An overlay makes the translation contents partially visible to keep context while providing enough contrast for the user to focus on the elements presented on top. Taping on the overlay will close the panel and remove the overlay. See the Codex [Overlay component in Figma](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?type=design&node-id=9315%3A77934&mode=design&t=muGtdWZtherMqyWB-1) - **Preview panel.** A panel attached to the bottom of the viewport provides access to the translation-related options using the following elements: - Header with `Robot~ icon, the "Automatic translation" label and a `Close` button. Taping the `Close` icon will close the panel (and remove the overlay) to return to the Translation View (T359801). - Language pair selector. Two buttons for the selection of the source and target languages with an `ArrowNext` icon in between support language selection: -Tapping on the source language button will lead the user to the "Explore languages" view (T359863) for more guidance on the selection among the different language-specific versions of the content. -Tapping on the target language button opens the standard language selector. - List of options. A set of options represented with an icon and a label for the users to select. Selecting one results in the action to take place and the panel to close. The specific options are listed below. These are the specific options provided: - **Read original.** This option opens the article in the source wiki. The "Read on <source-language-wiki>" label is used with an `Article` icon. - **Read in target wiki.** This option is only shown when the article exists on the target wiki. The option opens the article in the target wiki. The "Read on <target-language-wiki>" label is used with an `Article` icon. - **Corrections.** This option provides access to Content/Section Translation with the article and language pairs pre-selected for the user to provide an improved translation. The "Correct the translation" label and the `Pencil` icon are used. - **Share** This option allows users to share a link to the translated contents. The "Share automatic translation" label and the `Share` icon are used. The [share method form the Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) which invokes the native sharing mechanisms can be used to share the url to the "Confirm" view. Support for this approach seems to be [already available](https://caniuse.com/mdn-api_navigator_share) on most common mobile browsers. - **Feedback.** This option provides a way for users to share their impressions about the machine translation. This can initially just direct users to [the MinT project talk page](https://www.mediawiki.org/wiki/Talk:MinT). As part of future tickets we can explore additional more direct options for feedback. The "Send feedback" label and the `Feedback` icon are used. The proposals for supporting the different options are intended to be technically simple. Future iterations may provide more detailed guidance. # Additional considerations - [View in Figma](https://www.figma.com/file/RTBmXJ4ZGmhPoNP1nlnm5C/MinT-for-Readers-MVP?type=design&node-id=237%3A7864&mode=design&t=2vlNHNWKlZGeNk8u-1)

As part of MinT for Wiki Readers MVP (T359072), this ticket proposes to support the translation-related options in the Translation view (T359801). When users are reading machine translated content, the "Machine translation indicator" is visible all the time and provides access to the set of options detailed in this ticket. {F42467191, size=full} # Design details To keep the options in context, they are provided as part of a panel at the bottom of the screen. This step includes the following elements: - **Overlay.** An overlay makes the translation contents partially visible to keep context while providing enough contrast for the user to focus on the elements presented on top. Taping on the overlay will close the panel and remove the overlay. See the Codex [Overlay component in Figma](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?type=design&node-id=9315%3A77934&mode=design&t=muGtdWZtherMqyWB-1) - **Preview panel.** A panel attached to the bottom of the viewport provides access to the translation-related options using the following elements: - Header with `Robot` icon, the "Automatic translation" label and a `Close` button. Taping the `Close` icon will close the panel (and remove the overlay) to return to the Translation View (T359801). - Language pair selector. Two buttons for the selection of the source and target languages with an `ArrowNext` icon in between support language selection: -Tapping on the source language button will lead the user to the "Explore languages" view (T359863) for more guidance on the selection among the different language-specific versions of the content. -Tapping on the target language button opens the standard language selector. - List of options. A set of options represented with an icon and a label for the users to select. Selecting one results in the action to take place and the panel to close. The specific options are listed below. These are the specific options provided: - **Read original.** This option opens the article in the source wiki. The "Read on <source-language-wiki>" label is used with an `Article` icon. - **Read in target wiki.** This option is only shown when the article exists on the target wiki. The option opens the article in the target wiki. The "Read on <target-language-wiki>" label is used with an `Article` icon. - **Corrections.** This option provides access to Content/Section Translation with the article and language pairs pre-selected for the user to provide an improved translation. The "Correct the translation" label and the `Pencil` icon are used. - **Share** This option allows users to share a link to the translated contents. The "Share automatic translation" label and the `Share` icon are used. The [share method form the Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) which invokes the native sharing mechanisms can be used to share the url to the "Confirm" view. Support for this approach seems to be [already available](https://caniuse.com/mdn-api_navigator_share) on most common mobile browsers. - **Feedback.** This option provides a way for users to share their impressions about the machine translation. This can initially just direct users to [the MinT project talk page](https://www.mediawiki.org/wiki/Talk:MinT). As part of future tickets we can explore additional more direct options for feedback. The "Send feedback" label and the `Feedback` icon are used. The proposals for supporting the different options are intended to be technically simple. Future iterations may provide more detailed guidance. # Additional considerations - [View in Figma](https://www.figma.com/file/RTBmXJ4ZGmhPoNP1nlnm5C/MinT-for-Readers-MVP?type=design&node-id=237%3A7864&mode=design&t=2vlNHNWKlZGeNk8u-1)

As part of MinT for Wiki Readers MVP (T359072), this ticket proposes to support the translation-related options in the Translation view (T359801). When users are reading machine translated content, the "Machine translation indicator" is visible all the time and provides access to the set of options detailed in this ticket. {F42467191, size=full} # Design details To keep the options in context, they are provided as part of a panel at the bottom of the screen. This step includes the following elements: - **Overlay.** An overlay makes the translation contents partially visible to keep context while providing enough contrast for the user to focus on the elements presented on top. Taping on the overlay will close the panel and remove the overlay. See the Codex [Overlay component in Figma](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?type=design&node-id=9315%3A77934&mode=design&t=muGtdWZtherMqyWB-1) - **Preview panel.** A panel attached to the bottom of the viewport provides access to the translation-related options using the following elements: - Header with `Robot~` icon, the "Automatic translation" label and a `Close` button. Taping the `Close` icon will close the panel (and remove the overlay) to return to the Translation View (T359801). - Language pair selector. Two buttons for the selection of the source and target languages with an `ArrowNext` icon in between support language selection: -Tapping on the source language button will lead the user to the "Explore languages" view (T359863) for more guidance on the selection among the different language-specific versions of the content. -Tapping on the target language button opens the standard language selector. - List of options. A set of options represented with an icon and a label for the users to select. Selecting one results in the action to take place and the panel to close. The specific options are listed below. These are the specific options provided: - **Read original.** This option opens the article in the source wiki. The "Read on <source-language-wiki>" label is used with an `Article` icon. - **Read in target wiki.** This option is only shown when the article exists on the target wiki. The option opens the article in the target wiki. The "Read on <target-language-wiki>" label is used with an `Article` icon. - **Corrections.** This option provides access to Content/Section Translation with the article and language pairs pre-selected for the user to provide an improved translation. The "Correct the translation" label and the `Pencil` icon are used. - **Share** This option allows users to share a link to the translated contents. The "Share automatic translation" label and the `Share` icon are used. The [share method form the Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) which invokes the native sharing mechanisms can be used to share the url to the "Confirm" view. Support for this approach seems to be [already available](https://caniuse.com/mdn-api_navigator_share) on most common mobile browsers. - **Feedback.** This option provides a way for users to share their impressions about the machine translation. This can initially just direct users to [the MinT project talk page](https://www.mediawiki.org/wiki/Talk:MinT). As part of future tickets we can explore additional more direct options for feedback. The "Send feedback" label and the `Feedback` icon are used. The proposals for supporting the different options are intended to be technically simple. Future iterations may provide more detailed guidance. # Additional considerations - [View in Figma](https://www.figma.com/file/RTBmXJ4ZGmhPoNP1nlnm5C/MinT-for-Readers-MVP?type=design&node-id=237%3A7864&mode=design&t=2vlNHNWKlZGeNk8u-1)