Commit graph

69 commits

Author SHA1 Message Date
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
Jan Drewniak 3c0559a71d Refactor chevron across components + separate watchstar
Consolidates the CSS responsible for styling chevrons into one
implementation. This removes the need for custom padding and
background positioning for the following components:

- "more" menu
- user menu
- watchstar
- language button
- languge button in sticky header

Instead of absolutely positioning the chevron on these components,
the parent label element is set to `display: inline-flex` so that
the chevron is vertically aligned and given enough space by default.

The watchstar, although not a chevron, is also given the
`display: inline-flex` treatment so that it can be aligned with
other elements in the toolbar.

This new implementation requires splitting the watchstar
component into legacy and modern due to a quirk in Firefox that
causes a bug with the watchstar in legacy Vector.

NOTE: This change causes visual changes due to the difference in
centering the chevrons via flexbox vs percentage positions.

Bug: T308344, T310838
Change-Id: Ie9e0fce1366cd25a5899fee49770de4a09424fe2
2022-07-21 10:14:21 -04:00
Volker E 8d21f557c1 styles: Use default border-width and border-style vars
Bug: T313243
Change-Id: I8e40fbcff3d739318f6a53104128ed52ef8f294f
2022-07-19 05:11:39 -07:00
bwang 8a88f61e89 Introduce media query breakpoint variables and replace all media query usage with new variables
Pixel shows 15 regressions, these are expected changes that are
fixing issues on specific viewports that fixes the following:

