Commit graph

98 commits

Author SHA1 Message Date
bwang eb64a09a7d Separate dropdown/menu references in PHP and templates
- VectorComponentMenuVariants.php is renamed to VectorComponentVariants.php, and returns menu and dropdown data
- Remove TabsMenuContents.mustache in favor of MenuContents.mustache
- Fix the variants dropdown to use the full Menu template

Follow-up: Idf05c1664c026f58487ba34af5ede8a11e695baf
Change-Id: I0e9b1ab3306b04ee0d226048c6885beab4f310c6
2023-07-31 14:03:12 -05:00
jaydenb d1c0e6cd6f Hide language alert if there are none and JS is disabled
The languages alert is misleading when there are no languages and the user has JS disabled.

This change adds a class to the alert if there are 0 languages, and then adds "display: none" to the alert if the client-nojs class is present. This is the same approach being used for the language switcher button.

Bug: T326185
Change-Id: Iee292d661ed1f47700f588053712f5f547022b17
2023-06-16 17:30:34 +00:00
Jon Robson 68239ae344 Use Codex for button styles, start transitioning icons to use Codex icon mixins
Changes:
- mw-ui-button to cdx-button
- mw-ui-quiet to cdx-button--weight-quiet
- mw-ui-icon-element to cdx-button--icon-only
- mw-ui-icon to vector-icon
- mw-ui-icon-flush-right/left to vector-button-flush-right/left
- Removes $isSmallIcon param in Hooks.php

85 Visual Changes
- ~36 changes from minor pixel changes from the new button classes in the main menu, language button
- 22 from standardizing the padding of the TOC in page title
- ~10 changes from addition of .cdx-button to the TOC toggle buttons

PERFORMANCE:
This will result in an overall increase of 2.7kb of render blocking
CSS, 1kb will be reclaimed when
I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged.

Co-author: Bernard Wang <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-06-12 16:26:28 -07:00
Func be39b2eb6e SkinVector22: Avoid double-escaping on language selector label
text() should be used as above.

Bug: T327802
Change-Id: I4f809a49db39e2678849fa6c4adb8a31ac0619f1
2023-06-07 01:16:03 +08:00
Jon Robson 7c29c5ff03 Revert "Override mw.experiments.getBucket() via body classes"
This reverts commit b599da4153.

Change-Id: I977b352ee71faa25c3921205025ba326e05a0f9b
2023-05-25 21:38:48 +03:00
Jan Drewniak b599da4153 Override mw.experiments.getBucket() via body classes
When AB bucketing via ABRequirements.php in Vector,
the browser has no awareness of this bucketing and buckets users
once more via mw.experiments.getBucket() in AB.js.

mw.experiments uses a different algorithm than ABRequirements.php,
causing a mismatch between the server-side bucketing
and the client-side bucketing.

This patch overrides that client-side bucketing by
adding classes to the HTML element that are recognized
by AB.js

Bug: T335972
Change-Id: I0549a8dee23ebe7cd68465f8403e4f7aac76633e
2023-05-24 18:21:30 -04:00
bwang c7001374ff Make limited width button consistent with button spec
Bug: T334881
Bug: T326323
Change-Id: I97cd6d9ede39993cd58274eaff2749aa654e4777
2023-05-02 13:32:22 -05:00
bwang dd2284cf16 Update instances of Button.mustache to use to use VectorComponentButton
Bug: T334881
Change-Id: Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a
2023-05-02 18:00:41 +00:00
bwang bed8e2523f Update VectorComponentButton to be able to handle all button designs/variants
Bug: T334881
Change-Id: Ib8735bc4f2fb7a7f6d5c230b9a3c847d8de423b8
2023-05-01 22:41:16 +00:00
Nicholas Ray 29b982999f Remove language switching alert box temporary feature flag
Remove everything related to the `wgVectorLanguageInHeader` feature flag and
rely on the LangaugeInHeader feature instead.

Bug: T297237
Change-Id: Ida2c588e03f759d2eefc7c67ff44dcdd9a100f9a
2023-04-27 14:57:18 -06:00
Jan Drewniak 3cea6d4132 Scope styles related to zebra feature flag
This change scopes the styles related to the Zebra
update by wrapping the imports in a top-level feature
flag selector,
i.e

.vector-feature-zebra-design-enabled {
    @import "./screen.less"
}

To account for this extra selector, ampersands are
added wherever the html element is targeted in the
affected files. This applies to both zebra enabled
and disabled files.

getDefaultModules() is used in SkinVector22.php to
conditionally load the new skins.vector.zebra.styles
module when the feature is enabled.

Bug: T332600
Change-Id: I5e673df383ff31f296010f982e4188c82f095590
2023-04-19 23:09:08 -04:00
bwang 4f76994970 Add custom limited width popup
Bug: T333601
Change-Id: I663d6a391aeeb05c27f2f2b8829c22325b528b39
2023-04-17 22:35:52 +00:00
Jon Robson 146de6396e Remove vector-feature-page-tools-enabled class
Bug: T332090
Change-Id: I8d20cc4f5db3d2a612fecf03dce6eaa99e1ef2a7
2023-04-04 15:16:05 -07:00
Jan Drewniak 15be8a0340 Remove custom sidebar config
Removes configuration for
1. Custom sidebar pinning
2. Default sidebar visibility for logged in & anons

