Commit graph

57 commits

Author SHA1 Message Date
Volker E cfcb8d4755 build: Update 'svgo' to latest v3.2.0 and re-crush 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
Also
- removing obsolete 'grayscale.svg' which was introduced in
  I0f2c2b24aece3b but seems to have not been in use. It itself is not
  reasonable, as an SVG filter needs an element to be applied to, which
  this SVG didn't feature.
- unifying npm command to qua standard notation `minify:svg` and add
  “parent” command `minify` as well.

Bug: T354875
Change-Id: Ie4d8ef85b9b9d28943a7216f0b5ed6392592a43e
2024-01-18 12:04:02 +01:00
Volker E 3205e72ad8 build: Replace 'grunt-svgmin' with npm based 'svgo' & re-crush SVGs
Replacing 'grunt-svgmin' with 'svgo' v2.3.0.
Also
- replacing all Grunt based tasks with npm equivalents. 'build' has
before just been for SVG minification and that's the same now in npm.
- changing to JS based '.svgo.config.js'
- re-crushing all SVGs. Note that 'link-hover.svg' and 'link.svg' have
been optimized with reduced precision. All other changes are resulting
from updated SVGO.

Bug: T278656
Change-Id: Ie895edb4e88336ffc56f570b8f80bf7d1e331894
2021-04-12 13:01:59 -07:00
Volker E 9d2f7de650 Amend Base10 color from #222 to #202122
Amending Base10 to slightly darker `#202122` to fulfill WCAG
requirements in connection to Accent50.
Also adding it as WikimediaUI Base equivalent variable for
future replacement.
Also removing variables not in use any more.

Bug: T248393
Change-Id: I6fb5c288cfeb2bd3c786c2f5ab771074203b8fc0
2020-04-20 13:50:10 -07:00
libraryupgrader 5410aa9150 build: Updating eslint-utils to 1.4.2
* https://npmjs.com/advisories/1118

Additional changes:
* Added .eslintcache to .gitignore.

Change-Id: I9b6420e70ec7f4568b707371c731a8db56f6e34a
2019-08-24 12:16:21 +00:00
Volker E a23084a360 build: Follow 'svgmin' step option best-practices
Changing indentation to tabs and use `multipass` option correctly.
Follow-up to I09660b9d49cfdc4.

Change-Id: Ic69532ad165c34aab97888328c7bef6e6c578491
2018-11-28 18:32:16 -08:00
James D. Forrester 90ada228cd eslint: Drop 'dot-notation' rule
Bug: T210552
Change-Id: I09660b9d49cfdc450efe0273736abd4730da5e77
2018-11-28 10:46:41 -08:00
Volker E a92bbbaa5f Update user avatar icon
Updating user avatar icon to overhauled standard WikimediaUI icon.
Also:
- Using new icon default size instead of `80 x 80 px`. Icon is
  resized by `background-size` in both applications anyways.
- Renaming 'user*' to 'user-avatar' for consistency across projects.

Bug: T123810
Change-Id: Ifb2027694af8f619663f00f4c50891772ee64746
2018-10-10 23:29:01 -07:00
Timo Tijhof 5c9faa580e Move files to their own directory per module
Bug: T193826
Change-Id: I925b1c7be2dbbb50994ed9f1ef12b5978ba175ff
2018-07-30 15:15:25 +02:00
Volker E b81f6393aa Remove special color treatment of close icon on confirmation
Removing arbitrary close confirmation color treatment with green.
We don't feature such treatment anywhere else, nor are we planning
to do. Let's remove it.

Bug: T50067
Change-Id: Ia597a51cd9c5ca057720c720b1e3
2018-02-05 15:29:29 +05:30
Volker E d1f416278a Bring SVGO optimization to build step
Enabling SVGO automation with conservative plugin set, among those:
- disable cleanupIDs, removeDesc, removeTitle, removeViewBox &
  removeXMLProcInst and
- don't use multipass,
- enable removeRasterImages and sortAttrs

Bug: T185596
Change-Id: Ic13afb6e1cbc4d26af7a100cb7a916619fb4158e
2018-01-24 00:27:53 -08:00
Volker E 268e1406d4 Unify SVG markup
Align SVG markup across Foundation products by:
- unifying XML declaration,
- removing unnecessary `standalone="no"` attribute as it's default,
- removing unnecessary `enable-background` attribute as it got removed
  from standard
- removing all SVG editor metadata
- adding `width` and `height` attributes where missing,
- removing all `g` group elements except where necessary for transforms,
- putting attributes on `path`,
- removing unnecessary ids and
- unifying whitespace.

