Commit graph

883 commits

Author SHA1 Message Date
jenkins-bot f004beb8a1 Merge "Provide a visual hint that night mode is being triggered in Vector" 2024-02-14 05:27:47 +00:00
Jon Robson 4a2e3f8917 Provide a visual hint that night mode is being triggered in Vector
Working on feature flag not having this is causing confusion. This
will speed up development by allowing me to more easily determine what
mode I am in at all times.

Change-Id: I5d4168bbf7df41f4754b36c6e6aa4955dbc609bb
2024-02-13 22:52:00 +00: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
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
Jdlrobson 98817085b7 Changes to list spacing
Update <p> spacing to improve consistency of ul/ol spacing,
also update heading spacing to be more consistent,
relying on mw defaults more

This reverts commit 8d3bda7867.

Bug: T352875
Change-Id: I46bf5e3713b4648e9c3facf5e927e924ba51b23f
2024-02-07 20:21:17 +00: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
jenkins-bot 293ef7776f Merge "Document button alignment edge cases" 2024-01-29 16:02:44 +00:00
Jdrewniak 8d3bda7867 Revert "Update <p> spacing to improve consistency of ul/ol spacing, also update heading spacing to be more consistent, relying on mw defaults more"
This reverts commit ee73437745.

Reason for revert: This patch caused T355805

Bug: T355805
Bug: T354433
Change-Id: Ibe9edcf6c4d8f25c3cc0c35cebb3aadd5dc09b00
2024-01-24 21:15:46 +00:00
bwang a48a96a73e Document button alignment edge cases
Change-Id: Ib25fa1af2d76c9cb449002deeea6900d5e501c3c
2024-01-24 12:26:39 -08:00
bwang ee73437745 Update <p> spacing to improve consistency of ul/ol spacing, also update heading spacing to be more consistent, relying on mw defaults more
Bug: T352875
Change-Id: I1f08681c8145bd95781752cb5728ebc9e84dd218
2024-01-16 19:48:33 +00: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
Volker E 26f47fe0c3 build: Update 'svgo' to latest v3.2.0
The latest update of 'svgo' dependency includes three optimizations on
converting path commands, which
- improves closing paths and how we determine if to use absolute or
  relative commands.
- round arc or convert to lines based on the geometric sagitta
- convert cubic Bézier curves to quadratic Bézier curves where possible
Also unifiying npm command to qua standard notation `minify:svg`.

Bug: T354875
Change-Id: I4fffd9efd430786911fe36e409d2575bfab719bd
2024-01-11 23:28:28 +01:00
jenkins-bot cb96b7b379 Merge "Remove cache related FIXMES for CSS" 2024-01-11 12:52:34 +00:00
Moh'd Khier Abualruz 0d7f38ccc2 [Zebra] Remove !important
- Complying to fix me comment

Bug: T347712
Change-Id: Iacd0065b5a736249046ba89bb618bb13f7c0250a
2024-01-09 19:21:20 +01: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
jenkins-bot cbc858cfaf Merge "Use Codex upstream icon" 2023-12-06 15:32:15 +00:00
Jon Robson dd7a4e9083 Use Codex upstream icon
Don't use icon defined in mixin which can get repeated every
time mixin is imported.

Bug: T352642
Change-Id: I5716a71a8347f519e13687a475d80233813756ed
2023-12-06 14:49:10 +00: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
Moh'd Khier Abualruz 2384a32323 [Zebra] Make .vector-column-start cache compatible
preparing html and css to avoid caching issues
caused by differences between zebra and non-zebra HTML.

Bug: T347712
Bug: T351830
Change-Id: I6f8ae635ba38937729b77ea8517ef2eae0ae12f7
2023-12-04 14:29:06 -06:00
Jan Drewniak 531cbcbd25 Increase "large" font-size option for client-preferences
Increases "large" font-size option from
@font-size-large (18px equivalent) to
@font-size-x-large (20px equivalent)

Bug: T351693
Change-Id: I9e3dd8346b1d6f6a9efd04bb1e43fee9bfd79154
2023-11-30 12:57:37 -05:00
jenkins-bot 35a616368b Merge "Add styles for new heading HTML" 2023-11-28 22:42:11 +00:00
Jan Drewniak 522d655007 Adjust .vector-body paragraph margins
Adds bigger bottom margin (1em) while keeping
the smaller top margin (0.5em) as was previously define.