The first config is no longer necessary because
the main menu now uses the pinnable header for
showing/hiding and persisting it's state.

The second config is no longer necessary since
the Page Tools menu moves many sidebar items into
a different location.

Bug: T332090
Change-Id: Iaf25237757dc1e43e096b8c5991e9dd31ad25c2d
2023-03-31 13:09:04 -04:00
Jan Drewniak 40bbb8c3a9 remove Page Tools config & HTML
Removes the config option for Page Tool menu,
its associated logic, along with the associated HTML from
the mustache templates.

Hardcodes the `vector-feature-page-tools-enabled` class
into the HTML element to prevent breakage.

Bug: T332090
Change-Id: I6466d80c6970bcc8e28d897b6bdff911a90e3655
2023-03-30 11:32:36 -04:00
Ed Sanders 8642dbd423 Hide language menu in sticky header on non-subject pages
On non-subject pages we should the compact language tool at the
top of the page, and we should show no tool in the sticky header.

Bug: T322153
Change-Id: I4168eb0947f994acb25759c6118567c49796a055
2023-03-22 15:27:08 +00:00
David Lynch d041a7334e Add logging to the add topic button when it's promoted to the header
Bug: T330191
Change-Id: If3ccbe82e85fdedcbb34b43f6d34c83caa08eae3
2023-03-07 16:03:23 -06:00
Ed Sanders 091705df88 Switch order of "Add topic" and language dropdown
Bug: T267444
Change-Id: I09ed155b43665dd13c258e37870778a3c7ce446d
2023-03-07 16:02:36 +00:00
ksarabia 74addde337 [WIP] Removes the TOC class in body and adds in html
Adds new constants for TOC and registers feature.

Bug: T325032
Change-Id: I5e0f5f3a6d186b245bdbc98c2bb9e4cc17a03fdb
2023-02-28 17:21:16 -06:00
Ed Sanders 77734b1597 Add feature flag to "promote add topic" feature
Will be used to control rollout to WMF wikis but can
default to true here.

Bug: T267444
Change-Id: I716563efffc2401fbf5f8b53876a8b58706b1cda
2023-02-24 13:48:29 +00:00
Ed Sanders d90d1d17b1 Promote "Add topic" button to PageTitlebar
Bug: T267444
Change-Id: I813908d65640566a61eac51d6f55a3b4d3e9537d
2023-02-24 01:33:47 +00:00
jenkins-bot ffc69eca91 Merge "SkinVector22.php: Add missing typehints" 2023-02-23 23:34:51 +00:00
Ed Sanders 01e11d68b9 SkinVector22.php: Add missing typehints
Change-Id: Iebb92f74809de5945186716ae707fc85c3ad8e05
2023-02-23 11:21:59 +00:00
Jon Robson f2fb827630 Revert "Updates for core temp user autocreation feature"
This reverts commit 8d0659b1e6.
The logic for temporary users is now centralized inside
MediaWiki core, so Vector has no need to check whether a user
is temporary and instead work with the data it's given.

Depends-On: I36815aaef81ec7368e240a780e90bd574785df74
Bug: T328725
Change-Id: Ie30dd6a77ef391f74a435e0b9df74793ffdf73bb
2023-02-21 11:30:27 -06:00
Jan Drewniak 696c2c902e Add label text to TOC toggle buttons
Adds a label to the TOC toggle (i.e. hamburger)
buttons near page title and in the sticky header.

Bug: T328584
Change-Id: I9c6e62715eaa4eca05b7fb53385c5ab8cf2431e3
2023-02-16 09:09:03 -05: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
Jon Robson d2eb3c4e55 Disable languages on history page
Bug: T328996
Change-Id: I895bea1e7d3e0c23bcc60395e562297e016d1f5a
2023-02-07 19:27:56 +00: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
bwang 766249492f Move Log in link to overflow menu
Bug: T289212
Change-Id: I585bf644eeb68832cb0db079abd9f34256c0a1fe
2023-02-06 17:15:49 -06: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
jenkins-bot 7812db242e Merge "Make sticky header edit the default" 2023-01-30 19:02:31 +00:00
jenkins-bot 57c8e24b35 Merge "Remove VectorComponentTableOfContentsContainer in favor of directly using VectorComponentPinnableContainer," 2023-01-25 19:38:20 +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
Jon Robson 93c833030b Make sticky header edit the default
In production this is always true, so remove feature flag.
Retain A/B testing code in case it is still needed.

Bug: T324799
Change-Id: Ia2057eb69d0a8d3e6e51acb5729a4399fb17a18b
2023-01-24 19:48:48 +00: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
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 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
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
Jon Robson 8d6ef47699 Refactor SkinVector22::getTemplateData and add test coverage
Bug: T318434
Change-Id: If06e6618adaae614ea7fe9b803b1f4fd80170d59
2023-01-05 22:46:05 +00:00
bwang 7f2118e756 Update header spacing to match spec
Bug: T324877
Change-Id: I47be192f5ba726904dc225afd54ee9112e97dc10
2022-12-20 17:58: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
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 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 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 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