Commit graph

88 commits

Author SHA1 Message Date
bwang 25f4bc2a37 Remove @font-size-base from vector-2022
Bug: T367899
Change-Id: I6ec44a10a7bfeb6b03912ca6d5a23eaed046db08
2024-09-26 11:44:57 -05:00
Jon Robson cd44419c95 Use codex link styles in Vector, remove old link color variables
Visual changes: blue and red link colors have been updated to match codex, including hover/focus/active state colors

Bug: T366515
Change-Id: I16411a7ea47ae26c7e67a71f83e0521962c8ce61
2024-06-17 14:23:50 -05:00
Jan Drewniak c3c7462951 [VISUAL CHANGE] Make spacing in UserLinks menus more consistent
Changes spacing around icons in the user-links menus
so that the spacing is more consistently 8px.

Bug: T353987
Change-Id: I860ab858363f0535fd80e3a823cf90f91c2e9a86
2024-04-18 23:49:07 +00:00
Ed Sanders 1637b2bbdf Truncate long usernames with an ellipsis
Bug: T356349
Change-Id: I386a8f2165cb29e06e1752050bbd595eae134492
2024-02-01 18:58:46 +00:00
Jon Robson 0ec9d2ecd6 Remove cache related FIXMES for CSS
Change-Id: I0b8bff3e880bef3e97341c24e40405401381006a
2024-01-09 09:48:06 -08:00
bwang d2b413a721 Make client prefs fully pinnable
Bug: T351141
Change-Id: Ic4a166fb3234b27dbf3d37891abfdf15781c8867
2023-11-22 14:39:28 -06:00
Jon Robson 5a0678c77d Allow client side preferences to render in a dropdown
Known problems:

- For now, this can only be rendered by manually updating
the isClientPreferencesPinned local variable in SkinVector22
This will be addressed in T351141
- The icon is not correct. This will be addressed in
https://phabricator.wikimedia.org/T351142

Bug: T350195
Change-Id: I0b1ec445c4d292bbf417a39dbc5d2032b563f525
2023-11-15 12:50:54 +01:00
Jon Robson 07a26a9448 Refactor VectorComponentUserLinks to not use hooks
Bug: T350195
Change-Id: I6cbf45587475f0477657a7ce9309b2cd42da33c1
2023-11-09 17:32:10 -08:00
Volker E b55d95c70c styles: Replace legacy Vector breakpoint tokens where applicable
Replacing the legacy Vector breakpoint tokens with the Codex
standard ones. All names have been unified, only some legacy values
remain for backwards compatibility.
Also
- replacing a wrongly applied min-width with the correct max-width
  token,
- replacing a width with an equal value min-width one and
- removing the now equal value mobile min-width one.

