Commit graph

376 commits

Author SHA1 Message Date
Ed Sanders d90d1d17b1 Promote "Add topic" button to PageTitlebar
Bug: T267444
Change-Id: I813908d65640566a61eac51d6f55a3b4d3e9537d
2023-02-24 01:33:47 +00:00
jenkins-bot ebee74c578 Merge "Rename IconLink to Link" 2023-02-22 22:45:17 +00:00
jenkins-bot 4c8f7a5652 Merge "Revert "Updates for core temp user autocreation feature"" 2023-02-22 22:41:02 +00:00
bwang 0e5ef398b2 Rename IconLink to Link
Now that there is a Link.mustache, I think other components like Button, Link should use the Icon template, and not include icon in the name, as its possible to have a link or button that doesnt use an icon as well.

Change-Id: I6d8a17dd956f09bb3df7a2503f55d255599874f8
2023-02-22 22:00:24 +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 159d298aaa Reduce verbosity of menu dropdown with aria-hidden
Bug: T325026
Change-Id: I9cd919b083dcbd0ca417cde3488968be9e2c503e
2023-02-16 15:21:53 -06: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 fcc3d3c9a9 Rename data-user-menu prefix to data-user-links, matching the template and component naming convention, create UserLinksDropdown.mustache
Change-Id: I6f0de836e39ba6bdcd5a8ff832e951164d69e586
2023-02-06 13:01:01 -06:00
jenkins-bot 57c8e24b35 Merge "Remove VectorComponentTableOfContentsContainer in favor of directly using VectorComponentPinnableContainer," 2023-01-25 19:38:20 +00:00
jenkins-bot 1d1c4e8e2b Merge "Update displaying DiscussionTools TOC additions after parser changes" 2023-01-19 21:37:07 +00:00
Ed Sanders 7323d6af4e Use tabs consistently in .mustache files
Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69
2023-01-17 11:48:34 +00:00
bwang 128a01bd35 [Clean up] Remove CSS and HTML from cached TOC html
Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da
Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-16 17:21:12 -06:00
bwang 0032b7b970 Remove VectorComponentTableOfContentsContainer in favor of directly using VectorComponentPinnableContainer,
- Remove all TOC components from markup when TOC isnt available
- Ensure TOC components have a consistent naming convention

Follow-up: Icd871e1bdf4ab0c7aa5b906b913416f4b1747750
Change-Id: I63519b5e5392b9eb546876e7eea060b9a6c147dc
2023-01-16 17:20:03 -06:00
Bartosz Dziewoński d2e34ce079 Update displaying DiscussionTools TOC additions after parser changes
Depends-On: Id59b946f4a3618a75dfaaef8a0043423b768b21c
Bug: T326677
Change-Id: I0f49c9c92d30fbfeefb547ba13312f740d7f5b2d
2023-01-16 19:07:17 +00:00
Moh'd Khier Abualruz 29a2254b9a Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element
Extra:
- Reactivated active list element, This still does not work if the current active gets edited.
- Removed pinning event reattach as we do not replace teh full element anymore.

Known Issues:
 - Collapse/Expand not working

Bug: T326839
Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 12:39:05 +01:00
bwang 787b065f99 [Clean up] Remove unnecessary container and CSS in sticky header
Change-Id: I7a1f75e8997ea6c87955f72c971f6d1d08e6ab22
2023-01-13 20:11:21 +00:00
Jon Robson 0c0ce631ee Components: Model table of contents in title bar.
Bug: T320927
Change-Id: Icd871e1bdf4ab0c7aa5b906b913416f4b1747750
2023-01-11 15:42:23 -08:00
Jon Robson bfeb729f84 Component: VariantsMenu
Bug: T319355
Change-Id: I10a8e796f6f6744fcc79ff6b1eb8f1d42389acba
2023-01-11 23:05:41 +00:00
Jon Robson e153561255 Component: UserLinks
Simplify the user links component
Introduce MenuListItem and IconLink components.

HTML changes:
* Logout, login and account links are now wrapped in a ul and li tag
instead of a DIV for consistent with other menus (this occurs due
to use of MenuContents). Code reviewer can see tests
for an understanding of how the template data and markup has changed.

VISUAL CHANGE:
* Increased margins in user links menu relating to change from DIV to
UL / LI tags.

