Commit graph

546 commits

Author SHA1 Message Date
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
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
Roan Kattouw 3541a9a28f search: Use relative sizing for the search icon
Only do this when JS is enabled and the Vue search (Codex
TypeaheadSearch) is going to be loaded. Without this, when viewing
Vector with an increased browser font size, Codex's icon scales up but
ours doesn't, causing the icon to grow and jump when Codex loads.

Set the icon's size in relative units (em instead of px), and change the
background position so it stays in the same place.

Change-Id: Ie0b33797f9da75dc758a8afbe58eb004d90f3776
2023-02-03 01:58:31 +00:00
Jon Robson 55bb37f2ab Moves feature classes from BODY element to HTML element
Move feature classes to HTML element - this is significant
for anonymous as placing the classes on the body tag breaks
the browser's ability to parse the article concurrently
with the stylesheet download, because inline scripts
are spec'ed to be able to see document.styleSheets.

Changes:
* Feature classes are moved from BODY tag to HTML tag
* For now disable localStorage storage until we've worked out
the storage mechanism in core.

Bug: T321498
Change-Id: Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
2023-01-24 18:22:13 -06:00
Bartosz Dziewoński 1d45abb015 Work around sticky-positioned layers disabling subpixel rendering
Adding 'contain: paint' to the TOC container works around the issue.
This property is intended to prevent element's rendering from
affecting other elements, so it makes sense that this works.
https://developer.mozilla.org/en-US/docs/Web/CSS/contain

Because this property also clips the rendering of the element to its
bounding box (similar to 'overflow: hidden'), we need to move some
negative margins to this element from its children, otherwise the TOC
expand/collapse arrows would be cut off.

Bug: T327460
Change-Id: I34f414a99608450882e83c0ff22e64c05dff8807
2023-01-23 21:51:40 +01: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
jenkins-bot eb78a83856 Merge "Scale server-rendered search box with browser font size" 2023-01-13 23:04:25 +00:00
Jan Drewniak 0daa4da3c4 Followup to 4d1c0b89 Override PinnableElement behaviour at low resolutions.
The media query for the CSS portion of this feature
should not include the `screen` portion because
that's included in the top-level import in skin.less.

Bug: T326364
Change-Id: I1ab0e321dde908982834c92ee428b512218bbe3d
2023-01-13 17:18:20 -05:00
jenkins-bot 13cc033ab0 Merge "Remove extra border that show in a page tools dropdown when a menu is hidden" 2023-01-13 21:52:48 +00:00
Nicholas Ray 2b397d05d2 Scale server-rendered search box with browser font size
The server-rendered input's height was using pixels instead of relative units so
it did not scale with the browser's font size. This adjusts the styles of the
server-rendered input to match the styles used by Codex. In addition, the
magnifying glass dimensions were set to pixels to match the Codex icon.

Bug: T326863
Change-Id: I6aa5b60841087dfa5b32e873e3ed21a22c37353e
2023-01-13 14:36:02 -07:00
jenkins-bot 70ddd1f3f7 Merge "[Clean up] Remove unnecessary container and CSS in sticky header" 2023-01-13 20:57:24 +00:00
bwang 4bf1a7b6f6 Remove extra border that show in a page tools dropdown when a menu is hidden
Fixes this https://phabricator.wikimedia.org/F36201839, which you can see for anon users, who have an empty "Actions" menu inside the page tools dropdown

Follow-up: Ia2cba7eb60739f0af8153c6c4246aa80d2a189c0
Change-Id: I617b37fbdb7b300a4266fd9f927d81e6a63d74bc
2023-01-13 20:41:34 +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 5f53d90e59 Merge "Override PinnableElement behaviour at low resolutions." 2023-01-13 19:52:28 +00:00
Jan Drewniak 4d1c0b8940 Override PinnableElement behaviour at low resolutions.
At resolutions below 1000px, we want pinned elements
such as the Page Tools menu and Main Menu to collapse.
This behaviour is temporary and when the browser is resized,
the pinned elements should revert to their previous pinned state.

We also want to remove the ability to pin these menus at
low resolutions, so the "hide/move" button is hidden.

A new matchMedia event handler is added to PinnableElement.js
to handle this behaviour.

CSS is also added to hide the pinned menus at low resolution.
This is to account for the situation where the page is loaded
at narrow widths, with pinned elements,
and the JS hasn't loaded yet.

features.js is refactors so that class toggling can happen
independently of saving the state to user preferences
(since we want to toggle the classes but not save the state
at lower resolutions).

Bug: T326364
Change-Id: I3113ab83deb15843e04ed63ec767a85c522517b5
2023-01-13 18:09:11 +00:00
bwang 888170264f Misc page tools visual fixes
- Fixes extra spacing introduced in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/877239
- Addresses last of design adjustments in https://phabricator.wikimedia.org/T324877#8519138

Bug: T324877
Change-Id: Ia2cba7eb60739f0af8153c6c4246aa80d2a189c0
2023-01-12 15:42:47 -06:00
bwang d309544c80 Add default width and max width to dropdowns in modern Vector, preserve existing styles for legacy Vector
Bug: T324877
Change-Id: I2dc109e7601fa3a15b5710f0c1676066368a6e6e
2023-01-12 11:45:13 -06:00
bwang 8539ab3bd8 Ensure TOC in sticky header has correct margin, refactor TOC styles to be more consistent
Results in 16 visual progressions

