Commit graph

626 commits

Author SHA1 Message Date
bwang 37149c9e67 Remove custom rendering of the user links overflow menu in favor of using 'vector-user-menu-overflow', a vector specific menu bucket in Hooks.php
- Rename 'vector-user-menu-more' class to 'vector-user-menu-overflow'
- Update storybook and tests

Visual changes
- Small intentional change on the create account button

Bug: T306662
Change-Id: I371bb11903d8cdd8f0da89266fcf549050c0da8c
2022-08-01 20:18:46 +00:00
Clare Ming 1d1585d214 Add feature to hide/show collapsible TOC above desktop
- Add hide/show links to TOC template.
- Add i18n messages for hide/show text.
- Add event listener to TOC js.
- Update relevant TOC collapsed styles.
- Update test snapshot.

Bug: T307901
Change-Id: Ic94fda79bd14856ccda14985d5860aa54d3118d0
2022-07-29 14:19:55 -05:00
jenkins-bot e4b4f5bf9f Merge "Show ULS button when article exist only in single language" 2022-07-27 20:22:02 +00:00
jenkins-bot 54ac78bba0 Merge "Make site banner full width in grid layout" 2022-07-27 16:57:05 +00:00
bwang 320175d22c Make site banner full width in grid layout
Bug: T312749
Change-Id: Ia888615762a641f98409b11c6448a32897c4c835
2022-07-27 10:01:49 -05:00
Ed Sanders 23a5261ef6 Add "Add topic" button to sticky header
Bug: T304187
Change-Id: Ib497eb91ec7548e2ba6d1d474a196ada770f955d
2022-07-26 22:15:02 +00:00
Ed Sanders c9a04099d0 Sticky header: Add a link to the 'subject' page when on talk pages
The subject link does not have a consistent ID like the talk link,
so it needs to be computed from the canonical namespace name.

Something similar is done in VE.

Bug: T309424
Change-Id: Ie82ca61aef30204edd09793963b25464febb17fe
2022-07-22 22:24:38 +01:00
Clare Ming 1297733a65 Add text to TOC collapsible button label for accessibility.
- Provide message translations.
- Include other TOC message that was missing.

Bug: T310810
Change-Id: Ibd612b48ea3ef3f9f31f4bb5791c0cb82e447ece
2022-07-22 10:45:40 -06:00
Santhosh Thottingal 40f6c5e29d Show ULS button when article exist only in single language
When the article exist only in one language, currently we do not show
language selector. This prevents showing the entry points to create article
in other languages by various means.

Show the language selector so that options like translate, interlanguage
links, language settings can be shown.

Bug: T275147
Bug: T290436
Depends-On: I42c5d44ec15e291d71723c9738ddb8f0d1cf0b09
Change-Id: I7fb68457c1203d824fe7433c9f272f300a483c44
2022-07-21 16:28:22 -07:00
Clare Ming 28732cf4f7 Remove Table of Contents feature flag
- Update related selectors, styles.
- Remove unneeded styles.
- Remove link hijack js.
- Simplify hook to only add experiment name to body.

Bug: T310527
Change-Id: I25527261d529a16e28f1b90f2f5af234d26fd40f
2022-07-21 12:41:39 -06:00
jenkins-bot 3c8796ee04 Merge "Search: Use Codex and Vue 3 instead of WVUI and Vue 2." 2022-07-19 15:18:29 +00:00
Roan Kattouw ce77018b7c Search: Use Codex and Vue 3 instead of WVUI and Vue 2.
[Visual changes]
This should result in 9 visual regression failures relating to
increased height of search results and loading bar

[More details about change]
- Migrate search app from Vue 2 to Vue 3; update tests
  accordingly
- Remove dependence on WVUI and use Codex instead, via the special
  `@wikimedia/codex-search` package
- Update search app to use CdxTypeaheadSearch, which no longer
  takes in props related to the search client or fetch start/end
  instrumentation. Instead, directly use the restSearchClient
  and call fetch start/end events in the search app.
- Handle hideDirection in the search app/API response formatting
  code, not within the TypeaheadSearch component
- Handle showing/hiding the search button in the app
- Move the WVUI URL generator into Vector
- Update server-rendered search box styles to match design updates
  included with CdxTypeaheadSearch
- Replace references to WVUI with references to Codex
- Update values of various LESS variables to match Codex, and update
  searchBox styling to prevent jankiness when the searchBox is replaced
  with the Codex TypeaheadSearch component

