Mozilla App Maker Hack – 1

Hola Fellas πŸ™‚
My new experiment(on ubuntu platform πŸ™‚ ) with Mozilla App Maker.
Recently “Habitat” branch patch landed in “developer” branch (main branch in app maker). This will make the running App maker locally easier and now no need to be depend on foreman and all other complex and crapy stuff πŸ˜‰
All thanks to Scott Dwane (:thecount) for landing the patch πŸ™‚

Getting Started :
This section covers how to get Appmaker running locally. The workflow is optimized for contributors.
Dependencies :
Make sure you have nodejs, npm, and git installed.
Build the System :
Step 1. Create a root mozilla-appmaker directory:

mkdir mozilla-appmaker
cd mozilla-appmaker

Step 2. Forking And Cloning The Repository
Fork this repository, and then clone your fork into the mozilla-appmaker directory:

git clone https://github.com/your_user_name/appmaker.git

Your directory structure should look like this:

mozilla-appmaker/
β”œβ”€β”€ appmaker/

Configure remote:(If you want to, otherwise it’s not necessary now for building)

cd appmaker
git remote add upstream https://github.com/mozilla-appmaker/appmaker.git
git fetch upstream

Environment Setup And Configuration
cd appmaker
Install Node packages:
npm install
Configure your env:

cp sample.env .env

It’s copying set of default settings for app to use and make setting up for first time easier.

Hope you won’t get any error till here πŸ˜‰
Now run the following command and you are good to go…Yay!! πŸ™‚

node app

You will something like this in terminal

rishav@rishav:~/mozilla-appmaker/appmaker$ node app
PUBLISH_HOST set to 192.168.42.161.xip.io:12319
ASSET_HOST set to http://192.168.42.161.xip.io:5001
Setting PERSONA_AUDIENCE to be http://localhost:5001
Loaded 42 local components from ./public/bundles
Created locale mapping from 42 locale files, with 0 failures.
Express server listening on port 5001
Express server for noxmox listening on http://localhost:12319, serving content from /tmp/mox/

open your browser and in address bar Type :

localhost:5001

Screenshot from 2014-09-13 22:31:31

More blogs are coming on App maker hacks and specially on Fusion of TogetherJS with App Maker πŸ™‚
Stayed tunned…till then Happy HaCkInG πŸ™‚

Ping on #app-maker irc channel or rishav006@gmail for any help πŸ™‚

Advertisements

Gsoc_Part_2 : Bug 1020306 – Make the thread/message edit mode to match the style used by other applications

This is my another work which i did during my GSOC project πŸ™‚
Here in this bug I implemented the new UX flow of SMS app.
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 & Fang for helping me out there πŸ™‚

About the Bug :
The edit mode used for threads and messages is currently different than what’s offered by other gaia apps (e.g. the e-mail app). To pave the way for future functionality (such as mark-as-read) we should modify it to be more consistent with the rest of Gaia.

Purpose of this bug is to “Make the thread/message edit mode to match the style used by other applications “.

1. Select-all/Deselct-all button at top right corner (header) in thread-edit mode.
2. Delete button at bottom in thread-edit mode.
3. Addition of blue dot(for unread messages) in thread-edit mode.
4. change in postion of checkbox and blue dot (similar to email app or omega proposal) in thread-edit mode.
5. change in color of checkbox (from red to blue:similar to email app or omega proposal) in thread-edit mode.
6. Necessary changes/addition in menu option or header.
7. Almost Similar changes (1,2,5,6) for message-edit mode.

Another important work was to write unit test for all these changes .
Patch Link:
https://github.com/mozilla-b2g/gaia/commit/1ff9755c563a08c0f8061719fb8738e6ebd2b1b5

Before Applying the patch :

20 21 23

Same for message edit mode…

 

After applying the Patch :Β Β Β  πŸ™‚

Screen Shot 2014-07-03 at 19.11.23 Screen Shot 2014-07-03 at 19.11.27 Screen Shot 2014-07-03 at 19.11.32 Screen Shot 2014-07-03 at 19.11.34 Screen Shot 2014-07-03 at 19.11.41 Screen Shot 2014-07-03 at 19.11.49 Screen Shot 2014-07-03 at 19.11.55 Screen Shot 2014-07-03 at 19.11.59 Screen Shot 2014-07-03 at 19.12.01

 

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 πŸ™‚

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 πŸ™‚