Change Details

We will remove a level of inheritance and convert the ImageOverlay to an Overlay with a child = Precursors * LanguageOverlay should be converted to an Overlay (T215657) * Talkoverlay should be an Overlay (T215370) = Acceptance criteria [x] ImageOverlay is repurposed as a specialised Overlay which has ~~no~~ header. JR: We decided a header made sense [x] An imageOverlay factory method returns an Overlay which contains an ImageCarousel component. [x] The new ImageCarousel component does not use templatePartials in any way either directly or via toHtmlString (see https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/482382/) = Anatomy of ImageOverlay The ImageOverlay has 3 distinct parts. The header/footer probably belong to the Overlay but may require specific styling and themselves may be components! == ImageCarousel {F28247048} == header {F28247051} == footer {F28247052} = Sign off steps [] Update [[ https://www.mediawiki.org/wiki/Reading/Web/Projects/Invest_in_the_MobileFrontend_%26_MinervaNeue_frontend_architecture/Progress?useskin=vector#Removing_inheritance | Progress ]] = QA steps This ticket did some refactoring of the overlay but was not intended to change the behavior of the overlay other than its toggling behavior and the removal of the white loading overlay. We are looking for regressions from the production behavior. The image carousel should let the user see the page's images one-by-one in the order that they appear on the page (from top to bottom). To test, run the following steps: [] Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama_T173949 [] Click on one of the images on the page [] Expected: The black image overlay appears with it eventually loading an image [] When the image loads, verify that clicking the black part of the overlay (but not the navigation controls) or on the image itself toggles the visibility of the navigation controls and white details bar. Note: this is intentionally differs from production's behavior which also toggles the visibility of the overlay's close icon. [] When the image loads, test that the back and forward buttons allow you to cycle through the images in the correct order [] Disconnect your internet connection, click the forward button, and verify that a load error message appears. [] Turn connection back on, and click the "Refresh" link. Verify that an image successfully loads [] Close overlay by click on the close icon. Click your browser's forward button and verify that the image you just viewed appears again.

We will remove a level of inheritance and convert the ImageOverlay to an Overlay with a child = Precursors * LanguageOverlay should be converted to an Overlay (T215657) * Talkoverlay should be an Overlay (T215370) = Acceptance criteria [x] ImageOverlay is repurposed as a specialised Overlay which has ~~no~~ header. JR: We decided a header made sense [x] An imageOverlay factory method returns an Overlay which contains an ImageCarousel component. [x] The new ImageCarousel component does not use templatePartials in any way either directly or via toHtmlString (see https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/482382/) = Anatomy of ImageOverlay The ImageOverlay has 3 distinct parts. The header/footer probably belong to the Overlay but may require specific styling and themselves may be components! == ImageCarousel {F28247048} == header {F28247051} == footer {F28247052} = Sign off steps [] Update [[ https://www.mediawiki.org/wiki/Reading/Web/Projects/Invest_in_the_MobileFrontend_%26_MinervaNeue_frontend_architecture/Progress?useskin=vector#Removing_inheritance | Progress ]] = QA steps This ticket did some refactoring of the overlay but was not intended to change the behavior of the overlay other than its toggling behavior and the removal of the white loading overlay. We are looking for regressions from the production behavior. The image carousel should let the user see the page's images one-by-one in the order that they appear on the page (from top to bottom). To test, run the following steps: [] Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama_T173949 [] Click on one of the images on the page [] Expected: The black image overlay appears with it eventually loading an image [] When the image loads, verify that clicking the black part of the overlay (but not the navigation controls) or on the image itself toggles the visibility of the navigation controls and white details bar. Note: this is intentionally differs from production's behavior which also toggles the visibility of the overlay's close icon. [] When the image loads, test that the back and forward buttons allow you to cycle through the images in the correct order [] Disconnect your internet connection, click the forward button, and verify that a load error message appears. [] Turn connection back on, and click the "Refresh" link. Verify that an image successfully loads [] Close the overlay by clicking on the close icon. Click your browser's forward button and verify that the image you just viewed appears again.

We will remove a level of inheritance and convert the ImageOverlay to an Overlay with a child = Precursors * LanguageOverlay should be converted to an Overlay (T215657) * Talkoverlay should be an Overlay (T215370) = Acceptance criteria [x] ImageOverlay is repurposed as a specialised Overlay which has ~~no~~ header. JR: We decided a header made sense [x] An imageOverlay factory method returns an Overlay which contains an ImageCarousel component. [x] The new ImageCarousel component does not use templatePartials in any way either directly or via toHtmlString (see https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/482382/) = Anatomy of ImageOverlay The ImageOverlay has 3 distinct parts. The header/footer probably belong to the Overlay but may require specific styling and themselves may be components! == ImageCarousel {F28247048} == header {F28247051} == footer {F28247052} = Sign off steps [] Update [[ https://www.mediawiki.org/wiki/Reading/Web/Projects/Invest_in_the_MobileFrontend_%26_MinervaNeue_frontend_architecture/Progress?useskin=vector#Removing_inheritance | Progress ]] = QA steps This ticket did some refactoring of the overlay but was not intended to change the behavior of the overlay other than its toggling behavior and the removal of the white loading overlay. We are looking for regressions from the production behavior. The image carousel should let the user see the page's images one-by-one in the order that they appear on the page (from top to bottom). To test, run the following steps: [] Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama_T173949 [] Click on one of the images on the page [] Expected: The black image overlay appears with it eventually loading an image [] When the image loads, verify that clicking the black part of the overlay (but not the navigation controls) or on the image itself toggles the visibility of the navigation controls and white details bar. Note: this is intentionally differs from production's behavior which also toggles the visibility of the overlay's close icon. [] When the image loads, test that the back and forward buttons allow you to cycle through the images in the correct order [] Disconnect your internet connection, click the forward button, and verify that a load error message appears. [] Turn connection back on, and click the "Refresh" link. Verify that an image successfully loads [] Close the overlay by clicking on the close icon. Click your browser's forward button and verify that the image you just viewed appears again.