Commit graph

466 commits

Author SHA1 Message Date
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
jdlrobson bb0b3373c7 Mount search to parent node of search form
Follow up to 5dee570cb2.

It seems the mount works slightly different in that it creates a div,
appends by the App element to the element you give it, after
clearing all it's child nodes.

The previous behaviour was that the old element was /replaced/
by the App element.

Bug: T296889
Change-Id: Iee7493c032f4de5389207bba288a1a70e4cd14f3
2021-12-06 22:42:31 +00:00
jdlrobson d834329e15 [Sticky header refactor] Separate responsibilities
Move A/B test code to AB.js
Consolidate the show/hide code spread across scrollObserver
and stickyHeader by adding a show and hide function.

This is needed to fix T296680

Change-Id: Ia2e0c50278df0dfc1600610f281be20f4cc755c2
2021-12-03 14:30:10 -07:00
jenkins-bot 23ac01428b Merge "Update search box margin in sticky header." 2021-12-02 22:37:36 +00:00
Clare Ming 37c9a24f75 Update scroll observer to allow event logging
- Permits logging for scroll events without sticky header.
- Update function name to be more precise.

Bug: T292586
Change-Id: I441b4bf81bc4a36a03f0f1c215d86b01dce2911d
2021-12-01 16:12:06 -07:00
Clare Ming f45cd69381 Update search box margin in sticky header.
Bug: T296318
Change-Id: Icc70723a79ca9b2632229226ef43a1d29d025d09
2021-12-01 22:52:30 +00:00
jdlrobson f0ed70d709 Restores language button icon font size
The font size of icons should never be changed. Since it's also a span

Bug: T296212
Change-Id: I8bf4e9a7d43a9e5206d3ff6d89e2c3f74fa0d25a
2021-12-01 01:08:49 +00:00
jenkins-bot 8c19f565d1 Merge "Update style for page title in sticky header" 2021-11-29 23:11:58 +00:00
Clare Ming d8eff021e1 Update sticky header height.
Bug: T296321
Change-Id: Ic8efa9404282a98aee37dcf9ba33a0b26d6abaff
2021-11-24 14:20:31 -07:00
Clare Ming 101c438c02 Update style for page title in sticky header
Bug: T296320
Change-Id: I0deabfb598e92f07296824c94a9c7c81daefe486
2021-11-24 13:59:16 -07:00
bwang 54639c4af3 Fix icon button spacing, make it consistent with margin defined in core
Since a margin was added to adjacent sibling spans of icons (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/736919), Vector icon buttons have had too much spacing. This patch removes the extra spacing defined in Vector CSS and the accidental whitespace that was included in the ULS buttons..

Change-Id: I308d1941c5f82cb144c2a9d233fbf44c730413a7
2021-11-18 18:55:00 +00:00
jenkins-bot 611af67401 Merge "Revert "Fix font size in editor preview"" 2021-11-15 20:11:19 +00: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
jenkins-bot 4982868628 Merge "search: Prepare for Vue 3 migration" 2021-11-13 00:09:18 +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
bwang b196d68326 Use searchFooterText slot in typeahead search component
- Create new 'vector-searchsuggest-containing' translation for WVUI search footer text
- Use 'search-footer-text' slot in WVUI typeahead search
- Remove instances of old 'footerSearchText' prop

Bug: T290392
Depends-on: I8fb7761e60be330e58cd017872318fe3675c0be1
Change-Id: I9c946f85c3e4a603c362c3ea4b8016c585cdd212
2021-11-12 10:47:55 -06: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 e95e48ce51 Merge "Add scroll event + init A/B test logging to sticky header, AB js" 2021-11-09 23:26:17 +00:00
Clare Ming 457dcfc472 Add scroll event + init A/B test logging to sticky header, AB js
- Pull IntersectionObserver into new file to share observer with different callbacks:
  - Wrap show/hide functionality of sticky header in conditionals based on user test group or by default.
  - Fire hooks for scroll event tracking in WME.
- Add new js for A/B test functions and variables:
  - Fire hook to send data for A/B test initialization.