- Simplify/remove mixins in TableOfContentsUnpinned.less

Bug: T325554
Change-Id: I8246b6ebbf91deac7896fd46834f090e259d75ca
2023-01-11 15:47:09 -06:00
bwang 4efafaf374 Fix TOC scrollable indicator
Causes 4 minor visual regressions where the collapsed toc width is slightly smaller
will be fixed when page tools is deployed.
https://jmp.sh/o3vlGVlb

- Remove @padding-vertical-toc, @padding-right-toc and @padding-left-toc variables, which would need to be removed after page tools is enabled anyway
- Remove @height-collapsed-toc-button, @padding-top-content-px and @max-width-collapsed-toc variables which weren't needed
- Greatly simplify CSS for collapsed TOC width

Bug: T324877
Change-Id: I6d44d4b49fb5dccd776dfe0e96740fdb9bff4c5d
2023-01-10 17:21:26 -06:00
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
bwang 8f5b33fee3 Replace 'more' menu with page tools pinnable dropdown
Bug: T317897
Change-Id: Ia94ebc32041bb3c2f86d461b310766b2d14c66a2
2022-11-10 15:33:16 -06:00
bwang 16da6a5e6a [Technical] Fix sticky header search input alignment when VisualEnhancementFlag is enabled
Visual changes when the flag is on

Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06
More context at T322673#8383888

Bug: T322673
Change-Id: I64a47fa869247f758c6369c2e0ff8b12f87f9d9e
2022-11-10 00:48:07 +00:00
bwang e90b7e341f Add ColumnEnd.mustache and new grid styles to support third column
Bug: T317897
Depends-On: Ibf304843a62d5269992a01eb826edf71ce8d3c35
Depends-On: Ib424ca1c767161fdae8c0aeedfe662b7fa039ff6
Change-Id: Ie7d31df972ff68313b2437ff14b7b6b8d7078204
2022-11-09 11:54:30 -06:00
Jon Robson 1657cbc6bd [Technical] Limit dropdown arrow styling to child headings
Since dropdowns can now themselves contain headings in the content
area we need to limit this rule. While this is current theoretical
it will soon become reality in Ie7d31df972ff68313b2437ff14b7b6b8d7078204
when we will introduce the first of these components.

Note in future we will likely restore this when we make those menus
themselves collapsible, but that will likely be part of a different
component and fixing this now is better than having a non-functional
collapsible item.

Change-Id: I24abb08a098dd75ad694da0b47b8be0897ed9b30
2022-11-09 16:13:49 +00:00
Jon Robson d708478752 [Technical] Remove common Menu styles
There are no longer any common menu styles. These are moved to the legacy
skin and new rules are added to the dedicated components.

Change-Id: I1bf26bfb29bb495ee65e983fad60122007f62698
2022-11-08 14:31:14 -06:00
Jon Robson bc56ba86df Allow dropdowns to contain .vector-menu-content elements
Currently you cannot have menus inside dropdowns. To support this
we should limit the selector to direct children nodes.

This will allow us to put the main menu into the main menu icon
dropdown.

Change-Id: Ibf304843a62d5269992a01eb826edf71ce8d3c35
2022-11-07 15:44:13 -08:00
Jon Robson ea07136e73 Fix alignment between icons on left and right of screen
- Table of contents arrows are now aligned with sticky header search/hamburger
- The user menu dropdown now aligns with more and languages button

Bug: T321504
Change-Id: If3aed0ac401b0abc80c3ad52806eb85b33d43f06
2022-11-04 17:06:48 +00:00
bwang 099eed0487 Remove CSS classes and selectors from cached HTML
Bug: T316570
Depends-on: Ib4050768f20b1734d356104f18aa539f657099d8
Change-Id: I97f87b32402d7f4fd790f9a8b9abab42efd9d890
2022-11-03 11:12:39 -05:00
Jon Robson 4ecf9219e0 Disable new flushing rules with feature flag disabled
This change should roll out with the featue flag to avoid
unexpected UI regressions

Follow up to  I9aba71ac4fff0d285676946acef8309b741ed1ad

Bug: T321504
Change-Id: I369e314bac31ea2eca3bff4e530e07c8bee325e2
2022-11-02 22:21:58 +00:00
bwang cc201a42d9 Finish moving to Page Tools naming convention
Change-Id: I8fcfac60b34a500e751cf10ca2ae5c26dd35881f
2022-11-02 00:59:16 +00:00
jenkins-bot e857cfa9e1 Merge "Align text of main menu and ToC to main menu button" 2022-11-01 16:47:05 +00:00
jenkins-bot c12d8bb96e Merge "Add generic PinnableHeader template, CSS & JS" 2022-11-01 16:45:18 +00:00
Jan Drewniak 8c63ac7c55 Align text of main menu and ToC to main menu button
Instead of aligning the edge of the main menu and
ToC with the edge of the main menu button, this
aligns the text of those sidebar items with the
edge of the main menu button.

NOTE: Currently not working with the
vectorvisualenhancementnext feature flag enabled.
This will be addressed in If3aed0ac401b0abc80c3ad52806eb85b33d43f06

