Commit graph

1181 commits

Author SHA1 Message Date
Volker E fdeb3187d9 styles: Update opacity values to align with Codex design system
Also replacing `opacity-base--disabled` with updated token key
`opacity-icon-base--disabled`.

Depends-On: I68a39002314b9c5a185ffa2856076922bfeab638
Change-Id: I0e28579c92df9880b98cfeb4d4b5c3b8b085965e
2023-03-07 13:42:46 -08:00
Ed Sanders 2f9cf813fe Fix selector for add topic button
Bug: T267444
Change-Id: Icd75f16c794f6f990a194fd57f99490934ded9de
2023-03-06 22:50:11 +00:00
Jon Robson 07c12c14fc Register sticky header dropdown as icon capable
Needed by the language team.

Bug: T327369
Change-Id: I9e9022d27a308974f27ea31008fea1adf7c46624
2023-03-03 17:09:41 +00:00
bwang a274c9bcde Add threshold to TOC section observer
- Also renames 'header' to 'stickyHeaderElement' to be more clear

Bug: T317661
Change-Id: Iad519036d4622ff28115abb7de544f69fe8eb597
2023-03-01 16:26:42 -06:00
jenkins-bot 5f6932c605 Merge "Increase scroll-padding-top for page sections" 2023-03-01 19:46:33 +00:00
jenkins-bot 16e9c8c40d Merge "Remove TableOfContents mustache template and mark layout rules" 2023-03-01 17:10:02 +00:00
ksarabia 74addde337 [WIP] Removes the TOC class in body and adds in html
Adds new constants for TOC and registers feature.

Bug: T325032
Change-Id: I5e0f5f3a6d186b245bdbc98c2bb9e4cc17a03fdb
2023-02-28 17:21:16 -06:00
Jan Drewniak cfc454f615 Increase scroll-padding-top for page sections
This introduces a general scroll-padding-top value of 50px
for Vector 2022's HTML element.

This changes makes it so that when navigating sections via the
TOC, the section headings are 50px lower on the screen.

This change has been synced with the ToC active sections as well,
so that active sections become active at the same offset.

Bug: T314419
Change-Id: I99e5fe2047f5ad1e61ef51b6ba7e76a6cac36fc5
2023-02-28 14:48:31 -05:00
Jon Robson d4903b8e57 Remove TableOfContents mustache template and mark layout rules
Follow up to I3484a790ce8ebadf21054ac1d222d5632b2dc5a4

__Template__

The template is not particularly useful - it is only ever
used once in this context and features a static ID which means
it can never be reused. It is also tied to the #vector-toc-collapsed-checkbox
element. In current form it doesn't make sense to have this template.

Maybe in future, I could see an argument for a PinnableTableOfContents component
that wrapped the checkbox and nav element, and generalized the IDs but
currently there's no pressing need or value for that.

__Layouts__

The existing Pinned and Unpinned stylesheets are concerned with how the table
of contents is layed out holistically with regards to other components and
features enabled on the page. I think these should therefore be organized as such.
The way I reason with this, is these styles would be irrelevant in a component
library if the component was rendered in isolation.

Bug: T328719
Change-Id: I9ff0e0eeb35f215a8cae5950d08dc1277b662a71
2023-02-28 00:27:31 +00:00
jenkins-bot 605a63a998 Merge "Vector: Break long bare external links" 2023-02-27 23:25:05 +00:00
Derk-Jan Hartman e7a8d0f469 Vector: Break long bare external links
Break bare external links, which potentially would cause the
viewport or width restricted content to overflow.

Bug: T327334
Change-Id: Ia83e2cde7646670de0a1b09ba9457e1cfc47ce0f
2023-02-27 23:06:53 +00:00
jenkins-bot 53ea14904d Merge "2010: IP masked user icon should differ" 2023-02-26 23:58:50 +00:00
jenkins-bot eaf0e2d57e Merge "Table of contents: FIXME cleanup" 2023-02-24 20:55:28 +00:00
Jon Robson 28e5d9acb1 2010: IP masked user icon should differ
Per figma mock [1] the icon should be different for IP
masked users. Icon and text should also be gray.

[1] https://www.figma.com/file/xECM2hD7vEemP91M9YAQBC/IP-Masking?node-id=11%3A4681&t=iaM6G4xvjrBvkjlh-0

