Commit graph

933 commits

Author SHA1 Message Date
jenkins-bot a7dcf88b06 Merge "VisualEditor toolbar should use notheme" 2024-06-05 22:44:08 +00:00
jenkins-bot e1a73d9956 Merge "Make paragraph spacing 0.5em top and 1em bottom by default, handle adjacent inline elements manually" 2024-06-05 19:42:38 +00:00
bwang 716aad56af Add width exclusion notice
Bug: T366216
Change-Id: If50e9adcec6f2fa139e793b3a8108f3b4dd689ca
2024-06-05 19:15:11 +00:00
Jon Robson 8bb2e7d0ae VisualEditor toolbar should use notheme
For now, let's exclude VisualEditor's toolbar from the night theme.
This should result in no visual change, but will make sure it and
its associated icons are not impacted by the roll out of OOUI.

Bug: T365764
Change-Id: Id626a75dbdeddc8809e4ea75eba3c0fd6d2b08fe
2024-06-05 18:13:21 +00:00
bwang 225a02ff20 Make paragraph spacing 0.5em top and 1em bottom by default, handle adjacent inline elements manually
Bug: T366389
Change-Id: If83c7af5ccd4147bcf9b45436c905efac865b98a
2024-06-05 16:02:13 +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
ksarabia 17a71f3c82 Adds invert exception for dropdown
* Adds a filter invert rule for toggle

Bug: T365035
Change-Id: Id04e3937ff1ef3982563003346fda07348ae26ea
2024-05-24 11:55:20 -05: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
Moh'd Khier Abualruz 4d97e0a4fb fix(vector): Set popup notification color to inverted
Updates `CSSCustomProperties.less` to include `.oo-ui-popupWidget-popup` in
`@OOUIOverrideSelectors` for inverted color inheritance.

Bug: T364798
Change-Id: I6c3ac79d24f6af71a9171153e346494fb97acd3f
2024-05-22 16:53:26 +02:00
Jon Robson 70fbd6f0c2 Small font size is not applying to excluded pages
Bug: T364887
Change-Id: Ib24beb3a383599dcc3ad64e01992ead908e3bef3
2024-05-21 23:41:35 +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 b33513e20b Merge "Override default sublist styles" 2024-05-17 21:08:51 +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 ff894e3682 Override default sublist styles
Bug: T364865
Change-Id: I179c059992b2ae614b984b8023774306764ccb57
2024-05-17 15:46:41 +00:00
bwang f13bc5ed80 Remove list-style-image used by ul elements
Bug: T364865
Change-Id: Id365e946e8c71f4812cbb9e4b00618fb73572554
2024-05-15 15:01:40 +00:00
Jan Drewniak 0d1de4773d [Follow-up] Override VE overlays in night-mode
Follow-up to 26d39ec, change VE overlay selector
from `.ve-ui-overlay-global` to `.ve-ui-overlay`.

Bug: T363861
Change-Id: Ie531ce6d03d81fbce374f7e17c785d4bb076bfda
2024-05-14 14:30:56 -04:00
Jan Drewniak 26d39ecafa Override VE overlays in night-mode
Creates a Less variable `@OOUIOverrideSelectors` which can serve
as a list of selectors that we want to treat the same as the `.notheme`
class (as an alternative to adding the `.notheme` class across repos).

Adds only one selector to this variable, `.ve-ui-overlay-global`
in order to force VE overlays to appear in light-mode while night-mode is
enabled.

This is a temporary measure until T363849 is resolved.

Bug: T363861
Change-Id: I3e3a209f1a9bd9130fc61915b9b2ff7134405e59
2024-05-13 21:58:20 +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
jenkins-bot c3987d472b Merge "Rename client preference menu to appearance menu" 2024-04-29 20:41:19 +00:00
bwang 0109218ab9 Rename client preference menu to appearance menu
Bug: T362808
Change-Id: Id6800d38eebf433cf0c9e3f179dd83df2eefd1fb
2024-04-29 15:38:20 +00:00
Jon Robson e84ec101f7 Prepare variables for night mode
* Drop all hexcodes
* Drop unused background-color-secondary - only applies in legacy
skin and replaced by background-color-secondary--modern
* Drop unused  border-color-content and border-color-content--tabs-inactive -
only apply to legacy Vector skin

