Commit graph

776 commits

Author SHA1 Message Date
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
jenkins-bot 5c7a3d46fd Merge "Remove extraneous $isRegistered variable and VectorServices::getFeatureManager call" 2022-12-16 00:19:00 +00:00
Nicholas Ray c152db2cbe Remove extraneous $isRegistered variable and VectorServices::getFeatureManager call
Some follow-up cleanup from 867701

Change-Id: I93d50c15b572b78a4861a8e4347d706fd2e4c04d
2022-12-15 15:56:53 -07: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
jenkins-bot 9463861054 Merge "Refactor page tools, main menu, and TOC components" 2022-12-15 22:44:05 +00:00
jenkins-bot ebdea1b0df Merge "Clean up cached .vector-menu-portal code" 2022-12-15 22:30:30 +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
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 85d75f1e7c Don't add empty table of contents to page
Follow up to I0a740f8543831e266f2b1b874b40e44c8241d4cb

Bug: T317900
Change-Id: I1b63b5bd8e0f9f31fc7acd01665bf92061a45fd8
2022-12-13 14:01:34 -08: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
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
bwang 81348a659c Remove TOC AB test code
While removing this we also noticed that we check the value of
isMainPage. This doesn't seem like a good idea as most main pages
do not have a table of contents, so it seems like adding
unnecessary complexity for a state that doesn't exist in practice.
The existing code path also doesn't work as it adds a table of contents
unstyled to the page.

Bug: T324874
Change-Id: Idaeff6ace5912ea74ed9d335526027c4690ac8fa
2022-12-09 16:07:52 -08:00
Jan Drewniak 0baf4b18dd Follow-up to c1ebfd58, retrieve first value of array_splice
Follow-up to c1ebfd58, when removing the toolbox menu from
the sidebar, calls current() on the value of array_splice()
in order to return the actual toolbox menu data,
instead of an array containing that data.

Bug: T318434
Change-Id: I79fd0f98cb1491dec0810408ad91c7a855cea9cf
2022-12-09 20:05:23 +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 c1ebfd587c MainMenu: Print menu now displays in main menu
Our previous use of unset was leaving an undefined index of 0 in
the array of portlet links.

Use array_splice instead so we update keys.

This removes the "phantom" main menu that is displaying in the
main menu when the print menu is enabled.

Bug: T318434
Change-Id: I59d9f00636a6302a679599a2b829cd107980a1e3
2022-12-08 11:26:03 -08: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
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
Reedy 693bbfb182 Fix casing of class and function name usages
Bug: T253628
Change-Id: Ic737ea97cd11a7f76ab70845e7703852ed592220
2022-12-04 19:14:54 +00:00
jenkins-bot 94f61a08e8 Merge "Legacy: Group template/styles together to avoid confusion" 2022-12-02 16:03:01 +00:00
Nicholas Ray 7e0dd79d5a Convert LimitedWidthRequirement to UserPreferenceRequirement
Generalize LimitedWidthRequirement into a more reusable
UserPreferenceRequirement that can be used by both the limited width feature and
the persistent pinning feature (and possibly others in the future).

* Removes existing logic that checks whether the option is not null. Given that
skin.json sets the default [1], presumably this isn't needed.

* Adds unit test

[1] 65af26a258/skin.json (L163)

Bug: T322051
Change-Id: I7f228cf81a65b2eb22dbe94d2384b6c9f6da91f2
2022-12-01 16:31:47 -07:00
Jon Robson 769818514d [Refactor] Rename Portal component to MainMenuGroup
The Portal component is only ever used inside the MainMenu component

Change-Id: I3a3c58b11416f28c58f02a8bdfdacfbb7df6de9b
2022-12-01 14:45:52 -08:00
Jon Robson 595f520e44 Legacy: Group template/styles together to avoid confusion
This was confusing me while working on the Portal.mustache file.

Bug: T317899
Change-Id: I884cd33938b2670bddc90f698d8f61f37c6c29d4
2022-12-01 22:31:12 +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 7c3735121c Undo PageTools template confusion
The PageTools template is currently only being used when page
tools is disabled which is super confusing. Rectify that immediately.

Follow up to I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f

