Commit graph

24 commits

Author SHA1 Message Date
Jan Drewniak 8a3e24e346 Simplify TOC design for pinned TOC on no js small viewports
Bug: T340571
Change-Id: Ie34d7d478b3a73cade9f5328439515e419692eb7
2023-10-16 23:31:18 -04:00
bwang 2eb8fe89ea Remove unecessary whitespace and new lines from HTML
Change-Id: I8fe04d458da292e2990543afa232a91b6dd4db59
2023-07-06 14:07:29 -05: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
bwang b1688baeb5 Update no js collapsed TOC button consistent with spec
Bug: T334881
Change-Id: I208acad3071a07ba4d9ba44ae54fba5af011355c
2023-05-02 20:40:42 +00: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
Jan Drewniak 6e8a98ca8b Remove custom checkbox-hack implementations
Removes several styles that were used for
expanding/collapsing the table of contents at narrow
widths for non-js users as well as the main menu
for no-js users.

Existing `.vector-menu-checkbox` styles address this
use-case with the addition of a display:none rule for the
two affected checkboxes.

Related to the Page Tools clean-up since these styles
were once scoped to the .vector-page-tools-disabled
class.

Bug: T332090
Change-Id: I13efd4a87bacecb0e9f5a5e44d5e15861d632c62
2023-04-04 10:01:09 -04: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
bwang 392a2f0e97 Only render TOC related HTML when TOC is available
Bug: T328719
Change-Id: I3484a790ce8ebadf21054ac1d222d5632b2dc5a4
2023-02-27 16:31:03 -06:00
Ed Sanders d90d1d17b1 Promote "Add topic" button to PageTitlebar
Bug: T267444
Change-Id: I813908d65640566a61eac51d6f55a3b4d3e9537d
2023-02-24 01:33:47 +00:00
Moh'd Khier Abualruz efe33d5d76 Ensure ToC is always accessible via landmark region (<nav>)
- We had to add nav element to wrap TOC in all places
- Make sure proper nav is only displayed so landmark do not get confused
- Remove Eslint block on rules compat/compat for no support IE 11, this was blocking commit
- Run lint:fix:js and lint:fix:styles
- Fix maxSize in bundlesize.config.json

Bug: T324505
Change-Id: I36d26240b87de33318ff1edf97a410872a438103
2023-02-21 22:19:52 +01:00
jenkins-bot 57c8e24b35 Merge "Remove VectorComponentTableOfContentsContainer in favor of directly using VectorComponentPinnableContainer," 2023-01-25 19:38:20 +00:00
Ed Sanders 7323d6af4e Use tabs consistently in .mustache files
Change-Id: I3874b8a03f8a512a4d31f4c85a030de63cbc3c69
2023-01-17 11:48:34 +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 0c0ce631ee Components: Model table of contents in title bar.
Bug: T320927
Change-Id: Icd871e1bdf4ab0c7aa5b906b913416f4b1747750
2023-01-11 15:42:23 -08: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 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 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 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
Bernard Wang 15d95fc24a [Technical] Split up Menu.template, restrict decoratePortletData to legacy Vector
Changes:
* Code is moved from SkinVector to SkinVectorLegacy verbatim since it is now only
needed by SkinVectorLegacy
so we remove it:
** This step broke MainMenu rendering so this was captured in VectorComponentMainMenu
** The isLegacy code no longer makes sense and is removed in a follow up

* storybook no longer run on CI

Authors: Bernard Wang and Jon Robson
Bug: T321102
Bug: T319349
Change-Id: Ib424ca1c767161fdae8c0aeedfe662b7fa039ff6
2022-11-02 21:22:50 +00:00
Jon Robson 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
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
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
Renamed from includes/templates/ContentHeader.mustache (Browse further)