Commit graph

545 commits

Author SHA1 Message Date
Jon Robson 9695647608 VISUAL CHANGE: Use mask-image for all Vector icons
Visual changes are subtle, but impact 43 scenarios. The color
and positioning is slightly modified to match Codex.

Bug: T363920
Change-Id: Ie5c88e0aa243f73f2dc9f310d18fd59b831edc64
2024-08-29 17:17:35 +00:00
Bartosz Dziewoński cb58da455e Fix workaround for position: sticky disabling subpixel rendering
Follow-up to badd229bab. Moving
`position: sticky` to the same element as `contain: paint` defeated
the workaround. Move it to the parent elements again to make it work.

Bug: T373066
Change-Id: Ic942bfd599661a29cf7b2dbb6c6cc2ec521b8c82
2024-08-22 02:31:19 +02:00
Jdlrobson 2d281db7b1 Revert "Prevent dark-mode styles from affecting print media"
This reverts commit b3ca12e628.

Reason for revert: Icons are appearing black on black in dark mode
in origin/wmf/1.43.0-wmf.18.

Change-Id: Ifdf3970c77b66e5a7835ca44eb45deec2b44eb43
2024-08-13 07:24:28 +00:00
Jdrewniak b3ca12e628 Prevent dark-mode styles from affecting print media
Prevents dark-mode styles from affecting print media
by adding `@media screen` to dark-mode related styles.

Bug: T371331
Change-Id: I2ed7fbfc078c6d738c13a71c677783f7ccea2582
2024-08-08 16:06:33 -04:00
Amir Sarabadani c413509dcb Footer: Add styles for buttons
What:
Add styles for the footer buttons that reduces the padding from 15px to
8px on each side and adds an explicit background color.

Why:
This makes it follow the design spec outlines in T256190#9770626 and
fixes showing the buttons in the dark mode T256190#9900443

Bug: T256190
Change-Id: Iae144d554b5023fd3589ea29ae2d3c57c17e679f
2024-06-25 16:43:41 +02: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
Jon Robson 426ff06241 [Optimization] Remove bottom dock styles from critical path
These require JavaScript to work, so hide it by default and then
style it once JavaScript has loaded.

Change-Id: I34ded9f279600945ab18dd7ecfd69d22e141a324
2024-06-14 22:56:52 +00:00
jenkins-bot 74d5cd5cfc Merge "build: Updating stylelint-config-wikimedia to 0.17.1" 2024-06-13 12:22:06 +00:00
Steph Toyofuku 799c2be819 Remove not selector and target OOUI icons for inversion only
A number of icons using the vector-icon class that have been converted
to codex are being double inverted by this rule.  Instead, switch it to
enumerate the full list of OOUI icons and invert them, so that
subsequent codex migrations can be easier as well

Also bumps the bundle size to account for the increase in bytes

Visual change for the table of contents arrows being fixed, ideally not
for anything else

Bug: T365951
Bug: T365580
Change-Id: Ia389e73c72432eb5f7a2df4ff9b48593751bc184
2024-06-11 16:51:14 -07:00
libraryupgrader 5763df6bf4 build: Updating stylelint-config-wikimedia to 0.17.1
Change-Id: I7c1411a3aac14cf6fb4fdbb762b0de22b348b73f
2024-06-10 14:00:06 -04:00
bwang 716aad56af Add width exclusion notice
Bug: T366216
Change-Id: If50e9adcec6f2fa139e793b3a8108f3b4dd689ca
2024-06-05 19:15:11 +00:00
Volker E 783d67e077 Replace border-color-portal-heading with Codex border-color-subtle
Replacing Vector specific variable with standard token that is meant
for exactly the applied use cases.
Note, I've left `border-color-subtle-transparent` because of that
extra engineering leg. I assume it was meant for animating the property,
which is not there. It seems better to me to replace this variable too
with `border-color-transparent`.