This keeps the headings close to the paragraphs
while seperating paragraphs from each other.

Bug: T351754
Change-Id: I833372002654ea30deb110af44fb412722bc0ccd
2023-11-27 14:50:03 -05:00
jenkins-bot e55034f3ad Merge "Fix misc client pref bugs" 2023-11-27 18:07:10 +00:00
jenkins-bot e75b2cda57 Merge "Fix sticky styles for pinnable elements by moving sticky styles into separate vector-sticky-pinned-container element" 2023-11-27 17:56:07 +00:00
bwang a304223f04 Fix misc client pref bugs
- fixes unpinned popup message not showing
- fixes radio button spacing in client pref dropdown in Zebra

Bug: T351141
Change-Id: Ieeb5caaa6ccbd83d28dae41d3ca30791c355fcc6
2023-11-27 11:40:53 -06:00
bwang b23f6f6722 Fix sticky styles for pinnable elements by moving sticky styles into separate vector-sticky-pinned-container element
Cached HTML change

Bug: T351141
Change-Id: I7d2b4417db15aad7ea788ac7adf131de2c702d27
2023-11-27 17:09:26 +00:00
Jan Drewniak edfdf05f12 Implement new font-sizes for custom front-size preference
Adds different font-sizes and line-heights for the custom
font-size UI. The custom font-size preference options are now:

1. Compact - 14px font-size & 22px line-height
2. Standard - 16px font-size & 24px line-height
3. Open - 20px font-size & 26px line-height

This removes the "xl" font-size option
(`vector-feature-custom-font-size-3`) and it's related i18n messages,
and changes the remaining message to match the new options.

The default font-size, when the custom font-size feature is disabled,
is "compact".

Bug: T351693
Change-Id: I5975a78ce7327f314fd55de55c222ac08d801fbd
2023-11-24 15:23:56 +00:00
Moh'd Khier Abualruz e480bfa2b5 Update theme icon for client preferences in user links
- Add appearance.svg file and classes
- Update the icon name in php
- Update icon name in test data and Snapshot

To test: change return value of
  isClientPreferencesPinned() from SkinVector22
  PHP Class to false

Bug: T351142
Change-Id: If61f3019430be3cb9c926b09bc397e27d8e636f2
2023-11-24 15:01:35 +00:00
Jan Drewniak 78f1f1c671 Follow-up to 7a8059d76 - Vector increase paragraph spacing to 1em
This patch changes the paragraph spacing for Vector 2022
instead of legacy Vector.

Bug: T351754
Change-Id: If205abd17236f9e325cb477b589fa35da246d623
2023-11-23 18:16:00 -05:00
bwang d2b413a721 Make client prefs fully pinnable
Bug: T351141
Change-Id: Ic4a166fb3234b27dbf3d37891abfdf15781c8867
2023-11-22 14:39:28 -06:00
Bartosz Dziewoński 3c2602b682 Add styles for new heading HTML
Add CSS to support new HTML markup for headings with section edit
links, which will soon be used by Parsoid page views (T269630)
and by the old parser (T13555). Keep the old rules to provide
temporary support for cached page HTML and emergency opt-outs,
as well as permanent support for plain headings on special pages
and in Parsoid edit mode HTML.

See documentation page for further explanation:
https://www.mediawiki.org/wiki/Heading_HTML_changes

Depends-On: I44587461582d648b56ef0c9c7ae0c322895c69c2
Bug: T13555
Bug: T269630
Change-Id: I62d7e8ad7d8f25d145ec1f33230d6043982aec1e
2023-11-17 20:36:56 +00:00
ksarabia 1a15dbd4d0 Fix sidebar component order
* This moves down the client pref menu
* For now when page tools is collapsed the client preference menu
is hidden. This will be revisited when we implement pinning
in the next sprint.

Bug: T350417
Change-Id: Ic94d6fd2c4ccb667b0ae602d03c564f88a14b8ec
2023-11-16 00:30:28 +00: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
Moh'd Khier Abualruz 412c1f2d83 Create a sidebar for user preferences
* Adds mustache for sidebar
* Adds file to render sidebar