Bug: T317583
Change-Id: I01f639c5ca63ac50235dc21ca5273c91213f041c
2022-11-01 16:30:01 +00:00
bwang 2ac38f2f9a Add generic PinnableHeader template, CSS & JS
Bug: T317897
Change-Id: Iedc5e6f64e72a4d7762cb4f2fa834980d6757793
2022-11-01 11:12:15 -05:00
Jon Robson 31b0fd08d2 [Technical] Prepare for template rename
The user links and language button are SkinVector22 features but
they are buried inside SkinVector.

When we rename the templates this code will become problematic
as SkinVector22 requires these modifications

Bug: T319349
Change-Id: Id5e5b97af0ea020ef20565a7e1acc685d7be0892
2022-11-01 03:45:21 +00:00
jenkins-bot eb124e850b Merge "search: Fix loader alignment with search input" 2022-10-28 16:21:21 +00:00
Roan Kattouw f34f78313f search: Fix loader alignment with search input
The search input no longer expands to the left when focused, only when
there are search results. This meant the loader box was misaligned,
because it still expected the search input to expand.

To fix this misalignment, add the margin-left and width styles that
apply to the search input to the loader box as well.

Bug: T321009
Bug: T317902
Change-Id: Ic177b4cf56cb0a94850037a30db3001777dc52d2
2022-10-28 16:05:38 +00:00
Jon Robson 9c9c49d90f Remove duplicate styles
Follow up to
I51f8e31be6771a3fb32fb07dc22d0c2872b5706d

Bug: T321504
Change-Id: Ia3fe858f29836039fd7d621588715badf3298643
2022-10-27 10:34:15 -07:00
jenkins-bot 5112811e47 Merge "Use standard utility classes for flushing icons left and right" 2022-10-27 15:03:34 +00:00
jenkins-bot 702e585154 Merge "Limit user dropdown link to 48px" 2022-10-26 21:23:59 +00:00
Jon Robson a1199a0917 Use standard utility classes for flushing icons left and right
Restricted to the feature flag (?vectorvisualenhancementnext=1)
 for now to allow us to not worry about caching.

mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core
for some time and using them means we don't have to manage hardcoded
values for these.

We'll need to think of .mixin-vector-flush-left-left
and .mixin-vector-flush-right-margin-left separately - I wonder
if these could be revised to use these 2 standard classes.

Additional changes:
- Drop unused mixin-vector-flush-right-margin-left mixin

Bug: T321504
Bug: T317583
Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
2022-10-26 10:01:12 -07:00
jenkins-bot 598424b2e2 Merge "Replace incorrectly mw- prefixed classes Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"" 2022-10-25 22:32:06 +00:00
Nicholas Ray 6d62d71ee5 Remove login link quick fix styles
This removes the previously merged 835281 stopgap. Because of caching, this
should only be merged when the `emptyPortlet` class is not found on the user
menu container on anon officewiki.

Bug: I883926c36f59d446076f960ead31f82e51967e70
Change-Id: Ia1e9ba2b43186462b05f372368d5965fa0857657
2022-10-25 16:17:24 +00:00
bwang 51457a78e7 Replace incorrectly mw- prefixed classes
Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"

Bug: T316570
Bug: T317437
Change-Id: Ib4050768f20b1734d356104f18aa539f657099d8
2022-10-25 10:28:31 -05:00
Jon Robson f94e386f85 Limit user dropdown link to 48px
Bug: T319070
Change-Id: I483e728870c059a1945d3dc4f395f04250b29cc7
2022-10-25 00:29:39 +00:00
Jon Robson 614da1dc5e Features: Make max width a feature
Making this a feature part of the feature management system is integral
to making this a toggle and will allow us to explore making this
persistent in future.

Bug: T319447
Bug: T319449
Change-Id: I80c7b892a6891094854b4154db90917b67986102
2022-10-24 13:12:06 -07:00
Jan Drewniak d2618e9428 Split MenuPortal.less into legacy and modern Vector
Removes the common MenuPortal.lesss code and splits it into
Vector 2022 and Vector legacy in anticipation of changes to
the sidebar in Vector 2022.

Bug: T317583
Bug: T319348
Change-Id: I57d3dc3458a7d6a4877170c26c88ca9222e00ff7
2022-10-07 17:40:49 +00:00
jenkins-bot 9af2908bae Merge "Regression: Restore tab styles to legacy icons" 2022-10-05 19:07:27 +00:00
Jon Robson a36ec92a27 Regression: Restore tab styles to legacy icons
Follow up to d0775a2

Change-Id: I5c3e4ac2ca0ed457863b4e4dd3cc9ccc3dca86d0
2022-10-05 18:44:19 +00:00
jenkins-bot ca3fe05c5e Merge "Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles" 2022-10-05 17:06:12 +00:00
bwang 7c172531c2 Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles
Visual changes:
- Footer text and border is aligned with header icons
- Main page content has no padding, slightly wider on certain pages/viewports

Bug: T317573
Change-Id: Id0c4343b8bc4c16006c0b9abd914213ca2f307ca
2022-10-05 10:30:12 -05:00
jenkins-bot 142aa4abcd Merge "Visual enhancements next: Fix alignments of icons" 2022-10-05 02:24:16 +00:00
Jdlrobson 1bb0a0e8fa Visual enhancements next: Fix alignments of icons
This reverts commit d1ef0d3aaf.