Change-Id: If264e04e576f044b98ec0d61b085f65af0110b6d
2024-05-28 14:29:20 -05:00
Jon Robson 48b0eeac2f Icons should not repeat at larger font sizes
Bug: T365731
Change-Id: I539f906e06bb2dc133885092dbacb851fd774c23
2024-05-24 20:32:46 +00:00
Jdrewniak 607e6b39c5 Revert "Add exclusion behaviour for "width" option in Appearance menu"
This reverts commit ff5a61e9c6.

Reason for revert: The behaviour introduced in this patch needs some more consideration.

Bug: T364015
Change-Id: Ieab4ca4084df4f1b5c942fe81c7fb99b058e0623
2024-05-23 23:51:46 +00:00
Jon Robson f4befc068d [Visual change] Limits two row header to mobile devices
I accidentally enabled this on tablet breakpoint.

Follow up to e3d2ab5031
The Pixel UI report should only surface changes on mobile - all
of these are improvements as it means the whole UI is visible in
the viewport.

Bug: T361573
Change-Id: I8aa5699a8fe959c1595d74c03f19c14856f6470f
2024-05-21 11:52:10 -07:00
jenkins-bot 0f9ad1ba67 Merge "Support Vector 2022 at > 320px" 2024-05-21 14:23:09 +00:00
Jon Robson e3d2ab5031 Support Vector 2022 at > 320px
In preparation for enabling responsive Vector on Wikifunctions,
we lower the support threshold to 320px for Vector.

Minor adjustments are made to the header to make it use two
lines at lower resolutions.

Fixes to tables to make them responsive will be made shortly as
part of T330527 which will complete the responsive behaviour.

Bug: T361573
Change-Id: Idbac393ab6ee60100ba0fd6df4b224cc45949bfd
2024-05-17 23:31:37 +00:00
jenkins-bot c570ec099d Merge "Optimize styles" 2024-05-17 18:30:33 +00:00
Jan Drewniak ff5a61e9c6 Add exclusion behaviour for "width" option in Appearance menu
- Adds the notice "This page is always wide" and disables
  the inputs for the "width" options in the Appearance menu
  when pages are excluded via configuration ( `$wgVectorMaxWidthOptions`).
- Changes layout behaviour so that pages in the
  $wgVectorMaxWidthOptions['exlcude'] configuration
  stretch the entire viewport width.
- Stops the width settings in the Appearance menu from
  being hidden on smaller resolutions.

Bug: T364015
Change-Id: Idee294adf3b309e03834276ea75e4ae43b0cffcb
2024-05-17 17:58:19 +00:00
Jon Robson 1d17b4624f Optimize styles
1) Icon optimizations
* Load styles for expand icon in
JavaScript since it relates to table of contents and that is only
enabled with JavaScript
* Drop vector-icon--x-small class since it only applies to this icon
* Remove some FIXMEs to an issue that has already been fixed
upstream

2) Move styles that do not need to be render blocking to skins.vector.js
* Move sticky header to skins.vector.js since it doesn't work without
JavaScript
* Move popupNotification to skins.vector.js since this is never server
side rendered.

Change-Id: I98e6c0826b514aaefcf88f66275bba37125129b1
2024-05-17 16:26:16 +00:00
bwang 337d608a56 Fix red link color in dark mode
Bug: T363778
Change-Id: Iae4fe2d793b8efbb10b54144ce4093c3e2112da2
2024-05-08 14:31:43 +00:00
Jon Robson ca0d404e50 Enable night theme in Vector
- New night theme added via Codex `.cdx-mode-dark();` mixin.
- CSS custom properties separated from skin.less.
- Font-size rem conversion removed since Codex now uses rems.
- bundlesize increased by 1kb ( followup from
Icfcb5c7418061a5727580f0685054356ba4edb72 ).
- Icons that use background-images are inverted for night-theme.
- Linter error fixed for long-lines in clientPreferences.js

