487.02 KB, image/png
212.90 KB, image/png
46 bytes, text/x-github-pull-request
|Details | Review | Splinter Review|
595.49 KB, image/png
expect: UItest/UI/contextmenu popup not fill fullscreen
Whiteboard: [good first bug][mentor=gasolin][mentor-lang=zh]
hi Fred, is it possible to have someone to fix this issue?
blocking-b2g: --- → 1.3+
Whiteboard: [good first bug][mentor=gasolin][mentor-lang=zh] → [good first bug][mentor=gasolin][mentor-lang=zh][developer+]
We are occupied till the middle of next week. If someone want to take this, I'd glad to be a mentor
Hi Fred Can I get assigned this bug? I'm interested to work on this bug. It will be helpful if you guide me in reproducing this bug and other necessary info regarding this bug. Thanks
the code is located in system/style/action_menu/action_menu_extended.css (main styles are done in shared/style/action_menu) At this moment, please put tablet related CSS change in `system/style/action_menu/action_menu_extended.css`. You can use `inspector` in browser developer tools to help investigate and manipulate styles. Feel free to ping me if you have encounter any problems :)
Assignee: nobody → rishav006
Hi Fred I didn't get this "At this moment, please put tablet related CSS change". Thanks
Please put your CSS into `system/style/action_menu/action_menu_extended.css`, but not in `shared/style/action_menu`. please refer bug 935816 and bug 938518 to find similar dialogs CSS style works.
The reason is shared/style is in the progress of UI change, we have to merge tablet work later after the change is done.
Please refer Bug 938518 Comment 4 for setup dev environment for tablet
Created attachment 8356776 [details] Screen Shot 2014-01-03 at 13.21.58.png Hi fred, Please have a look on attached image.How is this pop up window. Thanks
It's not right since the dialog frame is not zoom to center. Please check https://github.com/mozilla-b2g/gaia/pull/12997/files And you may need add an extra html tag (something like #dialog-overlay in above patch) to mimic the transparent background
Created attachment 8357353 [details] Screen Shot 2014-01-04 at 13.04.45.png Hi fred, Have a look on this image.Some thing like this? Thanks
Attachment #8356776 - Attachment is obsolete: true
Sorry but it does not looks like the UI spec showed. Please put a Pull Request and I can get your code for help.
Hi fred What should be height,width,padding and margin for pop up window.I am not getting exactly. Thanks
The goal is to have the layout looks exactly like https://bug935820.bugzilla.mozilla.org/attachment.cgi?id=8335127 You could refer what I've done in the style/sleep_menu.css to get the idea. Recently we found another dialog bug 957071, which might simpler. It's fine if you want to take it a try first.
Created attachment 8357948 [details] Screen Shot 2014-01-05 at 12.06.38.png Hi fred, After inspecting so much, i could this much.Have a look, if it is ok, then i will submit Patch for this.Then you(or I, if i can ) will make more changes if needed. Main problem i faced is that, i don't know exact measurement of everything.also in that link(https://bug935820.bugzilla.mozilla.org/attachment.cgi?id=8357353).Every thing is not clear, also there is four option in this window.But i need only two, so i am unable to get exact size,gap,margin of everything.
Attachment #8357353 - Attachment is obsolete: true
It's much closer now. Don't try to get exact size since the action menu items number will changed by request. Take a look at https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/sleep_menu/sleep_menu.css#L199 `#sleep-menu-container` and `#sleep-menu-container li` should provide most calculated values for you.
Hi fred, Now i think it's now good.i followed your written css https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/sleep_menu/sleep_menu.css#L199 . Should i submit the patch now ? Thanks
Created attachment 8358359 [details] Screen Shot 2014-01-06 at 04.28.07.png
Attachment #8357948 - Attachment is obsolete: true
please check the bottom button size, the text align, and the background of each item. Do you know you could use 'inspector' tool to dynamically modify and see the style inheritance and the changed result? (in Firefox Nightly > Tools/WebDeveloper/Inspector menu) For sleep menu style, you could long press the almost hidden power button in top right corner of the nightly fxos screen. Use the above technique you could investigate the runtime style.
One thing to notice is your screenshot size is 1248x707, please pull the '=' bar in right and bottom side of fxos screen and scale to '1312x831'. then the export screenshot size will be correct to 1280x800. It's the fxos nightly add-on's bug.
Hi fred, There should be proper position for all elements only for tablet(1280 X 800) or for every resolution. Also resolution should be 1280x768 or 1280x800 ?When you will come on irc, i was waiting for you.I pinged you too, but i didn't get the response.
this layout is applied only for width > 768. Since its web, we do not focus too much on height. so you should put it into another @media query section instead of replace the current styles '1312x831' is the correct number for screenshot. The form factor is 1280x800 at first launch but keep in mind it will be applied to other resolutions. https://hacks.mozilla.org/2014/01/mozilla-launches-contribution-program-to-help-deliver-firefox-os-to-tablets/
Created attachment 8358560 [details] Screen Shot 2014-01-06 at 09.28.22.png Hi fred I tried so much.Every thing is fine .I completely copied the code too..still at paritcular height say 831.it's fine for every width>768.But if i am changing the height, then position of cancel button and it's background get distorted.may be in sleep_menu there are various tags.so it's possible to make every element responsive at every height and width.But In this window, i am trying for four days.But still couldn't satisfy you.sorry.
Attachment #8358359 - Attachment is obsolete: true
Also, in sleep_menu (html/css). option in pop up window and cancel buttton(and it's background) are in different div/menu tag.so it was responsive under every height and width but in this case all are in same div.so positioning (of cancel button and it's background) are getting distorted on changing height and width. Thank you
please put your PR here then I can help you find out the glitch
Hi fred, I commited in my repo https://github.com/kumarrishav/gaia/commit/ae6df31343aa34b1cb3a763761177f4b7d96b19c Do i suppposed to do pull request ? This code will for work perfect for every width>768 and height=831. Everything accept "cancel button background" work for all height and width( i.e completely responsive). I was unable to decide exact height and width of Cancel.So have a look on that too. Thanks
I've add some comments in github. Not test on nightly yet. with current @media query it just modify the default CSS with certain screen width, so you don't have to copy properties, they could be inherited from the default one. Please use inspector to remove these redundant properties
TO get proper height and font size, try to reference the general dialog's button css in system/stylethemes/default/buttons.css
Hi fred, What about "Cancel Button Background"? Thanks
It should be 7rem height in UI spec
In the pop up window, i made everything responsive at width>768 except background of "Cancel button".The reason is that to make " cancel" button background responsive, i have to set "Position=absolute". but it's working only on position=fixed and in fixed position it won't become responsive.when i am changing it to absolute, it get disappear.
please fix duplicate properties first, then I can dive in and help you check the details
Hi kumar, are you still work on this issue? Anything can I help?
Hi Fred Sorry, i were on hoildays , so couldn't work on this. Now i am back update you very soon. Extremly sorry for delay.
Hi kumar, After digging the css, I'd steal the bug from you to fix it since there're too many details need to be addressed and should not be the good first bug either. Thanks for your efforts!
Assignee: rishav006 → gasolin
Whiteboard: [good first bug][mentor=gasolin][mentor-lang=zh][developer+] → [mentor-lang=zh][developer+]
Created attachment 8365547 [details] [review] pull request redirect to github Can reproduce by long press on homescreen to trigger the action menu
Attachment #8365547 - Flags: review?(alive)
Created attachment 8365549 [details] screenshot updated
Attachment #8365546 - Attachment is obsolete: true
Attachment #8365547 - Flags: review?(alive) → review+
merged to gaia-master https://github.com/mozilla-b2g/gaia/commit/072cb1a76ff4530418a84c046f31614e20080d5b thanks!
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.