This PR improves upon the full-screen functionality, adherence to react conventions, component and state design and code organisation.
Here is a comprehensive list of changes/improvements -
Versions of react and react-dom are upgraded from 16.4.0 to 16.8.0, this allows hooks to be used. This was necessary to use react-use-dimensions package. More on this later.
[Fixes Issue #98 ] Positions of buttons in the toolbar on mobile resolutions in landscape mode is problematic. It is inconsistent with other activities and this activity as well prior to recent changes.
Currently, the full screen button basically just hides the toolbar. Full screen functionality improved to resize the activity in full screen mode. The above two points can be seen in the screen captures below -
(Before) Full screen functionality currently
(After) Full screen functionality in this PR
The application is resized in full screen mode using logic similar to that in qr-code activity. Computation of resizing requires the height of canvas for which react-use-dimensions package was used.
Currently the full screen state is localised to navbar but in this PR changes are made to state design which allows components to change their layout in full screen mode to make best use of the extra screen space. One of its examples can be seen below
(Before) The component does not utilise the extra screen space in full screen mode meaningfully as the full state state localised to navbar so it cannot change its layout.
(After) The component changes its layout and adapts to make better use of the extra screen space in full screen mode.
[Fixes issue #97 ] No space below the submit button issue has now been fixed in all containers.
Requesting review and feedback @llaske @thingthing
llaske
commented
4 years ago
This PR improves upon the full-screen functionality, adherence to react conventions, component and state design and code organisation.
Here is a comprehensive list of changes/improvements -
Versions of react and react-dom are upgraded from
16.4.0to16.8.0, this allows hooks to be used. This was necessary to usereact-use-dimensionspackage. More on this later.[Fixes Issue #98 ] Positions of buttons in the toolbar on mobile resolutions in landscape mode is problematic. It is inconsistent with other activities and this activity as well prior to recent changes.
Currently, the full screen button basically just hides the toolbar. Full screen functionality improved to resize the activity in full screen mode. The above two points can be seen in the screen captures below -
(Before) Full screen functionality currently
(After) Full screen functionality in this PR
The application is resized in full screen mode using logic similar to that in qr-code activity. Computation of resizing requires the height of canvas for which
react-use-dimensionspackage was used.Currently the full screen state is localised to navbar but in this PR changes are made to state design which allows components to change their layout in full screen mode to make best use of the extra screen space. One of its examples can be seen below
(Before) The component does not utilise the extra screen space in full screen mode meaningfully as the full state state localised to navbar so it cannot change its layout.
(After) The component changes its layout and adapts to make better use of the extra screen space in full screen mode.
[Fixes issue #97 ] No space below the submit button issue has now been fixed in all containers.
Requesting review and feedback @llaske @thingthing