Note that we can't do some reference magic here alike
`@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as
this would take the Codex value from skin variables and not the legacy
value.
Also note, that we could move all those Vector legacy definitions into
Vector's 'mediawiki.skin.variables.less' file(s), but that would mean
that extensions don't rely on the Codex default values, but on Vector's
and we want latter to move to the standard, also in foresight of
further standardization to build for all feature teams like a
shared Grid.

Bug: T331403
Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
2023-10-25 22:03:46 +00:00
bwang 5e15edb9a2 Remove unnecessary imports in component stylesheets, make variable and mixin imports consistent
Bug: T345766
Change-Id: I2ae1d1668849a04520b73ac04fe16e1ff7f22fa6
2023-10-03 19:13:21 +00:00
bwang 6a57506ae8 Separate vector-menu classes from Dropdowns
Bug: T319358
Change-Id: Idf05c1664c026f58487ba34af5ede8a11e695baf
2023-06-27 10:14:29 -05:00
bwang edf2c78765 Ensure language button works for no js users,
* Factor out mixin for right aligning menus

VISUAL CHANGE:
Results in a slight change to the alignment of the user menu.

Bug: T339321
Change-Id: I5c3a03161b1f2372d2ca25ba47dcd40065f4f2cc
2023-06-22 21:17:46 +00:00
Jon Robson 24d69726f3 Drop styles for cached HTML
Performance: This reclaims 1.3kb of CSS.

Bug: T336526
Change-Id: I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d
2023-06-14 10:52:44 -07: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
Jdlrobson 9bb3a003d7 Revert "[VISUAL CHANGE] User links menu is incorrect font size"
This reverts commit 4ef136e7e6.

Reason for revert: This is made obsolete by
Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a when wmf/1.41.0-wmf.8
has been cut.

Change-Id: I1d6c737b6a2d9fa2d123d29a1e0ab740a854c9e5
2023-05-17 00:26:42 +00:00
bwang 256cedbc63 [Visual change] Limit link spacing in user links
Limit it to below desktop viewports

Bug: T323244
Change-Id: I43ccf6db47e1723c953fbbec38eca7c95053ba70
2023-05-12 19:27:17 +00:00
Jdlrobson 4e16323ae3 Revert "Remove extra spacing from username/create account link"
This reverts commit b6603a591f.

Reason for revert: Causes the login and create account to be flushed
together (will add screenshot on ticket)

Change-Id: Ib25f21e85eb9984dfa9fcf50a50198c5d2ba7bed
2023-05-12 15:24:30 +00:00
sushrith b6603a591f Remove extra spacing from username/create account link
Bug: T323244
Change-Id: Id0e8a9ffaec3389e75a2a9c3cb068649aff77543
2023-05-11 22:42:36 +00:00
bwang d8bcb73647 Update user menu and watchstar buttons to be consistent with spec
Depends-on: Ibd762c810e1d89047e39ce3af792b43689bf11e3
Bug: T335909
Change-Id: I5b42780416b466cc3fc33d29220aef2979ac3239
2023-05-03 15:47:00 -07:00
Jon Robson 4ef136e7e6 [VISUAL CHANGE] User links menu is incorrect font size
Increase from 14px to 16px

Expected 10 visual changes in the header

Bug: T334881
Change-Id: I1fbab2f887563254018473cc132558b6cf366285
2023-05-02 17:38:14 +00:00
Volker E 4efefdc420 styles: Remove 'mediawiki.ui/variables' call
Removing 'mediawiki.ui/variables.less' `@import`, which is now
fully replaced by skin-aware 'mediawiki.skin.variables.less'
standard.
Bumping required MediaWiki core version to >= v1.41.0.

Also
- replacing deprecated keys with new Codex token equivalent keys

Bug: T319381
Bug: T332541
Change-Id: I87bd258a24d8ca8b789f8355fe6495eca4cebb85
2023-04-25 12:58:30 -07:00
Jan Drewniak 3aaf8666cd Remove CSS selectors for Page Tools feature flag
This removes CSS selectors associated with the Page tools
feature flag, i.e. `vector-feature-page-tools-disabled` as
well as `vector-feature-page-tools-enabled` by removing
the 'disabled' styles and integrating the 'enabled' styles
into the default page tools code.

Bug: T332090
Change-Id: I382e12ca7ce741a3071582ffa84da03c2ba9e343
2023-03-31 11:34:37 -05:00
Umherirrender f3dfc9df1e build: Updating npm dependencies
* stylelint-config-wikimedia: 0.13.0 → 0.14.0

Run stylelint fix to fix the new stylelint rule

Change-Id: I3f9e528ca9f8292a9e3630356f0e8bf5df5f6609
2023-03-28 22:22:36 +02:00
bwang d74abe5dd6 Clean up user links cached HTML code
Bug: T289212
Follow-up: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
Change-Id: I139750136b3b83ecfd87c2998aa0769f57d92aff
2023-02-22 23:30:26 +00:00
jenkins-bot 4c8f7a5652 Merge "Revert "Updates for core temp user autocreation feature"" 2023-02-22 22:41:02 +00:00
bwang 8db112ddb3 Fix dropdown icon markup to match Codex button
- Fixes TOC button being transparent (https://jmp.sh/jbuivqlM). FYI the fixed width toggle button has the same issue.
- Add replace `html-vector-heading-icon` with Icon.mustache

Bug: T320453
Depends-on: I9a990ea8de63fb336391bea11b4503d447fb9d4f
Change-Id: I39397f8e98f79a2fdde9a8d785690133ea5a2619
2023-02-21 12:41:44 -06: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
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 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 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
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 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
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
Jon Robson 7c24aa46fb Drop the VisualEnhancementsNext feature flag
Bug: T320101
Change-Id: I6d536af034dafd66c6478183de8029be9ed3e8b7
2022-11-21 13:27:34 -08:00
Jon Robson f31f0bbf50 [Cleanup] Address FIXMES relating to cached HTML
Change-Id: I6f5e97dde1f774e741a4236d1f6b49ad146cc236
2022-11-15 23:23:56 +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
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
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 702e585154 Merge "Limit user dropdown link to 48px" 2022-10-26 21:23:59 +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
Jon Robson f94e386f85 Limit user dropdown link to 48px
Bug: T319070
Change-Id: I483e728870c059a1945d3dc4f395f04250b29cc7
2022-10-25 00:29:39 +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
Jdlrobson d1ef0d3aaf Revert "Visual enhancements next: Fix alignments of icons"
This reverts commit 2a2496f818.

Reason for revert: CSS rules meant for the new feature flag
were leaking into the non-feature flagged version of Vector which
was not intentional. I'll repost this change shortly.

Bug: T319070
Change-Id: I05504ee6f86c99d4b4cf686066f852ecbe98ee87
2022-10-04 00:17:21 +00:00
Jon Robson 2a2496f818 Visual enhancements next: Fix alignments of icons
* Add 8px margins between mw-list-item in header
* Fixes vertical alignment on watchstar
* Fixes alignment of Echo icons

There should be no visual regressions (on master with defaults)
with this change.

Bug: T319070
Change-Id: I410c051da2129d6de10bc762e1b484cf30b6dab3
2022-10-03 20:59:08 +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
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
bwang 64566249a3 Fix collapsible user links issue on tablet breakpoint
Bug: T314757
Change-Id: I595d27a03bd607f5b2ab8230e4931a1124222312
2022-08-08 07:59:50 +00: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
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