Change-Id: I4a984b959b764386133934c81e625dfde19d023b
2022-11-30 14:14:27 -08:00
Jon Robson e7b4edf7a6 [Refactor] Rethink Dropdown component
The Dropdown component should be considered the dropdown folder going
forward. This should be distinguished as a different component that
composes the Dropdown component

Since the template itself is rather simple it seems preferable to have
duplicate templates that describe the actual component (PageTools,
VariantsDropdown and LanguageButton)

MenuDropdown is renamed Dropdown and styles that don't correspond to the
Dropdown component are moved to the relevant components.

MenuContents mustache template (future component) is added to DRY up
several of the new templates.

Bug: T320927
Change-Id: I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f
2022-11-29 17:33:03 -08:00
bwang cb64e8f7ba Use PinnableHeader in the TOC all the time
[Visual Changes in this patch]
This patch introduces changes to whitespace inside the Mustache template
which corresponds to an HTML change, resulting
33 minor changes in pixel, the spacing of the ToC label shifts by
1 pixel

- Remove page tools feature flag from TOC
- Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed
- Remove now unused `moveToc()`
- Update jest tests to use PinnableHeader

Bug: T318013
Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
2022-11-30 01:09:43 +00: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
jenkins-bot 9be75feb0d Merge "Prepare styles for Page Tools menu" 2022-11-22 18:26:09 +00:00
Jan Drewniak 69f3dcd7a7 Prepare styles for Page Tools menu
Makes the dropdown styles compatible with the pinned state of the
menu so that both states can share the same styles.

- New vector-menu-heading mixin shared between main menu headings
  and dropdown headings.
- New @font-size-dropdown variable so font-size is consistent in
  dropdown and pinned state.
- Ensure hidden 'more' menu works in both pinned and dropdown state.
- Removes extra <ul><li> from PinnableDropdownContents.mustache, as the
  child Menu template already contain <ul><li> elements.

Bug: T318434
Change-Id: Ie1a56d8584c1dc3f20c6643ff4cfc740be4007fa
2022-11-22 12:57:29 -05:00
Jon Robson 7c24aa46fb Drop the VisualEnhancementsNext feature flag
Bug: T320101
Change-Id: I6d536af034dafd66c6478183de8029be9ed3e8b7
2022-11-21 13:27:34 -08:00
bwang 862ded4e17 Update page tools to use VectorComponentPinnableHeader
Change-Id: I2640cd177a312d98d931ab082d5c8942b042212a
2022-11-18 11:58:59 -06: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
jenkins-bot a0f7e2db32 Merge "Update TOC to use PinnableHeader" 2022-11-15 23:10:35 +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
jenkins-bot 8c48541379 Merge "Rename TOC locales to be generic pin/unpin labels, standardize toc label locale name" 2022-11-15 01:19:03 +00:00
bwang ddf8706ae4 Fix main menu button spacing when the VisualEnhancementNext flag is enabled
This patch results in an expected visual change for the main menu button when the flag is on
When comparing with master with the flag off, this patch will still show a 1px difference for the main menu button, as well as user menu and language button. These are not introduced by this patch and are due to the flush classes taking into account the 1px border

Change-Id: Id46bc939338d5bbcc3459ab502e1cf8b8f2020b2
2022-11-14 22:32:51 +00:00
bwang 17bdb31de5 Rename TOC locales to be generic pin/unpin labels, standardize toc label locale name
- 'vector-toc-toggle-position-title' -> 'vector-pin-element-label'
- 'vector-toc-toggle-position-sidebar' -> 'vector-unpin-element-label'
- 'vector-toc-heading' -> 'vector-toc-label'

Change-Id: I4c45fa9a152e26691cc0b62ce8d40d00f8f2e617
2022-11-14 16:26:08 -06:00
bwang f73d255810 Replace aria-labelledby in ToC with aria-label
Bug: T318178
Change-Id: I7abcc977276b979c5a515fbbcccf42d7c993a130
2022-11-14 18:10:38 +00:00
bwang 6bff0011c1 Fix ToC dropdown menu spacing when visual next flag is enabled, address icon related feedback
Causes 20 visual progressions regardless of visual next flag, the ToC moves 1px when in the sidebar

Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06

Bug: T321504
Change-Id: I4b3ec90d8e79791a1bf17ba02c9f9d722499bec8
2022-11-11 18:56:12 +00:00