- Update main js to include scrollObserver, A/B test init functionality.
- Add A/B test config.
- Update ResourceLoader package dependencies for sticky header.
- Though not a strict dependency, see I42e3e7c2084c1e88363d5d1662630ed23a28c4d2 in WME repo which uses these hooks to log scroll events.
- This patch includes changes from I56f40e706f8706fde1c0891a0561dd32c5e02bfc which were consolidated here for simplicity and ease of review - related to T292587 which calls for logging an init event for bucketing of users during A/B testing.

Bug: T292586
Change-Id: If6446e1e84cea3649905808c4f0e9f6862255fa3
2021-11-09 15:00:25 -07: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
Roan Kattouw 5dee570cb2 search: Prepare for Vue 3 migration
Port the initialization code for the Vue search to use Vue.createMwApp()
instead of new Vue( ... ). The former mimicks Vue 3's API for mounting
components.

Without this change, this code breaks in Vue 3 (even in compatibility
mode) because the compat support for new Vue(...) is imperfect. By the
time renderFn is called, the searchForm container has already been
emptied by Vue's internal mounting code.

Instead, inspect searchForm and generate the prop list before mounting,
then pass the props to createMwApp() and mount the component.

Bug: T294476
Depends-On: I1fcdcf7bf87f5af2deb9763a231f2c360ea45b23
Change-Id: I5b6e66051d97e75f8f03b8258894daba22525797
2021-11-05 15:53:34 -07:00
jenkins-bot 04ff34bd0c Merge "Initialize the skins.vector.es6 module before the skins.vector.js module" 2021-11-04 18:11:29 +00:00
Nicholas Ray c741759cab Initialize the skins.vector.es6 module before the skins.vector.js module
stickyHeader.js, a file in the "skins.vector.es6" module, clones the
user menu. Because of this, it must initialize before dropdownMenu.js, a
file in the "skins.vector.js" module, in order for dropdownMenu.js to
bind the correct checkboxHack event listeners to the user menu in the
sticky header.

Therefore, change the es6 module to export its main method. The
skins.vector.js module can then use mw.loader.using to ensure the
skins.vector.es6 module initialization happens first in browsers that
support es6. Browsers that don't support es6 will continue to initialize
the skins.vector.js module.

Bug: T291096
Change-Id: I1bb6f2da9703ed2679eacfdb42b9818efe614ab9
2021-11-03 11:03:18 -06:00
Nicholas Ray 7f58c88934 Add comment to dropdownMenus.js regarding the CHECKBOX_HACK_BUTTON_SELECTOR
Per request [1], a clarifying comment was added explaining that our
checkbox hack implementation has drifted from the core's recommendation.

[1] https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/732732/2/resources/skins.vector.js/dropdownMenus.js#7

Bug: T291096
Change-Id: I3a5bc9d463bace11185affbb21320d86fc1c5d99
2021-11-02 17:58:52 -06:00
jdlrobson 768a07ec6c Add sticky header edit feature flag
Can be disabled via &vectorstickyheaderedit=0 or configuration
change.

This will allow us to fine tune the edit features without blocking
deploying the existing feature.

Bug: T294383
Change-Id: Ic282ea4f2ff0108eeaa154c8a77e4e5fd30daeae
2021-10-26 21:59:29 +00:00
jenkins-bot 34d77d5e41 Merge "Sticky header edit icons trigger via JavaScript" 2021-10-26 17:32:50 +00:00
Clare Ming 741d59df06 Fix title getting cut off in sticky header.
- Add padding to title class selector.

Bug: T289814
Change-Id: Iab167414d10ce256be8e966f115ae164c1bd3331
2021-10-25 20:51:43 -06:00
jdlrobson 0663087dd5 Sticky header edit icons trigger via JavaScript
Current expected behaviour: the editor experience will
load and the user will be thrown to the top of the page.

Bug: T293158
Change-Id: I3585616c2244a6b91ef5f160beb1cf51af3599aa
2021-10-25 22:35:13 +00:00
Fomafix 574bbfd549 Combine return paths in getLanguagesCached
Also use single quotes instead of double quotes and fix typos.

Change-Id: Ibfd855f55f38ea824d38ad858b654d8229838cd1
2021-10-23 12:55:37 +00:00
jdlrobson ca0401789d ES6-ify sticky header code
- Can now use const/let
- No need for feature detection for things like fetch and closest
as we can assume they exist if ES6 support is available