Also
- changing 'expand' and 'gear' icon colors to resemble general button style,
- while at this renaming 'gear_gray' to 'gear' including CSS reference,
- slightly adapt remaining colors to WikimediaUI color palette and
- deleting unused, unreferenced icon files.

Saving up to 79% file size before gzipping.

Bug: T178867
Change-Id: I9e54a3a972903811f5205def05397383f3484d63
2018-01-23 23:59:28 -08:00
Volker E 7157729ae8 Align to WikimediaUI style guide and code cleanup
Aligning to WikimediaUI style guide by replacing colors with
standard color palette equivalents, merging close colors
(ex: `#E6E6E6` & `#eee` become `#eaecf0` ) and slightly increase
contrast on a few to meet WCAG 2.0 level AA criteria.
Also:
- following other code bases like MobileFrontend or OOjs UI in
using `border-radius` property instead of obsolete mixin
- removing non-existing browser vendor prefixes in mixins
- removing non-used Less variables
- bringing CSS/Less code closer to coding standards and
- simplifying Less code where applicable

Change-Id: Icb936e14ff613471ea1da6df6341ec1b0543cfaf
2017-03-02 15:55:01 -08:00
Geoffrey Mon a907339f89 Add button to select and copy share/embed text to clipboard
Clipboard icon adapted from modules/tools/images/pasting.svg from the
ContentTranslation extension.

Also adjusts some margins to better separate embed code box from embed
options

Bug: T77295
Change-Id: Ic7a11eab6ecc767ad4d80b94a7b62578d535d047
2016-12-25 23:59:47 -05:00
Volker E 9291a0d6e2 Replace colors with overhauled WCAG 2.0 compliant palette
Replacing colors with ones from current WCAG 2.0 level AA compliant
color palette. Also improving SVG files by svgo optimization where
easily applicable and cleaning up some minor Less shortcomings.

Bug: T149769
Change-Id: I3d46c95a61112ba808c6ec664a95c94e9cb42c5e
2016-11-19 03:31:16 +00:00
Julius Alphonso a9758d21e0 Remove uploader's name from MediaViewer
Only last uploader's name is shows, this turns out to be
more confusing than useful.

Bug: T59308
Change-Id: I7d06b72c581fe8738bffc64b5e36be9983b01ccf
2015-12-29 10:56:08 +05:30
Geoffrey Mon 33908e64c6 Improve Personality Rights restriction icon
Make it more gender-neutral and better-looking:
- No necktie
- A frame around the icon similar to the frame of a photograph

Change-Id: I05ec5a5a546b19f08ac9a6ab1470b769025e076b
2015-09-03 21:38:55 -04:00
Geoffrey Mon a7f11a7c45 Moar restriction icons!
Icons for all important non-copyright restriction types.
Also, some tweaks made in CSS e.g. add 1 px margin to top of mw-mmv-labels
Finally, new test to check if default restriction is placed last.

