Commit graph

118 commits

Author SHA1 Message Date
Jan Drewniak 2fc809dc17 Replace hardcoded colors with Codex design tokens
Replaces hardcoded color hex values with their equivalent
values from Codex, via the "mediawiki.skin.variables" system.

Bug: T366197
Change-Id: Ia929a1a8d6351222acb454c8ec750e920ae6d072
2024-06-07 14:40:07 -04:00
Ed Sanders a3d4388bc1 Follow-up Ic9fad12fe: Move .css file to .less
MWCategoryWidget was converted to LESS syntax but wasn't
moved in the previous commit.

Change-Id: Ifd3e6228b96872ba40fa6d8db1617fb65b781dc0
2024-06-05 18:40:36 +01:00
Volker E. 344add6080 styles: Update invalid border color
For the invalid border color we'll use the current border error color.
With CSS custom properties on the horizon, we'll easily replace them
consistently in the future.

Change-Id: I1ec266e90a974cf79576ee7db6287ea4eac94656
2024-03-28 20:40:27 -07:00
Ed Sanders c9c7c06e76 Nest LESS files
Change-Id: Ic9fad12fe4c20793dd54cb3169b9dffe3a6a18da
2024-03-19 13:56:41 +00:00
Ed Sanders 9ee1b51fbe Move CSS files to LESS
Change-Id: Ic818efe7315187bf96ead7bd6468ecb3d44d988d
2024-03-19 13:56:30 +00:00
jenkins-bot d9eebe04ef Merge "Remove unused ve-ui-educationPopup-header CSS" 2024-03-18 20:31:46 +00:00
gerritbot aa1924faf5 styles: Update color in CSS from #d33 to #d73333
This patch promotes a consistent design decision across projects in
MediaWiki core, extensions, and skins. The darker red color meets the
W3C Web Content Accessibility Guidelines (WCAG) at Level AA that text
or images of text must have a contrast ratio of at least 4.5:1 (or 3:1
for large text).

Bug: T343239
Change-Id: I0f8db861b029c61d524416379a1a842f5137c8cb
2024-03-14 12:15:29 +00:00
Ed Sanders f7eef9ce12 Remove unused ve-ui-educationPopup-header CSS
We just use a standard <h3> in the popup.

Also document generated classes.

Change-Id: I8c61a240fe8c7222c70cad19ea9300b2105484ea
2024-02-28 15:44:36 +00:00
Ed Sanders d42a0772bb Move verbose copyright message to AUTHORS.txt
Avoids having to update the date in every file every year,
which we stopped doing.

Change-Id: I7bf7aa0937eef911e00772470091753a7b06fd3d
2023-12-01 16:07:39 +00:00
Volker E ba0ca0f0e3 styles: Use 'mediawiki.skin.variables.less', remove WikimediaUI Base ref
Using 'mediawiki.skin.variables.less' with Codex tokens now that
it's available. Also removing a comment that's OOUI variable specific.

Bug: T334934
Change-Id: Id697baa9537013c9e240dbfaa9ead1eb15280133
2023-10-26 17:18:54 -07:00
Volker E fa3f2781b7 styles: Replace WikimediaUI Base vars with equivalent skin variables
Replacing several values with MediaWiki skin variables featuring new
Codex design tokens, available since >= v1.41.0.

The values are 1:1 visual replacements in the default Codex
'WikimediaUI' theme, a continuation of the base vars, and the default
for Vector and MinervaNeue skins.

Also replacing
- other static color values with variables
- and outline value as the Codex default brings an accessibility
  advancement for free

