Commit graph

370 commits

Author SHA1 Message Date
bwang 22c0e38997 Fix alignment/spacing of grid column items
-Addresses this feedback: https://phabricator.wikimedia.org/T324877#8505388

Bug: T319348
Bug: T324877
Change-Id: Ic371716f016309fb105c30b8e02e106c1de8310d
2023-01-10 11:36:53 -06:00
bwang 96932f847c Fix alignment of searchbar by introducing CSS grid to the header on viewports greater than desktop-wide
- Addresses "when pinned, can we maintain the alignment between the search bar and the article title for larger screens?"
https://phabricator.wikimedia.org/T324877#8499980

Bug: T324877
Change-Id: I7d3447cccdff40fc5a5e0b8978c17db8ffab065c
2023-01-10 11:34:27 -06:00
bwang c298d5d1ea Page tools styling followup
- Address feedback in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/870996/10/resources/skins.vector.styles/components/TableOfContentsPinned.less#28
- Avoid handling MainMenuAction styles in PinnableElement.less, move to MainMenu.less
- Reduce top spacing of the language alert
- Allow labels in menus to wrap
- Update TOC line height to match prototype

Bug: T324877
Change-Id: Ic5dc456d6e6126d3ff6cee854e6023cf5cf2595d
2023-01-09 17:07:13 -06: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 9db08ef300 Update TOC spacing to match spec
Bug: T324877
Change-Id: Ifb51dd8b37c8489cd1e9e74ec50e6d2e84411845
2023-01-05 12:41:25 -06: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
bwang af21dec1c1 Factor out TableOfContentsPinned.less and rename TableOfContentsCollapsed for better CSS organization
Bug: T324877
Change-Id: I93182573a2ae718589ec7d448dd97a160ecd81a2
2023-01-04 11:24:57 -05: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
bwang 7f2118e756 Update header spacing to match spec
Bug: T324877
Change-Id: I47be192f5ba726904dc225afd54ee9112e97dc10
2022-12-20 17:58:54 -06:00
jenkins-bot ac2fc83112 Merge "Add generic classes to pinnable container" 2022-12-20 23:46:11 +00:00
bwang a348db9969 Add generic classes to pinnable container
Bug: T324877
Change-Id: Iab94f9f600f8e6d032ad70d6b8e502686977441c
2022-12-20 17:22:11 -06:00
jenkins-bot 7eb6d886be Merge "Fix missing TOC scrollable indicator" 2022-12-20 21:49:44 +00:00
bwang a50654309d Clean up cached HTML code
Follow-up: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
Bug: T317900
Change-Id: Idfbd77c6b84c0c8541a81effc272f4f36f17b823
2022-12-20 17:42:21 +00:00
bwang e585211336 Fix missing TOC scrollable indicator
Introduced in Iea0d73005b91589c58ae38a3a640fa90c18a860d on Dec 5

Bug: T325388
Change-Id: I03f6d991492cbbdcfda63ed5a617cf26c691635f
2022-12-16 13:39:13 -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
bwang dbb4868452 Clean up code handling cached HTML for 3 patches
Follow-up: I82f23e69b0249c844af9e45fec342217a0755893
Follow-up: I85aec387f87126a17e760fd9fd10e10572ff3152
Follow-up: Iea0d73005b91589c58ae38a3a640fa90c18a860d

Bug: T318013
Change-Id: I2f231bbaec33bc6072750781c12e85838042dccf
2022-12-09 22:56:34 +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
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
jenkins-bot 8a2a9202dc Merge "VISUAL CHANGE: Fix extra padding around icon buttons < tablet viewports" 2022-12-05 22:01:43 +00:00
bwang 29900128a4 VISUAL CHANGE: Fix extra padding around icon buttons < tablet viewports
Fixes https://jmp.sh/qBcSfEA2

Bug: T323172
Change-Id: I3bf44cd12248dc2633a6f46c164d53de34e819e5
2022-12-05 14:26:58 -06:00
jenkins-bot 73ad27babf Merge "[Refactor] Rename Portal component to MainMenuGroup" 2022-12-05 19:56:59 +00: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 ded2784f0c Page tools: Hide dropdown when not pinned
Follow up to I85aec387f87126a17e760fd9fd10e10572ff3152

Bug: T318013
Change-Id: I095ecf0333c7181d0a2d81902faed309b1d56da6
2022-12-01 22:30:19 +00:00
Jon Robson dca02fee92 Page tools: Move styles from PinnableElement to PageTools
These styles are not going to be needed in the main menu so are
not generic. Moving to the PageTools component.

Bug: T317899
Change-Id: I17b8ecd645c593c0368ea158265dbf8f6a575345
2022-12-01 18:47:38 +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 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
bwang 78b20092c4 Ensure more menu shows on lower resolutions
Bug: T323730
Change-Id: I874e93fed7287dd6276b8a47ba1ea15624b75d84
2022-11-23 20:58:23 +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 d6a99e2f08 Fix icon button spacing in sticky header
Bug: T323176
Change-Id: Iceea571a112b3ae7b07246326ec2bdae9fd0c50c
2022-11-21 18:13:46 +00:00
bwang 6eb5bd05fb Update ToC selector to account for page tools
Change-Id: Ib2504bf16969d3b6af2a827ae7b7cfd8aa5fc468
2022-11-18 11:15:16 -06:00
jenkins-bot 0244b2d41b Merge "Reintroduce h2 to Table of contents label" 2022-11-17 19:41:09 +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
jenkins-bot f4f416a1ce Merge "[Cleanup] Address FIXMES relating to cached HTML" 2022-11-17 17:35:46 +00:00
Jon Robson f31f0bbf50 [Cleanup] Address FIXMES relating to cached HTML
Change-Id: I6f5e97dde1f774e741a4236d1f6b49ad146cc236
2022-11-15 23:23:56 +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
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 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
jenkins-bot f5992cf7ee Merge "[Technical] Remove common Menu styles" 2022-11-11 18:36:42 +00:00
jenkins-bot cd0250dbb4 Merge "Replace 'more' menu with page tools pinnable dropdown" 2022-11-10 22:21:38 +00:00