mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools
synced 2024-11-16 20:58:28 +00:00
db28a3d3a7
Notifications are bundled by section, so instead of linking to the comment, link to the section. Additionally, add a parameter to the URL listing all the comment IDs from the bundle, and highlight them all and scroll to the topmost one. Having to handle both URL fragments and URL query parameters makes this code kind of a mess :( Also, some unexpected changes became necessary: * EventDispatcher.php: Store the section title in events using HeadingItem::getLinkableTitle() instead of ThreadItem::getText(). The result is mostly the same, except in case of wacky markup like images or extension tags. We can more reliably use it to link to the section on the page, and we already use getLinkableTitle() when generating edit summaries in the reply tool for this reason. * dt.init.less: Change the mix-blend-mode for the highlights from 'multiply' to 'darken', so that multiple overlapping highlights do not look more opaque. This affects how the highlights look on non-white backgrounds and images (they're less blue, and on darker backgrounds entirely invisible), but it seems worth it. Bug: T286620 Change-Id: I21bb5c003abc2747f0350d3f3af558dfb55693e9
179 lines
3.7 KiB
Plaintext
179 lines
3.7 KiB
Plaintext
span[ data-mw-comment-start ] {
|
|
// Give comment anchors a negative offset so we don't position
|
|
// them right at the edge of the page when jumping to them
|
|
position: relative;
|
|
top: -1em;
|
|
}
|
|
|
|
.ext-discussiontools-init-replylink-buttons {
|
|
user-select: none;
|
|
display: none;
|
|
|
|
.mw-content-ltr & {
|
|
/* @noflip */
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.mw-content-rtl & {
|
|
/* @noflip */
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.ext-discussiontools-replytool-enabled & {
|
|
// Chromium bug (T260072): Element with `user-select: none` at the end of a paragraph causes
|
|
// triple-click (to select the paragraph) to also select the first character of the next paragraph
|
|
// https://bugs.chromium.org/p/chromium/issues/detail?id=1116214
|
|
display: inline-flex;
|
|
|
|
.client-nojs & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ext-discussiontools-init-replylink {
|
|
&-reply {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Similar to mw-editsection-bracket
|
|
&-bracket {
|
|
color: #54595d;
|
|
|
|
.mw-content-ltr &:first-of-type,
|
|
.mw-content-rtl &:not( :first-of-type ) {
|
|
/* @noflip */
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.mw-content-ltr &:not( :first-of-type ),
|
|
.mw-content-rtl &:first-of-type {
|
|
/* @noflip */
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ext-discussiontools-init-replylink-active {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.ext-discussiontools-init-replylink-open & > a {
|
|
color: #72777d;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media print {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ext-discussiontools-init-highlight {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
@supports ( mix-blend-mode: darken ) {
|
|
.ext-discussiontools-init-highlight {
|
|
mix-blend-mode: darken;
|
|
// Support: Safari
|
|
// Safari doesn't blend this overlay with the text unless GPU rendering is forced.
|
|
transform: translateZ( 0 );
|
|
}
|
|
}
|
|
|
|
.ext-discussiontools-init-highlight-fadein {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ext-discussiontools-init-highlight-fadeout {
|
|
opacity: 0;
|
|
transition: opacity 250ms ease-out;
|
|
}
|
|
|
|
.ext-discussiontools-init-publishedcomment {
|
|
// Support: IE11
|
|
// On supporting browsers, we instead use non-transparent color with mix-blend-mode.
|
|
// Identical to #ffe29e on white background.
|
|
background-color: rgba( 255, 198, 60, 0.5 );
|
|
}
|
|
|
|
@supports ( mix-blend-mode: darken ) {
|
|
.ext-discussiontools-init-publishedcomment {
|
|
background-color: #ffe29e;
|
|
}
|
|
}
|
|
|
|
.ext-discussiontools-init-targetcomment {
|
|
// Support: IE11, see above
|
|
background-color: rgba( 216, 235, 255, 0.5 );
|
|
}
|
|
|
|
@supports ( mix-blend-mode: darken ) {
|
|
.ext-discussiontools-init-targetcomment {
|
|
// Same color as the :target selector for references (from Cite).
|
|
// Not sure if that's a good idea, but it should be different from -publishedcomment.
|
|
background-color: #eaf3ff;
|
|
}
|
|
}
|
|
|
|
// NB Directional properties for anything immediately visible
|
|
// in the header must be based on content direction.
|
|
.ext-discussiontools-init-section {
|
|
&-subscribe {
|
|
display: none;
|
|
|
|
.mw-content-ltr & {
|
|
/* @noflip */
|
|
float: right;
|
|
}
|
|
|
|
.mw-content-rtl & {
|
|
/* @noflip */
|
|
float: left;
|
|
}
|
|
|
|
&.mw-editsection-like {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
margin-top: 0.7em;
|
|
}
|
|
|
|
.ext-discussiontools-topicsubscription-enabled & {
|
|
display: block;
|
|
}
|
|
|
|
// Similar to mw-editsection-bracket
|
|
&-bracket {
|
|
color: #54595d;
|
|
|
|
.mw-content-ltr &:first-of-type,
|
|
.mw-content-rtl &:not( :first-of-type ) {
|
|
/* @noflip */
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.mw-content-ltr &:not( :first-of-type ),
|
|
.mw-content-rtl &:first-of-type {
|
|
/* @noflip */
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ext-discussiontools-emptystate {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.ext-discussiontools-emptystate-text > p {
|
|
margin: 2em 0;
|
|
}
|
|
}
|
|
|
|
.ext-discussiontools-init-replylink-open .ext-discussiontools-emptystate {
|
|
display: none;
|
|
}
|