Commit graph

316 commits

Author SHA1 Message Date
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 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