Co-Author: <Bernard Wang> bwang@wikimedia.org
Bug: T354889
Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c
Change-Id: I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1
2024-05-02 13:22:59 -05:00
bwang 0109218ab9 Rename client preference menu to appearance menu
Bug: T362808
Change-Id: Id6800d38eebf433cf0c9e3f179dd83df2eefd1fb
2024-04-29 15:38:20 +00: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
jenkins-bot f6c0071bd7 Merge "Add exclusion notice for night mode feature" 2024-04-17 16:44:03 +00:00
Jan Drewniak a3801497b9 Add exclusion notice for night mode feature
If night-mode is disabled on a certain page via the
exclude list in skin.json, then the following class:
".skin-theme-clientpref-excluded" will be added to the HTML element.

In this scenario, the related client-preferences
menu options are visible, but disabled, and a notice
is rendered below the options informing users of this state.

Bug: T361158
Change-Id: I46d335d079a2d27c7a4122e23ac7e479c286b886
2024-04-16 22:38:35 -04:00
bwang c69a53a16c Use client preferences for appearances menu
Bug: T361586
Change-Id: I636a557e724f23ea18da135bac59cb304ba81091
2024-04-15 22:36:48 +00:00
Jon Harald Søby 8416fd3796 Add transparent bottom border to .mw-list-item.vector-tab-noicon
Add a 2px transparent bottom border to .mw-list-item.vector-tab-noicon
in order to prevent visible "jumps" when no item in the list is selected
and one is hovering items (thus giving them a 2px bottom border).

Bug: T361841
Change-Id: I5b6ccd6fc68bab399647c270cf5ef573034bb622
2024-04-04 16:17:25 +02:00
Ed Sanders 84c2e0ae05 Remove unbalanced padding from trailing paragraphs in popups
Bug: T360143
Change-Id: Ieed96c8be61ee4883daaa17d82d1d1214ef85869
2024-03-14 11:42:49 -07:00
Moh'd Khier Abualruz 182bb7519b Migrate uses of codex-search in Vector to use CodexModule
- Loaded new skins.vector.search.codex.scripts module in skin.json, with only the CdxTypeaheadSearch component with codexScriptOnly flag set to true.
- Included skins.vector.search.codex.scripts in the script loading configuration for Vector22 within skin.json.
- Turned off the "interface-message-box" feature within Vector22's skins.vector.styles configuration in skin.json, as Codex now supplies these styles.
- Fix the style selector to add `.cdx-button` to `.vector-limited-width-toggle` in BottomDock.less since using the codex style
- Substituted "codex-search-styles" with "skins.vector.search.codex.styles" in the existing configuration.
- Ensured the availability of skins.vector.search.codex.scripts module for use, marking it in the list of modules in skin.js.
- Modified App.vue to utilize skins.vector.search.codex.scripts instead of @wikimedia/codex-search.
- Update App.test.js.snap to the latest output form
- Update bundlesize.config.json with newest values

Bug: T356677
Change-Id: I7fc223db01171efe6656792530d4b625be4c8edc
2024-03-13 15:58:26 +00:00
bwang 230c837052 Remove language notice
Bug: T353619
Change-Id: I75430c8b1e66158f798fbe27eec4942a089f3931
2024-02-29 17:04:16 -06:00
Moh'd Khier Abualruz cb8be96f3c Table of contents button goes transparent on hover
- Exclude the checkbox in the TOC from the hack done in https://phabricator.wikimedia.org/T333394
- This patch might not be needed as a restructure of codex import to vector could resolve most of the issues

Bug: T344066
Change-Id: I35b2ffa7a761e3ea1460fa97642966486791bab9
2024-02-23 14:10:21 +00:00
jenkins-bot baf9430f30 Merge "icons: restore "background-" CSS rules" 2024-02-22 16:43:09 +00:00
jenkins-bot f10d65e067 Merge "Move pinnable element spacing from the pinnable element to the container" 2024-02-22 15:33:35 +00:00
Eric Gardner d60a644264 icons: restore "background-" CSS rules
Temporarily hard-codes some CSS background rules after Codex's
CSS-icon mixins stopped supplying them upstream (after changing
to use mask-image in icons).

