Gsoc_Part _3: Bug 1053119 – Adding contact images in Thread list edit mode of SMS app and modification in existing Transition/Animations :

After long time (about two months) finally i got time to write blog. 🙂
My GSOC project was on SMS application of Firefox OS. This Bug was one of the part of my project. This patch has merged with master. You can experience it FxOS nightly or in Latest version.

Thanks to Mentor Gabrile svelto, JulienW (SMS app owner) and UX designer Jenny for helping me out there 🙂

About the Bug :
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:31.0) Gecko/20100101 Firefox/31.0 (Beta/Release)
Build ID: 20140715214327
Steps to reproduce:
>In SMS app there are contact images in thread list mode.
>Now here we are adding the contact images in thread list edit mode too.
Refactor the edit mode :
when we display the edit mode, we change some properties that we shouldn’t change. They trigger a reflow. Examples are: “left”, “padding”.
We need to change only “opacity” and “transform” to make the transition happen on the GPU, otherwise the animation is lost on the device.

Before applying the patch :
Thread List mode :
1
Thread List Edit mode :
Screen Shot 2014-05-03 at 04.55.56

After patching :

Thread List edit mode (Adding of contact images)
2

Other important job was to refactor the transition and animation in edit mode.
Till now when we display the edit mode, we change some properties that we shouldn’t change. They trigger a reflow. Examples are: “left”, “padding”.
We need to change only “opacity” and “transform” to make the transition happen on the GPU, otherwise the animation is lost on the device.

I replaced the existing rules with “opacity” and “transform” to bring out the same changes.

/* Lists: edit mode */
-.edit #threads-container[data-type=”list”] ul {
– padding: 0 1.5rem;
-}

.edit [data-type=”list”] li > a {
– left: -2rem;
+ transform: translateX(-1.5rem);
}
.edit [data-type=”list”] li > label {
opacity: 1;
pointer-events: auto;
– left: -2.4rem;
+ transform: translateX(2rem);
}
.edit [data-type=”list”] .danger {
– left: -1.3rem;
+ transform: translateX(2.5rem);
}
.edit [data-type=”list”] li > .pack-checkbox input ~ span:after {
opacity: 1;
– transform: translateX(4.5rem);
– left: -2.2rem;
+ transform: translateX(2.5rem);
}
.edit [data-type=”list”] li > a > aside.icon-unread {
– opacity: 1;
– left: 5rem;
+ transform: translateX(5rem);
}
.edit [data-type=”list”] li > a > p {
transform: translateX(5.0rem);
– margin-right: 3.5rem;
+ margin-right: 3.4rem;
}
-.edit #threads-container[data-type=”list”] aside.pack-end {
– margin: 0 0.5rem 0 -3rem;
+.edit [data-type=”list”] li[data-photo-url*=”blob:”] > a > p {
+ margin-right: 10rem;
}
.edit #threads-container[data-type=”list”] aside.pack-end span {
– transform: translateX(9.5rem);
+ transform: translateX(1.5rem);
}

More blogs on newly added features in fxos && App maker hacks are coming soon.
Stayed tunned…till then Happy HaCkInG 🙂

Ping on #gaia irc channel or rishav006@gmail for any help 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s