Commit graph

57 commits

Author SHA1 Message Date
Jon Robson b86dbc756c Address some code FIXMEs
- Remove references to the removed wgVectorUseWvuiSearch
configuration
- Remove mw-body qualifier on Indicators component.
- Drops some cache related FIXMEs

Change-Id: I6823b9c5bf19a067b56badf29f874a7127867a09
2022-03-21 20:29:58 +00:00
Mortal303 ae50914d4e Remove custom handling of aria-expanded in Vector checkbox hack buttons
Removed class "vector-menu-checkbox-expanded" and "vector-menu-checkbox-collapsed" in
includes/templates/Menu.mustache and deleted the necessary lines in
resources/common/components/MenuDropdown.less, tests/jest/stickyHeader.test.js,
includes/templates/skin.mustache, skin.json, i18n/en.json and i18n/qqq.json.

Bug: T299173
Change-Id: Ibf8a08e6e5d1a6c607abf170c030a0285e84ad74
2022-03-21 23:14:51 +05:30
jenkins-bot 9205554552 Merge "Render sidebar menu above TOC" 2022-03-03 00:26:38 +00:00
bwang 9fb8af8ae8 Render sidebar menu above TOC
Can only be merged after I8c0924f6de28b15602969de873a843b4cd69548b
has been in production for 3 days

Bug: T300875
Change-Id: I924a69b37214a34f989f49f0425c701650928e17
2022-03-02 17:04:47 -06:00
jenkins-bot 288c8b95b2 Merge "Update Vector menu CSS to use vector-menu-heading instead of h3" 2022-03-02 19:21:10 +00:00
Mortal303 ab11cc9adb Update Vector menu CSS to use vector-menu-heading instead of h3
Replaced h3 tag in includes/templates/Menu.mustache with label tag.
Replaced h3 elements in .storybook/icons.less, resources/common/components/Menu.less,
resources/common/components/MenuDropdown.less, resources/common/components/MenuPortal.less,
resources/common/components/MenuTabs.less,resources/skins.vector.styles.legacy/components/MenuDropdown.less,
resources/skins.vector.styles/components/UserLinks.less, resources/skins.vector.styles.legacy/components/Sidebar.less
and resources/skins.vector.styles.legacy/layouts/screen.less
by vector-menu-heading.

Bug: T290280
Change-Id: I6eee7d6bc47c74a62166d4579fd4d3da3dc88e88
2022-03-02 20:05:36 +05:30
Volker E f2d7158616 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: Ie48f5e78b3f9b6e7f01b65618c1d6089fa4a2f54
2022-02-28 00:00:05 +00:00
Nicholas Ray 390155c67f Move #mw-sidebar-button layout styles to Header.less
Given that these styles deal with the layout of the sidebar button in
the main header and don't make sense in any other context (at least
currently), I think they belong in Header.less.

Change-Id: I191b9a404c82c5a1a80f97d98fa54535fdd53944
2022-02-09 09:29:47 -06:00
Jon Robson 5a0932835a Cleanup: Only need to import one variable file
Change-Id: I120a66ec7013d249e8c42e6e631ae568effaa925
2022-01-12 20:58:16 +00:00
bwang b79290f5c9 Make ULS in header quiet progressive button
Bug: T291286
Change-Id: Id1e056330606b87bafb8f43e7ff28d96290465b4
2021-12-09 15:27:04 +00:00
jenkins-bot 662fa2a013 Merge "Align mw.notify() alerts to avoid overlapping sticky header" 2021-12-07 22:38:02 +00:00
Arlo Breault 4df9857726 Use sans-serif for figures
This matches the .thumb class for the new media structure.

Bug: T287965
Change-Id: I55c2f8fdc6c1b882bd1c7b8411e7aa5c475ead3c
2021-12-07 21:44:21 +00:00
Jan Drewniak aa44696222 Align mw.notify() alerts to avoid overlapping sticky header
Aligns the notifications produced by `mw.notify` so that they don't
obstruct the sticky header or usage of elements inside the sticky header.

