Closed
Bug 935820
Opened 11 years ago
Closed 11 years ago
[Flatfish] make Context menu not fill fullscreen
Categories
(Firefox OS Graveyard :: Gaia::System::Window Mgmt, defect)
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: gasolin, Assigned: gasolin)
References
Details
(Whiteboard: [mentor-lang=zh][developer+])
Attachments
(4 files, 5 obsolete files)
expect:
UItest/UI/contextmenu popup not fill fullscreen
Assignee | ||
Updated•11 years ago
|
Assignee | ||
Updated•11 years ago
|
Whiteboard: [good first bug][mentor=gasolin][mentor-lang=zh]
Assignee | ||
Comment 1•11 years ago
|
||
Comment 2•11 years ago
|
||
hi Fred,
is it possible to have someone to fix this issue?
blocking-b2g: --- → 1.3+
Flags: needinfo?(gasolin)
Whiteboard: [good first bug][mentor=gasolin][mentor-lang=zh] → [good first bug][mentor=gasolin][mentor-lang=zh][developer+]
Assignee | ||
Comment 3•11 years ago
|
||
Assignee | ||
Comment 4•11 years ago
|
||
We are occupied till the middle of next week. If someone want to take this, I'd glad to be a mentor
Flags: needinfo?(gasolin)
Updated•11 years ago
|
blocking-b2g: 1.3+ → ---
Comment 5•11 years ago
|
||
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
Assignee | ||
Comment 6•11 years ago
|
||
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
Comment 7•11 years ago
|
||
Hi Fred
I didn't get this "At this moment, please put tablet related CSS change".
Thanks
Assignee | ||
Comment 8•11 years ago
|
||
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.
Assignee | ||
Comment 9•11 years ago
|
||
The reason is shared/style is in the progress of UI change, we have to merge tablet work later after the change is done.
Assignee | ||
Comment 10•11 years ago
|
||
Please refer Bug 938518 Comment 4 for setup dev environment for tablet
Comment 11•11 years ago
|
||
Hi fred,
Please have a look on attached image.How is this pop up window.
Thanks
Flags: needinfo?(gasolin)
Assignee | ||
Comment 12•11 years ago
|
||
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
Flags: needinfo?(gasolin)
Comment 13•11 years ago
|
||
Hi fred,
Have a look on this image.Some thing like this?
Thanks
Attachment #8356776 -
Attachment is obsolete: true
Flags: needinfo?(gasolin)
Assignee | ||
Comment 14•11 years ago
|
||
Sorry but it does not looks like the UI spec showed.
Please put a Pull Request and I can get your code for help.
Flags: needinfo?(gasolin)
Comment 15•11 years ago
|
||
Hi fred
What should be height,width,padding and margin for pop up window.I am not getting exactly.
Thanks
Flags: needinfo?(gasolin)
Assignee | ||
Comment 16•11 years ago
|
||
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.
Flags: needinfo?(gasolin)
Comment 17•11 years ago
|
||
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
Assignee | ||
Comment 18•11 years ago
|
||
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.
Comment 19•11 years ago
|
||
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
Comment 20•11 years ago
|
||
Attachment #8357948 -
Attachment is obsolete: true
Assignee | ||
Comment 21•11 years ago
|
||
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.
Assignee | ||
Comment 22•11 years ago
|
||
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.
Comment 23•11 years ago
|
||
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.
Assignee | ||
Comment 24•11 years ago
|
||
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/
Comment 25•11 years ago
|
||
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
Comment 26•11 years ago
|
||
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
Assignee | ||
Comment 27•11 years ago
|
||
please put your PR here then I can help you find out the glitch
Comment 28•11 years ago
|
||
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
Assignee | ||
Comment 29•11 years ago
|
||
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
Assignee | ||
Comment 30•11 years ago
|
||
TO get proper height and font size,
try to reference the general dialog's button css in system/stylethemes/default/buttons.css
Comment 31•11 years ago
|
||
Hi fred,
What about "Cancel Button Background"?
Thanks
Assignee | ||
Comment 32•11 years ago
|
||
It should be 7rem height in UI spec
Comment 33•11 years ago
|
||
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.
Assignee | ||
Comment 34•11 years ago
|
||
please fix duplicate properties first, then I can dive in and help you check the details
Assignee | ||
Comment 35•11 years ago
|
||
Hi kumar,
are you still work on this issue? Anything can I help?
Comment 36•11 years ago
|
||
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.
Assignee | ||
Comment 38•11 years ago
|
||
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+]
Assignee | ||
Comment 39•11 years ago
|
||
use dynamic calc value to have right scale
Assignee | ||
Comment 40•11 years ago
|
||
Can reproduce by long press on homescreen to trigger the action menu
Attachment #8365547 -
Flags: review?(alive)
Assignee | ||
Comment 41•11 years ago
|
||
Attachment #8365546 -
Attachment is obsolete: true
Updated•11 years ago
|
Attachment #8365547 -
Flags: review?(alive) → review+
Assignee | ||
Comment 42•11 years ago
|
||
merged to gaia-master https://github.com/mozilla-b2g/gaia/commit/072cb1a76ff4530418a84c046f31614e20080d5b
thanks!
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
You need to log in
before you can comment on or make changes to this bug.
Description
•