Commit graph

91 commits

Author SHA1 Message Date
Moh'd Khier Abualruz fbfd887e80 Table of contents subsection toggle buttons missing label
- Reassign the edit sections array to tocData array

Bug: T328682
Change-Id: I5c0829f5361f0246fe9bc76688901b1cfb8d1486
2023-02-15 17:47:17 +01: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
Jan Drewniak 1bcd760ecf Add missing ID param to VectorComponentMenuListItem constructor
Bug: T324638
Change-Id: I6aa81f9f9166a23100da8920069235ecba4f7594
2023-01-26 22:08:04 +00:00
jenkins-bot 57c8e24b35 Merge "Remove VectorComponentTableOfContentsContainer in favor of directly using VectorComponentPinnableContainer," 2023-01-25 19:38:20 +00:00
Jon Robson 7b306db912 Personal tools accessibility label should not be "Foo"
Change-Id: I49eaae240c7df5f93570d4270bcd1c25403d8eb3
2023-01-19 08:37:41 -08: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
jenkins-bot 70ddd1f3f7 Merge "[Clean up] Remove unnecessary container and CSS in sticky header" 2023-01-13 20:57:24 +00:00
bwang 787b065f99 [Clean up] Remove unnecessary container and CSS in sticky header
Change-Id: I7a1f75e8997ea6c87955f72c971f6d1d08e6ab22
2023-01-13 20:11:21 +00:00
jenkins-bot 21996f5bc5 Merge "Table of contents elements should not be rendered where none available" 2023-01-13 18:15:31 +00:00
Func a874eb1096 LanguageDropdown: Check if the page is in talk namespaces instead
$wgContentNamespaces is default to only contain the main namespace,
we should check whether the page is a talk page instead.

Also use the term "subject page" to align with existing functions
of Title and NamespaceInfo.

Bug: T316559
Bug: T326788
Change-Id: I873283195d5c503818b2056c87c25ecc77d2915a
2023-01-13 14:44:49 +08:00
Jon Robson 853ed72cd6 Table of contents elements should not be rendered where none available
Follow up to  0c0ce631ee

Bug: T319355
Change-Id: I6b01a7dfef8f2cd124e090e25f63bd41579d9c08
2023-01-12 22:47:15 +00:00
Jon Robson 67cde518cd Use correct ID for table of contents in sticky header
Follow up to  0c0ce631ee

Bug: T319355
Change-Id: I525160e8041ba74c9aed94dd667a4aad53918032
2023-01-12 20:40:48 +00:00
Jon Robson eea5373940 Components: StickyHeader
complete the migration to components.

Changes:
* shouldHideLanguages only used inside SkinVector22 so abstract method
and legacy implementation removed.
* Move isLanguagesInContent method to SkinVector22, updating one usage
in SkinVectorLegacy which is always falsey (languages are always portals
in legacy Vector)
* Remove unused isLanguagesInContentAt method from SkinVectorLegacy
and move getLanguagesCached, isULSExtensionEnabled,
canHaveLanguages, isLanguagesInContentAt to SkinVector22
* runOnSkinTemplateNavigationHooks copied to both Vector skins
* isResponsive moved to Vector22. In Legacy Vector it has no
real use since legacy Vector has no responsive styles.
* SkinVector class now (empty), is removed.

Bug: T319355
Change-Id: Ib5df956cecb841b7c97264975d137af32e5da4ab
2023-01-12 00:32:35 +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
Jon Robson 5508712d33 Refactor: Remove unnecessary function getULSButtonData
Change-Id: I85aaf6087a04376ed0191395413d0ef1ba575a27
2023-01-09 22:52:17 +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
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
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
bwang 3ad3d70745 Rename VectorComponentPinnedContainer to VectorComponentPinnableContainer to match template files
Bug: T317900
Change-Id: I557fbef46fd1ea5984ded7f1a067cc43656e7076
2022-12-15 22:46:46 +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
Nicholas Ray a25dba2a19 Move toolbox and menus that follow into page tools
Uses all of the changes from Jon's patch in 866503 to move all of the sidebar
menus after and including the tools menu into the page tools component. The rest
of the menus remain in the main menu.

Additionally:

* Per T317898#8468437, the "Tools" label should be "General". It was also
assumed from the prototype that the "More" label should become "Actions"