Bug: T320927
Change-Id: Ia24be48105e1ff85da227883abb5dddb3d54388d
2023-01-11 21:48:11 +00:00
jenkins-bot 09ede0dc9f Merge "Update language dropdown for pages not supported in other languages" 2023-01-09 05:02:55 +00:00
NikG d39b5c958a Update language dropdown for pages not supported in other languages
Pages that are not supported in other languages should not display the
ULS when the language button is clicked. Instead, a simple message
explaining that the page contents are supported in other languages
should be displayed inside the dropdown. Additionally, the language
button should be modified for these non-content pages, to non include
any label and be quiet instead of progressive.

This patch implements these specifications by appropriately modifying
the mustache templates and the underlying skin classes.

Bug: T316559
Change-Id: I37d8e61a1287b31d1a304d2a955f532b9b8fa505
2023-01-06 16:40:36 +00:00
jenkins-bot bd2f9b6ca6 Merge "Log events for pinnable header button" 2023-01-06 15:53:54 +00:00
Jon Robson a43d522331 Fix language button fallback
* Don't hide language button
This code can be removed now  T287206 is resolved.
Also simplify legacy logic - as the language menu
is always a portlet there.

Additional changes:
* Create LanguageButtonDropdown component to distinguish
this code from the LanguageButton in the sticky header.
* Fixes a style in LanguageButtonDropdown.less which wasn't
accounting for multiple vector-menu-content classes

Bug: T320927
Bug: T325017
Change-Id: Ic331684c384c5d57b60b098f23485e44fb75fb8f
2023-01-06 00:45:31 +00:00
Jon Robson b27e4d0656 Log events for pinnable header button
Bug: T324878
Change-Id: I3174fc7f90b106c32ae4eb1fb42d089e01967220
2023-01-05 12:15:03 -08:00
jenkins-bot 87794f6b0d Merge "Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC" 2023-01-05 00:35:57 +00:00
bwang 8e4da83908 Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway
Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector.
"sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term

Bug: T324877
Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2023-01-04 17:48:03 -06:00
jenkins-bot 18ff4cdced Merge "Update dropdown and pinnable element styles to match spec" 2023-01-04 20:34:02 +00:00
bwang fe105edcdb Update dropdown and pinnable element styles to match spec
- Generalize spacing for pinnable header and menu items under PinnableHeader.less and PinnableElement.less
- Impacts main menu, page tools & personal tools

Bug: T324877
Change-Id: I4042e5c1957d64797f21146f687ef960721299ce
2023-01-04 11:24:55 -05:00
Jon Robson 3dbadabdfe Document the importance of vector-menu class
It's used by click tracking so marking with inline comment that
we need to be careful if we plan to remove it in our current
refactoring.

Change-Id: I6aee01363d2d150844e61fb27ab584c8ee78c4ae
2023-01-03 14:45:40 -08:00
bwang 7f2118e756 Update header spacing to match spec
Bug: T324877
Change-Id: I47be192f5ba726904dc225afd54ee9112e97dc10
2022-12-20 17:58:54 -06:00
bwang a348db9969 Add generic classes to pinnable container
Bug: T324877
Change-Id: Iab94f9f600f8e6d032ad70d6b8e502686977441c
2022-12-20 17:22:11 -06:00
bwang 6c817e932f Use features.js for main menu pinning functionality
- Register new feature for main menu pinned
- Update UserPreferenceRequirement to optionally handle default config values
- Add nav landmarks for the main menu

Bug: T317900
Change-Id: I8fc6e0a79a1155d68afb9e33e5101a2a160dc4e5
2022-12-16 12:56:54 -06:00
bwang 46f17487fd Update main menu templates and classes to be consistent with other pinnable elements
- Rename data-portlets-main-menu to data-main-menu
- Rename MainMenuContents.mustache to MainMenu
- Replace usage of .vector-main-menu-contents in favor of .vector-main-menu
- Add classes to PinnableContainer
- Use PinnableContainer and PinnableElement in main menu
- Remove MainMenuDropdown.less

Bug: T317900
Change-Id: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
2022-12-16 17:34:23 +00:00
bwang 9abdaf54c3 Remove -pinnable-element postfix from PinnableElement.mustache
This allows '.vector-main-menu' to correspond to MainMenu.mustache, and 'vector-page-tools' with PageTools.mustache

Bug: T317900
Change-Id: I65c0d7cffbdf1cf9e59cde0c0fc4dca788e799de
2022-12-15 22:46:51 +00:00
jenkins-bot 9463861054 Merge "Refactor page tools, main menu, and TOC components" 2022-12-15 22:44:05 +00:00
bwang 97de09dcba Refactor page tools, main menu, and TOC components
- getTocData is moved into VectorComponentTableOfContents and it's test file
The following changes were made to the main menu, toc and page tools PHP components
- Avoid passing in $skin to the constructor
- Handle isPinned logic inside the component
- Add a public ID constant to the components
- Dropdown data for each feature use the same naming convention

