Commit graph

27 commits

Author SHA1 Message Date
Volker E 31ef381e90 build: Update 'svgo' to latest v3.2.0 and re-minify SVGs
The latest update of 'svgo' dependency includes three optimizations on
converting path commands, which
- improves closing paths and how we determine if to use absolute or
  relative commands.
- round arc or convert to lines based on the geometric sagitta
- convert cubic Bézier curves to quadratic Bézier curves where possible

Bug: T354875
Change-Id: Ibd611396c48ff6f971ee251b59f13e350e0f812f
2024-01-16 00:13:08 +01:00
WMDE-Fisch b218a77ca4 Remove all BetaFeature code from ReferencePreviews
The extension is out of beta and will be enabled by default now.
Leaving some hints if we decide to also remove the feature flag.

Bug: T282999
Bug: T351708
Change-Id: I1556b2f3592294d094770ede2c276eddeef8bbe9
2023-11-24 13:07:46 +01:00
bwang 154912e5db Rename icon classes in Popups to use popups-icon prefix instead of mw-ui-icon, replace resource loader icons with codex
Bug: T345653
Change-Id: I19b9861850064df50d6b88cda748feff6231091c
2023-09-12 10:56:53 -05:00
Volker E 830ec1b56b build: Update 'svgo' to latest v2.8.0 & re-crush images
Updating 'svgo' to v2.8.0 and newest Wikimedia SVG guidelines –
mainly around new whitespace features of SVGO.

Change-Id: I37da089916d2efad696989427b0a06b392d1d89c
2022-02-27 23:58:05 +00:00
Jan Drewniak b6fceb2fda build: Upgrade 'svgo' & re-crush SVGs
'svgo' upgraded to v2.3.0

This includes:
- Replacing .svgo.json with .svgo.config.js
- Updating the SVGs files. This amounts to changes in the order of
  some attributes.
- Adding the minify-svg command as part of the npm run test command

Bug: T278656
Change-Id: Ia38332be68b8ac47a31caf30272920c0f0c12053
2021-04-28 07:28:16 +00: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
Thiemo Kreuz cb60ff14c7 Update settings (cog) icon with optimized code from OOUI 0.32.0
This compresses much better. Gzipped it was about 400 bytes
before, and 300 bytes after.

I also noticed the icon was not even symetrical before. This is
fixed now.

Bug: T256504
Change-Id: Ic03d727662e92e36249226c5760583184fd00a43
2020-10-26 21:47:01 +00:00
WMDE-Fisch f8562a89d6 svgmin optimizations on updated OOUI icons
Icons were updated in I8feea1b526ff85c4ffdee21ef42c616e72881e76 the
pre-commit svgmin optimizer does these minor changes in the two files.

Pushing these to avoid constantly changed but uncommited SVGs in the 
images directory when working.

Change-Id: Ib8a66df12dc692eb356a33815f5aade1983f625c
2019-04-18 19:21:48 +00:00
Ed Sanders 78cbb02191 Update OOUI icons to latest versions
* web.svg was deprecated in favour of browser.svg.
* Update sad-face.svg based on OOUI speechBubble-ltr/rtl
* Apply preview-generic/disambiguation grey colour using CSS.

Change-Id: I8feea1b526ff85c4ffdee21ef42c616e72881e76
2019-04-17 12:11:08 +01:00
WMDE-Fisch b6c1ea3f03 Minor code optimizations in SVG files
Change-Id: I8c9b1a7c2cc11690d72f4c851d598b68560bcf36
2019-03-05 19:29:20 +00:00
WMDE-Fisch 5da1009d4b Fix shade of blue in beta feature images
Bug: T215896
Change-Id: I19b7098afc176f929951c8a51a000393eabd6f32
2019-02-27 14:19:11 +01:00
Andrew Kostka f91c160214 Add a beta feature switch for reference previews
Bug: T215896
Change-Id: I6a4cc2103d594dc11f62da247891d3f190619899
2019-02-25 20:38:12 +01:00
Thiemo Kreuz bb7ef8f205 Remove unused attributes from .svg files to optimize them further
An id="…" can potentially be used to target elements individually, manipulate
them, or show them in another context. This is done with the elements in the
file pointer-mask.svg. But not with any other image.

The file-rule="…" only has an effect on shapes that intersect with itself.
This is not the case for this basic "L" shape.

If you think this is fine, I might look at the original OOUI icons as well
and apply the same optimizations on them. But there are 800+ of them to be
looked at, and I want to invest the time only if you think it's worth it.

Change-Id: Ifa4bd60a436e58d3a7c1536f8201fe76fbdac57c
2019-02-20 11:46:13 +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
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
Volker E ed529488f8 Manually optimize & reduce SVG markup
Reduce and optimize SVG markup by
- removing unnecessary `id` attributes,
- lowercasing hex colors following code standard
- merging repeating `fill` attributes in `<g>` elements and
- following `<svg>` root element attribute sequence as anywhere else

Change-Id: I71df1df5fee0c363df41a996b5ec32d587b76f56
2018-08-08 17:09:15 +02:00
Stephen Niedzielski f96762880b Fix: viewBox in cog.svg and sad-face.svg
svgmin was removing this attribute from cog when the capitalization was
incorrect and sad-face never had it.

Bug: T185596
Change-Id: I980694f4a611ea8fd13d6c1419dbed6d49f4d94e
2018-08-08 09:19:55 -05:00
Volker E f47e333ff1 build: Bring SVGO optimization to build step
Enabling SVGO automation with 'grunt-svgmin' and conservative
plugin settings to build step, among those:
- enable removeRasterImages and sortAttrs,
- disable cleanupIDs, removeDesc, removeTitle, & removeViewBox as
  described in
  https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG#Exemplified_safe_configuration