Bug: T260338
Change-Id: If00f27ec19e71f6803231678fbb733ffaa6c6aaf
2021-12-07 14:41:46 -05:00
Esanders ad9492896d Revert "Fix font size in editor preview"
This reverts commit 058551e9b9.

Bug: T287733
Bug: T295712
Change-Id: Ic239d1334f09d2a1ecbb7f28d69abd0a349128e5
2021-11-15 18:03:50 +00:00
jdlrobson 058551e9b9 Fix font size in editor preview
Depends-On: I7eaef3ef89a23932edd5abdd74703eb3297ee061
Bug: T287733
Change-Id: I42c6a8da06d1ab9c4d546b940bc4d627b118e2a6
2021-11-12 17:50:31 +00:00
jenkins-bot 39ffd2c8e3 Merge "Revert "Apply typography rules to .mw-body-content elements outside .vector-body"" 2021-11-10 20:58:37 +00:00
Jdlrobson 0b6636d587 Revert "Apply typography rules to .mw-body-content elements outside .vector-body"
This reverts commit da832cc53d.

Reason for revert: Bartosz reports this made
things worse, so probably best to go with
the VisualEditor selector approach.

Change-Id: Ifcb18c7a388986df44424f9a58be35314c3d3e2c
2021-11-10 15:07:19 +00:00
jenkins-bot e3b5356aab Merge "Apply typography rules to .mw-body-content elements outside .vector-body" 2021-11-09 21:38:11 +00:00
jdlrobson da832cc53d Apply typography rules to .mw-body-content elements outside .vector-body
Bug: T287733
Change-Id: Ib737f215104b2aa234bf694e734de12fccff2fc3
2021-11-09 06:32:01 +00:00
Volker E 2ba2af97cf Fix specificity of widespread .external selector
Returning to `a.external` over only `.external` as it's used widely
within MediaWiki and skins and it needs to kick in in appropriate
places.
`.external` is besides one false positive only for anchor elements,
nonetheless more specific is simpler and more fail-safe than the
other way round.

Change-Id: I3e2fec26d1f835b11f9a66fdf4ba7faeca12d9d2
2021-11-08 21:58:57 -08:00
jdlrobson 95e3271e79 Address cache related FIXMEs
Follows up the sticky header search refactors
in caed16e

Change-Id: I5832bc04f0c675ff8bc1a00fff17b6b9f8399e6e
2021-10-05 21:53:09 +00:00
jdlrobson caed16e26f Allow multiple search components on the same page
Styling should not depend on IDs to allow us to have multiple
searches in the page.

Precursor for wiring up search in the sticky header.

This also tweaks performance metrics to track separate metrics
for the sticky header search

Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
2021-09-23 23:23:58 +00:00
bwang b295ccc931 Fix aria-expanded status for user menu
The user menu dropdown was announcing to screenreaders as "Personal tools expanded collapsed". This is due to the core icon classes causing the spans to be display: block. This patch adds !important to the relevant display styles to ensure the statuses are always read out correctly

Bug: T253650
Change-Id: I0b51af5da98af1bd0c0029db54420e395242842d
2021-09-16 13:48:26 -05:00
jenkins-bot 3c894154df Merge "Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector" 2021-09-15 16:43:41 +00:00
bwang 687c6a50d8 Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector
- Apply aria-hidden to h3 in Menu template, ensuring the nav landmarks are still properly labeled, but no longer reading duplicate labels to screenreaders
- Remove "Navigation menu" h2 element, which is not needed as the nav landmarks are already labeled
- Remove searchbox h3 element, which is redundant with the search landmark
- Scope all changes to modern vector

Bug: T265993
Change-Id: I4e5da7a0699160fa57234bd126b75243e0157778
2021-09-14 10:47:05 -05:00
Nicholas Ray 326e11dfbf Scope styles that should only apply to the main header to Header.less
We have many styles related to the layout and visibility of search that
are only useful in the context of the main header. Since many of these
elements have classes that will also be in the sticky header, we should
scope these rules to the main header so that we avoid an uphill battle
of styles trying to override eachother.

Additional changes:

* We previously had a mix of #p-search and .vector-search-box selectors
for the same element in the CSS. Header.less now only uses
.vector-searchbox to avoid specificity wars.

