Implement New Chrome Extension Mockup

mikepsinn commented 10 years ago

Our Chrome extension currently has all the options in one screen. The functionality is mostly here, but we want to separate it out into four separate screens.

The current version of the extension can be downloaded here: https://chrome.google.com/webstore/detail/quantimodo-beta/jioloifallegdkgjklafkkbniianjbgi?hl=en-US

Currenly, if the user clicks on the extension and not logged in, they are sent to quantimo.do/analyze. Instead, we now want them to see a login box like this:

Login Screen: login-dialog

That should use the same WordPress authentication logic found at https://quantimo.do/wp-login.php

Once they are logged in, they see this screen which uses the quantimodo/api/variables/search endpoint to autocomplete. If they press enter or click on a variable, it should move to the next screen. This should function just like Google's autocomplete search.

Select Variable Screen: initial

If the variable was one that existed and came up on the autocomplete, they see this screen where they may submit a measurement.

Add Measurement Screen: sumbit_measurement

If the variable that they entered does not already exist, the API call for the variables will return an empty array. If this happens, the user should instead sent to this "Add Variable and Measurement" screen to create a new variable in addition to reporting their first measurement for that variable.

Add Variable and Measurement Screen: new_variable

mikepsinn commented 10 years ago

@pankajr03

screenclip

Please link to your commit in the comments of this issue.

mikepsinn commented 10 years ago

@pankajr03 Please make the layout spacing, button style, fields and images more closely match those in the mockups above.

Also, today when I tried the extension, it was not doing the autocomplete on the first screen. Does it do autocomplete with existing variables for you?

pankajr03 commented 10 years ago

For the layout i tried to make it most like the screenshot attached, as i'm not a designer so i fell shot on it, what i suggest for it you gave me the html of those four pages and i will implement it or if you have any designer then he or she can make the design changes on the extension. For the autocomplete it is working for me. Still i check it on different system.

mikepsinn commented 10 years ago

I don't really have the HTML or a designer. I just made them in Photoshop. I was inspired by these extensions:

Could you install them, right click and inspect element, get the HTML from them and modify it to fit our use case? @pankajr03

pankajr03 commented 10 years ago

Okay i will do you have to gave me bonus for that :)

pankajr03 commented 10 years ago

Google Voice i am getting this message. "The Chrome extension only works with Google Voice accounts that use a Google Voice number or use voicemail. Get a Google Voice Number »"

For the second one it is not able to load it is saying it is already loaded but it is not showing in the extension. Sent me other link where i can do the debugs and get the html.

pankajr03 commented 10 years ago

I have committed and push the changes in pankaj/multi-screen-v1 branch. Please check and confirmed.

mikepsinn commented 10 years ago

Thanks, @pankajr03 !

The buttons look better.

However, there are still a few issues to be addressed

[x] the login image should be the one here. You should be able to just crop and use the image below. Also, you can just leave the text in the cropped image as well so that it looks nicer.

Login Screen: login-dialog

[x] The gear and logo should link as described here: https://cloud.githubusercontent.com/assets/2808553/4623243/ded17462-5349-11e4-85e2-e900877ff0b1.png
[x] The text fields should not be wider than the pop-up box, as shown here: https://cloud.githubusercontent.com/assets/2808553/4623243/ded17462-5349-11e4-85e2-e900877ff0b1.png
[x] We need a single field date/time picker like this: http://xdsoft.net/jqplugins/datetimepicker/ as shown here: https://cloud.githubusercontent.com/assets/2808553/4623245/e3256ea6-5349-11e4-887b-4fa3ab8b21a6.png
[x] The proportions of the screens and the font sizes should match those of the mockups.
[x] All results returned by autocomplete search should be clickable. Right now, half of them are covered up/cut off.

pankajr03 commented 10 years ago

I have fixed all them. Please check and confirm.

pankajr03 commented 10 years ago

I fixed the error "Line 9, Column 11". Please check and confirm.

mikepsinn commented 10 years ago

Thanks, Pankaj!

Sorry I've been super busy and haven't had time to check yet. Hopefully, by tomorrow.

Thanks, again!

mikepsinn commented 10 years ago

Thanks for your patience, Pankaj!

Also, thank you for fixing the errors.

Remaining Issues

The data picker pops upward and gets cut off like this: capture

Can you adjust the layout so it matches the mockup? I put the mockups on the left so you can see the difference.

capture

[x] Make the general layout, sizing, and spacing match that of the mockup.

capture

[x] Have the unit field display all of the available units from every category.
[x] Remove unit category drop down.
[x] Make the general layout, sizing, and spacing match that of the mockup.
[x] Remove SUM and MEAN radio buttons and just use MEAN by default

capture

[x] Have the unit field display all of the available units from every category.
[x] Remove unit category drop down.
[x] Make the general layout, sizing, and spacing match that of the mockup.