Example files:
copydesign: https://commons.wikimedia.org/wiki/File:Peugeot_404_dsc01875.jpg
trademark: https://commons.wikimedia.org/wiki/File:Logo_NIKE.svg
trademark+insignia: https://commons.wikimedia.org/wiki/File:Flag_of_UNESCO.svg
personality: https://commons.wikimedia.org/wiki/File:Vice_President_Megawati_Sukarnoputri_-_Indonesia.jpg
communist+insignia: https://commons.wikimedia.org/wiki/File:Flag_of_Georgian_SSR.svg
nazi: https://commons.wikimedia.org/wiki/File:PropagandaNaziJapaneseMonster.gif
costume: https://commons.wikimedia.org/wiki/File:Shrek_%26_Fiona.jpg
fan-art: https://commons.wikimedia.org/wiki/File:Magic_wand.gif
(I think that's enough)

Bug: T102693
Change-Id: I907396c59752511448145a4ac5d29096166f841f
2015-07-16 01:06:39 +00:00
Pau Giner 361315b8af Icon updates
License icons have been updated for consistency with mobile media viewer.
File icon has been changed to match the former ones in color.

Change-Id: I8bc102755829b65ebace9608ca47a3bc2201da4a
2015-02-05 14:53:55 -08:00
m4tx 9a6039b580 Improve error messages UI for Media Viewer
Bug: T77272
Change-Id: I97ffa70903da32c66697c52969cfec2df03c1d57
2015-01-14 08:24:27 +01:00
gladoscc 40738c832a Display the file name in metadata panel
This patch adds the file name to the metadata panel, after the license
item. The namespace prefix is included and set to a static 'File:'.

The Title class already converts underscore to spaces.

The icon is from @Pginer-WMF.

PS: This has been a frequent annoyance for me, I'm glad to be working
on this patch!

Bug: T76680
Change-Id: I7d1f4ce67a6776ac017f8afe49cb3102b267af5c
2015-01-13 19:45:43 +11:00
Pau Giner 0308425b17 Generic icon for licenses
A document-like icon for those licenses lacking a more specific icon.

Change-Id: Ica254b10c4b5fa65eac463b8d878402c5c48a411
2014-11-13 15:27:07 -08:00
Gergő Tisza af508f066a Make the ellipsis of truncated texts more prominent
Also fixes popup texts which should have been updated in the parent commit
and the panel opening mechanism which did not work when the below-the-fold
description box was display:none-d.

Change-Id: I5fc37429a7dc7a8f1517fa42375cd140d7d11674
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/589
2014-11-11 15:37:14 +00:00
Gergő Tisza 392e714cc6 Add icon for PD licenses
Change-Id: I82c56a420d8d529a4a50cb66e64b191bbb36997f
2014-10-29 14:03:36 +01:00
Gergő Tisza 8423974c6a Change above-the-fold layout - step 3
* make top of "below-the-fold" be actually above the fold
* put all above-the-fold content except title and more details button
  into that area
* kep below-the-fold area in fullscreen mode when title/credit gets untruncated
* increase title length to 180 (140 before reducing font size) - works nicely on
  my 1600x900 laptop
* remove old styles which were intended to make the button smaller when the
  panel is close but were mostly broken anyway and only caused the button to
  twitch

To avoid redoing all the size calculation logic, we cheat and use a negative
margin to pull the below-the-fold content above the fold.

Change-Id: I18d7bdb7dbbdfb8201c0d66257731febfac31263
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833
2014-10-29 12:05:34 +01:00
jenkins-bot fb7a04f5a2 Merge "Change above-the-fold layout - step 1" 2014-10-28 21:18:48 +00:00
Gergő Tisza a6adad35ed Change above-the-fold layout - step 1
* remove chevron
* adjust colors

Change-Id: I443fd757f5df18d099e42a81f1f323fadea77987
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833
2014-10-28 20:02:22 +00:00
Pau Giner 4d415c330c Cog icon adjustment
Border was added for the cog icon so that it can be visible on white

Change-Id: I1bdd73e2e8be571d3d0e3ab49e5d005812e2d090
2014-10-27 17:34:09 +01:00
Pau Giner cea4a105a9 Adjust style of the Disable panel
Spacing, color, and typography adjustments to the disable/enable panels

Change-Id: I86cfa04353fb500ebe027576a61301e8ef2f0f3b
2014-10-23 12:21:02 +00:00
Mark Holmquist 1853540cd3 Add viewing options panel
Enable, disable, and get confirmations.

Lots of UI work on this one.

Change-Id: I1f731992bd240e7ea403592872f7c7e270158753
2014-10-19 00:27:15 +02:00
Mark Holmquist 0d4863dd91 Make the download pane into its own dialog
Change-Id: Ia92545ed1ef7f2e4ba7934c682eef684a22ca17f
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/841
2014-09-24 17:05:50 +02:00
Mark Holmquist 7d7cd3a8e6 Make "more details" button bigger 'n' prettier
Change-Id: I81a370a910c0cec269a000c9dcaac8461d3421b0
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/830
2014-09-23 10:41:00 -07:00
Mark Holmquist 59d8c5d892 Make the reuse button part of the canvas
Moves it out of stripeButtons and into canvasButtons.

Will move download to its own thing later.

Change-Id: Iaf18914b29a6283c3bade954f1adb3f206c9c911
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/834
2014-09-18 12:43:45 -07:00
Gilles Dubuc 2ef45b3058 Remove categories
Change-Id: I309b01592e874579d50bf5fc0810c238d47748f5
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/835
2014-09-09 13:23:50 +00:00
Pau Giner 8236a55ec2 Angle separator image
Visual element to separate the image repo icon from the basic
details on the metadata panel.

Change-Id: I57481985b8b449347242ba2cc0838d8a564d7963
2014-06-27 22:45:14 +00:00
Gergő Tisza 5e3808a14e Make the metadata panel opening affordance more obvious
- rearrange DOM structure of above-fold part of the metadata panel:
  - rename .mw-mmv-controls to .mw-mmv-above-fold
  - the above-fold part is a single positioned div now, with height
    explitcitly set
  - less LESS gymnastics, above-fold height is a single variable
  - add paddings to the p elements instead of the containers
  - make all title elements align to baseline (except the logo which
    would look horrible)
- discard some CSS which was superfluous
  - overspecified sizes/positions
  - some top/bottoms for staticly positioned elements
- get rid of the .mw-mmv-drag-affordance div, since a full-width bar
  wouldn't really make sense on the bottom of the above-fold section
- flip the chevron and place it to the bottom of the above-fold part;
  add colors etc. per spec
- fix stripe button horizontal spacing

Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/706
Change-Id: Ic37b4150288055c3fae8d22919ed7b1249db1f09
2014-06-19 21:14:56 +00:00
Gergő Tisza 2083a39dc2 Convert Mac line endings to Linux ones for some SVG files
Change-Id: If956b1b1b45555144ad9f2299a38d2375cc2e40a
2014-06-17 19:55:34 +00:00
jenkins-bot 87e6bfc714 Merge "Updated chevron icons" 2014-06-16 09:45:09 +00:00
jenkins-bot b8b475c77c Merge "Make preview link more prominent" 2014-06-13 23:39:15 +00:00
Pau Giner a24b67c2cb Updated chevron icons
Chevron icons for the new design of the chevron.
Beware that the active version of the chevron is white since it is assuming
it will have a blue background.

Change-Id: I3d8fa040bfecc219a735565d5ebee8e283691bee
2014-06-13 23:06:18 +00:00
Mark Holmquist f308c9f7b0 Make preview link more prominent
Also cleaned up the SVG. I hate Illustrator so much for what it does to
SVGs.

Change-Id: I3c1b8b812ed50ad65a8c2f53835e440bfd2e77ac
2014-06-12 11:07:47 -07:00
Mark Holmquist b2039ad7eb Add "zoom" but really just view-file
The zoom icon should get replaced Real Soon Now - looking at you, pginer

Change-Id: I88c1d4fb95e034e0f2fe618eb7309754ea1c283e
2014-06-10 15:07:12 -07:00
Pau Giner ba5a1b7516 Icon adjustments
- open.svg icon added for the "view in browser" feature form the share panel.
- expand.svg icon updated for better icon consistency (spacing also adjusted in the CSS)

Change-Id: Id6176d8f9b4884c9aabde05f1639500d3349f9a7
2014-06-09 23:03:16 +00:00
Pau Giner 96791886c8 More prominent metadata panel invite.
The invite animation has been made more prominent and the chevron
is highlighted. this only applies until the user opens the
panel for the first time.

Change-Id: I91d1b9bffaf302890f63b741313aa47cc4beef24
2014-05-15 20:41:13 +00:00
Pau Giner b7420ae82a Images for zoom
Images for the Zoom control of Media Viewer.
SVGs for RTL and RTL languages included.

Change-Id: I65cc6d9921a40d26307c294fb08ccfc42b1a9068
2014-04-24 17:43:15 -07:00
jenkins-bot 6dae43b0cf Merge "Fix commons icon to avoid pixelation" 2014-04-10 18:12:34 +00:00
Gilles Dubuc 779b91d405 Fix commons icon to avoid pixelation
The CSS to make the favico twice as big was looking horrible in
Firefox and possibly other browsers. Since we're already
special-casing commons, let's apply a proper SVG instead of the
favico.

Change-Id: Ie32302342eba7aa37bd310c013a9f4d7f9ae187e
2014-04-10 13:20:39 +02:00
Pau Giner 808b6cb848 Removed white background from SVG assets
Two images contained a white background that was limiting their
use over other background colours.

Change-Id: Ic61e0d223ed927968344b132dbe67952c80bbe28
2014-04-10 11:55:27 +02:00
Pau Giner a5c146dc19 Adjustments to the Commons icon in Media Viewer
To achieve consistency with the icons in the Media Viewer panel,
the following has been adjusted:
- Colors onf the "share" icon to match the rest of the icons (updated to the new gray values of Agora).
- Size of the Commons icon has been adjusted both in the SVG file and when it is added in the LESS/CSS. Due to the different aspect ratio of this icon, extra spacing has been added to make it visually fit.

Change-Id: Ic14a869ea96ea1a8202c9988f0c5d330ba3e9a70
2014-04-09 14:52:54 +02:00
Gergő Tisza 052fd5d3f1 Add metadata button to go to file description page directly
Change-Id: I0f2c2b24aece3b806d572a0ed41dce8031e6ae6b
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/226
2014-04-04 08:45:56 +02:00
Gergő Tisza 871b49dff2 Feedback button
MVP implementation, just a link that opens the survey in a new tab

Change-Id: I9f2fb85cc47ce2be4cf57679bf37f0bda13084b7
2014-04-03 23:14:18 +00:00