Bug: T354889
Change-Id: Ie0accaaac2ac3717b6f034c5832f8c372b91c343
2024-04-25 21:29:23 +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
jenkins-bot f0673ac58a Merge "Use client preferences for appearances menu" 2024-04-16 18:02:38 +00:00
Jon Robson c8442ba32e Drop background base declaration
This has been confusing a few editors and breaks support with
Extension:DarkMode so let's remove for now.

Change-Id: I84a58b49f8f3d5af8765531bc14c43b42fe39a1d
2024-04-15 16:06:41 -07:00
bwang c69a53a16c Use client preferences for appearances menu
Bug: T361586
Change-Id: I636a557e724f23ea18da135bac59cb304ba81091
2024-04-15 22:36:48 +00:00
jenkins-bot de06d9e104 Merge "Add h1 headings to fix for applying font-sizes" 2024-04-05 07:04:34 +00:00
Arlo Breault ff2e6a48ec Add h1 headings to fix for applying font-sizes
h1 headings can be created in wikitext but are discouraged.  They
nevertheless appear in the corpus.

https://www.mediawiki.org/wiki/Help_talk:Formatting#Level_1

Bug: T359881
Follows-Up: I15eaf43c6750c76363ec804eda9b8ca6ec4709c2
Change-Id: I1caa6809e1be14f87c791faac852610a522d1c5e
2024-04-04 13:19:17 -04: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
Moh'd Khier Abualruz b3ab84f9e5 Vector - Rename the skin night mode classes to more readable classes
The classes:
- skin-night-mode-clientpref-0
- skin-night-mode-clientpref-1
- skin-night-mode-clientpref-2
is being replaced with
- skin-theme-clientpref-day
- skin-theme-clientpref-night
- skin-theme-clientpref-os

Other Changes:
- Change vector-night-mode preference to vector-theme
- Add skin-theme-os-label and other messages to skins.vector.clientPreferences
- Remove skin-night-mode-* messages from skins.vector.clientPreferences

Bug: T359983
Change-Id: I31eb086e623a97df9fbd004425559e05b0cae170
2024-03-20 23:54:47 +00: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
jenkins-bot c38e0677c3 Merge "Migrate uses of codex-search in Vector to use CodexModule" 2024-03-13 16:27:55 +00: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 0531fbd117 Increase line height for medium and large font settings
Bug: T359030
Change-Id: I5be2e06c01c1959241d8d5347cb4f37c62c7cee2
2024-03-12 14:25:19 -05:00
Jon Robson 9048285310 Address FIXME relating to use of !important
The !important is no longer needed now that T354975 is done.

Change-Id: I62d9dfd03064167851a34e25751919b73734d1e2
2024-03-08 16:40:39 -08:00
Moh'd Khier Abualruz fb734a46f6 Interaction to Next Paint (INP) Core Web Vital Improvement
According to a Google contact, given we set viewport to 1000px
for mobile devices viewing Vector get a tap delay.

The solution was suggested in https://developer.chrome.com/blog/300ms-tap-delay-gone-away?hl=en
and Peter has confirmed helps improve performance.

A supports query is added to limit this rule to only browsers where
it applies.

Bug: T358380
Change-Id: Ifd7d8951e06e3ba0faaed354492d23e6e0bc8f69
2024-03-07 16:53:06 -08: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
Jon Robson 9f1b94ce20 Correct how font sizes apply to headings
The margin and font rules are being overriden in DiscussionsTools
using equal specificity. The correction to the load order in
ResourceLoader skin module in
I83ac918ad8807c65aab2cd1dd8d7d2cd34b512af will break this.

Bug: T354975
Bug: T357929
Change-Id: I15eaf43c6750c76363ec804eda9b8ca6ec4709c2
2024-02-20 19:38:56 +00:00
jenkins-bot f004beb8a1 Merge "Provide a visual hint that night mode is being triggered in Vector" 2024-02-14 05:27:47 +00:00