Thank you for your assistance in this matter! :D

pankajr03 commented 10 years ago

Changes implemented!

mikepsinn commented 10 years ago

@pankajr03 Thanks! Are you able to successfully post a measurement now?

I get

POST https://quantimo.do/api/measurements/v2 400 (Bad Request) background.js:147uploadMeasurements background.js:147(anonymous function) background.js:101target.(anonymous function) extensions::SafeBuiltins:19EventImpl.dispatchToListener extensions::event_bindings:397target.(anonymous function) extensions::SafeBuiltins:19publicClass.(anonymous function) extensions::utils:93EventImpl.dispatch_ extensions::event_bindings:379EventImpl.dispatch extensions::event_bindings:403target.(anonymous function) extensions::SafeBuiltins:19publicClass.(anonymous function) extensions::utils:93messageListener extensions::messaging:188target.(anonymous function) extensions::SafeBuiltins:19EventImpl.dispatchToListener extensions::event_bindings:397target.(anonymous function) extensions::SafeBuiltins:19publicClass.(anonymous function) extensions::utils:93EventImpl.dispatch_ extensions::event_bindings:379EventImpl.dispatch extensions::event_bindings:403target.(anonymous function) extensions::SafeBuiltins:19publicClass.(anonymous function) extensions::utils:93dispatchOnMessage

Also, is it possible to allow the dropdown autocomplete list to drop below the bottom of the pop-up box? It seems to get cut off.

pankajr03 commented 10 years ago

The error had been fixed! On the auto-complete list drop-down it is not possible that it extended to bottom.

mikepsinn commented 10 years ago

Thanks, Pankaj! I didn't realize that. I guess can you extend it as much as necessary so we can see at least 5 autocomplete results?

Also this image is still distorted: screenclip

Also the box there isn't long enough so it has a scroll bar on the right.

It should look more like this:

pankajr03 commented 10 years ago

It's fixed, Please check and confirm!

mikepsinn commented 9 years ago

Hi, @pankajr03 ! The login screen looks MUCH better! Thank you!

Since the autocomplete is being cut off, can we extend the height of the pop-up box either when user clicks in the field to start typing like this?

autocomplete select variable qm chrome mockup

Also, could you adjust the position and size of the logo and text to match the mockup?

And could you make the date format in the date picker match the mockup (Time AM/PM Month/Day/Year) and add a little calendar icon next to it that when clicked also opens the data picker?

Like this: capture

pankajr03 commented 9 years ago

Please check the changes!

mikepsinn commented 9 years ago

Thanks, @pankajr03 !

Is it possible for you to open this page with the mockups so that you can see them while you adjust the font sizing and positions of the elements in Chrome Developer Tools or something so that they match more closely? The positioning and sizing still doesn't really match.

Here are some icons you can use:

After that's taken care of, we can be done with this job.

Thanks for your help! :D

pankajr03 commented 9 years ago

Please check now. I tried to make it very similar.

mikepsinn commented 9 years ago

Thanks, @pankajr03 .

Log in with the user: quantimodo pw: B1ggerstaff! Try entering Overall Mood as your variable.

Note the problem when you try to click the submit measurement button. It doesn't submit and moves upward and you have to click it again.

Then try to enter 100 as the value and notice that it's cut off. Make that value box wide enough to enter 5 digits and align it left.

Notice that the date box cuts off part of the text as well and that the calendar icon is just a white box.

AM is not capitalized and it's cutting off the 0 that should be at the end of 10:4am. 10:4am should be 10:40AM. screenclip

Make sure you test it thoroughly and that you find it easy to use (without anything being cut off, etc).

mikepsinn commented 9 years ago

Also, I can't seem to add a new variable.

Do you get this error?

 Failed to load resource: net::ERR_FILE_NOT_FOUND