Change-Id: I85b01add13fd74e1514119498815403e42a09af0
2021-10-21 23:44:30 +00:00
jdlrobson b8122cc40b Separate code from ES6 browsers from ES5 code
This will allow us to write ES6 code for the new features which
is limited to those browsers.

For browsers that do not support ES6, the code will not execute
because of the "es6" flag. Doing this will help us avoid issues
like T293402

Change-Id: Iffb7098cb22395e33b87352fb4f08516f6f25e6f
2021-10-21 15:55:04 -07:00
jenkins-bot 62347f0a74 Merge "Make dropdown menus toggle with enter key" 2021-10-21 20:22:41 +00:00
Nicholas Ray 876d3ddf39 Make dropdown menus toggle with enter key
Bug: T291096
Change-Id: Ia5d1a33aa04dab09f1454ade4816fdb9d48f1eca
2021-10-21 09:59:58 -06:00
jdlrobson c16fa80006 Sticky header: Add user page link to user menu in sticky header
Bug: T292557
Change-Id: Ia72c214ef6384dfeae21556aa4007eb6075f0057
2021-10-21 15:15:51 +00:00
jdlrobson ae28c427d6 Vector should be notified by addPortletLink to collapsible where needed
Bug: T139830
Change-Id: Ibf17a3df7f9409a02f1a316d5da16b32fabcc5a2
2021-10-19 23:24:28 +00:00
jdlrobson 358d81ddce [a11y] Add title attributes to logout, talk and history and DRY up code.
* Addresses feedback in:
** T289816#7440605
** T283505#7440585
Change-Id: I98abdab8c3eb20567af527e6a8bf75faa5670d6b
2021-10-19 08:47:00 -07:00
bwang a1b523a9d5 Avoid calling forEach on searchbox NodeList for older browsers
Bug: T293402
Change-Id: Ic2d10ca9c664c284fc9b5433b5ff1cc32d98c960
2021-10-18 17:56:05 +00:00
jenkins-bot 041496585b Merge "Revert "Use searchFooterText slot in typeahead search component"" 2021-10-13 15:01:39 +00:00
Bernard Wang 7575cf97a5 Revert "Use searchFooterText slot in typeahead search component"
This reverts commit b7728ddda5.

Reason for revert: Depends on WVUI release

Change-Id: If97551a8609433b569fbc88800a7bf9ffc137587
2021-10-13 14:34:08 +00:00
jenkins-bot 529ccd1a86 Merge "Use searchFooterText slot in typeahead search component" 2021-10-12 21:34:45 +00:00
bwang b7728ddda5 Use searchFooterText slot in typeahead search component
- Create new 'vector-searchsuggest-containing' translation for WVUI search footer text
- Use 'search-footer-text' slot in WVUI typeahead search
- Remove instances of old 'footerSearchText' prop

Bug: T290392
Depends-on: Ic92721d5aaf6b833c882a26e9a60b42ab91546fa
Change-Id: I34a184cc8f10172a7ebf67981731c3694d008446
2021-10-06 11:37:26 -05:00
jenkins-bot 06475e55e7 Merge "Remove @min-width-logo, @margin-top-sidebar variables from screen.less" 2021-10-05 23:59:41 +00:00
jenkins-bot 29b35c25ac Merge "Add edit icons to sticky header" 2021-10-05 23:49:35 +00:00
Clare Ming 67e7eab714 Add edit icons to sticky header
- Add edit icons.
- Update data passed to sticky header, button templates.
- Show/hide edit icons client-side based on ids in fixed header.
- Disable sticky header when in Visual Editor mode.
- Use Visual Editor hooks to toggle IntersectionObserver.
- Remove extraneous js for setting offsets for other sticky elements (simplify by moving known sticky element th to css - follow up to https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/722475/comment/7b8ab2db_cd5c7e78/).

Bug: T289723
Change-Id: Ifbab2f1c4d716f8fc261e3d7fa35fc71c6065ec5
2021-10-05 23:31:19 +00:00
Nicholas Ray 87b565a5f0 Remove @min-width-logo, @margin-top-sidebar variables from screen.less
AFAICT these variables are unused.

Change-Id: I675de18cf4b2bb0b7aa913d4ad5801ca0e7eb155
2021-10-05 16:53:52 -06:00
jenkins-bot a2a6aabb6c Merge "Address cache related FIXMEs" 2021-10-05 22:20:12 +00: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