[At exactly the tablet breakpoint]
* the more menu dropdown was being
shown at the same time as the other menu items, resulting in duplicates
(see https://phabricator.wikimedia.org/F35285379)

[At exactly the desktop breakpoint]
* The table of contents AND the
table of contents toggle button to the left of the title were showing
(see https://phabricator.wikimedia.org/F35285392)
* The sticky header was not showing
* The fly out table of contents was showing instead of the sidebar
table of contents on scroll
* The top of the sidebar is brought into alignment with the tabs
(see https://phabricator.wikimedia.org/F35285408)

Bug: T310536
Change-Id: I6e870a032c8ba4ec003d00ff3f91732aaa2f38b0
2022-06-28 23:19:52 +00:00
bwang 4ab798441e Refactor SkinVector to use Hooks::updateMenuItems code to process menu data
SkinVector and Hooks both had code to add classes and handle Vector specific template data. This patch simplifies the way we handle menu data to always use Hooks:updateMenuItem. This has an additional side effect of removing instances of mw-ui-icon-before.

Bug: T306628
Change-Id: I73514a0eada4d92705b70e7c2ebd91092fc12544
2022-06-28 21:53:51 +00:00
bwang d6e1dbd843 Move menu border style to legacy
Bug: T309398
Change-Id: Idfd88d98cb51ee35a359eef90ed54bc0a9feea87
2022-06-08 21:23:23 +00:00
Ed Sanders 7f7d5c4ae5 build: Update stylelint-config-wikimedia to 0.13.0
Change-Id: I122005b6817cf1997002dbe7a1bcbd249c9842cb
2022-05-16 17:44:12 +01:00
Tim Starling 8d0659b1e6 Updates for core temp user autocreation feature
* Use pt-tmpuserpage for the temp user name.
* Use the userAnonymous icon for the temp user personal tools menu.
* Suppress the logout menu item for temp users.

Depends-On: Ib14a352490fc42039106523118e8d021844e3dfb
Bug: T300263
Change-Id: I8ac5de82f76a9ec58b0fbef85546bc7fd5b793d2
2022-04-28 20:32:53 +00:00
jenkins-bot fc897266bc Merge "Use explicit line height for user menu items" 2022-03-03 17:47:44 +00:00
Mortal303 ab11cc9adb Update Vector menu CSS to use vector-menu-heading instead of h3
Replaced h3 tag in includes/templates/Menu.mustache with label tag.
Replaced h3 elements in .storybook/icons.less, resources/common/components/Menu.less,
resources/common/components/MenuDropdown.less, resources/common/components/MenuPortal.less,
resources/common/components/MenuTabs.less,resources/skins.vector.styles.legacy/components/MenuDropdown.less,
resources/skins.vector.styles/components/UserLinks.less, resources/skins.vector.styles.legacy/components/Sidebar.less
and resources/skins.vector.styles.legacy/layouts/screen.less
by vector-menu-heading.

Bug: T290280
Change-Id: I6eee7d6bc47c74a62166d4579fd4d3da3dc88e88
2022-03-02 20:05:36 +05:30
Nicholas Ray 416f4c3284 Use explicit line height for user menu items
IE11 doesn't support the `initial` value which results in hidden user
menu item text. Instead set an explicit value.

Bug: T298746
Change-Id: I89511419b2d2c753be96f9c1eb842ef80623bce7
2022-01-06 17:52:15 -07:00
bwang 54639c4af3 Fix icon button spacing, make it consistent with margin defined in core
Since a margin was added to adjacent sibling spans of icons (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/736919), Vector icon buttons have had too much spacing. This patch removes the extra spacing defined in Vector CSS and the accidental whitespace that was included in the ULS buttons..

Change-Id: I308d1941c5f82cb144c2a9d233fbf44c730413a7
2021-11-18 18:55:00 +00:00
jdlrobson 95e3271e79 Address cache related FIXMEs
Follows up the sticky header search refactors
in caed16e

Change-Id: I5832bc04f0c675ff8bc1a00fff17b6b9f8399e6e
2021-10-05 21:53:09 +00:00
jdlrobson b88f2970f7 Simplify how we generate icons and button classes in Vector
- Separate icon classes from button classes in user links/language
- Upgrades the personal tools language button preference to
a mw-ui-button with icon
- Adds a generic selector for dropdown menus without an icon
- Cleans up user links CSS now mw-list-item class is available
- Removes icon hack CSS

Bug: T289630
Bug: T283757
Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9
2021-09-03 19:25:31 +00:00
Nicholas Ray 5ca9d00d55 Set responsive max-width on username in header
Per T287522#7295558, the username should have a computed max-width of
200px above 1200px and a max-width of 155px below 1200px.

Additional changes:

* Use flex-wrap: nowrap on header instead of wrap. I think the former
may have been an unintended consequence of the consolidated links
feature flag clean up.

* Use core's text-overflow mixin for both the username and the usermenu
items

* Change the user menu's max-width to use relative units

Bug: T287522
Change-Id: I536e6371f85ccde75673af46c7667eb447eff081
2021-08-31 17:06:35 -06:00
bwang d15005408f Improve readability of anon user menu for screenreaders
Bug: T288293
Change-Id: I10ca58aa492447f179c0ce12eabc0cd1ce4e9d9b
2021-08-26 12:58:10 -05:00
bwang 21c273af1f Override user menu line height
Bug: T288540
Change-Id: I30810de5ba36e082a4e8a1f6f93f34c99344dae8
2021-08-12 19:56:05 +00:00
bwang 7aeda662a5 Ensure emptyPortlet class cannot hide user links menu
Bug: T28819
Change-Id: Ia477439f28d5a3ac98cfc28385f179ca72946c26
2021-08-05 13:38:17 -05:00
Nicholas Ray 8c36871f1b Add max-width to user menu and text-overflow: ellipsis
When implementing how to cut overflowing text, a white fade out was
considered instead of an ellipsis, but that implementation brings
additional complexity when considering the user menu's hover states.

Therefore, the widely used `text-overflow: ellipsis` was used instead
with approval from the designer [1]

[1] https://phabricator.wikimedia.org/T287522#7255400

Bug: T287522
Change-Id: I49e6084bd621ca1637fbd167c8eaf8c07ee695ca
2021-08-03 16:59:52 -06:00
Nicholas Ray f62e1997f5 Fix padding/positioning of the user menu orange talk message notification
The padding-top of the orange notification set in
ext.echo.styles.alert.less was being overriden by the `padding-top: 0`
set in UserLinks.less which was intended to only override the padding
set in Menu.less.

This commit:

* Scopes the li styles in Menu.less to apply only to the legacy user
menu (found in both legacy and modern vector with the consolidated user
links feature off) which appears to be the only menus that needs these
rules.

* The padding-top previously in UserLinks is no longer needed as a
result of the above point.

* Adjusts/cleans up the positioning of the orange notification by
removing an unneeded margin/padding-top and setting the top to 100% (the
previous `calc` statement was unintentionally resulting in 112%).

Bug: T287633
Change-Id: Ia7069d291f53d8e0e0e576d7b96b7a8b1a6cb29d
2021-07-28 16:35:08 -06:00