Commit graph

23 commits

Author SHA1 Message Date
jenkins-bot d2018ebfe0 Merge "Resize popup to 403px" 2020-11-06 10:29:45 +00:00
Adam Wight 50c0e46b0a Resize popup to 403px
Restores the max-size introduced in I6036968a2, after conflicting
changes to the popup layout.

Bug: T246029
Change-Id: I82ea48929b44d97d78112bd96ad75724ae6f46af
2020-10-30 20:25:47 +01:00
Thiemo Kreuz c6ea149d34 Wrap long words in reference preview popups
Bug: T266859
Change-Id: I874d60246a0337577c0f411d0d24f237c1ceebf2
2020-10-30 20:14:39 +01:00
Adam Wight 789cedc168 Remove reference preview "Jump to reference" link
Now that the footnote label links to the references section, we don't
need this additional link.

Bug: T265482
Change-Id: Ib9b2939eb49e7b826c7699a5b7fa0e8255fa9da1
2020-10-30 11:33:24 +00:00
Thiemo Kreuz f4d696e6bf 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-30 10:53:30 +01:00
Thiemo Kreuz 1cf721e2a2 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-28 17:23:12 +01:00
Thiemo Kreuz ee0bcf626f Increase maximum height for reference previews
Bug: T246029
Change-Id: I6036968a2072af810ffbb6a144f2ede3b2c8f810
2020-10-28 11:29:40 +01:00
Thiemo Kreuz 26ca2bcf5b Scroll reference heading as well
Bug: T249548
Change-Id: I808ee9aadc8766490e98267bb94d25887f404362
2020-10-28 11:26:52 +01:00
Thiemo Kreuz 7b96ed8c4d Move scrollbar for longer references to the right
Bug: T249530
Change-Id: I2db695aa79fae7511eb316f5463f76654722741d
2020-10-27 14:30:23 +01:00
jenkins-bot 8c7527af04 Merge "referencePreview: Replace width: 0 with display: none" 2019-05-18 14:45:19 +00:00
Thiemo Kreuz ac65bd3082 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 13:23:45 +02:00
Thiemo Kreuz b3fb2b5867 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 13:19:14 +02:00
WMDE-Fisch d72ef0fa65 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 18:02:06 +02:00
Thiemo Kreuz 34cf1f0764 Allow text selection on all fade-outs, not only on references
The last line in all popups ends with a fade-out gradient to white.
The text in this last line can currently not be selected because it is
covered by this partially transparent container, and the container
consumes all mouse events.

This patch here moves the existing solution from "reference previews
only" (where this was a much more serious problem that on page
previews) to the top-level .less file that is for all popup types.
This is not strictly required, but I feel the code belongs there.

Bug: T220200
Change-Id: Iedf667ead453c9e72025d5fdc7af34756456e68a
2019-04-25 19:31:54 +02:00
Thiemo Kreuz 06cdb58d3e Don't block clicks on vertical scrollbar behind fade-out effect
This does not solve all two acceptance criteria mentioned in T220200:
* This will allow *interacting* with the scrollbar, no matter if it
  is partly covered by the fade-out effect.
* This still does not place the scrollbar in front of the fade-out
  effect. Very thin scrollbars are still very hard to see.

Bug: T220200
Change-Id: I394aea6a25c4b3923ad01e18328d42a5e50081f3
2019-04-25 19:26:25 +02:00
Andrew Kostka 522829c43a 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-03-25 13:30:52 +01:00
Thiemo Kreuz 6ec5ac46a5 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-26 15:47:52 +00:00
Thiemo Kreuz 032e9ad004 Limit reference popups to max. 5 lines instead of 7
We run into some confusion with the previous patch Ifcc355f, and
decided to talk about the max-height for reference previews later. The
result of this conversation is this patch here.

The mocks and discussions in T214169 mention several numbers that all
conflict a little bit. In detail:

* We ignore the mentioned "4 lines", but go with 5. We assume the 4 is
a mistake. Using 5 is consistent with all mocks and all given pixel
measurements.

* The mock ask for a max-height of 106px for the container. With this
patch it's 100px, which is exactly 5 lines. The extra 6px don't do
anything as far as we can tell, but make the code confusing.

* The mock asks for 215px for the whole popup. With this patch it's
203px. Note this number is (intentionally) not hard-coded anywhere but a
result from all line heights, line counts, paddings and margins combined.

Bug: T214169
Change-Id: I18f61ed02ed506d48e3834e2ebc48b3392f7d732
2019-02-21 12:06:46 +01:00
Thiemo Kreuz d81415a040 Add all reference type icons and messages
These icons are currently unused because the gateway does not deliver
the necessary information. This will be used starting with I6223cbb.
This patch aims to introduce all resources needed by the later.

Bug: T214908
Change-Id: Ie0c3c059222700169f2605c3123554c74d974256
2019-02-20 09:32:11 +01:00
WMDE-Fisch 608a6a79cb 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-12 18:13:45 +01:00
Thiemo Kreuz 093ebf4725 Fix inconsistent font size in reference popups
See T213905#4908901.

Bug: T213905
Change-Id: Id52575f336498bc7f4f313ad838925b0eccdc7f4
2019-01-30 20:15:54 +01:00
Thiemo Kreuz 0c889c4cd4 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-29 17:06:40 +01:00
Thiemo Kreuz 671c39ef4a 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
2019-01-23 12:12:36 +01:00