Changes the skins.vector.zebra.styles module to match
the current Vector 2022 styles.
**Visual changes**
(All pertaining to zebra.vector.zebra.styles)
- There are no grey backgrounds
- Context boxes with white backgrounds and drop-shadows
are removed
- Page-tools sidebar width is the same as TOC sidebar width
- Content container is narrowed from 960px to 948px to prevent
shifting content when pinning TOC or main menu.
Bug: T347638
Change-Id: If6e1ef21f076f6a9f0f8cafb2d745a7c13afb471
- 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
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
Adds functionality to update the pinnable header class
(pinned or unpinned) after is has been moved via
movePinnableElement().
Bug: T348039
Change-Id: I23552bdbb3390222c2c8efbd5f9122a4d5021a00
Vector 2022:
mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions');
mw.util.addPortletLink('p-twinkle','#', 'Hello world');
Or if preferred it can be added to the pinned menu
mw.util.addPortlet('p-twinkle-pinnable', 'TW', '#p-tb');
mw.util.addPortletLink('p-twinkle-pinnable','#', 'Hello world');
Bug: T342815
Change-Id: Id58515e72bfbd5f700aa573a122529c6efdfea9d
Vector:
mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions');
mw.util.addPortletLink('p-twinkle','#', 'Hello world');
Additional changes:
* Add aria labels to gadget created menus
Additional changes to template
* Remove self closing tag on input[checkbox] in template
* Rearrange vector-menu and vector-menu-dropdown classes
for consistency between two approaches
Bug: T342815
Change-Id: I938928c3625099ad49bec8aafb11f91190a9f494
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
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
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
The width of the screen changes when the pinnableElement is pinned
or un-pinned. Other features may need to react to this, like for
example the RevisionSlider extension.
Triggering a window.resize is a generic way to make sure these
changes can be handled by other elements on the page.
Bug: T336729
Depends-On: Iba22924b660f2709c0680aa6fbeb0feba92cfa76
Change-Id: I49878fdd8794273919bf961648fd93fdcf9511af
Adds a config option to control the Readability prototype
survey tool on a per-wiki basis.
Minor fixes:
- Adds missing i18n messages to the tool for slider labels
- Ensures tool only runs on Vector 2022 skin
- Wraps the initialization in an IIFE
Change-Id: Ia65a0043dab5e9a23d4ef401ed83914e4f3d2882
Adds screen resolution (`${window.innerWidth} x ${window.innerHeight}`)
to the prefilled feedback form for the typography prototype.
Change-Id: I38ec6fe5232c1d90df6d5d56b0f0cb32acdcc64e
Creates an interactive prototype for gathering
feedback on users typography preferences.
This prototype is meant to be temporary and is
built soley for feedback purposes for the
WMF Accessibility for reading project.
The prototype code is:
- for logged-in users only
- hidden under the API user preference "vector-typography-survey"
- disabled by default
It is intended to be enabled via a banner that calls
code similar to:
new mw.Api().saveOption( 'vector-typography-survey', 1 )
Bug: T347208
Change-Id: I8d8914a0fa16d40cb22ed0e61832bc5bbabe1c78
Switching from width() to outerWidth(true) will output the same value for the default Vector legacy CSS, but for tabs given a border/margin with custom CSS, it will prevent an infinite expand/collapse loop at specific resolutions.
Bug: T347793
Change-Id: I97bc01ce4c4117fe2a95dc7f0ff227cbc96ccbb9
* Introduces a new utility function, `hasPinnedElements()`, that allows us to check whether there are any pinned elements in the HTML document based on their CSS class names.
* This function will be useful for detecting pinned elements and can be used within WikimediaEvents.
Bug: T346106
Change-Id: I4283cd234ba71acce1e5cbadabf8aeb17cd8d86e
Notes:
* This is functional but intentionally not designed until the design
has been finalized.
* A feature flag is added that swaps out the limited width toggle with
a settings cog
* The preferences module is kept in a separate ResourceLoader module
(skins.vector.clientPreferences) to make it more portable for
when we eventually want to add it to Minerva as well.
* Intentionally have not focused on non-jS version given we will
likely revise this again in a future version/upstream to core.
Bug: T345363
Change-Id: I0c793b73e0676e32f031c6168c292f63908c72e3
- Status should persist across page views for anonymous users
- Added 'toc-pinned' as a persistable feature in features.js and FeatureManager.php.
- Handling for cached HTML supporting both new and old class names for pinned/unpinned TOC
Based-On: I0fbe0ab458c5bd55d659d3c35a8fbaa6cd6ec0e1
Bug: T316060
Change-Id: Iad8523037ed364f09962b2d6ca0a3d50d7bd2266
Adds the `-clientpref-` string to the Vector font-size
feature flag class, which will now read:
vector-feature-custom-font-size-clientpref-enabled
Bug: T343928
Change-Id: Iefc575229d52bea820fbee35711650408c917338
Add feature flag that for new (eventually customizable) font size.
Enabled via url param VectorCustomFontSize=1 and font size set to
a hard-coded 16px value for testing purposes.
Bug: T343928
Change-Id: I75801db7506ba2a8212df94bb2079c33a3b64614
Pinning functionality was broken in
I120f8f7114b33d2cfbd1c3c57ebf41f8b2d7fec4
as it breaks the check against "legacy" feature
classes. We should resort to using the legacy mode
when neither of the new classes can be found.
Bug: T341641
Change-Id: If97a393140175fd41551c3db14b19becb8d9f460
Functionality in I37d8e61a1287b31d1a304d2a955f532b9b8fa505
was working until Ic83eaa34ffa74a42c7cf6df7c0857dd7a9401aba
Bug: T342845
Change-Id: Ie7f18e2228420b3269b0be969474e605d48ba682
* Update classes to use clientpref-1 and clientpref-0 suffix for limited width
I've limited this to the only client preference for now to reduce
risk.
* For cached HTML retain existing CSS rules, and continue saving
a cookie
* Migrate cookie if found for newly generated pages. This will be
to ensure the old cookie and new cookie are in sync (this should be
a one time operation)
Depends-On: I1e635f843ac9b2f248b1f7618134598e80291b38
Bug: T341641
Change-Id: I120f8f7114b33d2cfbd1c3c57ebf41f8b2d7fec4
This reverts commit cb4265f003.
Reason for revert: This makes the situation worse when language
is not mixed.
Bug: T343110
Change-Id: I40158b15bad1ac06256894fc7ec6ffbac1e45fb0
- VectorComponentMenuVariants.php is renamed to VectorComponentVariants.php, and returns menu and dropdown data
- Remove TabsMenuContents.mustache in favor of MenuContents.mustache
- Fix the variants dropdown to use the full Menu template
Follow-up: Idf05c1664c026f58487ba34af5ede8a11e695baf
Change-Id: I0e9b1ab3306b04ee0d226048c6885beab4f310c6
Follow up to I35a51df6ece2e48e086e722337d4c6bba427eeb4
1) the insertBefore function raises a JS error
2) We must take into account portlets added before the
Vector hook is registered.
3) Register the portlet in main. Loading the module should
not have side effects.
Bug: T303488
Change-Id: Iee6b308d6da63bc53bcba0fa5bb383d88787892a
- Hooking into mw.util.addPortlet
- merged in tests from: I3258388d74c103515e3f0680304f9a376e439a35
possible follow-ups:
- tooltips support
- custom attributes support
- Adapting portlets of types dropdown, tab to vector skin. Check patch set 10 for a starting point
Depends-on: I79bad8661e34e653d41e6cb1cd4462ac5c6bc3b1
Bug: T303488
Change-Id: I35a51df6ece2e48e086e722337d4c6bba427eeb4
New menu items can be added via
```
var node = mw.util.addPortletLink('p-dock-bottom', '#', 'hello' )
if (node) {
node.querySelector('a').classList.add( 'mw-ui-icon', 'mw-ui-icon-element', 'mw-ui-button' )
}
```
Bug: T336431
Change-Id: I8c5c5414cda9d268631ba0fade90e1a44c104ff1
The language dropdown currently impacts rendering due to making use of
visibility: hidden as space must be allocated for it on the page.
However when ULS is installed it is never used. As some JS to take
that into account so it doesn't impact the rendering of the page.
Since ULS may not be installed we have to consider that case and
retain the existing behaviour for those wiki (this should only
impact 3rd parties)
Bug: T340715
Change-Id: Ic83eaa34ffa74a42c7cf6df7c0857dd7a9401aba
* 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
The languages alert is misleading when there are no languages and the user has JS disabled.
This change adds a class to the alert if there are 0 languages, and then adds "display: none" to the alert if the client-nojs class is present. This is the same approach being used for the language switcher button.
Bug: T326185
Change-Id: Iee292d661ed1f47700f588053712f5f547022b17