The VectorWvuiSearchOptions config variable has been maintained and
will be updated to a code-agnostic name in a future patch.

Bug: T300573
Bug: T302137
Bug: T303558
Bug: T309722
Bug: T310525
Co-Authored-By: Anne Tomasevich <atomasevich@wikimedia.org>
Change-Id: I59fa3a006d988b14ebd8020cbd58e8d7bedbfe01
2022-07-18 12:54:47 -07:00
Jan Drewniak c9c5c9e5a4 Followup to 33a6fb6 - remove is-title-above-tabs from template
The configuration for this feature was removed, so the conditional
in the skin.mustache template should be removed as well.

Bug: T311773
Change-Id: I6a8e671c5f08d9af73145b900398b185febb3bc7
2022-07-18 10:43:36 -04:00
Ed Sanders e2d70c383e Move code for adding sticky header class to SkinVector22.php
Per the comment at the top of the file, much more of this code
needs to be moved to SkinVector22.php, but this is causing a specific
regression, so can be moved now.

Bug: T312782
Change-Id: Ief7581782f1e4eefc7474cceb81830783dff99a8
2022-07-11 16:11:58 +01:00
Jon Robson 2a4ac3152b Move Vector menu class logic into Menu mustache template
Cleaned 'vector-menu' in SkinVector file, updated
includes/templates/Menu.mustache and includes/templates/legacy/Menu.mustache.

Bug: T290281
Change-Id: I7286fa82abfd437a228b9ac07ac781210d7cd98f
2022-07-07 12:34:23 -05:00
Jon Robson 33a6fb6028 Layout: Title should always be above tabs
**UI CHANGES**
- This change will result in expected UI changes so will flag problems
with Pixel.
- Before merging please confirm Pixel reports 31 passed, 47 failed
- After merging, we should update LocalSettings.php to reset these
changes.

Bug: T310054
Change-Id: Ib35c6bfa5493f7dc81b63c42e7fedb8f1e47226b
2022-07-06 15:25:42 +00:00
Jdlrobson e16a8e4775 Revert "Layout: restore sticky toc behavior by adding additional TOC container"
This reverts commit 3a26cc220c.

Reason for revert: Pixel flagged a UI regression relating to this change https://phabricator.wikimedia.org/F35291665

Change-Id: Id0b3d13da7dfbd8a55605e9f1fae157fe45abd2f
2022-06-30 22:53:19 +00:00
bwang 3a26cc220c Layout: restore sticky toc behavior by adding additional TOC container
Fix sticky behavior changed by impacted by e23fc1f

Change-Id: I7ead5e1d5954f772a533e1116f8c55d2d9cfd143
2022-06-30 21:40:14 +00:00
bwang e23fc1fe11 Grid: fix footer styles
Fixes https://phabricator.wikimedia.org/F35289862

Change-Id: If14bfb357d077ebd3886ce7290f0d46d19588dc6
2022-06-30 13:34:25 -05:00
Jon Robson 11618b5d81 Grid: Add table of contents to grid
Bug: T303484
Change-Id: Ic854b34b739b59e2d1efd864a711c961548f079f
2022-06-29 00:00:06 +00:00
bwang 4ab798441e Refactor SkinVector to use Hooks::updateMenuItems code to process menu data
SkinVector and Hooks both had code to add classes and handle Vector specific template data. This patch simplifies the way we handle menu data to always use Hooks:updateMenuItem. This has an additional side effect of removing instances of mw-ui-icon-before.

Bug: T306628
Change-Id: I73514a0eada4d92705b70e7c2ebd91092fc12544
2022-06-28 21:53:51 +00:00
jenkins-bot a47f46009e Merge "Attach VE to #content while title-above-tabs feature is disabled." 2022-06-27 20:15:35 +00:00
Jan Drewniak 05a1c330fe Attach VE to #content while title-above-tabs feature is disabled.
Limits the usage of the `data-mw-ve-target-container` attribute,
which changes the position of VE, to be enabled only when the
title-above-tabs feature is enabled.

Bug: T310197
Change-Id: I846135a88acf713bed608ad4f147f7602ce7cc2b
2022-06-27 15:44:19 -04:00
Jon Robson 6efcf775c0 Technical: Use unambigious menu template
Follow up to 49c8b5f514
Our PHP parser resolves >Menu to the parent directory which
differs from the frontend Mustache library.

Best to have different names for these files to avoid this problem.