Reason for revert: Applying again without the impact on styles in
master.

Bug: T319070
Change-Id: I751168e1dc0f6235fd5ba881dc884941edbf4b77
2022-10-05 01:33:09 +00:00
bwang d0775a2af9 Technical: Cached HTML cleanup
Change-Id: I6638a816fba3002289236f50d3d0e976f478affe
2022-10-04 18:23:57 +00:00
Jon Robson cc9fc193f6 Adjust watchstar animation
Rather than infinitely spinning, spin it once 72deg to the right
hand side just how we do on mobile.

Bug: T317371
Change-Id: I1ed89e4ad2b54444f920d850bb4a17e9caa92dc5
2022-10-03 23:53:31 +00:00
Jan Drewniak 98068d9598 Restore navigation landmarks in page toolbar
Adds landmarks to the article toolbar
- Namespace navigation
- View navigation
- More options navigation

Removes the "tools" landmark and associated
aria-label (and translation message).

Makes the #left-navigation and #right-navigation
flexbox to ensure the new <nav> elements, along with
gadgets, align on one line. Moves the styles for
these elements from screen.less to ArticleToolbar.less.

Bug: T317440
Change-Id: Iceff337b0e250c1f368dbaea6cc41a977d8ee868
2022-10-03 10:39:39 -04:00
Jon Robson db08697b17 Prepare for icon touch area change
Should result in no visual changes with default Vector config (e.g.
Pixel)

Bug: T314323
Change-Id: Id1d72fdede3aabab630f9318516ef0f92b12e23b
2022-09-30 16:35:17 -07:00
bwang 76f73decca Fix page toolbar border
VISUAL CHANGES:
- Minor tweaks to border color

Bug: T318952
Change-Id: I887e9dc922828a64afe010c2c13912711fcfbaa1
2022-09-30 22:25:59 +00:00
Jon Robson 785926d8ba Technical: Generalize icon flushing
This code is not resilient to changes in the mw-ui-icon definition
In preparation for changing touch areas we need an easy way to
flush these correctly based on feature flag.

No expected visual changes.

Bug: T314323
Change-Id: Ia10a7c696c690887a37851684215e515474fbd90
2022-09-30 20:12:14 +00:00
Nicholas Ray 3613a369eb [Quick Fix] Fix Vector 2022 should display a "log in" link on private wikis
This adds a bit of tech debt and should only be merged if we're looking for a
quick fix of T317789. It overrides the `.emptyPortlet` class that is currently
hiding the user menu on OfficeWiki et. al. to show the user menu  instead. It
also hides the learn more link since the presence of the `emptyPortlet` class
suggests that we do not have anon editor links in the menu.

Bug: T317789
Change-Id: I3deaf6b4896e9ec3a143c5909092caffc600da56
2022-09-26 15:54:29 -06:00
bwang 600dd1496a Style active top level section differently than ordinary active TOC sections
Bug: T316032
Change-Id: I662a03f7f7b1e1fb65c365b3db6096cae75fdeb2
2022-09-20 16:57:53 -05:00
Jan Drewniak 06c243da35 Modify the sticky header offset styles
- Prevents the ToC in the sidebar from jumping down when the sticky
  header becomes visible