Bug: T317900
Change-Id: I77a617a6c1d93bccd3b6e59353299f5534624e53
2022-12-15 14:23:25 -08:00
bwang f006e00677 Clean up cached .vector-menu-portal code
Follow up to I884cd33938b2670bddc90f698d8f61f37c6c29d4

Change-Id: Icd329aa4a43aa738b0127f7147b5401e07d90c05
2022-12-15 14:30:58 -06:00
Jon Robson c10ef66e6e Refactor: PageTools composes several different components
* Introduce Dropdownmenu, PinnableElement and PinnedContainer components

Additional changes:
* Drops unused has-multiple-menus
* Update TableOfContents to use PinnedContainer and PinnableElement

Bug: T317900
Change-Id: I0a740f8543831e266f2b1b874b40e44c8241d4cb
2022-12-12 22:17:24 +00:00
Jon Robson a786cfe09b Templates: Reorganize pinned containers
The UnpinnedContainer and PinnedContainer are versions of the
same component but with different states. Recognize them by
organizing them in the same subfolder. Update all existing usages.

Bug: T317900
Change-Id: I2c25937190997764fa23e0b581be5538ba4d06de
2022-12-09 16:56:06 -08:00
Nicholas Ray 24055a6752 Set default pinnable state for page tools
* Leverage the infrastructure around feature management to handle the page tools
pinning and persistence

* Make pinnableHeader.js leverage features.js if the data-feature-name attribute
is set

* Sets tests/.eslintrc.json ecmaVersion to 2018 to enable destructuring in test
files.

* Adds a isPinned helper method to pinnableElement

* Add a logged in requirement so that the pinned feature is disabled for
anon users.

Bug: T322051
Change-Id: Ib86282216882fa94e37b7088a3f4bd0c1bcf6cd4
2022-12-08 14:44:07 -07:00
Jon Robson a7f008b9bc Page tools: Main menu is a dropdown
This is an incomplete styling of the menu.

This should be enough to start an initial design
review and unblock other work on the dropdown.

Out of scope for this patch:
- Pinning (being done in T317900)
- Design (will be done in follow up)

This should cause no visual regressions in Pixel.

Bug: T317899
Change-Id: Id7b47cc16fc8cf93d406687198ba37acf7a9cf24
2022-12-07 23:19:29 +00:00
jenkins-bot 07197849b7 Merge "Remove PinnableHeader class" 2022-12-06 00:05:28 +00:00
bwang e1d1de809f Use JS to move the ToC into page title to fix a11y issues and simplify styles
- The collapsible ToC absolute positioning solution has been preserved to be used on no-js mobile resolutions
- The collapsible ToC grid based positioning solution has been removed
- ToC styles have been refactored and organzied

This patch involves HTML changes. In order to avoid additional complexity, this patch disables the collapsible ToC feature for users above the mobile viewport with cached HTML. The ToC continues to be automatically collapsed on mobile viewports for cached HTML users.

This patch results in 9 expected visual changes. In order to see them you need to take the following steps:
1. Run `./pixel.js reference`
2. Checkout the following PR in pixel https://github.com/wikimedia/pixel/pull/149
3. Run ./pixel.js test -c 859143
It should look like this: https://jmp.sh/ZVQqDZw7

Bug: T318013
Change-Id: Iea0d73005b91589c58ae38a3a640fa90c18a860d
2022-12-05 17:24:55 -06:00
Jon Robson 839d3d4756 Remove PinnableHeader class
Currently unused in template.
When used as a subcomponent, adds unnecessary classes
due to how Mustache cascades template properties.

Change-Id: I907e2e7af67e021461f9f831850db4b39b818586
2022-12-05 15:09:59 -08:00
jenkins-bot aa6963c7e7 Merge "Prepare data for Page Tools menu" 2022-12-05 21:52:35 +00:00
Moh'd Khier Abualruz 568cdf3d6d Prepare data for Page Tools menu
- Creates a new skin component called PageTools which
  is responsible for populating the new Page Tools menu.
- Removes the toolbox menu from the sidebar and places
  it in the Page Tools menu.

Bug: T318434
Change-Id: I9d552afab834193a4905d729eadecf71dda52cd2
2022-12-05 13:12:53 -08:00
jenkins-bot 73ad27babf Merge "[Refactor] Rename Portal component to MainMenuGroup" 2022-12-05 19:56:59 +00:00