Bug: T358160
Change-Id: I13be424c58b105472ef22f14e4381693f2985cd8
2024-02-21 21:42:46 -08:00
Derk-Jan Hartman 73f53882d5 Make vector-2022 mw-indicators flex-wrap
Using an 8px gap by default. 8px is used a few times in vector-2022.
Wrapping is useful for userpages with a lot of indicators.

Bug: T340810
Change-Id: I75b59c633a6ff7a8bfdc624e6e5ba06f35fb6aee
2024-02-13 21:01:32 +00:00
bwang 809576b341 Move pinnable element spacing from the pinnable element to the container
Bug: T354431
Change-Id: I8acdb29fab7a0cd4bc8578a85509847d43abbab2
2024-02-13 14:48:48 -06:00
jenkins-bot a96dcb1099 Merge "Truncate long usernames with an ellipsis" 2024-02-08 19:23:53 +00:00
jenkins-bot 5a24f61c3b Merge "Fix extra space from pinned sticky container" 2024-02-08 17:45:21 +00:00
bwang de4b9faeba Fix extra space from pinned sticky container
VISUAL CHANGE:
* The gap between the title and the text "From mediawiki"
decreases - this is an improvement.

Bug: T357022
Change-Id: I436171448ca69413a004024157b24d502aa63bea
2024-02-08 17:11:47 +00:00
bwang 5012f7fff0 Zebra selector clean up
Change-Id: I6a942913ae2fec066b97c1824a09bb07a8eeef45
2024-02-08 10:49:49 -06:00
Ed Sanders 1637b2bbdf Truncate long usernames with an ellipsis
Bug: T356349
Change-Id: I386a8f2165cb29e06e1752050bbd595eae134492
2024-02-01 18:58:46 +00:00
bwang 142591afdc Hide limited width client prefs on screen sizes below 1400
Bug: T355331
Change-Id: Ic32cede70645637bdc887cfef23b1e7385a834a3
2024-01-30 02:14:50 +00:00
bwang a48a96a73e Document button alignment edge cases
Change-Id: Ib25fa1af2d76c9cb449002deeea6900d5e501c3c
2024-01-24 12:26:39 -08:00
jenkins-bot 4fdf90c515 Merge "Simplify heading styles. Avoid using .vector-body" 2024-01-16 17:43:49 +00:00
bwang 91c5357917 Simplify heading styles. Avoid using .vector-body
Bug: T352875
Change-Id: Iba444d2324aeb578fa739cb12f1b31fb630c9ec7
2024-01-16 11:16:06 -06:00
Jon Robson 0ec9d2ecd6 Remove cache related FIXMES for CSS
Change-Id: I0b8bff3e880bef3e97341c24e40405401381006a
2024-01-09 09:48:06 -08:00
Moh'd Khier Abualruz f83cca3cc5 [Zebra] Merge skins.vector.zebra.styles module into skins.vector.styles
Merges all of the styles in the Zebra module into the default styles.

- skins.vector.zebra.styles ResourceLoader module is removed.
- FIXME's related to Zebra styles are removed.
- Top-level "&" that were used for scoping to feature-flag are removed.
- `$wgVectorZebraDesign` feature flag is removed.

Bug: T347712
Change-Id: I0177541ae87a5d070d5317629ca38de93613d620
2024-01-09 15:46:11 +01:00
bwang badd229bab Fix nonzebra sticky container scrolling behavior and scrollable indicator
- Remove unnecessary CSS from old grid styles
- Consolidate scrollable indicator styles, delete old styles

Bug: T352464
Change-Id: Id33e6d99dba2c680f02b246bbccf26a2aa7e77d9
2023-12-05 19:32:36 +00:00
jenkins-bot e55034f3ad Merge "Fix misc client pref bugs" 2023-11-27 18:07:10 +00:00