Commit graph

467 commits

Author SHA1 Message Date
Wandji69 dbcccbae8e styles: Replace deprecated Less mixin calls with unprefixed CSS property
Replacing `.transition()` calls.

Bug: T308351
Change-Id: I6d558f38de81910d701a2e18aeb736a100e5a8ab
2023-02-03 20:39:49 +00:00
Jon Robson 7ab0b63f80 Don't show page previews on hash fragments
Bug: T198652
Change-Id: I036266bf4fb98ffa20509440e553b29e8dcc4e1f
2023-01-11 15:21:47 -08:00
Jon Robson 7295ee3a6a Account for syntax errors in closest selector
Certain browsers have the closest method but do not
support not selectors with multiple arguments. This
variant caters for both.

Bug: T325113
Change-Id: Ib5fc912bfe0f831fea4c9882c25b27541d83b66f
2022-12-13 14:14:35 -08:00
Jon Robson 01e3ddcda5 Child elements also trigger previews
Follow up to
Iefe98c1f0422dbf034e385b1a41a859d030a2cf4 where we switched from the
jquery event delegation pattern to native methods. One thing that we
overlooked was that we also need to consider the case where the selector
matches the parent of an element, for example a span nested inside an
eligible link. I've rethought this logic, to first find the closest
eligible element to normalize the element passed to model methods
before running matchesSelector.

Bug: T325007
Change-Id: I4133751dc900a51829173e9c0d965cbb18e6a33e
2022-12-13 00:52:37 +00:00
Jon Robson 898fc81998 Avoid syntax error on hover in grade C browsers
Adjust the logic of elementMatchesSelector to fallback
to jQuery when the native matches fails.

Follow up to
Iefe98c1f0422dbf034e385b1a41a859d030a2cf4

Bug: T324514
Change-Id: I0e9e894e77e2eb29fee65853aa98b141bc2a11a3
2022-12-06 07:41:22 -08:00
jenkins-bot 94c251583e Merge "Extensible previews" 2022-12-02 17:02:04 +00:00
Jon Robson 0febc3f54d Extensible previews
Allow extensions to register new types of previews via
extension attributes.

Changes:

