Commit graph

27 commits

Author SHA1 Message Date
Ebrahim Byagowi 6fd605d4b2 Fix icons in RTL by using an element instead of ::after
Codex icons are auto-mirrored for RTL scripts but a pseudo-element
causes the auto-mirror selector to have incorrect order and that
builtin auto-mirror functionality of codex icons to not get trigged.

This change fixes it by adding a span to each icon so auto-mirror
can target an actual element instead of ::after pseudo-elements.

Bug: T369659
Change-Id: Ib5f9793a8ad10980d2742d1046c59306c943f960
2024-07-11 20:07:46 +03:30
Derk-Jan Hartman 2a8b140ed3 MMV square buttons
- Use square cdx icon only buttons
- gray transparent brackground
- opaque background on hover, active, focus
- Some fixes to the positioning and offsets of buttons and dialogs
- Move the dialogs to be in the same container as the buttons
  This is better for accessibility but also fixes the z-index issue

Bug: T365192
Change-Id: Idbc2a309fbca15bd528aaed7ca9bed584487c4f3
2024-06-26 20:28:38 +02:00
Simon Legner 683b3e1caf Use Codex icons
Discussed with Justin and Matthew (designers):
- Dropping the image in "Disable Media Viewer"

Discussed with Jon:
- Resizing the next/previous arrows

Bug: T340258
Change-Id: I6f7b6d0f9b96168ab6d835811141ab4cede214d1
2024-05-04 20:54:12 +03:00
Volker E b64642a527 styles: Remove obsolete mixin
Duplicated in core mixins with `.user-select()` since v1.38.0.

Change-Id: Ia0d36bbd2fd417a7195c235854ddd81ac76e51c1
2023-05-09 18:56:17 -07:00
Volker E bee73f7520 styles: Replace old variables calls with skin variables
Replacing 'mediawiki.ui/variables.less' `@import`
with new skin-aware 'mediawiki.skin.variables.less' standard.
Also replacing and removing scattered WikimediaUI Base variables
with new skin variables.

Also
- replacing several static values with new Codex design tokens featuring
  skin variables for following properties:
  - `background-color`
  - `color`
  - `border*`
  - `border-radius`
- replacing local variables with new skin variables where applicable.

Bump required MediaWiki core version to >= v1.41.0.

Bug: T319381
Bug: T332541
Co-Authored-by: Volker E. <volker.e@wikimedia.org>
Depends-On: I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06
Change-Id: Ie834b3f652bd22d9bf96c112166a5b7fcc3ecf2d
2023-04-16 03:32:27 -07:00
Ed Sanders 3a61a45a53 build: Update stylelint-config-wikimedia to 0.13.0
Change-Id: I1b6de87b8a1b48220104af42a4e43d81a289438c
2022-05-19 23:58:01 +01:00
Volker E d5aad3a260 Add file extension to LESS imports
Similar to how other extensions have been amended.

Change-Id: Ic9905fe166507739cd687f5aa2f44a0625b9746b
2020-04-17 21:13:01 -07:00
Volker E 02c0fd738f Rename 'mmv.globals.less' to 'mmv.variables.less' following naming pattern
Renaming 'mmv.globals.less' to 'mmv.variables.less' following naming
pattern of other extensions like MobileFrontend, Echo or Flow.

Change-Id: I376c3fd1463ed225e214f165943576f3e3c7df39
2020-04-17 21:05:58 -07:00
Ed Sanders f4d6c9f37e Remove useless .opacity mixin
Change-Id: Icff7c01aba4a647d23bae1925b725bddc555c762
2019-07-29 17:56:43 +01:00
jenkins-bot 989af50dcf Merge "Make the download/share buttons actual links for right/middle click" 2019-06-15 22:09:38 +00:00
Thiemo Mättig 8b647c09e7 Make the download/share buttons actual links for right/middle click
Bug: T71469
Change-Id: Ib9dca98a70a056e93e252ba1d08479be509e7a18
2019-05-20 09:05:10 +00:00
Thiemo Kreuz 873a88e654 Enlarge click regions of all icons in the main UI
Before, the icons on the right all had a 24x24px click region, exactly
as big as the icon. There was no wiggle room. You had to be very precise.
This patch adds a padding that can be clicked as well, 14px left and
right, but no additional padding top and bottom (this might be an
additional change for another patch).