- Removes the `.sticky-header-element` class from the ToC since that
  only modifies the elements position when the sticky header becomes
  visible (whereas in this case, it should be modified when the sticky
  header is enabled, before it's visible).

Bug: T314330
Change-Id: Ic6f50b8dc4f1507d875825d23eb44c24a998eaf7
2022-09-20 10:34:09 -04:00
jenkins-bot 1352035534 Merge "Icons: Globally set icon colors to @opacity-icon-base" 2022-09-20 00:35:58 +00:00
jenkins-bot 3e5c89df2b Merge "Table of contents: Hide accessible label using color transparent" 2022-09-19 22:51:49 +00:00
jenkins-bot 635ae993ff Merge "Follow-up: Apply min-width to collapsed TOC" 2022-09-19 22:41:23 +00:00
jenkins-bot e9b79ee39f Merge "Fix border when title is hidden and when toolbar is empty" 2022-09-19 22:20:31 +00:00
bwang c4ec68b13c Fix border when title is hidden and when toolbar is empty
Bug: T317930
Change-Id: Iba89a2e642a8377c3603d099fb1157fc2df465d0
2022-09-19 21:37:27 +00:00
Jon Robson 5aadd9f578 Table of contents: Hide accessible label using color transparent
This is showing up in non-screen readers on Bengali wiki

Bug: T314652
Change-Id: I30ec573ae3de4811690183007282ef5f30c228b3
2022-09-19 12:56:19 -07:00
Moh'd Khier Abualruz 5a32955311 [RTL, TOC] The arrow before collapsible sections in sidebar is clipped
The table of contents has since been reflected to
not use calc statement anymore and pre-calculate the value,
cssjanus flips this value properly so this rule can safely be removed.

Bug: T314652
Related-To: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
Change-Id: Ibb390589f449bc20c6f38f66c1e617fa3fa82aab
2022-09-19 19:52:38 +00:00
Jon Robson 83458dd8dd Icons: Globally set icon colors to @opacity-icon-base
Also use other icon opacity variables where applicable.

Bug: T317800
Depends-On: If2f99124b01ce99b5131fdb960c60952075f6343
Change-Id: Ib8b3d11bd1bd6f902ff846eeb2a8f9cf3c7077b2
2022-09-19 19:28:19 +00:00
bwang 88d4aef088 Follow-up: Clean up sticky header and collapsed TOC styles
Bug: T316056
Change-Id: I4c803bfd820aeb7270afa65cf8412415b437ff42
2022-09-16 14:25:02 -05:00
jenkins-bot aad1c4c836 Merge "Revert "Set top value for ToC when sticky header is enabled."" 2022-09-15 22:40:58 +00:00
bwang 0d7a8d751e Follow-up: Apply min-width to collapsed TOC
Bug: T316056
Change-Id: Ib9460cd5f5fa6d37a4aaf3c0dd583d9de46851ee
2022-09-15 20:27:24 +00:00
Bernard Wang 3bdcb4ae2a Revert "Set top value for ToC when sticky header is enabled."
This reverts commit 968787d692.

Reason for revert: Causes TOC visual regressions

Change-Id: I0bfe8ee1d1bc9d5a71d3abadb6636d8cc5d07668
2022-09-15 19:28:41 +00:00
bwang fd783b0499 Update collapsed TOC menu width
Visual changes:
- Collapsed TOC menu width depends on TOC content, with a max width of 51em or 75vw
- Collapsed TOC menu in sticky header no longer has a horizontal scrollbar

Bug: T316056
Bug: T316609
Change-Id: I1da9c16366b55c77ef13bac899ed8ecb2d77fdb9
2022-09-15 17:37:28 +00:00
jenkins-bot fbb283a315 Merge "Set top value for ToC when sticky header is enabled." 2022-09-15 16:57:39 +00:00
bwang e28e197f1f Prevent language button in sticky header from word breaking
Bug: T316609
Change-Id: Ie4d9efad0850dce52a6e383574b14d986a824d4a
2022-09-15 16:28:26 +00:00
Jan Drewniak 968787d692 Set top value for ToC when sticky header is enabled.
Prevents the ToC from jumping down when the sticky header
becomes visible.

Bug: T314330
Change-Id: I11450d9062445d357859c6e48972f2ba37e597c6
2022-09-15 11:04:23 -04:00
jenkins-bot e0042bceca Merge "Remove unneeded expansion styles from search box code" 2022-09-13 19:30:18 +00:00
bwang 6b7197cf95 Followup: Removed code for cached HTML from T313060
Bug: T313060
Depends-on: Ia263c606dce5a6060b6b29fbaedc49cef3e17a5c
Change-Id: I0626f5c8d92836ecac961bbe213ffd8b0f0e2df5
2022-09-12 21:47:48 +00:00
bwang d538835b5a Follow-up: Align sticky header with header and update collapsed TOC in page title padding
Visual changes:
- Sticky header padding will increase on desktop and desktop-wide viewports to match the header
- Padding on collapsed TOC button in page title is 2px wider on each side

Bug: T315261
Change-Id: I9d0df4f4d399fe120a4c1a5d2df610942cc70f02
2022-09-09 20:07:49 +00:00
jenkins-bot 9ac7a23234 Merge "Correct ContentHeader source order to match design" 2022-09-09 17:24:55 +00:00
Jon Robson 97cf735de2 Icons: Watchstar and wikilove are upgraded
Can be tested by appending ?vectorvisualenhancementnext=1
to URL

Bug: T310838
Bug: T234990
Bug: T234550
Depends-On: I76d0d94c9006cc5f5680849ecdd1c382c16e34ba
Depends-On: Ib7c3021db014827b4b88cac855afc0b54a360f8c
Change-Id: Ie2ffa5c3ecf270c1bb1f315937023ae7ace5ed30
2022-09-08 19:43:35 +00:00
bwang 4c622fe8de Correct ContentHeader source order to match design
- Use flexbox instead of float

Visual changes:
- The title wraps differently when the title is very long

Bug: T313947
Change-Id: I2915e36286b21c8fd1a07247ada7754a08a0b574
2022-09-08 19:10:55 +00:00
jenkins-bot e60716e63d Merge "Align language button" 2022-09-07 22:21:27 +00:00
jenkins-bot d4094ffa02 Merge "Align header icon buttons and main content" 2022-09-07 22:21:25 +00:00
bwang cdae8b1937 Align language button
- Add margin-right to language button
- Remove @margin-start-sidebar-content CSS variable as it's name isnt accurate anymore, and its value is derived from @icon-padding-md

Bug: T315615
Change-Id: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
2022-09-07 09:47:55 -05:00
jenkins-bot ddc3125f74 Merge "Remove dependency on .cdx-typeahead-search--active class" 2022-09-07 01:29:45 +00:00
Jon Robson 742f659b10 FeatureManagement: All features have an associated class on the body tag
This is a common need for features, and having these use a standardized
class name will make using them a lot easier.

Change-Id: I0e16c26878e7d4399d2bf57f236523d214951a27
2022-09-01 22:09:48 +00:00
Anne Tomasevich 8e04c79dba Remove dependency on .cdx-typeahead-search--active class
This class is no longer needed in Codex and will be removed.
This patch adds a similar dynamic class to the Vector search
app, to be used for showing/hiding the search button on
focus/blur or hover/leave.

Bug: T316893
Change-Id: I738c0f24dcd06ddeb9179cfedc85ed73a6504f1e
2022-09-01 16:42:11 -04:00
Anne Tomasevich eec6d5f608 Remove unneeded expansion styles from search box code
Input expansion behavior has been changed in Codex to expand
the input when the menu opens, instead of when the input is
focused. This patch removes styles targeting the server-
rendered search box that mimicked the expansion behavior
on initial focus to ease the transition between the server-
rendered version and the Vue version.

Bug: T312594
Change-Id: Id716860f52df7585c068a7927bf799129faf4ad3
2022-09-01 15:43:31 -04:00
bwang d949621eb2 Align header icon buttons and main content
Technical changes:
- Increase @padding-horizontal-content to align content
- Rename @padding-horizontal-page-container and @padding-horizontal-page-container-wide to @padding-horizontal-page-container-desktop and @padding-horizontal-page-container-desktop-wide respectively
- Replace "gutter" grid area with column-gap
- Clean up TOC styles

Visual changes:
- Below 1000px the header icons spacing is updated
- Above 1000px the page titlebar and articlebar right space is updated

Bug: T315261
Change-Id: I7f51ab3b9613c359db62e918051e942c5c6c878b
2022-09-01 12:42:07 -05:00
bwang 9c6f6709c6 Create new sticky toc container
Bug: T313060
Change-Id: Ia263c606dce5a6060b6b29fbaedc49cef3e17a5c
2022-08-31 21:27:06 +00:00
jenkins-bot c701486aa2 Merge "Override visited link style in MenuTabs" 2022-08-31 20:38:00 +00:00
bwang 900376f9e4 Override visited link style in MenuTabs
Bug: T316574
Change-Id: I55b6537df709204ff499aa18298721cbec1de405
2022-08-31 19:51:14 +00:00
bwang 1c8af16dfb Replace body:not( .vector-toc-collapsed ) with .vector-toc-not-collapsed class
Follow up to Ibf837775d972deb29e9619cc6c12c919aae5155a

Change-Id: Ib50f6e4a61a09f54763a740bd12cdae3ee63abef
2022-08-31 19:05:50 +00:00
bwang 8ad777b896 Fix site notice spacing
- Removes grid row gap in favor of margins
- Add container div around site notice to allow margin collapsing

Bug: T315595
Change-Id: I39959f43f20880e83bef945a7535d58cfe0b6412
2022-08-25 11:13:57 -05:00
jenkins-bot 0e7c32827d Merge "Revert "Remove grid row gap in favor of margins"" 2022-08-24 17:13:31 +00:00
Jdlrobson 3d719455c4 Revert "Remove grid row gap in favor of margins"
This reverts commit b63244f367.

Reason for revert: Per standup this morning we'll revert this so
that we are back to a known state, and try this again in a second
attempt.

Change-Id: Ie1349fecbab6c49ce63d328aba08162d74145cb9
2022-08-24 16:54:31 +00:00
jenkins-bot 6e30fa2c00 Merge "TOC with bold text." 2022-08-23 12:47:58 +00:00
bwang b63244f367 Remove grid row gap in favor of margins
Bug: T315595
Change-Id: Ibf837775d972deb29e9619cc6c12c919aae5155a
2022-08-22 15:49:00 -05:00
Moh'd Khier Abualruz ff73b36780 [RTL, TOC] The arrow before collapsible sections in sidebar is clipped
* Temp solution for quick fix
* Full solution should be supplied by cssjanus PR shortly after

Bug: T314652
Change-Id: Ic3ac53f884bc1b9bc14c951b7348e2bf263065a2
2022-08-22 08:13:58 +00:00
Jan Drewniak e3896ab96d TOC with bold text.
The width of the active link is increased via calc to reduce the
chances that the line will wrap because of the bold text.

Bug: T314670
Change-Id: I58aa72871b7d80c8342df60478894dafcf448ae7
2022-08-18 17:04:30 +00:00
bwang 5f09892813 Remove gradient from modern Vector, align SidebarAction with portlet styles and classes
Bug: T307771
Change-Id: I92fd11b89d4afbf99dd7ab51990835b9754767a1
2022-08-17 20:41:15 +00:00
jenkins-bot 2f65c4f696 Merge "Follow-up: Clean up left over vector legacy classes" 2022-08-17 20:38:49 +00:00
bwang 81d9b28be1 Follow-up: Clean up left over vector legacy classes
Bug: T313559
Change-Id: I42610ef7ccaea0b7c818f66cfbe5a316d2a5566d
2022-08-17 20:18:37 +00:00
bwang 2d6be2e6f0 Clean up main menu selectors
Change-Id: Icb7595f2ef60108f6eaf6b953f37a291678f793e
2022-08-17 14:08:46 -05:00
jenkins-bot 8c3a4792e9 Merge "[ToC] Show new/modified sections after publishing an edit (new floating ToC)" 2022-08-16 08:37:30 +00:00
Moh'd Khier Abualruz 407046c759 [ToC] Show new/modified sections after publishing an edit (new floating ToC)
- All Frontend
- All in Skin

Bug: T307251
Change-Id: Icae2f03f0005b7607448127b793ff3c0010e5817
2022-08-15 20:02:49 +00:00
bwang 8eff2d0501 Follow up: Remove .vector-layout-grid, .mw-workspace-container classes
Bug: T313559
Change-Id: If93860d13fb3161c0b66f7ea9e3e1831b0a2fc1e
2022-08-15 10:10:01 -05:00
jenkins-bot e367136406 Merge "Revert "styles: Set background-repeat: no-repeat for menu tabs"" 2022-08-11 13:11:06 +00:00
bwang 006ea3517b Add collapsed TOC to sticky header by moving the TOC
Visual changes:
- TOC icon in sticky header
- Small update to the narrow screens collapsed TOC spacing when open

Bug: T311103
Depends-on: Ic94fda79bd14856ccda14985d5860aa54d3118d0
Change-Id: I977092f951ba2843816609e706bce4b99583f623
2022-08-11 11:25:21 +00:00
jenkins-bot 310bf970bd Merge "Remove .mw-ui-button styles from user-links overflow menu" 2022-08-10 07:39:39 +00:00
Jan Drewniak 5676097135 Remove .mw-ui-button styles from user-links overflow menu
Removes the .mw-ui-button styles from the userpage link
and create account link in the user menu.

Overrides the userpage redlink style so that the link
remains blue even if the userpage doesn't exist.

Visual changes: userpage link and create account link
in header are no longer .mw-ui-buttton styles, but
look like standard blue links. The user links menu shifts
slightly because of this as well.

Bug: T312157
Change-Id: Id98e566952e5875527f38d1edbc8f6e058af4518
2022-08-08 22:12:07 -04:00
Clare Ming eb597645c3 Refactor TOC A/B test to bucket users on backend
- Include temporary feature requirement for TOC A/B test.
  - Assumes 100% of logged-in users with even/odd user ids
  being assigned to treatment/control buckets respectively.
  - Sampling rates passed in by config are not considered
  during bucketing.
- Update hook for adding needed TOC A/B test body classes.
- Add test for temp feature.

Note: the temporary feature requirement and associated hooks
should be removed once the 2nd TOC A/B test concludes.

Bug: T313435
Change-Id: If9c75235614af289cd50182baab29bec3155eb81
2022-08-08 15:50:28 -06:00
jenkins-bot 0a7588f55b Merge "Remove vector-layout-legacy styles and grid feature flag" 2022-08-08 17:13:42 +00:00
Jon Robson 8a46797eec Express sidebar width in pixel for font size
Bug: T313817
Change-Id: Ic8917bf14eb688f84ca8dfbaea055f93fe829469
2022-08-08 08:25:21 +00:00
bwang ef2b0a2372 Remove vector-layout-legacy styles and grid feature flag
Bug: T313559
Change-Id: I050d0e243186ba4341accc26f8d644f55ff995b7
2022-08-08 08:22:26 +00:00
jenkins-bot f366c2ad9c Merge "Fix collapsible user links issue on tablet breakpoint" 2022-08-08 08:20:21 +00:00
bwang 64566249a3 Fix collapsible user links issue on tablet breakpoint
Bug: T314757
Change-Id: I595d27a03bd607f5b2ab8230e4931a1124222312
2022-08-08 07:59:50 +00:00
Clare Ming 5b55a2f894 Minor fixes to TOC hide/show buttons
Bug: T307901
Change-Id: I37c6b3b4c5c20e914423c311795dbccce2a7b3fd
2022-08-04 15:20:58 -06:00
Jdlrobson 86f39007fb Revert "styles: Set background-repeat: no-repeat for menu tabs"
This reverts commit 1f94104cdf.

Reason for revert: I3427b9ca05957b33a95bba4de4ddf87b61b5ccc7 would
be a more future proof solution to this problem.

Depends-On: I3427b9ca05957b33a95bba4de4ddf87b61b5ccc7
Change-Id: Ie09ccad772e25689c89608bba73c5248a55b4a7d
2022-08-04 17:29:56 +00:00
jenkins-bot 6a92bad382 Merge "styles: Set background-repeat: no-repeat for menu tabs" 2022-08-04 12:10:25 +00:00
jenkins-bot 4f4317c708 Merge "Only apply sticky header offset if it is showing sticky" 2022-08-04 08:08:46 +00:00
Andre Klapper 1f94104cdf styles: Set background-repeat: no-repeat for menu tabs
Images are used e.g. by the ProofreadPage extension.

Bug: T314028
Change-Id: I278fff4f02dd91effe5d8ace2f4a21a437a5114b
2022-08-03 19:00:01 +00:00
Jan Drewniak 4aa5602c52 Followup to ce007e0 - Unify dropdown styles
Provide better compatibility with gadgets that create dropdowns
like Twinkle by explicitly setting the font-weight and font-size
on `.vector-menu-heading`.

This is needed because in legacy Vector, menu headings
were <H3>'s, which have bold text and a larger font size.

Bug: T312157
Change-Id: Ic414cef4c7145740812e590f431294bc85a405b4
2022-08-02 16:57:02 -04:00
bwang 37149c9e67 Remove custom rendering of the user links overflow menu in favor of using 'vector-user-menu-overflow', a vector specific menu bucket in Hooks.php
- Rename 'vector-user-menu-more' class to 'vector-user-menu-overflow'
- Update storybook and tests

Visual changes
- Small intentional change on the create account button

Bug: T306662
Change-Id: I371bb11903d8cdd8f0da89266fcf549050c0da8c
2022-08-01 20:18:46 +00:00
Clare Ming 1d1585d214 Add feature to hide/show collapsible TOC above desktop
- Add hide/show links to TOC template.
- Add i18n messages for hide/show text.
- Add event listener to TOC js.
- Update relevant TOC collapsed styles.
- Update test snapshot.

Bug: T307901
Change-Id: Ic94fda79bd14856ccda14985d5860aa54d3118d0
2022-07-29 14:19:55 -05:00
jenkins-bot 9e0d9ebcd4 Merge "Unify dropdown styles" 2022-07-28 21:26:23 +00:00
Jan Drewniak ce007e059e Unify dropdown styles
This affects all dropdowns in Vector 2022, including the
user menu in the header and the language variants and
"more" menu in the article toolbar.

By relying on shared styles instead of separate implementations,
this change also reduces the size of the skins.vector.styles
module by 1.6kB (uncompressed).

Visual changes:
- The links in the user menu are now blue
- Dropdown links in the user menu and tabs are blue
- The dropdown labels in the tabs are black not dark gray.

Bug: T312157
Bug: T308344
Change-Id: I002d5454838a5516b6ee6c7c38721209ed28508b
2022-07-28 16:41:39 -04:00
jenkins-bot ee91a813d3 Merge "styles: Replace LanguageButton variable nomenclature" 2022-07-27 20:28:18 +00:00
jenkins-bot e4b4f5bf9f Merge "Show ULS button when article exist only in single language" 2022-07-27 20:22:02 +00:00
bwang 7b34e14d25 Page toolbar visual tweaks and code clean up
Visual changes: 11 expected in Pixel
- Elements on the right side of page toolbar are now flush with the rest of the content

Change-Id: Id02cd379687fa292188a447c85951e7a87ade509
2022-07-27 17:10:22 +00:00
jenkins-bot 8e36c72144 Merge "Add "Add topic" button to sticky header" 2022-07-26 22:36:04 +00:00
Ed Sanders 23a5261ef6 Add "Add topic" button to sticky header
Bug: T304187
Change-Id: Ib497eb91ec7548e2ba6d1d474a196ada770f955d
2022-07-26 22:15:02 +00:00
Derk-Jan Hartman e7f0106917 Only apply sticky header offset if it is showing sticky
Only apply sticky header offset to mw-sticky-header-element if the
header is actually sticky, currently at min-desktop-width of 1000px

Bug: T313187
Bug: T313619
Change-Id: I081c694b263a68498468b837cffa1cbea136d36f
2022-07-26 17:57:46 +00:00
Volker E ee7f59171f styles: Replace LanguageButton variable nomenclature
`height-lang-button` => `height-button-lang`
First component, then subtype.

Bug: T313243
Change-Id: Icd053cb64ef0af84b37e27b0dbfc0e8ceb521863
2022-07-26 07:46:42 -07:00
jenkins-bot 9fc2f4403e Merge "Update CSS to allow TOC to be collapsed at larger viewports using grid" 2022-07-25 21:41:42 +00:00
Jan Drewniak 697b5deeda [Refactor] Split MenuDropdown.less for modern and legacy
Splits MenuDropdown styles into modern and legacy styles.

Leaves a common MenuDropdownCheckbox.less file (for lack
of a better name) for common styles related to the checkbox
behaviour and dropdown menu resets.

Adds a new file in common/mixins.less for a shared
dropdown mixin.

Bug: T312157
Change-Id: Ib60b25ea3121843ed5ed54820d6295a81289b332
2022-07-25 20:20:18 +00:00
bwang 4511b94b21 Update CSS to allow TOC to be collapsed at larger viewports using grid
Test by adding .vector-toc-collapsed class to the body
We use grid only when supported for grade C browsers.

Visual changes:
* Slight changes to position of the button and title
(movement by a pixel or 2)

Bug: T311447
Change-Id: Ib16c7b5b35be66776d013833e29f24f3f5316d9b
2022-07-22 20:59:14 +00:00
Jan Drewniak 34a8bc6690 [Regression] Restore proper watchstar icons in Vector 2022
Wrong watchstar icons were specified when splitting the watchstar
into modern and legacy Vector in 3c0559a7.

Change-Id: Ice369f5d81818b093014cf508c2d4336c66368ed
2022-07-22 15:29:04 -04:00
Santhosh Thottingal 40f6c5e29d Show ULS button when article exist only in single language
When the article exist only in one language, currently we do not show
language selector. This prevents showing the entry points to create article
in other languages by various means.

Show the language selector so that options like translate, interlanguage
links, language settings can be shown.

Bug: T275147
Bug: T290436
Depends-On: I42c5d44ec15e291d71723c9738ddb8f0d1cf0b09
Change-Id: I7fb68457c1203d824fe7433c9f272f300a483c44
2022-07-21 16:28:22 -07:00
bwang 2d9585c8e3 Table of contents: Update TOC styles
Visual changes:
* Changes to table of contents text alignment and padding

Bug: T312156
Change-Id: Icfde60d053a786054de6608f2ed4f0b1b5b5b252
2022-07-21 22:30:35 +00:00
jenkins-bot 6ecbd5e970 Merge "Refactor chevron across components + separate watchstar" 2022-07-21 22:01:49 +00:00