wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-12-18 10:10:48 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-Popups/src/ui/templates/referencePreview/referencePreview.less

85 lines
1.9 KiB
Plaintext
Raw Normal View History

referencePreview: No event bubbling on inner child elements This is relevant in case the HTML looks like this: <… class="reference"><a><span>[</span>2<span>]</span></a></…> The additional <span> cause many additional mouseover and mouseout events. The code already tries to filter these duplicate events that are all triggered on the same link, but gets confused, especially when the multiple chains of events overlap each other in unexpected ways. It's a timing issue. This change does not fix the fundamental issue, but does make it much less painfull. This patch also removes the > from the selector. This is in case the HTML looks like this: <… class="reference"><span><a>[2]</a></span></…> The additional inner <span> would prevent any reference preview from being shown. Bug: T214693 Change-Id: If2554ba78072245c27a1f85c46f33e3c58582c1d
2019-05-09 11:23:45 +00:00
// Don't do any event bubbling on childs like <a><span>[</span>2]</a>, see T214693
#mw-content-text .reference a[ href*='#' ] * {
pointer-events: none;
}
Adjust the reference popup size and enable scollbars This patch mainly adjusts the min-height and paddings for the reference popups according to the mocks. It also enables scrolling inside of these popups if the content exceeds the max sizes. For now the scrollbars don't get specific styling. Also not, that the fade out effect seen in the mocks is not part of this task. Bug: T214169 Change-Id: Ifcc355fbcb6410778e7d4c569eb4cab09ed5dbf5
2019-02-07 14:56:53 +00:00
.mwe-popups.mwe-popups-type-reference {
Fix inconsistent font size in reference popups See T213905#4908901. Bug: T213905 Change-Id: Id52575f336498bc7f4f313ad838925b0eccdc7f4
2019-01-30 19:15:54 +00:00
.mwe-popups-title {
Scroll reference heading as well Bug: T249548 Change-Id: I808ee9aadc8766490e98267bb94d25887f404362
2020-10-27 13:24:40 +00:00
margin: 0 0 @popupPadding;
Add (i) info icon to collapsible replacement message This avoids pulling in the entirety of OOjs, with the disadvantage that we have to copy a little bit of CSS. I copied parts of this patch from I2a28666. There might be a better way to do this, with less code. E.g. is there a better way to construct these HTML elements? Bug: T220208 Change-Id: I024155f3ff0f57de1d68bbaf37bfb9e81e692bd0
2020-10-28 16:57:43 +00:00
}
Add default OOUI reference icon to all reference popups I tried hard to keep the CSS as small and robust as possible. The icon will be align with the text by adding a negativ margin. With that we also decided against using RTL and LTR specific icons that are positioned at the edge of the canvas for now. Bug: T213907 Change-Id: I98888114e1c50e249cf31e71749323bd4f69da3f
2019-01-24 17:48:13 +00:00
Add (i) info icon to collapsible replacement message This avoids pulling in the entirety of OOjs, with the disadvantage that we have to copy a little bit of CSS. I copied parts of this patch from I2a28666. There might be a better way to do this, with less code. E.g. is there a better way to construct these HTML elements? Bug: T220208 Change-Id: I024155f3ff0f57de1d68bbaf37bfb9e81e692bd0
2020-10-28 16:57:43 +00:00
.mw-ui-icon {
vertical-align: middle;
Add default OOUI reference icon to all reference popups I tried hard to keep the CSS as small and robust as possible. The icon will be align with the text by adding a negativ margin. With that we also decided against using RTL and LTR specific icons that are positioned at the edge of the canvas for now. Bug: T213907 Change-Id: I98888114e1c50e249cf31e71749323bd4f69da3f
2019-01-24 17:48:13 +00:00
Add (i) info icon to collapsible replacement message This avoids pulling in the entirety of OOjs, with the disadvantage that we have to copy a little bit of CSS. I copied parts of this patch from I2a28666. There might be a better way to do this, with less code. E.g. is there a better way to construct these HTML elements? Bug: T220208 Change-Id: I024155f3ff0f57de1d68bbaf37bfb9e81e692bd0
2020-10-28 16:57:43 +00:00
&.mw-ui-icon-element {
min-width: @iconSize;
width: @iconSize;
Add default OOUI reference icon to all reference popups I tried hard to keep the CSS as small and robust as possible. The icon will be align with the text by adding a negativ margin. With that we also decided against using RTL and LTR specific icons that are positioned at the edge of the canvas for now. Bug: T213907 Change-Id: I98888114e1c50e249cf31e71749323bd4f69da3f
2019-01-24 17:48:13 +00:00
Add (i) info icon to collapsible replacement message This avoids pulling in the entirety of OOjs, with the disadvantage that we have to copy a little bit of CSS. I copied parts of this patch from I2a28666. There might be a better way to do this, with less code. E.g. is there a better way to construct these HTML elements? Bug: T220208 Change-Id: I024155f3ff0f57de1d68bbaf37bfb9e81e692bd0
2020-10-28 16:57:43 +00:00
&:before {
margin: 0;
Add default OOUI reference icon to all reference popups I tried hard to keep the CSS as small and robust as possible. The icon will be align with the text by adding a negativ margin. With that we also decided against using RTL and LTR specific icons that are positioned at the edge of the canvas for now. Bug: T213907 Change-Id: I98888114e1c50e249cf31e71749323bd4f69da3f
2019-01-24 17:48:13 +00:00
}
Add (i) info icon to collapsible replacement message This avoids pulling in the entirety of OOjs, with the disadvantage that we have to copy a little bit of CSS. I copied parts of this patch from I2a28666. There might be a better way to do this, with less code. E.g. is there a better way to construct these HTML elements? Bug: T220208 Change-Id: I024155f3ff0f57de1d68bbaf37bfb9e81e692bd0
2020-10-28 16:57:43 +00:00
}
Add default OOUI reference icon to all reference popups I tried hard to keep the CSS as small and robust as possible. The icon will be align with the text by adding a negativ margin. With that we also decided against using RTL and LTR specific icons that are positioned at the edge of the canvas for now. Bug: T213907 Change-Id: I98888114e1c50e249cf31e71749323bd4f69da3f
2019-01-24 17:48:13 +00:00
Add (i) info icon to collapsible replacement message This avoids pulling in the entirety of OOjs, with the disadvantage that we have to copy a little bit of CSS. I copied parts of this patch from I2a28666. There might be a better way to do this, with less code. E.g. is there a better way to construct these HTML elements? Bug: T220208 Change-Id: I024155f3ff0f57de1d68bbaf37bfb9e81e692bd0
2020-10-28 16:57:43 +00:00
&.mw-ui-icon-reference-generic {
/* align narrow icon with the text */
margin-left: -2px;
Add default OOUI reference icon to all reference popups I tried hard to keep the CSS as small and robust as possible. The icon will be align with the text by adding a negativ margin. With that we also decided against using RTL and LTR specific icons that are positioned at the edge of the canvas for now. Bug: T213907 Change-Id: I98888114e1c50e249cf31e71749323bd4f69da3f
2019-01-24 17:48:13 +00:00
}
Add reference preview type This adds support for preview popups on reference/footnotes from the Cite extension. For that a new preview type was introduced and integrated into the existing structures. The essential starting points were this code comes into action are added behind the feature flag introduced in the previous patches. Bug: T213415 Change-Id: Ie0ccb03117bd654373d0f458b62cc52018361c67
2018-12-12 18:37:19 +00:00
}
Fix inconsistent font size in reference popups See T213905#4908901. Bug: T213905 Change-Id: Id52575f336498bc7f4f313ad838925b0eccdc7f4
2019-01-30 19:15:54 +00:00
Adjust the reference popup size and enable scollbars This patch mainly adjusts the min-height and paddings for the reference popups according to the mocks. It also enables scrolling inside of these popups if the content exceeds the max sizes. For now the scrollbars don't get specific styling. Also not, that the fade out effect seen in the mocks is not part of this task. Bug: T214169 Change-Id: Ifcc355fbcb6410778e7d4c569eb4cab09ed5dbf5
2019-02-07 14:56:53 +00:00
.mwe-popups-extract {
Move scrollbar for longer references to the right Bug: T249530 Change-Id: I2db695aa79fae7511eb316f5463f76654722741d
2020-10-27 13:30:23 +00:00
margin-right: 0;
Increase whitespace between reference text and read link For popup types other than references this particular margin is calculated as "2 lines + 7", which results in 47px. The calculation implemented with this patch results in 55px. That's 8 more. This also increases the total height of reference popups by the same amount. Bug: T214169 Change-Id: Ie7870717d2fd2ce78268d1fc1b79d87eff059318
2019-02-21 14:16:41 +00:00
margin-bottom: 2.75 * @lineHeight;
Scroll reference heading as well Bug: T249548 Change-Id: I808ee9aadc8766490e98267bb94d25887f404362
2020-10-27 13:24:40 +00:00
max-height: inherit;
.mwe-popups-scroll {
Increase maximum height for reference previews Bug: T246029 Change-Id: I6036968a2072af810ffbb6a144f2ede3b2c8f810
2020-10-27 13:57:47 +00:00
// 8px caused by different margin-bottom, 55px here vs. 47px upstream
max-height: 200px - 8px + 7 * @lineHeight;
Scroll reference heading as well Bug: T249548 Change-Id: I808ee9aadc8766490e98267bb94d25887f404362
2020-10-27 13:24:40 +00:00
overflow: auto;
padding-right: @popupPadding;
}
Adjust the reference popup size and enable scollbars This patch mainly adjusts the min-height and paddings for the reference popups according to the mocks. It also enables scrolling inside of these popups if the content exceeds the max sizes. For now the scrollbars don't get specific styling. Also not, that the fade out effect seen in the mocks is not part of this task. Bug: T214169 Change-Id: Ifcc355fbcb6410778e7d4c569eb4cab09ed5dbf5
2019-02-07 14:56:53 +00:00
referencePreview: Replace `width: 0` with `display: none` Before, the element is still part of the DOM, shows up in the debugger, and consumes rendering time (probably close to zero, but still). After, the element is gone. Change-Id: I580fd89868b5a91118a8115d71d819824ff7f80c
2019-05-09 11:16:33 +00:00
// Remove the default fade-out effect set by popup.less
Adjust the reference popup size and enable scollbars This patch mainly adjusts the min-height and paddings for the reference popups according to the mocks. It also enables scrolling inside of these popups if the content exceeds the max sizes. For now the scrollbars don't get specific styling. Also not, that the fade out effect seen in the mocks is not part of this task. Bug: T214169 Change-Id: Ifcc355fbcb6410778e7d4c569eb4cab09ed5dbf5
2019-02-07 14:56:53 +00:00
&:after {
referencePreview: Replace `width: 0` with `display: none` Before, the element is still part of the DOM, shows up in the debugger, and consumes rendering time (probably close to zero, but still). After, the element is gone. Change-Id: I580fd89868b5a91118a8115d71d819824ff7f80c
2019-05-09 11:16:33 +00:00
display: none;
Avoid fade-out above horizontal scrollbars The changes in the patch check if a horizontal scrollbar is present and move the absolute positioned fade overlay above that scrollbar. Since we cannot change the CSS of the :after element via JS a new div element was introduced. Bug: T220200 Change-Id: Ia69c9be0facaf3ecebdb9f76d36f7cb3412c0816
2019-04-26 11:35:27 +00:00
}
.mwe-popups-fade {
position: absolute;
Add a fade out to reference content This will only be applied when the height of the content exceeds four lines of text. Bug: T217139 Change-Id: If15952c9886c23827873812bb63e8e3127776709
2019-02-28 17:50:36 +00:00
width: 100%;
Avoid fade-out above horizontal scrollbars The changes in the patch check if a horizontal scrollbar is present and move the absolute positioned fade overlay above that scrollbar. Since we cannot change the CSS of the :after element via JS a new div element was introduced. Bug: T220200 Change-Id: Ia69c9be0facaf3ecebdb9f76d36f7cb3412c0816
2019-04-26 11:35:27 +00:00
height: @lineHeight;
Add a fade out to reference content This will only be applied when the height of the content exceeds four lines of text. Bug: T217139 Change-Id: If15952c9886c23827873812bb63e8e3127776709
2019-02-28 17:50:36 +00:00
background-color: transparent;
background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
background-image: linear-gradient( rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
Avoid fade-out above horizontal scrollbars The changes in the patch check if a horizontal scrollbar is present and move the absolute positioned fade overlay above that scrollbar. Since we cannot change the CSS of the :after element via JS a new div element was introduced. Bug: T220200 Change-Id: Ia69c9be0facaf3ecebdb9f76d36f7cb3412c0816
2019-04-26 11:35:27 +00:00
opacity: 0;
pointer-events: none; // Allows clicking "through" the element
.transition( opacity 250ms ease );
Add a fade out to reference content This will only be applied when the height of the content exceeds four lines of text. Bug: T217139 Change-Id: If15952c9886c23827873812bb63e8e3127776709
2019-02-28 17:50:36 +00:00
}
Avoid fade-out above horizontal scrollbars The changes in the patch check if a horizontal scrollbar is present and move the absolute positioned fade overlay above that scrollbar. Since we cannot change the CSS of the :after element via JS a new div element was introduced. Bug: T220200 Change-Id: Ia69c9be0facaf3ecebdb9f76d36f7cb3412c0816
2019-04-26 11:35:27 +00:00
&.mwe-popups-fade-out .mwe-popups-fade {
opacity: 1;
Add a fade out to reference content This will only be applied when the height of the content exceeds four lines of text. Bug: T217139 Change-Id: If15952c9886c23827873812bb63e8e3127776709
2019-02-28 17:50:36 +00:00
}
Handle collapsible & sortable elements in reference popups Elements that are marked as collapsible (often tables, but can actually be anything) are most certainly marked as such because they are big and don't fit in a popup. Another plugin makes tables sortable. In both cases non-functional UI elements appear in the popup. We decided: * Hide collapsible elements (no matter if currently collapsed or not), and show a placeholder text instead. * Remove sortable arrows. This is a baseline patch that solves everything, except the (i) icon is missing. This will be added in the next patch. Bug: T220208 Change-Id: I58f3036bf4988d0ebe5716b0a54506446fca10c3
2020-10-25 18:22:09 +00:00
.mwe-collapsible-placeholder {
font-weight: bold;
margin: 1em 0;
Add (i) info icon to collapsible replacement message This avoids pulling in the entirety of OOjs, with the disadvantage that we have to copy a little bit of CSS. I copied parts of this patch from I2a28666. There might be a better way to do this, with less code. E.g. is there a better way to construct these HTML elements? Bug: T220208 Change-Id: I024155f3ff0f57de1d68bbaf37bfb9e81e692bd0
2020-10-28 16:57:43 +00:00
position: relative;
// This mirrors .oo-ui-iconElement-icon
.mw-ui-icon {
position: absolute;
}
// This mirrors .oo-ui-messageWidget > .oo-ui-labelElement-label
.mwe-collapsible-placeholder-label {
margin-left: 2em;
}
Handle collapsible & sortable elements in reference popups Elements that are marked as collapsible (often tables, but can actually be anything) are most certainly marked as such because they are big and don't fit in a popup. Another plugin makes tables sortable. In both cases non-functional UI elements appear in the popup. We decided: * Hide collapsible elements (no matter if currently collapsed or not), and show a placeholder text instead. * Remove sortable arrows. This is a baseline patch that solves everything, except the (i) icon is missing. This will be added in the next patch. Bug: T220208 Change-Id: I58f3036bf4988d0ebe5716b0a54506446fca10c3
2020-10-25 18:22:09 +00:00
}
Adjust the reference popup size and enable scollbars This patch mainly adjusts the min-height and paddings for the reference popups according to the mocks. It also enables scrolling inside of these popups if the content exceeds the max sizes. For now the scrollbars don't get specific styling. Also not, that the fade out effect seen in the mocks is not part of this task. Bug: T214169 Change-Id: Ifcc355fbcb6410778e7d4c569eb4cab09ed5dbf5
2019-02-07 14:56:53 +00:00
}
Fix inconsistent font size in reference popups See T213905#4908901. Bug: T213905 Change-Id: Id52575f336498bc7f4f313ad838925b0eccdc7f4
2019-01-30 19:15:54 +00:00
.mwe-popups-read-link {
// Same font size as the read link in disambiguation popups
font-size: 12px;
}
Add reference preview type This adds support for preview popups on reference/footnotes from the Cite extension. For that a new preview type was introduced and integrated into the existing structures. The essential starting points were this code comes into action are added behind the feature flag introduced in the previous patches. Bug: T213415 Change-Id: Ie0ccb03117bd654373d0f458b62cc52018361c67
2018-12-12 18:37:19 +00:00
}
Reference in a new issue Copy permalink