I made sure the positions of all icons are 100% as before.

Change-Id: I1618681b5ab714cb4cfc789dc6d501ec30643bc0
2019-05-19 19:00:27 +00:00
Prateek Saxena 45110a7090 Use <button> instead of <div>
* Buttons are semantically better.
* Neither <div> nor <button> elements can have the 'alt' attribute
  so switching to 'title' instead.

Reverts parts of I6ea62124018b1a0ec5110bb500f690cb2368f102.

Bug: T58471
Change-Id: I991b40d3387f8d6dd7cdad8ccc5cc9660b9f139a
2017-03-22 12:06:15 +05:30
Ed Sanders e7ff2ba8b6 build: Introduce stylelint and make pass
Change-Id: I6f97359c6f34f2e5687ce91ab9926c493e613bf5
2016-07-19 13:51:05 -07: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 325a8a3e27 Style fixes for the UI changes
I decided to fix them all at once since we're merging all of these
patches together anyway. I can pull changes into other patches if
absolutely necessary.

Also fixes the dialog open/close handlers for the canvas click event,
and leaves the reuse dialog open on next/prev.

Change-Id: Id1564425442aec72e5e41f2f80986d8a104dd92c
2014-09-24 17:08:02 +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 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
Mark Holmquist f94d3362d9 Go to the original image on image clicks
Also removes original file button.

Change-Id: I6e73e46e910313fe6c5efb3087ecb693e499e064
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/831
2014-09-05 10:19:00 -07: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 2079519eba Make opacity rules compatible with IE6-8
Change-Id: I426c7af8f5467c3e06abaea4f98b7e1495157e95
2014-06-17 21:11:33 +00: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
Gergő Tisza ab7b339143 Revert "Minimal zoom implementation".
Per the design meeting, we are abandoning this feature for now - there is not enough time to ensure it is of acceptable quality.

This reverts commit 4329d453ec.

Change-Id: I27c113ffecb617d442557163722ea5181ed0b2f4
2014-05-15 20:40:41 +00:00
Gergő Tisza 4329d453ec Minimal zoom implementation
Just a link to the full-size file for now.

Since the link must be to a PNG/JPEG/GIF (so possibly a thumbnail),
and we want to cap the size, we might need to get the URL from the
API, but we need to open the new window right away to avoid popup
blockers, making this patch quite complicated.

Change-Id: I9ce9d2a2d27b75470eae2806d9f9ce2f95f4dac2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/588
2014-05-15 01:04:23 +00:00
Gergő Tisza 47a8bda392 Create StripeButtons class, convert reuse button to use it
Also do a bunch of refactoring to:
* keep LESS rules in more sane locations so it is not as hard to get an overview
  (most of the metadata panel rules were in mmv.less)
* move mmv.mixins.less up one directory as it is not specific to the UI
* move the SVG icons as all of them were related to the UI
* remove the marging-right hack which was used to keep the title text from
  overflowing the button; instead use a float and overflow properties to make
  sure text that is too long gets hidden

Change-Id: Icc8ea2e766be67d86ae98c734721b2185bd6c36e
2014-04-03 23:13:12 +00:00
Gergő Tisza 95111d2b73 Use mw-mmv CSS prefix consistently for all things
With apologies to anyone who gets a hundred merge conflicts
because of this :)

We had several different prefix styles (mlb-, mw-mlb-, mw-mmv-,
mw-mmv-mmv-, a few unprefixed), which was getting annoying,
and will be confusing to wiki editors who are trying to figure out
where a given style comes from. Such changes are better done before
going live because it breaks all local CSS tweaks on the wiki,
so I am renaming things now (also removing some stuff which wasnt
used anywhere).

Change-Id: I00447a25f0028e234169c6db941bedc99622eb8d
2014-03-31 21:33:12 +00:00
Gergő Tisza 7379957398 Rename Buttons to CanvasButtons
Less misleading as we have lots of buttons, and I plan to add a new
button class for the Commons/survey/reuse thing.

Change-Id: I74194e22e9066c58f9c1eba57629458b2b9148b5
2014-03-28 00:10:04 +00:00
Renamed from resources/mmv/ui/mmv.ui.buttons.less (Browse further)