- The check for reference previews doesn't make sense
as $('a[ href*="#" ]' ) will match any elements with a hash
fragment, so the additional check to Title.getFragment
will not provide a different result. This was introduced in
I9ec57e0fbb0d21beaaa7b359c1c2bef64d2c14f5
- Links that point to themselves are marked with mw-selflink
in MediaWiki so this can use the not selector we already have.
- The new API is used internally and only available via extension
Attributes
- An example is provided in SkinJSON
(https://github.com/jdlrobson/mediawiki-skins-skinjson/pull/14)

Bug: T233099
Change-Id: Iefe98c1f0422dbf034e385b1a41a859d030a2cf4
2022-11-22 08:45:27 -08:00
gerritbot a4cdeafe25 Replace deprecated @borderRadius var with successor @border-radius-base
Replacing deprecated mediawiki.ui `@borderRadius` variable with successor
@border-radius-base.
Former got deprecated in MW 1.35 about 2 years ago. Latter is in alignment
with mediawiki.skin.variables.less standardization. It's also in
accordance to Codex design tokens.

Bug: T322478
Change-Id: Idbd315d14525d75dea951d4144bc84bceb700c0a
2022-11-06 22:46:31 +00:00
Thiemo Kreuz 988fe3fe07 Lowercase {jQuery…} type hints everywhere
I think this is the more canonical variant.

Change-Id: I7dcdfeb82153f5b903378027712f16c20cc111eb
2022-10-04 15:54:20 -07:00
Ed Sanders 780627c126 Remove unnecessary vendor prefixes and mixins for animations
Deprecated in I8d62aedb.

Change-Id: Id951fd394a2336920eddbba08dcb1a153b67b9f3
2022-06-09 17:22:19 +01:00
Volker E 2ffa3ff885 Replace deprecated Less .box-shadow() mixin with standard CSS
Bug: T306488
Change-Id: I96cde6a39fb8547f49b8581d7dba5f9dbf8ba363
2022-04-22 23:31:08 -07:00
Ed Sanders 883c8c1aca build: Update eslint-config-wikimedia to 0.22.1
Change-Id: I055517998ed06fccdf50ec31251ea6aa9040abb5
2022-02-28 13:18:24 +00:00
Thiemo Kreuz 1ec72053ac Fix popups footer covering clickable content
This is relevant for reference previews, which might contain
clickable links. If such a link is in the very last line, it
might be (partially) covered by the footer, which is
absolutely positioned on top of the content. This <div>
catches mouse events, but shouldn't.

Bug: T277364
Change-Id: I342b8f8e38c7abaee1e0f4fa38e9b56e747b153b
2021-12-19 13:50:10 +00:00
Fomafix 0140767ea2 Simplify addClass with an array of classes
Since jQuery 3.3 .addClass() supports arrays. [1]

Replace
  .addClass( classes.join( ' ' ) )
by
  .addClass( classes )

[1] https://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/

Change-Id: Id5c0325971f3e9773155df7412ad0850cfaa11fd
2021-10-18 08:55:42 -07:00
jdlrobson 497feaf77d Fix cog alignment
Bug: T289362
Change-Id: Id5efc685f8df2a71f465156932eca67c9c633141
2021-08-31 14:53:38 -07:00
jdlrobson fa19ee0d4f Adjust previews to meet specifications
Apply max-heights and tweak some of the margin values

Bug: T284643
Change-Id: I0c8a77e10c36ae444e541bb52a8797594c77db63
2021-08-25 22:55:26 +00:00
bwang a78546a19e Handle clipped blockquote by adding blockquote fade out effect
- Added styling to apply a psuedoelement to the blockquote
- Added a storybook story to cover blockquotes

Bug: T213107
Change-Id: I09706137fec00b3bff649180a559f4f663b71d90
2021-08-25 17:05:08 +00:00
Clare Ming 48df0cbaea Fix popup preview regressions, add story
- Fix margin for page preview flipped-x.
- Fix margins for generic previews.
- Add error story to storybook.
- Fix minor typo, pageIds in MODELS.

Bug: T281170
Change-Id: I5b96719c1d08518cbd977590171974796fd10986
2021-08-13 13:50:13 -06:00
jenkins-bot 0a55cc12d8 Merge "Storybook: Capture "panorama" style portrait and landscape examples" 2021-08-12 20:30:54 +00:00
jdlrobson 7be869649d Storybook: Capture "panorama" style portrait and landscape examples
Reduce min-height per explanation in:
https://phabricator.wikimedia.org/T255549#7266861

Bug: T255549
Change-Id: I2871e8d0377268edb50a6de98ca6a247e9a794b9
2021-08-12 11:39:29 -07:00
Thiemo Kreuz a99bd13112 Rewrite linkTitle change listener for clarity/easier expansion
This was done while working on T277639 where we introduced
multiple "enabled" flags for individual popup types. This
change listener is one of very few places that work with
this flag. This patch is meant to make this code more robust
and easier to change.

A few unrelated but trivial changes are included that make
code shorter and hopefully easier to read.

Also fixes a bug with tooltips overlapping previews.

Bug: T287119
Change-Id: I7fb0a8d4bb9f5e78fe62cfca524cc157ea89a233
2021-08-11 18:33:34 +00:00
jdlrobson 75a9d81755 Fix pointer class behaviour
Add unit tests for landscape previews.

Bug: T287520
Change-Id: Ib9a7635b532248a4f44c308d7bb5dc7ab08667e6
2021-08-10 10:40:40 -07:00
jdlrobson a0754c8cf9 Storybook: Fix RTL
Provide containers for page previews examples

In storybook we avoid position absolute but this deviation from
how they behave in reality could lead to subtle differences that impact
the rendering of previews. It also doesn't allow to see the preview
in the context of the link which is an important part of visually
verifying the position of the pokey arrow.

This also allows us to rethink the broken RTL mode. We now scope
LTR rules to a LTR class that is present on the container, and use
the CSSJanus parsed stylesheet for RTL.

Change-Id: I189019824ddd6aa759790fd162ffcd543619a953
2021-08-06 14:40:10 +00:00
Thiemo Kreuz a01c31efd7 Show medium size (<320 wide, but >=250 high) images as well
The requirement for landscape images is to be at least 320px
wide. The requirement for portrait images is more relaxed,
only 250px high. Images that fall between these two
requirements currently don't show a thumbnail, even if they
could.

This change affects a very specific group of images:
* Square images from 250 x 250 to 319 x 319.
* Landscape images from 251 x 250 to 319 x 250.
* Landscape images from 319 x 250 to 319 x 318.

The most extreme ratio is 319 x 250. This will be cut to
203 x 250. I.e. the absolute extreme are 58px missing left
and right, but never more.

Requested at https://www.mediawiki.org/wiki/Topic:Vwl97pm6as9fuf6k

Additional stories for testing more extreme small images:
* Small Tall - 300x1000px
* Small Short - 300x200px

Update tests accordingly.

Bug: T268999
Change-Id: I811f1c0e7e9b0c30280b36a61cc7831a5b9e58c8
2021-08-03 13:17:06 -06:00
Sam Smith 8f5000f346 Remove Popups instrumentation
Bug: T267211
Change-Id: I640ab367cd235ab8da7dd70dbef7ae9076712e84
2021-07-29 17:01:01 +00:00
Clare Ming 7a6c036318 Fix regression with reference previews
- Adjust padding, margins for storybook stories.

Bug: T281170
Change-Id: I05ee0f2123a9999b440e3afdeae1d5b2318e602e
2021-07-27 13:57:08 -06:00
Nicholas Ray 96c19adb42 Adjust top padding of popup to account for clip path
* For .mwe-popups-image-pointer classes (portraits that have a thumbnail
with a pokey at top) Override the negative margin on the
.mwe-popups-discreet element which undesirably pulls mwe-popups-extract
up.

* Add a top padding to previews when the pokey is at top and the preview
is not a disambiguation and is a landscape preview to account for the
margin around the text getting clipped by clip-path.

* Apply display: block to image to stop whitespace from appearing below
the image.

Bug: T281170
Change-Id: I7ca6c922b2f4615103e4162d96fd90d891deb1df
2021-07-22 00:11:11 +00:00
jdlrobson 1a62ae90cd Remove the page preview icon hacks
Now the Vector icon stylesheet is aligned with the correct
design specification these should no longer be needed.

Additional changes:
- Fixes icon display in storybook for disambiguation links

Bug: T287058
Depends-On: Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
Change-Id: I02bfd7973352a03b5be4b6e82575e2209b8e4043
2021-07-21 23:20:17 +00:00
Jan Drewniak 1e04551b1c [Storybook] Removing custom CSS grid and addons from Storybook
Removes the following add-ons and their configuration from Storybook:

- addon-cssresources
- addon-knobs
- addon-options

This will hopefully ease the upgrade to Storybook 6.

Removes the custom CSS grid used to position previews within the Storybook
instance in favour of a flexbox layout. This simplifies the creation
of previews for Storybook.

This change requires us to to add relative positioning to
`.mwe-popups-container` so that the footer is correctly positioned in the
popup without absolute positioning. This positioning has been moved to
be Storybook specific to avoid an regressions in production.

Bug: T271763
Change-Id: I9a97291cb4bca7d4cc60dad232a60f6f92c0adea
2021-07-14 12:54:55 +02:00
Jan Drewniak 04ba7badf4 Add relative positioning to .mwe-popups-container
The Popups UI currently depends on the absolute positioning of the
top-level .mwe-popups element to correctly position it's footer.

This dependence on absolute positioning makes it difficult to debug
Popups in isolation (e.g. in Storybook).

Adding relative positioning to the .mwe-popups-container elements
maintains the correct footer positioning and removes the need for a
specialized layout in Storybook that accommodates absolute positioning.

(If changing the Popups layout to accommodate Storybook seems
unjustified, just think of it as increasing testability).

Bug: T271763
Change-Id: Ifba23afa1a2f401b025476a1fa464c2176fb40ec
2021-06-25 12:28:03 +02:00
bwang 2720740136 Remove obsolete box-shadow mixin
Bug: T282759
Change-Id: Ie5238c97763db3fab639b2ce3ee57f1afd8f0acf
2021-06-18 16:29:14 +00:00
Thiemo Kreuz 5d2c5aeaa1 Remove a small piece of unused code from reference.js
Turns out this was only in place because the test was
(intentionally) incomplete. But it's dead code in
production. Let's get rid of it.

Change-Id: Ieeb145b6972dceb7eeda3a167d907b680d5c3ce4
2021-05-07 16:43:01 +02:00
Thiemo Kreuz 8a08a88f66 Remove/update some ESLint exclusions
Change-Id: Icd4c2d968e2b445a54709368de056373a7814919
2021-05-07 16:26:00 +02:00
Thiemo Kreuz e4da147efa Update JSDoc types and comments to be more specific
For example: We know the HTML element we are dealing with is
always an <a> element.

I believe the small changes in this patch are all obvious and
non-controversial. Please let me know if you disagree.

Change-Id: I9fe15845affffdd0f5f0fd6ef7d6b607cb567ac7
2021-05-07 11:57:58 +02:00
Thiemo Kreuz 92864de4d0 Tune confusing log error down to a warning
This is not really an error. It does not really have
consequences for the user, except:
* It might waste bandwidth because the module is loaded, but
  unused.
* It might waste a tiny bit of CPU time.
However, this can only happen for registered users, and only
with very specific combinations of settings (notably: a
conflicting gadget must be activated).

The reason it's marked as an error is that previously we could
give more guarantees about this. This changed recently. We will
check if the log message is still helpful and either remove it,
or restore the previous guarantees.

Bug: T271206
Change-Id: I218726c9c4879a405acef68710e79c6ac8d070fe
2021-05-06 10:08:29 +02:00
James D. Forrester 14c2102476 build: Upgrade eslint-config-wikimedia from 0.17.0 to 0.20.0
Some inline compatibility queries for the maintainers, where it
wasn't obviously intentional.

Change-Id: Idd659a0a0f7fb86c3f6870b8fe4608bbf8a45f05
2021-05-03 12:31:52 -07:00
Thiemo Kreuz 729f342aa9 Minimize and optimize reference preview CSS
This minifies the CSS a bit by simplifying some selectors that
don't need to be that specific.

This also optimizes the code for the 3 icons that can appear
in a reference popup:
* The type icon in the title.
* The settings icon in the footer.
* The (i) icon that can appear in the content.

Some of this CSS used "resets on top of resets". This is more
straightforward now.

To fully test all 3 icons please use an example like this:
<ref>
{| class="wikitable mw-collapsible"
| Collapsible table
|}
</ref>

Bug: T234205
Bug: T280762
Change-Id: I9e338475a161164e7707b9bb0498dba640313174
2021-05-03 13:26:13 +02:00
Thiemo Kreuz 75155a076a Fix settings dialog offering ReferencePreviews when unavailable
Open questions:
* It is possible to make the patch smaller in case this makes
  it easier to backport it. Is this worth it?
* This code is not covered by any test. I think it's worth
  writing tests. Most of this code will stay, even after beta.

Bug: T281352
Change-Id: I5f30054f1664643b427909f7fa189b4ea5e11879
2021-05-01 17:32:55 +02:00
jenkins-bot 51e976ae2b Merge "Fix settings cog wheel being cut off on mobile" 2021-04-30 07:45:16 +00:00
jenkins-bot 8414cf0115 Merge "Fix setting button placement in article preview" 2021-04-29 19:05:13 +00:00
jenkins-bot e003fed7f2 Merge "Move VirtualPageViews back to mw.track" 2021-04-29 14:47:18 +00:00
Marcel Ruiz Forns a6a06f70bf Move VirtualPageViews back to mw.track
Use mw.track instead of dedicated tracker for VirtualPageViews.
This way we can migrate it to the new Event Platform client.
The new client does not observe DNT, which was the reason this
instrument was moved to a dedicated tracker on the first place.

Bug: T279382
Change-Id: I8bb515eab337ffed686ba7522bc6153cfdd8ca8d
2021-04-29 16:15:16 +02:00
Thiemo Kreuz b431d8c7f0 Fix image position on the settings dialog help screen
Bug: T281353
Change-Id: Ie8aafa5a315c21e2acaaf27a8e11f5397d38e6de
2021-04-29 12:05:46 +02:00
Thiemo Kreuz 3128334bba Fix settings cog wheel being cut off on mobile
Bug: T281351
Change-Id: I9279d7e4099495e6c359e8adafe50bb08f2d6536
2021-04-29 10:28:11 +02:00
Thiemo Kreuz 986af3863b Fix image size on footer link help screen
Bug: T281353
Change-Id: Icbfa843f8cf76ca903581cac7ec60601b6fd8697
2021-04-29 09:49:57 +02:00
bwang dce03d9036 Fix setting button placement in article preview
The london thumbnail was also replaced with a larger size to fix the RTL landscape story in storybook

Bug: T276668
Change-Id: I00dfe4762c36f49c93144d1207013c41cf33007a
2021-04-28 15:24:45 -05:00
Thiemo Kreuz 275a67c730 Make checkboxes use upstream mediawiki.ui.… styles
This does not fully solve the ticket, as these are not the
actual OOUI styles. But it's already much better than the
unstyled checkboxes before.

Bug: T281227
Change-Id: I9a5023482774c09aa73845ca6dfd1c4926f088e1
2021-04-28 10:37:07 +02:00
Thiemo Kreuz 3a00223a36 Separate reference preview settings in beta & non-beta
This is the smallest possible patch for a backport.

While it seems there is zero technical reason to limit user
option keys to lowercase with dashes, it's best-practice.
Same as message keys.

Bug: T281235
Change-Id: Ia4a45cf4459543c81b23b757ae9c2cfaf9676894
2021-04-27 16:15:17 +02:00
Svantje Lilienthal 3b6d9ccc9d Renamed settings local from simple to page
We changed the handling of the popup settings. They now contain popup types (pages and references). 
To not get confused with the old setting options (simple, advanced and off), 
we would like to rename the local for the simple setting to page. 
It should already contain the correct string.

Bug: T277639
Change-Id: I8847b890e9e31602277a92d82a188fcdd3eea855
2021-04-23 14:35:06 +00:00
Thiemo Kreuz d0872e3025 Clean up popup type settings related code
* Change more places to not hard-code the popup types, but use
  loops and such.
* Change many `function ()` headers to use the more streamlined
  ES6 sytnax.

Bug: T277639
Bug: T277640
Change-Id: Ifece87d51012e0e069286453b27f5c9ae273710e
2021-04-23 15:38:38 +02:00