Commit graph

18 commits

Author SHA1 Message Date
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
jdlrobson 9adf023eee Fix storybook IMG assets
When we changed the thumbnail size we changed the URIs to images
but didn't update the local storybook assets.

Bug: T266797
Change-Id: Iea4de1524a2f60cc759d59338882fe236e409bd2
2021-01-05 19:50:40 +00:00
Noam Rosenthal 4492b54a44 Performance optimization for popup rendering
Reduce layout/style thrashing by measuring all required geometries
at event handler, not waiting for delays/redux/style changes.

Use CSS bottom instead of top, to avoid having to measure the popup
before positioning it, if it's placed above the link ("flippedY").

Disable some test cases that relied on implementation detail of using
"top" CSS.

Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-30 17:33:07 +02:00
jdlrobson 140b1e5828 Settings cog should come from icon pack
To avoid continuously updating this cog, use the icon pack directly.
Use mw-ui-icon-small to control the size rather than custom CSS - this
reduces the amount of CSS overrides that are needed.
Also use `opacity` instead of icon SVG fill for coloring the icon. This
enables simple transition in interaction states.

Storybook: The settings cog will now be tied to the production icon.
Note for now this will not appear at all, as this code must first
have ridden the train. For local testing feel free to point to
localhost to verify this change.

Bug: T256504
Change-Id: I2a28666dbd644bb599146fabb84d148ff0167ed3
2020-11-12 05:57:57 -08:00
Volker E 8b6e85dd7c storybook: Update to account for new core LESS variables files
We're using Vector's 'mediawiki.skin.variables.less'
file, as it's Popups main interface.

Bug: T263064
Change-Id: Ib2b3726dddb95e8f7ae54e6c2d4cf52c70d0197a
2020-09-18 13:17:39 -07:00
jdlrobson 1803ac5b2d Storybook: Images should be relative uris
Follow up to I58493db15b27f148fcc1cf42ab0b0148ee291eb6

Bug: T236589
Change-Id: I305badda5a3f93684270bfe07d6cc19c92df3e07
2019-12-13 01:42:13 +00:00
jdlrobson 44239076af Use local files for storybook
Currently images do not display on docs.wikimedia.org
These need to be local due to the security restrictions there.

Bug: T213223
Bug: T236589
Change-Id: I58493db15b27f148fcc1cf42ab0b0148ee291eb6
2019-12-12 11:28:27 -08:00
jdlrobson 189b386a13 Publish storybook now we are using more modern node
Breaking change - I was having issues getting the knobs feature
to work so it has been removed for the time being.

Bug: T236589
Depends-On: I8505d2dad69aefed5f8ed1f599b3ca1b7e79acf5
Change-Id: I42fbf37124477e2d950b4bca15acf77703cd3f5d
2019-12-11 15:16:13 -08:00
Thiemo Kreuz 76e02fae98 Remove obsolete mediaWiki and jQuery aliases
Notice how this actually reduces the size of the final, compiled index.js.
It's not much, but still.

One issue I noticed is that the coverage reports for the JS code stopped
working. I have no idea why.

Bug: T208951
Change-Id: I2fe92579574b3b1ba4d2dd064899eee944045a96
2019-10-22 09:30:46 +02:00
Ed Sanders 2687d12c52 eslint: Remove valid-jsdoc override
Change-Id: I6a9936743a74afb528713f21e016838947fa1914
2019-08-15 08:00:24 +00:00
Timo Tijhof a3796a24ee Doc: Refer to Node versions without "v" prefix
As of Node.js version 8, upstream has consistently avoided this
to avoid confusion with V8, the JavaScript engine that power
Node.js and Chromium.

Change-Id: I702cee3247cc69ab4aac313176c884c9c2785ea9
2019-06-10 17:30:26 +01:00
Jan Drewniak da369d09ae Improving RTL support for the Storybook app
- Adds CSSJanus support on a story-by-story basis for the Storybook app.
- Adds an extra RTL portrait thumbnail test-case.
- Adds an extra RTL 'thin' portrait thumbnail test-case.
- Removes the `createContextualFragment` wrapper from stories,
  as well as the wrapper divs.

Bug: T204627
Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-25 11:19:15 +01:00
Thiemo Kreuz 4792151769 Split PreviewModel documentation into subclasses
See T218105 for discussion.

Bug: T218105
Change-Id: I0fde5de6e573e219f0937797bf10c20a01021a6a
2019-03-19 14:56:21 +01:00
Jan Drewniak bdb535c643 Add SVG masks to Storybook app
The SVG masks used for previews are clip paths, making it hard to
visualize what their actual shape is. This patch extracts the paths
inside those clip paths into new SVG objects and renders them in
the Storybook app.

Also removes a few previews from the portrait/landscape thumbnails
so that the Knobs addon can function properly.

Change-Id: I160746d8877deaa12ace925ce170323946ce532d
2019-03-06 14:21:33 +00:00
Thiemo Kreuz fb5b120515 Minor fix-ups to type hints in JavaScript code
This patch also removes misplaced empty lines at the beginning of a
scope. In PHP code we even have a sniff for these. In JavaScript we
don't, but I suggest to be consistent about this.

Change-Id: Ic104ae8fe176da1dafa9bc783402adecb71de1f0
2019-02-14 11:15:01 +01:00
WMDE-Fisch 5f602c985c Fixed typo
Change-Id: I9c61f3dcf059884ec7ea16f601009d72b26e0cda
2019-02-04 12:37:16 +00:00
jdlrobson 30c9de1d3a Lower node version
This now reflects the value inside:
https://github.com/storybooks/storybook/blob/next/package.json#L140

Change-Id: I2258d23b5edc80c6e608e431b87623373b19bdb9
2019-01-08 15:03:35 -08:00
Jan Drewniak 83a28d177f Storybook.js for Popups
Storybook.js provides a framework for
viewing and working with UI components.
https://storybook.js.org/

This patch adds the Storybook.js UI library to Popups for
the purposes of viewing multiple previews at once.
This enables viewing page previews in the following states:

- with thumbnails
- without thumbnails
- with SVG thumbnails
- with narrow thumbnails
- with white background thumbnails
- in RTL languages
- in non-latin languages
- disambiguation popups

Storybook also allows users to change the image or text
of a popup through a GUI.

This patch sets up Storybook as a "mini" repo inside
the.storybook folder with a seperate package.json file
to avoid incompatibilities with the current webpack/babel
(or even Node) versions used in the Popups repo.

Storybook requires at least Node v8.3 to run.
(an .nvmrc file with 11.3.0 has been added to the .stories dir).

To start:
`cd .storybook && npm install && npm run start`.

Bug: T205989
Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
2019-01-08 14:19:00 +01:00