Bug: T317898
Change-Id: Ic9c1586febd8ebfff4a17285e6bd59cee509bd34
2022-12-14 13:38:13 -07:00
Jon Robson 77aa8e0cbd Components: MainMenu and Pagetools use VectorComponentMenu
Bug: T317900
Change-Id: Ic91a638a3d90f5533dc624870bbefbff2950767d
2022-12-12 22:17:29 +00: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
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
Jon Robson bcb2a73ba1 Introduce UserLinks and LanguageButton components
Bug: T322089
Change-Id: I0bf504b2c9c129ef56c95c2370204ee20a41bd7a
2022-12-07 20:01:36 +00:00
Jon Robson dba4fa6265 Setup placeholder components to guide future development
As we build out these components further we should be encouraging using
the component system rather than the SkinVector function calls.
This allows us a way to gradually move code over as needed.

Bug: T322089
Change-Id: I7b38ae5b6fe2aa42759ae482e7647a26fcedfc38
2022-12-07 18:58:06 +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
Reedy 693bbfb182 Fix casing of class and function name usages
Bug: T253628
Change-Id: Ic737ea97cd11a7f76ab70845e7703852ed592220
2022-12-04 19:14:54 +00:00
bwang d150131561 Generalize Pinnable functionality to not be limited to dropdowns, make Pinnable templates composable
This patch involves cached HTML changes
- Replace '-content-container' id with '-unpinned-container'
- Replace '-content' id with '-pinnable-element'
- Rename pinnableHeader.js to pinnableElement.js
- Replace PinnableDropdownContents.mustache with PinnableElement/Open.mustache and Close
- Add PinnedContainer/Open & Close and UnpinnedContainer/Open & Close
- Rename .vector-dropdown-content to .vector-pinnable-element
- Add new PinnableElement.less stylesheet

Bug: T318013
Change-Id: I85aec387f87126a17e760fd9fd10e10572ff3152
2022-11-30 17:17:20 -06:00
Jon Robson 9c36435220 VectorComponentMainMenuAction: Have class to distinguish between different actions
It should be possible to style the language alert without impacting the opt in
action.

Bug: T317899
Change-Id: Ifea7d476099ab3a09da20522380664b9ad5eceb3
2022-11-28 20:15:16 +00:00
bwang 1b4376c946 Reintroduce h2 to Table of contents label
Depends-on: I752eadc9bf54d58c799060a9eaefa0b125dd7952

Bug: T320451
Change-Id: Ic4ca5490a9a33cb319821bbdaa57d29f0ed9c887
2022-11-17 19:26:44 +00:00
bwang 0f7411bdf2 Update TOC to use PinnableHeader
- Update 'collapsed' naming convention to 'pinned'
- Introduce VectorComponentPinnableHeader

Bug: T317897
Change-Id: I752eadc9bf54d58c799060a9eaefa0b125dd7952
2022-11-15 16:37:50 -06:00
Jon Robson 62aa69fa77 [Template] Move search template code into component
Bug: T322089
Change-Id: I8ad3218e99c07ea913df51a2b2134721568cdbf9
2022-11-07 13:32:59 -08:00
Bernard Wang 15d95fc24a [Technical] Split up Menu.template, restrict decoratePortletData to legacy Vector
Changes:
* Code is moved from SkinVector to SkinVectorLegacy verbatim since it is now only
needed by SkinVectorLegacy
so we remove it:
** This step broke MainMenu rendering so this was captured in VectorComponentMainMenu
** The isLegacy code no longer makes sense and is removed in a follow up

* storybook no longer run on CI

Authors: Bernard Wang and Jon Robson
Bug: T321102
Bug: T319349
Change-Id: Ib424ca1c767161fdae8c0aeedfe662b7fa039ff6
2022-11-02 21:22:50 +00:00
Jon Robson 6636367d47 [Components] Introduce VectorComponent and MainMenu components
To aid moving towards a MainMenu component we must first make subcomponents
for the language alert and opt-out link (which share code which
I've captured in VectorComponentMainMenuAction)

Code is lifted into SkinVector22 to allow us to easily make the template
change without any breaking visual changes

Bug: T319349
Bug: T322089
Change-Id: Ibb69d029a9fb6cee3482e15a60a7358361bd2405
2022-11-01 17:01:51 -07:00