Bug: T311319
Change-Id: Iea708718a0b928c4902dc7bac0c5ee304b89f961
2022-06-27 12:29:03 -07:00
Jon Robson 5beadc4bc2 Layout: Don't hide footer < 1000px when sidebar closed
The 'mw-workspace-container' class is present on both
the footer and the sidebar. The CSS rule should only hide
the latter.

When there is no table of contents on the page, and the sidebar
is closed, the content
should always span the grid columns and the sidebar container
closed.

Bug: T293443
Change-Id: I852b9024fbd21339b7c78dbb4deba811ab17c7e7
2022-06-25 00:03:41 +00:00
Jan Drewniak 6e96a8e936 Rename data-ve-target-container attribute to data-mw-ve-target-container
Updates the data attribute for placing VE on the pages.

Bug: T310197
Depends-On: Ia6f87535f11ccc7aadb26b7dd9e1ac8a867c377c
Change-Id: I081d5e23a15902e1429e68ac4ae191e498e6aba6
2022-06-23 10:53:44 -04:00
Jan Drewniak 97783e5bd8 Use the data-ve-target-container attribute to position VE
Uses the data attribute `data-ve-target-container` to determine where
on the page to insert VisualEditor. Also moves the #siteSub back into
the #bodyContent container. This makes the SiteSub match the font-size
it had in legacy Vector & positions the VE toolbar between the tabs
and the tagline.

Bug: T310197
Bug: T310839
Depends-On: Idae6755c90eacaab1a9daa88c6e28850d427810c
Change-Id: Idb2a743c93316786d6d36e1989cf6620a6092281
2022-06-23 00:39:19 +00:00
Jon Robson 49c8b5f514 [Fix] Adjustment to legacy menu templates
Follow up to c5cfd4d

1) Partial paths are incorrect
These are not a problem with our current Mustache template
parser but could break with any changes in our PHP implementation

2) Add dedicated class to legacy menus

On the longer term this will allow us to further separate the
old and new CSS.

Change-Id: I056b033855c28f919a4af99784620503f10b9dcb
2022-06-22 22:42:39 +00:00
bwang f473129485 Add support for floating TOC lower down the page
This patch only handles the first case listed in the task description

Bug: T308689
Change-Id: I4e7dbded7a8206633a98653aaf4ced3fd2b6f69d
2022-06-21 16:02:11 +00:00
Jon Robson 64ee3686b8 Cached CSS is no longer a problem
The !important is retained for cached HTML and will be retained
for another release cycle

Cached HTML will continue to be a problem until next deploy. The CSS
cleanup will thus be fixed in a follow up
(I47b7a0bc9c5dad5451f1dbb5e32e513643a1534b)

Bug: T307900
Change-Id: I47b7a0bc9c5dad5451f1dbb5e32e513643a1534b
2022-06-16 17:48:29 +00:00
jenkins-bot d529efeaf8 Merge "Follow-up: Update menu label elements" 2022-06-13 14:37:25 +00:00
bwang 93e8cfcd90 Collapse ToC into page title at narrow view ports with CSS/template changes only
Bug: T307900
Change-Id: I72607ec9d8b46401468de5815cf47dac9f4612a5
2022-06-10 15:49:06 -06:00
Jon Robson 664b6c5cc5 [Grid] Vector 2022 layout uses CSS grid
It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.

Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
2022-06-07 17:23:08 +00:00
bwang 467d994123 Follow-up: Update menu label elements
- Update the modern menu template to avoid using aria-hidden on the `label` element, and avoid using a `label` element when no checkbox is present.
- Revert legacy menu template to use h3 elements


Bug: T301051
Change-Id: I6ab10e35f0d67d70877e55cca5a512c2af4cb972
2022-06-06 23:59:13 +00:00
Jon Robson a018a909d9 [Grid] Minor HTML restructure for grid
Make the sidebar and content siblings of the header element. This
will allow us to easily apply grid column and rows to these elements.

Bug: T303484
Change-Id: I0a91eddbddbe58781892eddb93edfc3d58777968
2022-06-06 14:58:20 -07:00
Jon Robson 02fb90531b [Grid] Add TableOfContentsContainer
In preparation for grid work where the table of contents will
be moved into a new container.

Bug: T303484
Change-Id: I931d5148e314c1c05f0474b47be5efd7c166144d
2022-06-03 22:27:22 +00:00
jenkins-bot f94c86c3e0 Merge "Exclude from max-width via query string patterns" 2022-06-01 16:15:01 +00:00
jenkins-bot 54991e1d13 Merge "Remove unnecessary inner-tag whitespace and self-closing tags" 2022-06-01 15:05:50 +00:00
Sam Wilson 87e4ca9a21 Exclude from max-width via query string patterns
Add action=edit to the exclusions in $wgVectorMaxWidthOptions
and update the parsing of the query string values for that config
variable to accept a regex.