Bug: T334934
Change-Id: I512427803cffce1c16879015c45cf1e35fe17480
2023-10-25 09:30:56 +02:00
jenkins-bot d1e51398db Merge "Move gray highlight of template items before blue active rect" 2023-03-14 22:50:09 +00:00
Thiemo Kreuz e391b5b925 Move gray highlight of template items before blue active rect
Discussed in todays story time. The blue "active" color is mostly a
"reminder with which parameter I interacted last". It's more a
secondary, passive information. In contrast, the gray
highlighting/hover effect that appears when navigating the sidebar
with keyboard or mouse is an active, primary information ("this is
where you are right now"). It's really confusing when the keyboard
navigation indicator disappears behind the blue box.

This patch changes this for both top-level elements as well as
template parameters. The blue text color "shines through" the gray
highlight so we can still see both information.

Bug: T289043
Bug: T311204
Change-Id: Ief6a023d8fde4f6ca0c4b2ea2e831b66e1ea8c83
2023-03-09 10:52:00 +00:00
WMDE-Fisch 7f4645bbe0 Streamline button margin calculation for outline parts
Generally the default button margin on the parts is 24px. The only
exception are the placeholder and wikitext when they are the last
parts in the outline.

Bug: T312644
Change-Id: Ie513bf1c022b2696cc92aacbbca59ddf6e55043e
2022-08-03 13:09:51 +02:00
Thiemo Kreuz ac204fd3a9 Template dialog: Make blue selection color transparent
This should make zero difference in most situations. Except you
navigate a list of parameters with the keyboard. In this case the
SelectWidget gets a dark blue outline which overlaps with the light
blue selection bar, but the outline disappears behind the bar. This
looks odd. Making the color transparent fixes this without the need
to fiddle with z-index or such.

Bug: T311204
Change-Id: I7049eb60dc0ea72c2c4620f4351525fe447e0f46
2022-07-20 12:48:49 +02:00
Thiemo Kreuz 4782987a7f Rename confusing "isSet" to "active page indicator"
We would love to name this state "selected", but that term is already
used for a template parameter that is checked/used. The idea of "set"
was to have a list of parameters where one is "set". But the word is
confusing. I suggest "active page" because the entire purpose of the
blue selection is to highlight the currently active page (i.e. the
one you currently interact with on the right side of the dialog) in
the sidebar.

Change-Id: I5a16ab4c193ea05c21bb3bf89ada2ef550d8d6bc
2022-07-20 09:38:41 +00:00
Thiemo Kreuz 647b5aa8e9 Remove non-helpful 1px hack from template dialog sidebar
This line was added as part of I0229b63. While what the comment says
is still true to some degree, the line stopped being helpful when
we introduced sticky headers. When scrolling the sidebar for a
multi-part template with many parameters the sticky header jumps up
and down by this 1 pixel.

TL;DR: This is one of these hacks where it's better to remove it and
look for a better solution when we notice the original issue again.

Bug: T312768
Change-Id: I2fedea4e1d4d6c95c74a63c522821a6ebc2ee2b2
2022-07-15 13:00:40 +02:00
Thiemo Kreuz 0bf4a4a147 Use named colors in template dialog LESS styles
Change-Id: I935e1bcacfe8bb61fa69da9fa42417c76c8e505a
2022-07-13 17:51:32 +02:00
WMDE-Fisch 8aee4e8e70 Use position-sticky() from mediawiki mixin
This will also slightly improve the situation for older Safari
browser by adding a -webkit rule.

Change-Id: I16b065adddd8ffe21936db9794495a891792ce8c
2022-07-12 14:09:01 +02:00
WMDE-Fisch b75082009a Differ between setting and highlighting a parameter
Introducing a set method to have a different state for a set
parameter and a highlighted one in the selection.

Allows us to remove a lot of workarounds for missusing the
highlight state and fixes several issues with these workarounds.

Main implications:
- Keyboard navigation and mouse hover now sets the grey highlight
- If a parameter is set (blue highlight) keyboard navigation returns
  when focusing the SelectWidget
- If nothing is set keyboard navigation starts at the top after focus
- Unchecking a parameter using space will not influence the keyboard
  focus in the list
- Highlighting a parameter with the mouse lets keyboard navigation
  continue from there.

Bug: T312647
Bug: T311204
Bug: T312213
Depends-On: I385dca1d95033961d3844e888521750443e49c95
Change-Id: Iaf089f4b271fd853b17c1aa7f5938510ea8f5431
2022-07-12 10:18:56 +00:00
WMDE-Fisch 970ab136da Add grey background when buttons are in focus
Bug: T311204
Change-Id: Ife5ed2dc2e772b8a94cbc04cad591acf9f8ebd6e
2022-07-08 13:40:43 +02:00
WMDE-Fisch d3bf14806a Use rgba instead of hex to highlight identical styling
This way it might be a bit more clear that this is actually the
same.

Change-Id: Ifbdfd66f476bf30408685a4af9989bb9ac969b21
2022-07-08 13:39:44 +02:00
WMDE-Fisch ef77373fda Lessy-fying OutlineParameterWidget rules
Change-Id: I9b72752269abd064c859b313ddb1f43ec04f9b71
2022-07-08 13:38:52 +02:00
WMDE-Fisch 0850a205df Lessy-fying OutlineTemplateWidget rules
Also renaming one class for convenience.

Change-Id: I0ef079ca40d061f5f2cde0eafdd04737d63c370f
2022-07-08 13:33:23 +02:00
Adam Wight c1ebaf989c Fix CSS regression
The last checkbox in the entire sidebar should get the extra bottom
margin, but not the last checkbox in each template group.

Follow-up on I1edc5db98d16a4c0de8abd7f705776fb9eb65b97

Change-Id: I4ffade9c053191ce202340edadbd032c67bb39a4
2022-07-08 13:31:22 +02:00
WMDE-Fisch ab7bc03b18 Lessy-fying OutlinePartWidget and OutlineButtonWidget rules
Using a certain amount of depth to make sure to override OOUI
specificity.

More can be done in follow ups.

Change-Id: I1edc5db98d16a4c0de8abd7f705776fb9eb65b97
2022-07-08 10:29:57 +02:00
WMDE-Fisch 83c30099ec Move obvious Outline related CSS into own file
Should be a noop. Also moving one rule further up to the set of
similar selectors.

Removing one rule that was disabled for some time now.

Optimizations follow.

Change-Id: I8da70a52c13afd8ac1c3ff43bae63a203c3bf86a
2022-07-07 22:05:09 +02:00
Thiemo Kreuz 77ce583167 Simplify OutlineControls CSS a little more
This is a direct follow-up to I7f22e4b. I found that the way the
margins have been arranged became a little more complicated with
I7f22e4b. This patch tries to go back to the – I think – simpler way
it was done before.

It should look the same as before down to the pixel.

Bug: T311223
Change-Id: I2c7789922078fa98f15f0b65de4c0efdf878a13a
2022-06-28 10:50:33 +02:00
WMDE-Fisch f1d4793862 Cleanup CSS for the forked OutlineControls
Includes moving CSS that already moved from the TemplateDialog CSS
file to the DialogLayout LESS file.

Width and height had no effect. Neither on desktop/mobile. I guess
the control's height covers for that. Float could be removed due to
the flex layout.

Some more specific rules could cover for the !important overrides.

Change-Id: I7f22e4be37c8f227845aed97281faefe26241091
2022-06-27 21:10:21 +02:00
Adam Wight 6de61ccf77 Fork OutlineControlsWidget
Bug: T311223
Change-Id: Id2f9fc89c607c8001e8b150add1ffbcaa318993a
2022-06-27 16:46:11 +02:00
Thiemo Kreuz 218ac78960 Remove obsolete "search for a parameter" page and widgets
… as well as messages, CSS, and icons that are now unused.

Bug: T310859
Change-Id: I1a2797728788cf1a86299414c1430ded0b362d4e
2022-06-17 10:23:00 +02:00
Ed Sanders bc57422841 Remove unused CSS vendor prefixes
Change-Id: Id544adce0d88123157f3f52540f7f767027ff6ab
2022-05-04 16:55:43 +01:00
Ed Sanders b0e32c22fa Remove MWDismissibleMessageWidget and use MessageWidget's showClose option instead
This option was added in 0.43.0. Now that the close button is handled,
the remaining functionality (store a flag in local storage, and fixing
link targets) doesn't really justify a separate class, especially as
it's currently only used once.

Change-Id: I0fd81cadccc077dbf957302f9f41409c5a1f4f20
2022-02-03 16:37:52 +00:00
Thiemo Kreuz 1bbf7c3394 Fix ellipsis on long strings in parameter search widget
This ellipsis was there before we started working on this code,
but was never working properly.

We understand that the CSS was intentionally done like this (as
the comment explains). However:
* We changed the width of the dialog. The old value doesn't
  match any more.
* The width is different when the sidebar is expanded vs. when
  it is collapsed. Even if we update the number, it won't
  always work.
* The 100% work fine in current browsers. I can only assume
  this was different back in 2014 when this CSS was written
  (see Ia8259e9).

Bug: T285044
Change-Id: I3de2b0ed0b6a05d2b9fa0b325a2b12277564b271
2021-07-16 13:33:51 +02:00
Svantje Lilienthal ee98622076 Change style for adding an "Unknown field" in the parameter search
Bug: T286236
Change-Id: Ibb3df034c9b423dd4130d8242bd7bf0dc742ee2f
2021-07-08 09:20:25 +02:00
Andrew Kostka 13d1c4d2ac Dismissible feedback message for the template search
Bug: T284742
Change-Id: I5dc32521b899c3c9d35d1bf77d346384e4cc87e6
2021-06-16 10:03:04 +02:00
Ed Sanders 5c84f0cd88 Rewrite EducationPopup so it isn't a mixin
Reference images are moved to Cite and used by Citoid.

Bug: T170919
Bug: T171292
Depends-On: I02041246dda1b3d3ad1bcc0b014fa022e8259b62
Change-Id: Id97659ed1fa64a1223a8957fefaf2a149edd0e9c
2020-09-24 21:33:50 +01:00
Thiemo Kreuz 5e2b7506b6 Reduce duplication/clutter in MWParameterResultWidget
The MWParameterSearchWidget that shows a list of all available
template parameters displays the (human-readable) label and
description of each parameter (both given via <templatedata>), as
well as the parameter's internal name and aliases, if there are
any.

This turns out to be non-helpful in the majority of situations:
* When there is no <templatedata> yet, there are no labels.
  Instead, the names are used as labels, which means they are
  *all* identical and everything is shown twice.
* The same happens when manually adding an "unknown field". Simply
  start typing, and you can add parameters with any name. What you
  type is shown twice (actually 3 times, 1 time in the input
  field, 2 times in the result widget).
* Many template parameters are already nice, human-readable. Even
  if <templatedata> exists and specifies labels, these labels are
  often identical to the names. There is no need to come up with
  something else if the name is already good enough. (Exception:
  Localizations, but these are rare.)

Furthermore, this is a *search* result widget. The pretty much
only reason the names and aliases are shown is because the user
can search for them, and needs to understand why a parameter was
found. This still works fine.

For comparison, when a parameter is required you will *never* see
it's name, because the parameter is always there, and never shows
up as a search result.

Change-Id: I6b1dca1c94b2c496930b5bfdfe1c6f76898faa2a
2020-08-20 12:32:02 +02:00
bkudiess-msft 748cdffd0b Adds focus visualization to parameter result widget
Bug: T253665
Change-Id: Ie7109375a0d61fb4f8e7b4f6ad54484582c47194
2020-06-26 14:14:57 +02:00
James D. Forrester 2c77e88d2c doc: Bump copyright year for 2020
Change-Id: I30539877543dc2a57bd1428a00d10ac46d8fc294
2020-01-08 09:13:24 -08:00
Ed Sanders 5461c56380 stylelint: Enforce class name pattern
Change-Id: Ia41a08424f840d353eb7fc213815f7992da4a2ef
2019-01-13 15:14:53 +00:00
James D. Forrester 3c293ea00c doc: Bump copyright year for 2019
Change-Id: I8991b97c980d4149f53eb5601036220ef3c0c440
2019-01-01 13:24:23 +00:00
James D. Forrester 309d05cb38 build: Upgrade stylelint-config-wikimedia to 0.5.0 and make pass
Change-Id: I4c547757ed5a32ff98b1cf2670010db302bd8467
2018-12-03 13:06:59 -08:00
Ed Sanders 381bc46130 Fix padding around .ve-ui-mwParameterResultWidget-name(s)
Bug: T208720
Change-Id: Iff8bbb702fdceab86d423a9f74aaebac8b41ebc3
2018-11-05 11:50:12 +00:00
Ed Sanders f7b0118de0 Fix layout of media info fields
Bug: T190468
Change-Id: Ic81781318a9003064e7d8f283901d70a5bae6ebc
2018-03-22 22:15:52 +00:00
Volker E d44bb0bc1b Remove special font-size treatment following-up UI unified in 14px base
Removing `0.8em` VE special base `font-size` for UI as we're unifying
OOUI interfaces to `14px` equals to `0.875em` at user agent default size.

Bug: T97631
Depends-on: I693d168d2ccf2babbcfe8952af3e1c262aa97773
Change-Id: I84edeec38ecfb90f5d53199f3b26fc3f83ab0611
2018-03-20 20:03:19 +00:00
Volker E e64ede5b49 Remove unnecessary and low-contrast opacity
Change-Id: I4853a77679687d23059c118914df42a1d3c2785c
2018-01-29 23:51:08 -08:00
James D. Forrester 0a7a845a42 doc: Bump copyright year
Change-Id: I0b299c840ede1a1b8552cecfc70c5760ab036181
2018-01-03 17:45:07 +00:00
Bartosz Dziewoński 99cdc08f53 ve.ui.MWMediaInfoFieldWidget: Fix positioning of icons
OOjs UI's styles now include 'top: 0' for icons, which messes us up here.

Bug: T178415
Change-Id: Ia3234848f69fd67d0b3e35c817de1d9847d46143
2017-10-17 17:55:53 +00:00
Volker E 4067b05832 Unify monospace font family stack
Bug: T176636
Change-Id: I9ad1a92cef7875371e232c8e4babc842ba711e8c
2017-09-28 00:24:53 +02:00