Bug: T328725
Change-Id: Ia8a06c3fd0bffb70e0dd0c26bcabbf02ab176994
2023-02-24 09:04:25 -08:00
Ed Sanders d90d1d17b1 Promote "Add topic" button to PageTitlebar
Bug: T267444
Change-Id: I813908d65640566a61eac51d6f55a3b4d3e9537d
2023-02-24 01:33:47 +00:00
Jon Robson c06c547b02 Table of contents: FIXME cleanup
Follow up to Ib42d532d4e900c01061e1c5e39c03b17f0619c46

Hoist hook binding into main.js and update tests

main.js now only tests hook wire up.
tableOfContents calls reloadTableOfContents directly.

Bug: T316025
Change-Id: Ia06feab7cfb47a64ac3519bd7bd0428dc661045a
2023-02-24 01:16:20 +00:00
jenkins-bot e40caf0c85 Merge "SectionObserver should be updated at certain points in MediaWiki lifecycle" 2023-02-23 20:16:28 +00:00
jenkins-bot af2c9c61c6 Merge "Revert "Only apply vertical margin to #siteNotice content when non-empty"" 2023-02-23 19:57:05 +00:00
Bernard Wang 41bd9569cf Revert "Only apply vertical margin to #siteNotice content when non-empty"
This reverts commit ff8a5bc034.

Reason for revert: T325219 is expected

Change-Id: Id153bcd5d365263dfa84e7c2e45d69d1c72fabdd
2023-02-23 19:32:54 +00:00
jenkins-bot 87e8137ba3 Merge "Update naming convention for TOC" 2023-02-23 17:39:43 +00:00
ksarabia e057a46d45 Update naming convention for TOC
Deploys vector-feature-toc-pinned-enabled/vector-toc-pinned-disabled additions to CSS.

Bug: T325032
Change-Id: Ifa9a33ad686080a8b630ecead3fafed1eddd7e2b
2023-02-23 16:30:19 +00:00
Jon Robson 450a395f95 SectionObserver should be updated at certain points in MediaWiki lifecycle
* When wikipage.tableOfContents is executed, the table of contents has been
replaced so we should update the sections associated with the section
observer as the old sections no longer exist in theDOM.
* If VisualEditor repaints the page, we should update the elements associated
with the table of contents as the body-content element no longer exists in the page.
* When VisuaLEditor is active we should disable the intersection observer as
there is no table of contents to update.

Minor changes:
* Light refactor of large function in main.js
* reloadTableOfContents returns a promise and now fires a new hook
wikipage.tableOfContents.vector to signal when it is finished which
has also been requested by community members. This allows the code in main.js
to update elements at relevant point in time
* Add FIXME note (doing this would have been considerable work)
* I've added a call to mw.log.warn which would have saved me considerable
debugging time for this issue to diagnose the issue.

Bug: T316037
Bug: T316025
Change-Id: Ib42d532d4e900c01061e1c5e39c03b17f0619c46
2023-02-23 01:39:46 +00:00
bwang d74abe5dd6 Clean up user links cached HTML code
Bug: T289212
Follow-up: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
Change-Id: I139750136b3b83ecfd87c2998aa0769f57d92aff
2023-02-22 23:30:26 +00:00
jenkins-bot 4c8f7a5652 Merge "Revert "Updates for core temp user autocreation feature"" 2023-02-22 22:41:02 +00:00
jenkins-bot 4cba003a6d Merge "Only apply vertical margin to #siteNotice content when non-empty" 2023-02-22 22:13:00 +00:00
Ed Sanders ff8a5bc034 Only apply vertical margin to #siteNotice content when non-empty
Bug: T325219
Change-Id: I7fd7600172e72707d1d8065ed2be235841a401be
2023-02-22 20:42:02 +00:00
bwang c72cacec71 Cleanup: Remove unused TOC scroll hooks code
Previously for the table of contents A/B test we triggered
scroll events when the table of contents was scrolled into
view. Now this is never referenced, so the code is cleaned
up to only apply to when the title is scrolled into view.

Change-Id: Ie9a5c4b6d88068d914cbbcc3d046ac288d49172b
2023-02-22 16:00:33 +00:00
jenkins-bot 0995b865d4 Merge "search: Undo v-i18n-html workaround" 2023-02-21 23:15:35 +00:00
jenkins-bot 874883536b Merge "Fix dropdown icon markup to match Codex button" 2023-02-21 22:52:20 +00:00
Moh'd Khier Abualruz efe33d5d76 Ensure ToC is always accessible via landmark region (<nav>)
- We had to add nav element to wrap TOC in all places
- Make sure proper nav is only displayed so landmark do not get confused
- Remove Eslint block on rules compat/compat for no support IE 11, this was blocking commit
- Run lint:fix:js and lint:fix:styles
- Fix maxSize in bundlesize.config.json