* Removed nearly all of the #p-search rules previously found on L147 -
L167 in screen.less after observing nothing relatively bad happening
when they were removed.

Bug: T289724
Change-Id: I2e6c269e29717cd20d8acfaddc3631ea1b8fedfa
2021-09-14 15:34:05 +00:00
jenkins-bot 6a0607afdf Merge "Inherit link colors from core variables and override @color-link-new" 2021-09-13 18:23:06 +00:00
jdlrobson 0238078aaf Inherit link colors from core variables and override @color-link-new
Vector should use the variables defined in core for red links

Bug: T288739
Depends-On: I799b46664f01c5631fb9d1ae4f5c43caeeaac818
Change-Id: Idcf5a54d76a1343d3407821b8a5b8d8ece8af9d0
2021-09-13 17:56:26 +00:00
jenkins-bot 9e9f3ec0cd Merge "[refactor] Remove common UserLinks code" 2021-09-07 16:31:18 +00:00
jdlrobson ff8e29d240 [refactor] Remove common UserLinks code
There is no common UserLinks code. These styles serve
legacy only.

Bug: T288852
Change-Id: Ied191bc1bc5dbd48491fa285b5def265c7d5262d
2021-09-07 15:37:13 +00:00
jdlrobson b88f2970f7 Simplify how we generate icons and button classes in Vector
- Separate icon classes from button classes in user links/language
- Upgrades the personal tools language button preference to
a mw-ui-button with icon
- Adds a generic selector for dropdown menus without an icon
- Cleans up user links CSS now mw-list-item class is available
- Removes icon hack CSS

Bug: T289630
Bug: T283757
Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9
2021-09-03 19:25:31 +00:00
Clare Ming 21c45837ef Spoof aria-expanded for dropdown menus using checkbox hack
- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.

Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
2021-09-01 16:12:26 -06:00
jenkins-bot 94d135ecfa Merge "Build the sticky header skeleton" 2021-09-01 20:35:21 +00:00
jdlrobson 8657171471 Build the sticky header skeleton
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.

Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-09-01 12:32:31 -07:00
bwang c08ae1152e Update ULS button states to be consistent with other quiet buttons
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed

Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
2021-08-31 10:59:59 -05:00
Clare Ming 1efe0a4203 Remove user links feature flag
Update/remove config, constants, hooks, templates, styles, logic, tests, stories to check legacy vs modern Vector where applicable instead of the decommissioned user links feature flag.

Bug: T288852
Change-Id: I5c5831091a10711838a8a2877c782df4996d4596
2021-08-26 10:07:15 -06:00
Nicholas Ray f62e1997f5 Fix padding/positioning of the user menu orange talk message notification
The padding-top of the orange notification set in
ext.echo.styles.alert.less was being overriden by the `padding-top: 0`
set in UserLinks.less which was intended to only override the padding
set in Menu.less.

This commit:

* Scopes the li styles in Menu.less to apply only to the legacy user
menu (found in both legacy and modern vector with the consolidated user
links feature off) which appears to be the only menus that needs these
rules.

* The padding-top previously in UserLinks is no longer needed as a
result of the above point.

* Adjusts/cleans up the positioning of the orange notification by
removing an unneeded margin/padding-top and setting the top to 100% (the
previous `calc` statement was unintentionally resulting in 112%).

Bug: T287633
Change-Id: Ia7069d291f53d8e0e0e576d7b96b7a8b1a6cb29d
2021-07-28 16:35:08 -06:00
jenkins-bot 7881d8e651 Merge "Restore print, links, table and message box styles" 2021-07-27 21:45:16 +00:00
jdlrobson 722b5fbf80 Restore print, links, table and message box styles
These should have been added in the migration.
Follow up to 4a93c70

Bug: T278896
Change-Id: I089077d7ff7a9daf0e98b4dc40f04a11b4764277
2021-07-27 21:18:03 +00:00
Nicholas Ray d8f62f780c User menu design tweaks
* Revises UserLinks.less according to the T285786 spec.

* Unsets 'createaccount' data in $content_navigation in favor creating
this link inside SkinVector which follows the same pattern as the Login
link. This is needed because the create account link needs to be on top
of the login link in the menu per T285786#7231671.

