Bugzilla – Attachment 153331 Details for
Bug 38295
Many margin comments/notes are complicated to use
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
example styling in html (should work properly in firefox)
writer_comment_UI_example.html (text/html), 5.50 KB, created by
DarkTrick
on 2019-08-13 02:35:06 UTC
(
hide
)
Description:
example styling in html (should work properly in firefox)
Filename:
MIME Type:
Creator:
DarkTrick
Created:
2019-08-13 02:35:06 UTC
Size:
5.50 KB
patch
obsolete
><!DOCTYPE html> ><html> > <head> > > <meta charset=utf-8 /> > <style> > #content{ > background-color: white; > width: 600px; > float: left; > } > > #sidebar{ > position:absolute; > left: 600px; > background-color:rgb(230, 230, 230); > width: 250px; > } > > .comment{ > background-color: #ffff9e7a; > border-color:#dbb94883; > color: rgba(0, 0, 0, 0.5); > > border-style: solid; > border-width: 1px; > > margin-top: 7px; > padding: 2px; > height: 70px; > } > > > .commentMarking{ > height: 16px; > background-color: #ffff9e7a; > border-color:#dbb94883; > color: rgba(0, 0, 0, 0); > position: absolute; > > border-style: dashed; > border-width: 1px; > } > > > > </style> > > <script type="text/javascript"> > function resetViewFor( elementId ){ > var comment = document.getElementById(elementId); > var marking = document.getElementById(elementId + "_mark"); > > if(document.activeElement != comment){ > comment.style.backgroundColor = "#ffff9e7a"; > comment.style.borderColor = "#dbb94883"; > comment.style.color = "rgba(0, 0, 0, 0.5)"; > comment.style.borderWidth = "1px"; > > marking.style.borderStyle = "dashed"; > marking.style.borderColor = "#dbb94883"; > marking.style.color = "rgba(0, 0, 0, 0)"; > } > } > > function onCommentFocussed( elementId ){ > mouseOverComment( elementId); > > var comment = document.getElementById(elementId); > var marking = document.getElementById(elementId + "_mark"); > > marking.style.borderStyle = "solid"; > comment.style.borderWidth = "2px"; > } > > function mouseOverComment( elementId ){ > var marking = document.getElementById(elementId + "_mark"); > marking.style.borderColor = "#dbb948"; > marking.style.color = "rgba(0, 0, 0, 1)"; > > var comment = document.getElementById(elementId); > comment.style.backgroundColor = "#ffff9e"; > comment.style.borderColor = "#dbb948"; > comment.style.color = "rgba(0, 0, 0, 1)"; > } > > function mouseLeaveComment( elementId){ > resetViewFor(elementId); > } > </script> ></head> > ><body> > <div id="content"> > bbbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb > bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb > bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb > bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb > bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb > bbbbbbbb bbbbb bbbbb bbbbbbbbbb bbbbbbbb bbb bbbbbbbb > bbbbb bbbbb bbbbbbbb > bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb > bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb > bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb > bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb > bbbbbbbb bbbbb bbbbb bbbbbbbbbb bbbbbbbb bbb bbbbbbbb > bbbbb bbbbb bbbbbbbb > bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb > bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb > bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb > bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb > bbbbbbbb bbbbb bbbbb bbbb > > </div> > > <div id="sidebar"> > > <textarea id="comment1" class="comment" > onmouseover="javascript:mouseOverComment('comment1');" > onmouseleave="javascript:mouseLeaveComment('comment1');" > onfocus="javascript:onCommentFocussed('comment1');" > onBlur="javascript:mouseLeaveComment('comment1');">comment 1 > >Unknown Author >8/12/2019 18:00</textarea> > > <div id="comment1_mark" class="commentMarking" > style="top:67px; > width: 45px; > left:-306px;" > onmouseover="javascript:mouseOverComment('comment1');" > onmouseleave="javascript:mouseLeaveComment('comment1');"> > bb bb</div> > > <textarea id="comment2" class="comment"s > onmouseover="javascript:mouseOverComment('comment2');" > onmouseleave="javascript:mouseLeaveComment('comment2');" > onfocus="javascript:onCommentFocussed('comment2');" > onBlur="javascript:mouseLeaveComment('comment2');">comment 2 > >Unknown Author >8/12/2019 18:00</textarea> > > <div id="comment2_mark" class="commentMarking" > style="top:67px; > width: 38px; > left:-251px;" > onmouseover="javascript:mouseOverComment('comment2');" > onmouseleave="javascript:mouseLeaveComment('comment2');"> > bbbb</div> > > <textarea id="comment3" class="comment" > onmouseover="javascript:mouseOverComment('comment3');" > onmouseleave="javascript:mouseLeaveComment('comment3');" > onfocus="javascript:onCommentFocussed('comment3');" > onBlur="javascript:mouseLeaveComment('comment3');">comment 3 > >Unknown Author >8/12/2019 18:00</textarea> > > <div id="comment3_mark" class="commentMarking" > style="top:84px; > width: 38px; > left:-251px;" > onmouseover="javascript:mouseOverComment('comment3');" > onmouseleave="javascript:mouseLeaveComment('comment3');" > >bbbb</div> > </div> > > ></body> ></html>
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <style> #content{ background-color: white; width: 600px; float: left; } #sidebar{ position:absolute; left: 600px; background-color:rgb(230, 230, 230); width: 250px; } .comment{ background-color: #ffff9e7a; border-color:#dbb94883; color: rgba(0, 0, 0, 0.5); border-style: solid; border-width: 1px; margin-top: 7px; padding: 2px; height: 70px; } .commentMarking{ height: 16px; background-color: #ffff9e7a; border-color:#dbb94883; color: rgba(0, 0, 0, 0); position: absolute; border-style: dashed; border-width: 1px; } </style> <script type="text/javascript"> function resetViewFor( elementId ){ var comment = document.getElementById(elementId); var marking = document.getElementById(elementId + "_mark"); if(document.activeElement != comment){ comment.style.backgroundColor = "#ffff9e7a"; comment.style.borderColor = "#dbb94883"; comment.style.color = "rgba(0, 0, 0, 0.5)"; comment.style.borderWidth = "1px"; marking.style.borderStyle = "dashed"; marking.style.borderColor = "#dbb94883"; marking.style.color = "rgba(0, 0, 0, 0)"; } } function onCommentFocussed( elementId ){ mouseOverComment( elementId); var comment = document.getElementById(elementId); var marking = document.getElementById(elementId + "_mark"); marking.style.borderStyle = "solid"; comment.style.borderWidth = "2px"; } function mouseOverComment( elementId ){ var marking = document.getElementById(elementId + "_mark"); marking.style.borderColor = "#dbb948"; marking.style.color = "rgba(0, 0, 0, 1)"; var comment = document.getElementById(elementId); comment.style.backgroundColor = "#ffff9e"; comment.style.borderColor = "#dbb948"; comment.style.color = "rgba(0, 0, 0, 1)"; } function mouseLeaveComment( elementId){ resetViewFor(elementId); } </script> </head> <body> <div id="content"> bbbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbb </div> <div id="sidebar"> <textarea id="comment1" class="comment" onmouseover="javascript:mouseOverComment('comment1');" onmouseleave="javascript:mouseLeaveComment('comment1');" onfocus="javascript:onCommentFocussed('comment1');" onBlur="javascript:mouseLeaveComment('comment1');">comment 1 Unknown Author 8/12/2019 18:00</textarea> <div id="comment1_mark" class="commentMarking" style="top:67px; width: 45px; left:-306px;" onmouseover="javascript:mouseOverComment('comment1');" onmouseleave="javascript:mouseLeaveComment('comment1');"> bb bb</div> <textarea id="comment2" class="comment"s onmouseover="javascript:mouseOverComment('comment2');" onmouseleave="javascript:mouseLeaveComment('comment2');" onfocus="javascript:onCommentFocussed('comment2');" onBlur="javascript:mouseLeaveComment('comment2');">comment 2 Unknown Author 8/12/2019 18:00</textarea> <div id="comment2_mark" class="commentMarking" style="top:67px; width: 38px; left:-251px;" onmouseover="javascript:mouseOverComment('comment2');" onmouseleave="javascript:mouseLeaveComment('comment2');"> bbbb</div> <textarea id="comment3" class="comment" onmouseover="javascript:mouseOverComment('comment3');" onmouseleave="javascript:mouseLeaveComment('comment3');" onfocus="javascript:onCommentFocussed('comment3');" onBlur="javascript:mouseLeaveComment('comment3');">comment 3 Unknown Author 8/12/2019 18:00</textarea> <div id="comment3_mark" class="commentMarking" style="top:84px; width: 38px; left:-251px;" onmouseover="javascript:mouseOverComment('comment3');" onmouseleave="javascript:mouseLeaveComment('comment3');" >bbbb</div> </div> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 38295
:
57998
|
127323
| 153331 |
153332