Bug: T307725
Change-Id: Iba526033d45e18cb340a2648378d3d90ef3ae3c6
2022-06-01 10:00:39 +08:00
Jan Drewniak a3cef30154 Move page title above article toolbar menus
Moves the page's title above the article toolbar (i.e. tabs) based
on the VectorTitleAboveTabs config option. This feature remains
off by default, but can be accessed via the query parameter `vectortitleabovetabs`.

Removes the Navigation.mustache template since it's just a wrapper
for the sidebar + tabs elements, which, with this change, are placed
in different locations in the DOM and don't need a common parent element.

Bug: T303549
Change-Id: Id4816b753a1b2133c53c3b1d390b45631c704daf
2022-05-31 18:06:11 -04:00
Sam Wilson c32c64481d Use new ResourceLoader namespace
To fix Phan errors with the now-deprecated ResourceLoaderContext
class alias.

Bug: T308718
Change-Id: Ifd265d29cee5f8a68e7b3036deaf2ba2b6c49d2e
2022-05-25 10:36:40 +00:00
Volker E 06708ba198 Remove unnecessary inner-tag whitespace and self-closing tags
Self-closing tags are so XHTML. HTML5 allows them on some elements, but
doesn't require them. Cleaning up for consistency and for a few bits
saved to clients.

Change-Id: I781b8d79bbd5dd1ee75a167718964c1142ecfc5d
2022-05-24 14:46:37 -07:00
jenkins-bot dafe3c8fd4 Merge "Handle accessible labels differently for dropdown and portal menus" 2022-05-24 15:09:04 +00:00
Mo Abualruz e46eef19d0 Normalise PHP namespaces used in Vector
- `MediaWiki\Skins\Vector\Tests` is now the prefix for all tests in the skin
- we followed PSR conventions of following folder structure after the prefix
- Optimize imports/use order
- update namespace in skin.json

Bug: T303102
Change-Id: Ib76374d81d973c83adfd6c8e7863ff6d797e655d
2022-05-23 09:32:40 +02:00
Jon Robson d74890df63 [Grid preparation] Add feature flag for grid
Additional changes:
* Make the query string parameter optional and if not defined set it
to lowercase configuration name. I think this makes it more predictable
as some configuration flags are prefixed with vector and some without.

This has the following consequences:
languageinheader => vectorlanguageinheader
languageinmainpageheader => vectorlanguageinmainpageheader
languagealertinsidebar => vectorlanguagealertinsidebar
titleabovetabs => vectortitleabovetabs

Note since table of contents query string is used in the A/B test
I've kept that as tableofcontents for now.

Bug: T303484
Change-Id: Iaca026ef5f32836098dc3b6f0f18632fe84fa8d0
2022-05-13 15:21:52 +00:00
bwang 9e665f9034 Handle accessible labels differently for dropdown and portal menus
An issue was found in QA where certain browser/screenreader combos could not read `aria-labelledby`+`aria-label`. Instead, we avoid using `aria-labelledby` and the `label` element entirely and apply the accessible label directly to the `input`. This great simplifies our labelling and improves screenreader support, while also allowing us to hide the `label` element to reduce verbosity.
Because the `label` element is used differently in the portal menu, we use the `is-portal` variable to maintain the old markup for portal menus

Bug: T301051
Change-Id: I5a0f7d5d78838fabe561095b33176e7162b31aea
2022-05-12 22:11:22 +00:00
Jon Robson 78369c51d3 Omit ArticleToolbar in Navigation when title above tabs
Change-Id: Ib3d9c28e4dbbf1deb85adccec84f208f086c1a04
2022-05-12 11:04:10 -07:00
jenkins-bot ef42ef7e66 Merge "Create feature flag for VectorTitleAboveTabs feature" 2022-05-11 19:53:11 +00:00
jenkins-bot 8d1dbab356 Merge "Simplify TOC spacing styles/logic by reusing the visible sticky header class" 2022-05-10 22:18:26 +00:00
bwang 2f32d1378c Fix personal tools navigation landmark label
Bug: T291304
Change-Id: I62c24cf739048b794cc33045cbe2333ecb51efdb
2022-05-10 17:12:46 +00:00