* Changes MenuDropdown.less to pad the anchor element instead of the li
element. This results in a more intuitive click target.

* Places an end margin on the search box to add space between the user
links and the search box.

Bug: T285786
Change-Id: Idb860e6b65c9f266a8027e3f486ccf4c4ec4ed3c
2021-07-27 14:25:32 -06:00
jdlrobson 83e63d3e99 Sidebar hover background should be consistent with mw-ui-icon
Remove override now it's a default.

Addresses Alex's feedback item 1 in
T191021#7231088

Bug: T191021
Change-Id: I2702ffb9cbee2dfc841b3f03638fdfd24a128493
2021-07-22 22:07:09 +00:00
jdlrobson 96136a0e2d Remove Vector skinStyles for icons and fix language button
Depends-On:  Id08590f6a3fbbfda8226f2899f50f0b64cbb1481
Change-Id: I5be642f2e20d67e1d27c74ddb6ec086738a261aa
Bug: T191021
2021-07-21 11:02:42 -07:00
jdlrobson 13de4ff225 Prepare for updated mw-ui-icon implementation in Vector
We will couple the roll out of the consolidated user links code
with the roll out of the new icon styles.

This change is restricted to the user links feature and will result
in some slight UI discrepencies until
Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
is merged.

Bug: T191021
Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
2021-07-20 18:52:40 +00:00
jdlrobson 60923c6ddb Collapse search below desktop breakpoint
The tablet breakpoint doesn't work. It is not possible to apply
the min width of 350px for the search input given the other elements
in the header, however the desktop breakpoint provides plenty of space.

Change-Id: I93c29700d465d641f8155c01a311e1e720c37695
2021-07-15 22:02:55 +00:00
jdlrobson dd73491331 Remove caching FIXMEs
Code here has been in production a week now, so we no longer need to support
the old HTML structure.

Change-Id: I508dec3294588c9fc7f86958c47a3e5b52493df9
2021-07-15 20:28:48 +00:00
Nicholas Ray 91af0e098d Make search toggleable at smaller screen widths
Now that the header collapses at small resolutions
(I89d75843ca7e33e6de93af5d7c22e46b7249c4b7), this commit wires the
search toggle to show the search box when clicked and hides it when the
user clicks outside the search box.

* Adds searchToggle.js to perform handle the toggle behavior of the
searchbox.
* Adds `@padding-horizontal-tabs`, `@size-search-expand` to variables.less
so that these can be used to set the start margin of the search box
(enabling its start edge to match the tab text start edge).
* Modifies screen.less to only apply search max-width when >=
@width-breakpoint-tablet

Bug: T284242
Change-Id: I82563d44967f60aee1cd4d3aa6fb4f405822686b
2021-07-14 00:14:45 +00:00
bwang 0a75e2e627 Ensure userAvatar icon is only used in logged in users
Additional change: A bundlesize increase is required given
recent developments in the user menu.

Bug: T284748
Change-Id: I2b0981d621c3add42731e50d5aef299b32548b4a
2021-06-30 22:41:47 +00:00
jdlrobson 6777c5b1fe Collapse header at lower resolutions
Reduces the min-width to 340px with several changes at lower
resolutions
* collapses create account into dropdown
* hides language button and user messages
* The search component is updated to include a search toggle which
can be used to hide and show the search input at lower resolutions
- this leads to a slight HTML change with caching implications,
it also moves away from a BEM usage which is not standard for this
repository.
* limits width of logo based on the dimensions we display
in mobile

Bug: T276566
Change-Id: I89d75843ca7e33e6de93af5d7c22e46b7249c4b7
2021-06-30 21:43:35 +00:00
bwang 8389de9cb9 Update user menu icon and storybook
Bug: T284748
Change-Id: Icdbfd882490b380871befd3c6606c4b48d225132
2021-06-18 20:30:55 +00:00
Clare Ming 9ec5d6ded0 Hide language links on print version
Add selector to hide language links for print version of pages.

Bug: T282304
Change-Id: I6b17676e7491863e684c1704d0a849f0ba3827f5
2021-06-10 16:35:28 -06:00