First month of work with the app picker

Hi folks,

First of all, the result of one month of work! Go to next video:

I did the most hard work and it is something ready to see how it works. There’s some bugs(lot of bugs on different screen resolutions) I noticed and also the code is pretty ugly, so no, it is not still ready! =)

The work I already done until now is:

-First, makes the all view with pagination. That’s it, makes browsing the apps like “pages”. That work involves do it touch friendly (pan correctly the view depending of the velocity you pan, etc) and makes the grid works as expected  (adapting the spacing between items, but with a minimum to be eye pleasant) regardless of the screen resolution or portrait/landscape mode. That was the harder work, since adapting the spacing between items involves emulate something like responsive design of web pages. In that work, the most difficult actor(hehe) was Clutter, since in Clutter, you don’t know the size of the screen or the screen rotation until it is allocating its elements. BUT, I need to do some calculations (number of pages, spacing, etc) before that, since I can’t tell clutter how many space I need or how many “pages indicators” I need before knowing how many space I have to do that. So I was forced to emulate two steps, first, when clutter allocates the most external element, hang its allocation (and therefore its children allocation), calculate everything with the size clutter give me in the most external parent allocation, and then let clutter allocate everything.

-The second work was make the collection view as we have at mockups. One of the work was fixing some bugs we have before, like the side of the arrow calculation, the popup position(was wrong at different screen resolutions or screen rotation), and lot more bugs I found.

Then, when it was ready I start to make the grid inside collection view equal and aligned to the main grid. That was also a hard work, since we are fighting inside a clutter allocation for what I told before, I had to do some tricks to make that works, making a lot of communication between elements of the views and establishing some calculations that will work for every view.

After that, a fun work was to do the expanding collection view, making the elements in the main grid pan to let space to the collection view. That not was that hard, but I know there are a bunch of cases, and sure I forgot some of them, and probably some bugs are there. But for the most part it works! i.e. I tested different resolutions, different folder positions, different number of folder elements, portrait/landscape mode, and a large etcetera.

Then in the last days I was working hard on do that works for every resolution etc, I found some visual errors, due to the main problem I have, I’m doing calculations of ui elements inside a clutter allocation. So this week I was fitgthing with visual glitches of bad volumes in clutter. Finally I get rid of them (thanks Ebassi and Drago01)

And finally I rework the elements visual, making the apps icons looks better (thanks Aday for the advice)

After all, I’m having a lot of fun, and I have to thanks my mentor Florian, who is here in each step I do (and most of them stupid steps from a beginner like me =) ), Allan to give me this opportunity working for gnome and, of course, for his work (and the most important thing for me, its kindness), which get me fascinated and my soul was forced to contribute to gnome to make his mock-ups a reality (really, you was who makes me start contributing gnome!) , Jakub for his advice and really awesome work with blender(I love that program!) and his mockups for pagination and, of course, Emanuelle, to be the ClutterMan who helps me when I’m lost (in clutter and other things!) and Drago for his help also with clutter.

Finally, the work to be done is to get rid of those bugs of screen resolutions, scalate icons to make enough space to put 4 rows in small resolutions, make the code beautiful (a big clean up), make the transitions that are not still implemented and are present on the mockups, do another round with design team, and a big bug testing and fixing.

Also, the work I see would be good to have is for example, make the transition of “expand” of collection views some kind of widget. I had to do all of this manually, calculating manually all of the sizes, etc. It would be good if we have some kind of widget which expands to make space to other elements, which probably can add random ui elements, etc. and don’t do that work each time we want something like this for example in Photos or Music application or other parts of Gnome shell.

Also, it would be good if Clutter allow more this kind of workflow, allowing show/hide actors at allocation, or do some calculations before allocation(like 2 steps allocation) without overriding some item allocate function . (Emannuelle has already something for the show/hide at allocation issue)

See you next time! Hope you enjoy my work!