extensions::uncaught_exception_handler:8 Error in event handler for (unknown): SyntaxError: Unexpected string
    at Function.jQuery.extend.parseJSON (chrome-extension://gnbflgfgbbpkhlnnkdphidmhigiioacg/js/jquery-1.10.2.js:550:23)
    at chrome-extension://gnbflgfgbbpkhlnnkdphidmhigiioacg/js/popup.js:291:21
extensions::uncaught_exception_handler:8 Error in event handler for (unknown): SyntaxError: Unexpected string
    at Function.jQuery.extend.parseJSON (chrome-extension://gnbflgfgbbpkhlnnkdphidmhigiioacg/js/jquery-1.10.2.js:550:23)
    at chrome-extension://gnbflgfgbbpkhlnnkdphidmhigiioacg/js/popup.js:291:21

when you do this?

screenclip

@pankajr03

pankajr03 commented 9 years ago

I have fixed all the issues mentioned above. Have add new Variable "Overall Mood" and Edit too and it is working fine for me. Please check and confirm.

mikepsinn commented 9 years ago

Hi, Pankaj! I'll be able to check it in a couple hours. Thanks! On Nov 23, 2014 11:05 PM, "pankajr03" notifications@github.com wrote:

I have fixed all the issues mentioned above. Have add new Variable "Overall Mood" and Edit too and it is working fine for me. Please check and confirm.

— Reply to this email directly or view it on GitHub https://github.com/Abolitionist-Project/QuantiModo-Chrome-Extension/issues/22#issuecomment-64152709 .

joahnamarie26 commented 9 years ago

Hi @pankajr03 ! im Joahna (Mr. Mike's assistant)

adding variable error

I cant create a new variable because i cant select a variable category. Please also pay attention on the error message. We are hoping that you will fix the problem. Thanks a lot! :)

pankajr03 commented 9 years ago

Hello Joahna, I will check it, but i have created the variable and edit it too. I created new varaible now name "pankaj test". It is adding without any problem. I problem which i see may be the category dropdown is taking some time to load as with your login it have many values. But it is working good at my end. Please double check it.

joahnamarie26 commented 9 years ago

HI @pankajr03 can you show me some screenshot that it is working on you? thanks! :)

pankajr03 commented 9 years ago

I can share my screen.

On Tue, Nov 25, 2014 at 11:42 AM, joahnamarie26 notifications@github.com wrote:

HI @pankajr03 https://github.com/pankajr03 can you show me some screenshot that it is working on you? thanks! :)

— Reply to this email directly or view it on GitHub https://github.com/Abolitionist-Project/QuantiModo-Chrome-Extension/issues/22#issuecomment-64315032 .

Regards, Pankaj

pankajr03 commented 9 years ago

Sent me your skype id and i can show u.

On Tue, Nov 25, 2014 at 11:50 AM, Pankaj Kumar pankaj1211ranout@gmail.com wrote:

I can share my screen.

On Tue, Nov 25, 2014 at 11:42 AM, joahnamarie26 notifications@github.com wrote:

HI @pankajr03 https://github.com/pankajr03 can you show me some screenshot that it is working on you? thanks! :)

— Reply to this email directly or view it on GitHub https://github.com/Abolitionist-Project/QuantiModo-Chrome-Extension/issues/22#issuecomment-64315032 .

Regards, Pankaj

Regards, Pankaj

pankajr03 commented 9 years ago

scr2 Please check the screenshot.

mikepsinn commented 9 years ago

@joahnamarie26 @pankajr03 Did you guys get together via Skype and figure it out?

joahnamarie26 commented 9 years ago

HI sir @mikepsinn ive tried using the quantimodo account and it is working already.

mikepsinn commented 9 years ago

I see what the problem is.

Here: https://github.com/Abolitionist-Project/QuantiModo-Chrome-Extension/blob/0c3b10ae92a8e90413424b752c29b96c599ffa55/js/popup.js#L320

We're getting the list of variable categories from the list of that user's variables obtained here: https://github.com/Abolitionist-Project/QuantiModo-Chrome-Extension/blob/0c3b10ae92a8e90413424b752c29b96c599ffa55/js/background.js#L150

We need to also retrieve the variable categories as shown here: https://quantimo.do/api/docs/#!/variableCategories/getVariableCategories_get_0

Then we need to use that variables categories JSON array to populate the Variable Category menu dropdown when creating a new variable, because a new user is not going to have any categories, otherwise and won't be able to create a variable.

pankajr03 commented 9 years ago

I wanted to talk to you on it. Can we talk right now?

On Wed, Nov 26, 2014 at 9:28 AM, Mike P. Sinn notifications@github.com wrote:

I see what the problem is.

Here:

https://github.com/Abolitionist-Project/QuantiModo-Chrome-Extension/blob/0c3b10ae92a8e90413424b752c29b96c599ffa55/js/popup.js#L320

We're getting the list of variable categories from the list of that user's variables obtained here:

https://github.com/Abolitionist-Project/QuantiModo-Chrome-Extension/blob/0c3b10ae92a8e90413424b752c29b96c599ffa55/js/background.js#L150

We need to also retrieve the variable categories as shown here:

https://quantimo.do/api/docs/#!/variableCategories/getVariableCategories_get_0

Then we need to use that variables categories JSON array to populate the Variable Category menu dropdown when creating a new variable, because a new user is not going to have any categories, otherwise and won't be able to create a variable.

— Reply to this email directly or view it on GitHub https://github.com/Abolitionist-Project/QuantiModo-Chrome-Extension/issues/22#issuecomment-64511929 .

Regards, Pankaj

pankajr03 commented 9 years ago

It had been fixed. Please check and confirm.

mikepsinn / QuantiModo-Chrome-Extension

Implement New Chrome Extension Mockup #22