Bug: T324505
Change-Id: I36d26240b87de33318ff1edf97a410872a438103
2023-02-21 22:19:52 +01:00
bwang 8db112ddb3 Fix dropdown icon markup to match Codex button
- Fixes TOC button being transparent (https://jmp.sh/jbuivqlM). FYI the fixed width toggle button has the same issue.
- Add replace `html-vector-heading-icon` with Icon.mustache

Bug: T320453
Depends-on: I9a990ea8de63fb336391bea11b4503d447fb9d4f
Change-Id: I39397f8e98f79a2fdde9a8d785690133ea5a2619
2023-02-21 12:41:44 -06:00
Jon Robson f2fb827630 Revert "Updates for core temp user autocreation feature"
This reverts commit 8d0659b1e6.
The logic for temporary users is now centralized inside
MediaWiki core, so Vector has no need to check whether a user
is temporary and instead work with the data it's given.

Depends-On: I36815aaef81ec7368e240a780e90bd574785df74
Bug: T328725
Change-Id: Ie30dd6a77ef391f74a435e0b9df74793ffdf73bb
2023-02-21 11:30:27 -06:00
bwang ea1a0b0778 Shows TOC below page title for anon users
- Removes 'mw-ui-quiet' class from the TOC button when below the page title, meaning the TOC is just using default button styles. However, these styles are still not to spec due to button/icon tech debt (https://jmp.sh/jbuivqlM). The styles are fixed in the following patch
- DRY up TOC CSS
- Fix no-js collapsed TOC styles

Results in 4 expected visual changes. Note, the button styles are still incorrect and will be fixed in the next patch
https://jmp.sh/nHujNdVK

Bug: T315932
Bug: T320453
Depends-on: I490eb6244a35f18149844a87297c5f1ccc5b7df9
Change-Id: Id11805029b78847734d15041d31c2538412cf20a
2023-02-21 10:41:44 -06:00
Bartosz Dziewoński f0fdd8b6da Disallow scroll anchoring in navigation grid columns
To improve user experience when using gadgets and extensions that
cause layout shifts after page load, we want the anchor node selection
algorithm to only pick nodes in the content column or spanning full
width of the page.

Bug: T330108
Change-Id: Id996f766a535a487fb6bafe6a06a98d1a60ac8e3
2023-02-21 03:48:40 +01:00
Jon Robson 5c39353d6d [Refactor] Split out table of contents code
Large diff mostly to
hoist setupTableOfContents above main where it is used
(originally part of Id11805029b78847734d15041d31c2538412cf20a)

Change-Id: Icc41a86546ebc90ae35989ccd4dbb38b214efbb8
2023-02-18 00:36:23 +00:00
Jan Drewniak e4af2b5df3 Prevent addPortletLinkHandler from looping over links twice
- Prevents the addPortletLinkHandler function from looping
over the same links multiple times by indexing
the HTMLElement instead of just the ID, which is an
optional parameter.
- Conditionally adds the icon class if the ID parameter
exists.
- Refactors the function to calculate the width of the
vector toolbar.
- Adds Jest tests to account for the dual icon scenario
and updates existing Jest tests.

Bug: T327369
Change-Id: I2a0934405efebd0e95919bc523d711866236a7e6
2023-02-16 20:05:54 +00:00
bwang fca03c873b Update user links dropdown id
- Update naming convention to use dropdown instead of menu

Follow-up: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
Change-Id: Ie51f7fc280eeef8470613c07850dad83e4435ee8
2023-02-16 11:21:56 -06:00
jenkins-bot 21932c9800 Merge "Work around browser inconsistencies with 'clear' + 'margin-top'" 2023-02-14 19:43:38 +00:00
Nicholas Ray 0440eeada4 Make space between top of TOC/Page tools and top of viewport/bottom of sticky header 30px
Per T318169#8601576, the space between the top of the TOC and Page tools to the
top of the viewport or bottom of the sticky header should be 30px.

* Revises the page tools columnEnd grid to begin at the top of the titlebar to
enable 30px of top padding on the page tools

* Consolidates some styles in TableOfContentsPinned.less

VISUAL CHANGE: table of contents moves down page.

Bug: T318169
Bug: T319315
Change-Id: If8d8f87942d6265461b1a1a8ccf1c447d6e8b0d6
2023-02-10 19:43:05 +00:00
bwang 9e4bdd00bf Remove custom handling of user links menu items and handle case when anon editor links are disabled
Rather than try to build individually build login, logout, and create account menu items, we handle them the same as all other user links menu items in Hooks.php. While Hooks isnt ideal, there currently isnt a good path for moving that code to SkinComponents until core provides menu data. In the meantime, this patch reduces code complexity and prevents bugs like T324638.
This approach also allows us to move user links logic from SkinVector22 to VectorComponentUserLinks.php, and ensures the user links dropdown contains multiple menus, which allows us to reuse styles from page tools dropdowns.

Expected 11 visual changes:
* minor visual change where the user links dropdown has an
additional 4px vertical padding.
This padding was originally added to the page tools dropdowns
per Alex's request, but Alex also said that dropdowns should share
the same spacing. This change makes the styles all consistent
* Order of talk and contribution links have been swapped

Bug: T289212
Bug: T319356
Bug: T328954
Change-Id: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
2023-02-09 13:37:17 -06:00
bwang f415a556dd Additional FIXME cleanup relating to moving feature classes from body
Additional follow up to Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
(55bb37f2a)

Change-Id: Id98161572a09b1d3fc340d75bd8e28b277d68e30
2023-02-08 10:49:13 -06:00
jenkins-bot ef77ee37de Merge "Moving padding-bottom to mixin-vector-scroll-indicator" 2023-02-08 00:00:23 +00:00
Nicholas Ray 0243a0125b Moving padding-bottom to mixin-vector-scroll-indicator
Follow-up to 886437, which suggested moving the bottom padding of the scroll
indicator's parent to the `mixin-vector-scroll-indicator-mixin`. This makes
sense because if the correct amount of bottom padding isn't applied, the scroll
indicator could overlap the text when scrolled all the way to the bottom.

Bug: T318169
Change-Id: I94f98ae75f9b80484114a2413caf2cb0c237e8ba
2023-02-07 16:33:44 -07:00
jenkins-bot efc2b5f337 Merge "Make page tools sticky" 2023-02-07 20:11:33 +00:00
Nicholas Ray ffda1975e3 Make page tools sticky
* Adds sticky behavior to pinned page tools

* Moves scroll indicator styles into a mixin shared by TOC and page tools

* Replaces the 10px magic number in the TOC used to calculate the bottom padding with the
@padding-vertical-dropdown-menu variable.

* Increases the pinned TOC max-height per T319315

* Corrects spacing between bottom of sticky header and top of TOC after discussion with designer

* Causes 43 visual changes in Pixel that include intentional changes and subpixel
rendering changes associated with the `contain: paint` rule.

Bug: T318169
Bug: T319315
Change-Id: Ica0c4e0de1825d37d8136b589a9bf5decc96855e
2023-02-07 12:49:48 -07:00
jenkins-bot 137a8fb6be Merge "Languages should be in HTML at top whenever languages are added to page" 2023-02-06 23:52:36 +00:00
jenkins-bot 08068337b3 Merge "Sticky header logout goes via API avoiding a second click" 2023-02-06 23:02:44 +00:00
Jon Robson d16d7e80d9 Sticky header logout goes via API avoiding a second click
Bug: T324638
Change-Id: I59a192863706f1d2a09ec59090c0b099ced8cde0
2023-02-06 21:40:30 +00:00
Jon Robson dcec7a3f1d Languages should be in HTML at top whenever languages are added to page
Use CSS to decide whether to show the button or not. This retains the
existing logic for hiding the button on any page where the action is not
view.

Bug: T327795
Change-Id: If74246418f87c871c01cb7b2b62f6c59263bf976
2023-02-06 17:34:00 +00:00
Roan Kattouw d5e9a75095 search: Adjust SearchBoxLoader for border-box change in Codex
The TypeaheadSearch component in Codex switched from using content-box
to border-box for the dimensions of its menu items, reducing their
height by 2px (because of the top and bottom border). Update the
height calculation for the loading indicator accordingly.

Bug: T322383
Change-Id: I5367e402fa8ac9891358bb2f7ba87584b2835a9a
2023-02-05 21:15:34 +00:00