[Flatfish] make Context menu not fill fullscreen

RESOLVED FIXED

Status

RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: gasolin, Assigned: gasolin)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [mentor-lang=zh][developer+])

Attachments

(4 attachments, 5 obsolete attachments)

(Assignee)

Description

5 years ago
expect:

UItest/UI/contextmenu popup not fill fullscreen
(Assignee)

Updated

5 years ago
Blocks: 935816, 903304
(Assignee)

Updated

5 years ago
Whiteboard: [good first bug][mentor=gasolin][mentor-lang=zh]

Comment 2

5 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

5 years ago
Created attachment 8335127 [details]
UI spec
(Assignee)

Comment 4

5 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

5 years ago
blocking-b2g: 1.3+ → ---
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

5 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
Hi Fred
I didn't get this "At this moment, please put tablet related CSS change".
Thanks
(Assignee)

Comment 8

5 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

5 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

5 years ago
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
Flags: needinfo?(gasolin)
(Assignee)

Comment 12

5 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)
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
Flags: needinfo?(gasolin)
(Assignee)

Comment 14

5 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)
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

5 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)
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
(Assignee)

Comment 18

5 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.
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
(Assignee)

Comment 21

5 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

5 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.
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

5 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/
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
(Assignee)

Comment 27

5 years ago
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
(Assignee)

Comment 29

5 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

5 years ago
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
(Assignee)

Comment 32

5 years ago
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.
(Assignee)

Comment 34

5 years ago
please fix duplicate properties first, then I can dive in and help you check the details
(Assignee)

Comment 35

5 years ago
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.
(Assignee)

Updated

5 years ago
Duplicate of this bug: 938518
(Assignee)

Comment 38

5 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

5 years ago
Created attachment 8365546 [details]
screenshot

use dynamic calc value to have right scale
(Assignee)

Comment 40

5 years ago
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)
(Assignee)

Comment 41

5 years ago
Created attachment 8365549 [details]
screenshot updated
Attachment #8365546 - Attachment is obsolete: true
Attachment #8365547 - Flags: review?(alive) → review+
(Assignee)

Comment 42

5 years ago
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.