Differential D11900

Mosiac activity, rework UI using GridView by replacing Grid and implement keyboard controls.
AbandonedPublic
Actions

Authored by amankumargupta on Apr 3 2018, 8:39 AM.

Details

Reviewers
jjazeix
timotheegiet
Group Reviewers
GCompris: Improvements
Maniphest Tasks
T8395: Mosaic activity, implement keyboard control support.
Summary

Grid layout have been re-worked using GridView without disturbing/changing the UI, as with the GridView's keyboard properties, it's more easy to implement the controls.

Test Plan
  1. Checked on several window sizes and the cell sizes are almost exactly same as the original ones.
  2. Tested on mobile and the ratio of images are same as the original ones.

Diff Detail

Repository
R2 GCompris
Lint
Lint Skipped
Unit
Unit Tests Skipped
amankumargupta created this revision.Apr 3 2018, 8:39 AM
Restricted Application added a project: KDE Edu. · View Herald TranscriptApr 3 2018, 8:39 AM
Restricted Application added a subscriber: KDE Edu. · View Herald Transcript
jjazeix added inline comments.Apr 4 2018, 7:04 PM
src/activities/mosaic/Mosaic.qml
44

why don't you directly store the area?

amankumargupta marked an inline comment as done.Apr 4 2018, 8:51 PM
amankumargupta added inline comments.
src/activities/mosaic/Mosaic.qml
44

Updated in the fresh diff.

amankumargupta updated this revision to Diff 31328.Apr 4 2018, 8:51 PM
amankumargupta marked an inline comment as done.
amankumargupta marked an inline comment as done.Apr 5 2018, 8:06 AM
amankumargupta updated this revision to Diff 31842.Apr 10 2018, 10:46 PM
amankumargupta edited the test plan for this revision. (Show Details)

I did some calculations and after trying several combinations around the theoretical values, the layout with these values and calculations seemed optimal and best to me and is closest to the original ratio and looks exactly similar to the original images sizes.

amankumargupta added a comment.Apr 11 2018, 2:01 PM

On full screens:

  1. Level 1: a.) With Grid: https://pasteboard.co/Hg7LFEs.png b.) After reworkwith GridView: https://pasteboard.co/Hg7M7kH.png
  1. Level 5: a.) With Grid: https://pasteboard.co/Hg7MBj6.png b.) After reworkwith GridView: https://pasteboard.co/Hg7N9i2.png
  1. Level 16: a.) With Grid: https://pasteboard.co/Hg7NJav.png b.) After reworkwith GridView: https://pasteboard.co/Hg7O9qL.png

On half screens:

  1. Level1: (GridView rework on left and original Grid on right) --> https://pasteboard.co/Hg7Pp6i.png
  1. Level5: (GridView rework on left and original Grid on right) --> https://pasteboard.co/Hg7Uk8T.png
  1. Level16: (GridView rework on left and original Grid on right) --> https://pasteboard.co/Hg7Q00V.png

On smaller screen sizes:

  1. Level1: (GridView rework on left and original Grid on right) --> https://pasteboard.co/Hg7UJNs.png
  1. Level16: (GridView rework on left and original Grid on right) --> https://pasteboard.co/Hg7RrfE.png
timotheegiet requested changes to this revision.Apr 11 2018, 2:32 PM
timotheegiet added a subscriber: timotheegiet.

As I told you on irc, for all images, please:
-use fillMode: Image.PreserveAspectFit
-set sourceSize.height and sourceSize.width to image height and width

This revision now requires changes to proceed.Apr 11 2018, 2:32 PM
amankumargupta added a comment.Apr 11 2018, 3:01 PM

Yes I noticed the message on IRC after attaching the screenshots. Thanks for the instruction. Will update it.

amankumargupta updated this revision to Diff 31906.Apr 11 2018, 5:11 PM
  1. sourceSize.width and sourceSize.height are set to width and height.
  2. Used Image.PreserveAspectFit to fit the images.
This revision is now accepted and ready to land.Apr 11 2018, 5:33 PM
amankumargupta added a comment.Apr 12 2018, 8:43 AM

Shall I push the changes?

amankumargupta abandoned this revision.Apr 12 2018, 11:02 AM

Revision Contents
Changeset List

Diff 31906

View Options

src/activities/mosaic/Mosaic.qml

Loading...
View Options

src/activities/mosaic/mosaic.js

Loading...