mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-11-25 08:15:35 +00:00
6cade7eba3
We want the notifications in the flyout to behave just like links,
including standard middle-click and Ctrl-click behavior. The simplest
way to do that would be to actually make them links - but the area can
contain a few other links, so we can't do that and have to resort to
ugly hacks.
Or do we?
Turns out that while browsers won't accept HTML containing nested <a>
tags[1], such a structure is valid XHTML, and it's possible to create
such structure in HTML mode using DOM manipulation. It works like one
would expect: the entire thing is clickable, but inner <a> tags' hrefs
override outer ones.
Firefox even had a request to make that work[2] which was happily
fulfilled.
Tested the basic case [see below] on Firefox 22, Opera 12, Opera 15
(which uses the Blink engine like Chrome), IE 8 and IE 6 and it works
the same on all of them. Tested the XHTML variant [see below] on all
of the above except for the IEs which don't grok XHTML and it exhibits
the same behavior.
[1] Simple test: $('<div>1<a>2<a>3</a>4</a>5</div>').html() is
"1<a>2</a><a>3</a>45", not actually "1<a>2<a>3</a>4</a>5" like one
might expect.
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=331959
----
The test cases used are below. When trying out the XHTML one make sure
that the browser uses application/xhtml+xml MIME type; saving the file
with .xhtml extension should be enough.
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>1<a href="http://google.com/">2<a href="http://example.com/">3</a>4</a>5</div>
</body>
</html>
HTML:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var div = document.createElement('div');
var a1 = document.createElement('a');
a1.href = "http://google.com/";
var a2 = document.createElement('a');
a2.href = "http://example.com/";
div.appendChild( document.createTextNode('1') );
div.appendChild( a1 );
a1.appendChild( document.createTextNode('2') );
a1.appendChild( a2 );
a2.appendChild( document.createTextNode('3') );
a1.appendChild( document.createTextNode('4') );
div.appendChild( document.createTextNode('5') );
document.body.appendChild(div);
</script>
</body>
</html>
----
Bug: 52319
Change-Id: I311eca70f025ce92129c828cd88f96686b7cff72
164 lines
3.4 KiB
CSS
164 lines
3.4 KiB
CSS
.mw-echo-overlay {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: -200px;
|
|
border: 1px solid silver;
|
|
background-color: #fff;
|
|
width: 450px;
|
|
min-height: 2em;
|
|
padding: 0;
|
|
color: #6D6D6D;
|
|
z-index: 100;
|
|
box-shadow: 0px 3px 8px rgba(50, 50, 50, 0.35);
|
|
}
|
|
.mw-echo-overlay-pokey {
|
|
/* @embed */
|
|
background-image: url('PokeyNorth.png');
|
|
background-repeat: no-repeat;
|
|
width: 21px;
|
|
height: 11px;
|
|
position: absolute;
|
|
z-index: 101;
|
|
top: 20px;
|
|
left: -5px;
|
|
}
|
|
|
|
#p-personal .mw-echo-overlay ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: auto;
|
|
}
|
|
#p-personal .mw-echo-overlay li.mw-echo-notification {
|
|
display: block;
|
|
float: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#p-personal .mw-echo-overlay li.mw-echo-notification .mw-echo-notification-wrapper {
|
|
display: block;
|
|
background-color: #F1F1F1;
|
|
border-bottom: 1px solid #DDDDDD;
|
|
padding: 15px 40px 10px 10px;
|
|
white-space: normal;
|
|
font-size: 13px;
|
|
line-height: 16px;
|
|
/* Suppress standard links styles */
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
#p-personal .mw-echo-overlay li.mw-echo-notification:hover .mw-echo-notification-wrapper {
|
|
background-color: #F9F9F9;
|
|
}
|
|
#p-personal .mw-echo-overlay li.mw-echo-notification.mw-echo-unread .mw-echo-notification-wrapper {
|
|
background-color: white;
|
|
}
|
|
#p-personal .mw-echo-overlay li.mw-echo-notification.mw-echo-unread:hover .mw-echo-notification-wrapper {
|
|
background-color: #F9F9F9;
|
|
}
|
|
#p-personal .mw-echo-overlay li.mw-echo-notification:last-child .mw-echo-notification-wrapper {
|
|
border-bottom: none;
|
|
}
|
|
#p-personal .mw-echo-title a {
|
|
font-weight: bold;
|
|
}
|
|
#p-personal .mw-echo-overlay a.mw-echo-grey-link {
|
|
color: #6D6D6D;
|
|
}
|
|
|
|
.mw-echo-notification-primary-link {
|
|
display: none;
|
|
}
|
|
.mw-echo-overlay-title {
|
|
/*border-bottom: 1px solid #A7D7F9;*/
|
|
font-size: 13px;
|
|
line-height: 15px;
|
|
height: 15px;
|
|
padding: 15px 15px 15px 28px;
|
|
border-bottom: 1px solid #DDDDDD;
|
|
position: relative;
|
|
}
|
|
#mw-echo-overlay-title-text {
|
|
display: inline-block;
|
|
*display: inline;
|
|
zoom: 1;
|
|
}
|
|
#mw-echo-overlay-moreinfo-link {
|
|
display: inline-block;
|
|
margin: 0px 2px -1px 4px;
|
|
height: 13px;
|
|
width: 13px;
|
|
/* @embed */
|
|
background-image: url(Help.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
filter: alpha(opacity=50);
|
|
opacity: 0.5;
|
|
}
|
|
#mw-echo-overlay-moreinfo-link:hover {
|
|
filter: alpha(opacity=100);
|
|
opacity: 1.0;
|
|
}
|
|
|
|
#mw-echo-overlay-footer {
|
|
padding: 0px;
|
|
border-top: 1px solid #DDDDDD;
|
|
}
|
|
|
|
#mw-echo-overlay-link {
|
|
display: block;
|
|
clear: left;
|
|
float: left;
|
|
padding: 15px 15px 15px 60px;
|
|
/* 149px instead of 150px due to Chrome rounding bug (bug 47897) */
|
|
width: 149px;
|
|
min-height: 14px;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
/* @embed */
|
|
background: url(../icons/NotificationsPage-ltr.png) no-repeat 17% 50% !important;
|
|
}
|
|
#mw-echo-overlay-link:hover {
|
|
text-decoration: none;
|
|
}
|
|
#mw-echo-overlay-pref-link {
|
|
display: block;
|
|
float: left;
|
|
width: 174px;
|
|
min-height: 14px;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
padding: 15px 15px 15px 35px;
|
|
border-left: 1px solid #DDDDDD;
|
|
/* @embed */
|
|
background: url(../icons/Settings.png) no-repeat 5% 50% !important;
|
|
}
|
|
#mw-echo-overlay-pref-link:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#pt-notifications {
|
|
position: relative;
|
|
}
|
|
|
|
.mw-echo-overlay-none {
|
|
font-size: 13px;
|
|
border-bottom: 1px solid #DDDDDD;
|
|
padding: 15px 15px 10px 60px;
|
|
}
|
|
|
|
#mw-echo-mark-read-button {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
right: 15px;
|
|
padding: 1px 8px;
|
|
font-size: 11px;
|
|
line-height: 15px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
#mw-echo-overlay-feedback-link {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
right: 15px;
|
|
}
|