Bug: T350417
Change-Id: I691c8a0487e158e96027109c223569224f03a102
2023-11-14 14:33:01 -08:00
Jon Robson 07a26a9448 Refactor VectorComponentUserLinks to not use hooks
Bug: T350195
Change-Id: I6cbf45587475f0477657a7ce9309b2cd42da33c1
2023-11-09 17:32:10 -08:00
Moh'd Khier Abualruz 2690b5559e Remove trident-hack font-size from Vector
- The Less variable @font-size-base--trident-hack is removed
-  All instances of font-size: @font-size-base--trident-hack; usage is removed from Vector 2022

Bug: T349010
Change-Id: Ie131b8f0dbb4d8050d33df969c1c49963ddc95e2
2023-10-27 14:03:14 +00: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
Jan Drewniak 751454d7a8 [Visual change] Normalize small font sizes in Vector 2022
Replaces font-sizes that are between 12-14
px with ones that equal 14px. This involved
converting some values to rems as well as changing
their size.

@font-size-tabs (a computed 13px value) is removed
in favour of unit( @font-size-small, rem).

This removal requires the following changes:

* Removing max-height & box-sizing from tabs, since
  they used @font-size-tabs for size calculations
* modifying .mixin-vector-arrowed-dropdown-toggle()
  to use `unit( 12 / @font-size-browser, rem )` instead
  of `unit( 16 / @font-size-tabs / @font-size-browser, em )`
* Changes to the position of `.vector-toc-toggle` since
  it's width/height depended on
  .mixin-vector-arrowed-dropdown-toggle()

Opportunistic refactor:
- `.mixin-vector-legacy-menu-heading-arrow()`
  is removed from Zebra

Expected visual changes:
font-sizes below refer to computed values, actual values
are now set in rems.

* Text in tabs is 14px not 13px
* #siteSub is 14px not 12.8px
* #contentSub is 14px not 11.76px
* #contentSub line height is default, not 1.2
* dropdown [hide] labels are 14px instead of 13px

*************************
*****VISUAL CHANGE*****
*************************
: 91 changes in Pixel due to content being pushed
down due to bigger font-size in toolbar.

Bug: T346062
Bug: T261334
Change-Id: I6cfc800bb8dfed206670e5365bdc55e5d7357a4a
2023-10-24 22:50:15 +00:00
jenkins-bot 0c4b6d9874 Merge "Introduce CSS custom properties under font-size feature flag" 2023-10-24 19:03:16 +00:00
Jan Drewniak 2223cb8c1b Introduce CSS custom properties under font-size feature flag
Introduces CSS custom properties for the purposes
of enabling client-side customizable font sizes.

CSS custom properties are contained in a Less file,
which imports values from Codex and converted them to rems
using the Less unit() function.

Includes ADR on CSS custom properties decisions.

Bug: T348984
Change-Id: Ic5e62d55f3c3585fe3a00e41f29f88d3a2f7470b
2023-10-24 14:33:33 +00:00
Volker E eb8f186a79 styles: Remove references to WikimediaUI Base and use skin variables
Removing all references to WikimediaUI Base and replacing them with
the Codex equivalents.
Also removing variables redefinitions that are not needed anymore.
Only value difference is a last family added before general fallback
called 'Source Serif Pro', which basically will never be visible due to
the general availability of Georgia and Times.
Also removing general font stack comments, see Codex design tokens
comments for these context explanations.

Bug: T334934
Change-Id: I61aa44e40830ffdb308aaea4ca30af0f25ba2274
2023-10-22 19:18:03 -07:00
Jon Robson 004b4c96f3 Add multiple font size to frontend
Use integer value going forward as it will be easier
to manage.

Bug: T346954
Change-Id: I041a0cb21e872700ceeeddd3a39922e456aa7bb8
2023-10-17 12:43:02 +00:00
jenkins-bot 48f2a52c96 Merge "Simplify TOC design for pinned TOC on no js small viewports" 2023-10-17 04:11:30 +00:00
Jan Drewniak 8a3e24e346 Simplify TOC design for pinned TOC on no js small viewports
Bug: T340571
Change-Id: Ie34d7d478b3a73cade9f5328439515e419692eb7
2023-10-16 23:31:18 -04:00