- disable removeXMLProcInst; if the SVG doesn't start with an XML
  declaration, then it's MIME type will be detected as "text/plain"
  rather than "image/svg+xml" by libmagic and, consequently, MediaWiki's
  CSSMin CSS minifier. libmagic's default database currently requires
  that SVGs contain an XML declaration:
  <https://github.com/threatstack/libmagic/blob/master/magic/Magdir/sgml#L5>.
- make use of pretty and multipass options.

Settings are stored in a JSON file to be independent of the Grunt build
process. Also updating SVG accordingly.

Bug: T185596
Change-Id: I715ad4cf2e900665e4c32c78b4c2d9d9cebf0222
2018-08-01 10:51:43 -05:00
Jan Drewniak a782b7b7da Update setting icon
- Adds an extra element in popups template to contain settings icon.
- Resizes the setting icon so that the hover/active state is a square.
- Updates the settings icon SVG file.
- Modifies margin rule for icons placed near top of popup.

Bug: T193058
Change-Id: Icc16a788bba8e2f0a82a27c2b5c7be6c2cccaa90
2018-06-05 10:07:35 +01:00
jdlrobson 663218d974 All images are served by ResourceLoaderImageModule
This moves the footer icon into the ResourceLoaderImage module
providing us a consistent way of serving image assets.

This means we no longer need to provide PNGs for icons

However, given mw-ui-icon-large is not large enough for the given
use case we do have to wrestle with icon styles and override them
to get the desired result. I think this is a small price to pay given
icons are now discoverable

Change-Id: I38b62c01fd930dcbfb73b95e6128885cb483f86e
2018-04-03 16:34:49 -07:00
jdlrobson 1acd15adb1 Standardise disambiguation icon
All icons should be 20 by 20 by standard.
(Previously it was 24 by 24)

Bug: T190558
Change-Id: I0956c9c31f1606f0a77b4be29bde5a56b5c5ebb8
2018-03-23 13:54:31 -07:00
Jan Drewniak 1e946a379d Custom page preview for disambiguation pages
Creating a different page preview for disambiguation pages.

This patch:
- modifies the Preview model to accept a new 'type' property
- modifies the Restbase Gateway to pass the 'type' prop to the Preview model
- creates a new template to accept both generic/disambig previews
- modifies the renderer to render the new template
- generates icons for new template through resource loader
- adds new i18n strings
- modifies event-logging "preview seen" event to send new "disambiguation" previewType
- updates event logging schema version
- adds tests for Preview model and renderer for new preview type
- does way too much? yes, yes it does.

Bug: T168392
Change-Id: Idc936cc3eabbdd99a3d98f43c66b4cdbb7d24917
2018-03-14 11:24:26 -07:00
Volker E dc8f9c118b Use standard close icon
Making use of standard close icon and add `opacity` transition
for slight user feedback on states.

Bug: T50067
Change-Id: I258a50452eba8f9d0bfb550c2ad1a90ef7b6dc1f
2017-11-01 17:00:11 +00:00
Volker E 33a2eb9635 Optimize SVGs and align colors to WikimediaUI palette
Aligning SVGs to WikimediaUI color palette. Also optimizing
by help of SVGO and aligning them to each other, among changes:
- removing unnecessary, unused raster images
- removing invisible, application specific metadata
- unifying identation
- bringing attributes in order

Bug: T178257
Change-Id: Ief0ce99568e6a92700f2c8e4eb5990b989402389
2017-10-15 18:33:45 -07:00
Sam Smith 939ebe386d Optimise SVGs with svgo
... by running the following:

    svgo --disable removeXMLProcInst --pretty --folder images/
    svgo --disable removeXMLProcInst --pretty --folder resources/ext.popups.images/

Also, add an XML declaration to resources/ext.popups.images/close.svg so
that it's recognised as an SVG by libmagic. This isn't strictly an issue
because of the way the SVG is served by the ResourceLoaderImageModule RL
module but it's consistent with the other SVGs.

Change-Id: I10b2286d6577701ba3b9a8651d5165fa81b8d293
2017-04-26 17:15:45 +01:00
jdlrobson b0e059b9de Generate cog icon via ResourceLoaderImage module
* Merge mwe-popups-icon with mwe-popups-settings-icon
* Remove PNG - now generated by the ResourceLoader module
* Adjust popup footer paddings/widths and store them in variables
* RTL and LTR compatible

Bug: T133956
Change-Id: I14ccd7b6731e9ec49f9959411fd17f7c9fdf43be
2017-04-21 16:23:21 -07:00
Volker E 0282b9648f Hovercards: Improve layout of settings dialog to design spec
Improving Hovercards' settings dialog to fulfill design specification.
Also fixing HTML structure by removing invalid `radiogroup` element and
adding missing `</div>` element, fixing related QUnit test.

Changes:
 * Add close icon instead of using text
 * Style header as a table for alignment
 * Remove redundant "OK" button and have it replace "Save" instead
 * Update text of "OK" button to "Done"
 * Fix description for translation of "Done" button
 * Fix qunit and selenium tests
 * Remove unnecessary markup and less
 * Add mediawiki-ui-button and mediawiki-ui-icon dependencies
 * Shrink dialog width some per design spec
 * Fix dialog horizontal position calculation to remove hard-coded value

Bug: T138612
Change-Id: I7395e3438836149becdd576942bdaf6f21b4163f
2016-08-10 14:01:36 -04:00