This patch results in an expected visual change for the main menu button when the flag is on
When comparing with master with the flag off, this patch will still show a 1px difference for the main menu button, as well as user menu and language button. These are not introduced by this patch and are due to the flush classes taking into account the 1px border
Change-Id: Id46bc939338d5bbcc3459ab502e1cf8b8f2020b2
Refactors styles for limited width toggle and
fixes issue with close icon not appearing.
Bug: T319449
Change-Id: If53c3921e54565c47eb0868329e0b79f60073792
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
The toggle was a div that tried to act like a button. This commit converts it to
a button for semantic and accessibility reasons.
Change-Id: Idf5643926611ae8e9a7ec4163cf3cb1e51ec7310
Visual changes when the flag is on
Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06
More context at T322673#8383888
Bug: T322673
Change-Id: I64a47fa869247f758c6369c2e0ff8b12f87f9d9e
Since dropdowns can now themselves contain headings in the content
area we need to limit this rule. While this is current theoretical
it will soon become reality in Ie7d31df972ff68313b2437ff14b7b6b8d7078204
when we will introduce the first of these components.
Note in future we will likely restore this when we make those menus
themselves collapsible, but that will likely be part of a different
component and fixing this now is better than having a non-functional
collapsible item.
Change-Id: I24abb08a098dd75ad694da0b47b8be0897ed9b30
Since the TOC container is overlaid on top of the content container when the TOC
is not pinned, we always want the width of those two containers to match or else
misalignment could occur. This commit keeps the
`.mw-table-of-contents-container` selector in sync with the
`.mw-content-container` selector in terms of width.
Bug: T322162
Change-Id: I2fe26dc616cc46e1b3c9ce4f2ac63a23da415fa9
There are no longer any common menu styles. These are moved to the legacy
skin and new rules are added to the dedicated components.
Change-Id: I1bf26bfb29bb495ee65e983fad60122007f62698
Currently you cannot have menus inside dropdowns. To support this
we should limit the selector to direct children nodes.
This will allow us to put the main menu into the main menu icon
dropdown.
Change-Id: Ibf304843a62d5269992a01eb826edf71ce8d3c35
- 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
This change should roll out with the featue flag to avoid
unexpected UI regressions
Follow up to I9aba71ac4fff0d285676946acef8309b741ed1ad
Bug: T321504
Change-Id: I369e314bac31ea2eca3bff4e530e07c8bee325e2
Changes:
* Code is moved from SkinVector to SkinVectorLegacy verbatim since it is now only
needed by SkinVectorLegacy
so we remove it:
** This step broke MainMenu rendering so this was captured in VectorComponentMainMenu
** The isLegacy code no longer makes sense and is removed in a follow up
* storybook no longer run on CI
Authors: Bernard Wang and Jon Robson
Bug: T321102
Bug: T319349
Change-Id: Ib424ca1c767161fdae8c0aeedfe662b7fa039ff6
Instead of aligning the edge of the main menu and
ToC with the edge of the main menu button, this
aligns the text of those sidebar items with the
edge of the main menu button.
NOTE: Currently not working with the
vectorvisualenhancementnext feature flag enabled.
This will be addressed in If3aed0ac401b0abc80c3ad52806eb85b33d43f06
Bug: T317583
Change-Id: I01f639c5ca63ac50235dc21ca5273c91213f041c
* Introduce a generalized feature toggle system that uses user
preferences or localStorage for anons (right now the latter is out
of scope but will be explored in a follow up)
* Feature flagged to VisualEnhancementNext for now, given the dependency
on icon size
Bug: T319449
Change-Id: I7343a3f38b720411d5ef5f3414f25f475b0bb84a
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
Sometimes, especially on a slow connection, search results may arrive
for a search query that is no longer in the search input, because the
user has changed the search query since the request was sent. When that
happens, don't display those outdated results.
Bug: T321108
Change-Id: Idd515a679673a7ddef02950323311a56cd2e84e9
The search input no longer expands to the left when focused, only when
there are search results. This meant the loader box was misaligned,
because it still expected the search input to expand.
To fix this misalignment, add the margin-left and width styles that
apply to the search input to the loader box as well.
Bug: T321009
Bug: T317902
Change-Id: Ic177b4cf56cb0a94850037a30db3001777dc52d2
Restricted to the feature flag (?vectorvisualenhancementnext=1)
for now to allow us to not worry about caching.
mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core
for some time and using them means we don't have to manage hardcoded
values for these.
We'll need to think of .mixin-vector-flush-left-left
and .mixin-vector-flush-right-margin-left separately - I wonder
if these could be revised to use these 2 standard classes.
Additional changes:
- Drop unused mixin-vector-flush-right-margin-left mixin
Bug: T321504
Bug: T317583
Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
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
Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"
Bug: T316570
Bug: T317437
Change-Id: Ib4050768f20b1734d356104f18aa539f657099d8
The legacy search wprov behavior, implemented in the WikimediaEvents
extension in searchSatisfaction.js, is to use acrw1_ as the prefix (i.e.
with an underscore before the index), and acrw1_-1 for user searches
that didn’t select a suggestion (not acrw1). Make the Vue search match
this in both cases.
Bug: T317682
Change-Id: I6c84533e1811233ff2727d501327471d73fc7b62
Making this a feature part of the feature management system is integral
to making this a toggle and will allow us to explore making this
persistent in future.
Bug: T319447
Bug: T319449
Change-Id: I80c7b892a6891094854b4154db90917b67986102
This ensures that the wprov parameter is included when users follow the
link as a link (click, middle-click, etc.), and also prepares us for a
future where pressing Enter after selecting a search result navigates to
that result’s URL instead of submitting the form. It also matches the
behavior of the legacy search form.
We put this in App.vue + instrumentation.js, not in urlGenerator.js,
because we also want wprov to be added when custom URL generators or
search clients are used. (The reason for instrumentation.js instead of
purely App.vue is just that it’s easier to test there.)
In the tests, we need to update @wikimedia/mw-node-qunit so that we have
a sufficiently functional mw.Uri() mock.
Bug: T317682
Change-Id: I765d3bbf89b2253add7b50305c362e4bbc9ecceb
* Removes server rendered vector-tab-noicon class from legacy Vector as it is
not currently used.
* Adds menuTabs.js responsible for adding the vector-tab-noicon class when menu
items are added to tabbed menus. This is only used in vector-22.
* Adds unit test
Bug: T320691
Change-Id: Iffad86125f8754305f592ddc19d894866bd6dedc
Removes the common MenuPortal.lesss code and splits it into
Vector 2022 and Vector legacy in anticipation of changes to
the sidebar in Vector 2022.
Bug: T317583
Bug: T319348
Change-Id: I57d3dc3458a7d6a4877170c26c88ca9222e00ff7
Seen in logstash for Chrome 50.
Icons are not essentially, so gracefully degrade in these browsers
to items without icons.
Change-Id: I083c87c9bf5f256c8bcd2893e251571b97440ce1
This allows the URL to the other wiki's rest.php to be configured
exactly, rather than assuming that it has the same wgScriptPath as the
current wiki. This is necessary to make this feature work on PatchDemo,
where wgScriptPath looks like '/123abc456/w'.
$wgVectorSearchHost is removed, since nothing uses it except PatchDemo
(where it's broken) and development setups.
Bug: T319494
Change-Id: Ife042f4f683d366a31a642723746d4aa80774c03
Visual changes:
- Footer text and border is aligned with header icons
- Main page content has no padding, slightly wider on certain pages/viewports
Bug: T317573
Change-Id: Id0c4343b8bc4c16006c0b9abd914213ca2f307ca
This reverts commit d1ef0d3aaf.
Reason for revert: Applying again without the impact on styles in
master.
Bug: T319070
Change-Id: I751168e1dc0f6235fd5ba881dc884941edbf4b77
Rather than infinitely spinning, spin it once 72deg to the right
hand side just how we do on mobile.
Bug: T317371
Change-Id: I1ed89e4ad2b54444f920d850bb4a17e9caa92dc5
Adds landmarks to the article toolbar
- Namespace navigation
- View navigation
- More options navigation
Removes the "tools" landmark and associated
aria-label (and translation message).
Makes the #left-navigation and #right-navigation
flexbox to ensure the new <nav> elements, along with
gadgets, align on one line. Moves the styles for
these elements from screen.less to ArticleToolbar.less.
Bug: T317440
Change-Id: Iceff337b0e250c1f368dbaea6cc41a977d8ee868
* Ensure addPortletLink hook is only run once
* Mark more menu as not supporting icons so icons are not added
Bug: T317491
Bug: T318495
Change-Id: I99450a5b0410e88cc7cdb2753b9b4256e3fe41db
This code is not resilient to changes in the mw-ui-icon definition
In preparation for changing touch areas we need an easy way to
flush these correctly based on feature flag.
No expected visual changes.
Bug: T314323
Change-Id: Ia10a7c696c690887a37851684215e515474fbd90
Change I765d3bbf89 pushes the module over the configured maximum allowed
size (3 KiB, see bundlesize.config.json); shave off some bytes elsewhere
to bring it below the limit again. IMHO all of these changes should be
acceptable:
* arrow functions are already used elsewhere in this module;
* using the mw.config.get() fallback argument is normal (it slightly
changes behavior, but I don’t think explicitly setting the search
client or URL generator to a falsy value and expecting to get the
default behavior should be considered supported);
* not quoting [name="search"] matches [name=title] immediately above;
* using forEach() with a function reference is still readable (initApp()
is now called with extra arguments, but that doesn’t matter).
Change-Id: I45dda26cb59279d91804b0c2bbf12174fa78ee12
This completes the changes to Echo inside the
vectorvisualenhancementnext=1 feature flag
Bug: T257143
Change-Id: I8f3904815c90ef1a10a2342c5c70363c8b9e1e47
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
- Prevents the ToC in the sidebar from jumping down when the sticky
header becomes visible
- Removes the `.sticky-header-element` class from the ToC since that
only modifies the elements position when the sticky header becomes
visible (whereas in this case, it should be modified when the sticky
header is enabled, before it's visible).
Bug: T314330
Change-Id: Ic6f50b8dc4f1507d875825d23eb44c24a998eaf7
The table of contents has since been reflected to
not use calc statement anymore and pre-calculate the value,
cssjanus flips this value properly so this rule can safely be removed.
Bug: T314652
Related-To: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
Change-Id: Ibb390589f449bc20c6f38f66c1e617fa3fa82aab
Also use other icon opacity variables where applicable.
Bug: T317800
Depends-On: If2f99124b01ce99b5131fdb960c60952075f6343
Change-Id: Ib8b3d11bd1bd6f902ff846eeb2a8f9cf3c7077b2
Orienting on Codex Opacity tokens as defined in v10 of 2022-04-01 in
https://www.figma.com/file/h9pA2CCl2i0wtlTKNChaES/Opacities---Tokens?node-id=368%3A2139
Also adding legacy opacity icon tokens for use in all non-Codex
products.
Specifically the icon ones are already in use in Vector.
Bug: T317800
Change-Id: Ib699ccf0342030f521ad876d70974b8818f877cb
Visual changes:
- Collapsed TOC menu width depends on TOC content, with a max width of 51em or 75vw
- Collapsed TOC menu in sticky header no longer has a horizontal scrollbar
Bug: T316056
Bug: T316609
Change-Id: I1da9c16366b55c77ef13bac899ed8ecb2d77fdb9
On resize, or when booted in a small window the sidebar will collapse
and remain collapsed for subsequent page views
Bug: T316191
Change-Id: I6625fc3b3f1015d74b484a2a3643def13467ddf5
AFAICT the `setInnerHTML` param that was part of the reloadPartialHTML
method was always true. Thus, much of the code contained in this method
can be removed and the `setInnerHTML` param can also be removed.
Bug: T316571
Change-Id: I82e99f902eadba8a9df2166c4f89ba1f1d747a47
Following-up to further optimize icon SVG and provide arrow stem in
perfect 45 degrees angle.
Bug: T261391
Change-Id: I1fa7789182f0fffb7891205a9099884402d37b61
This reverts commit 365d3902c9.
Reason for revert: Pixel is flagging the sidebar being closed
in cases where it shouldn't. Since I can't debug that I'm
reverting just to be cautious.
Change-Id: Ib88f61eb6a7fda8ce546a24c2d3dbbde836f2c40
Visual changes:
- Sticky header padding will increase on desktop and desktop-wide viewports to match the header
- Padding on collapsed TOC button in page title is 2px wider on each side
Bug: T315261
Change-Id: I9d0df4f4d399fe120a4c1a5d2df610942cc70f02
Can be tested by appending ?vectorvisualenhancementnext=1
to URL
Bug: T310838
Bug: T234990
Bug: T234550
Depends-On: I76d0d94c9006cc5f5680849ecdd1c382c16e34ba
Depends-On: Ib7c3021db014827b4b88cac855afc0b54a360f8c
Change-Id: Ie2ffa5c3ecf270c1bb1f315937023ae7ace5ed30
- Use flexbox instead of float
Visual changes:
- The title wraps differently when the title is very long
Bug: T313947
Change-Id: I2915e36286b21c8fd1a07247ada7754a08a0b574
On resize, or when booted in a small window the sidebar will collapse
and remain collapsed for subsequent page views
Bug: T316191
Change-Id: Ib4961975630871d6630cd747a78cc2ec4f1cdeeb
- Add margin-right to language button
- Remove @margin-start-sidebar-content CSS variable as it's name isnt accurate anymore, and its value is derived from @icon-padding-md
Bug: T315615
Change-Id: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
This is a common need for features, and having these use a standardized
class name will make using them a lot easier.
Change-Id: I0e16c26878e7d4399d2bf57f236523d214951a27
This class is no longer needed in Codex and will be removed.
This patch adds a similar dynamic class to the Vector search
app, to be used for showing/hiding the search button on
focus/blur or hover/leave.
Bug: T316893
Change-Id: I738c0f24dcd06ddeb9179cfedc85ed73a6504f1e
Input expansion behavior has been changed in Codex to expand
the input when the menu opens, instead of when the input is
focused. This patch removes styles targeting the server-
rendered search box that mimicked the expansion behavior
on initial focus to ease the transition between the server-
rendered version and the Vue version.
Bug: T312594
Change-Id: Id716860f52df7585c068a7927bf799129faf4ad3
Technical changes:
- Increase @padding-horizontal-content to align content
- Rename @padding-horizontal-page-container and @padding-horizontal-page-container-wide to @padding-horizontal-page-container-desktop and @padding-horizontal-page-container-desktop-wide respectively
- Replace "gutter" grid area with column-gap
- Clean up TOC styles
Visual changes:
- Below 1000px the header icons spacing is updated
- Above 1000px the page titlebar and articlebar right space is updated
Bug: T315261
Change-Id: I7f51ab3b9613c359db62e918051e942c5c6c878b
Follow up to I8ab2a554f753348ea2fb0fd4d28053ea17fbe83e
It should be possible to enable the #siteSub element with
a simple #siteSub { display: block; }. When moving these styles
from core we have made them more specific and harder to override
Bug: T316027
Change-Id: I4009c67e97ed0e718c28a1fa18c0059075b7a8a7
* majorly done in VE by VE team by sending empty array,
since firing an event in beneficial for removing the TOC if needed
Bug: T315863
Bug: T315862
Change-Id: I128c550f039a812dde36fcefa56334842e36fbe2
- Removes grid row gap in favor of margins
- Add container div around site notice to allow margin collapsing
Bug: T315595
Change-Id: I39959f43f20880e83bef945a7535d58cfe0b6412
* This was fixed by removing the reattachment of `SubsectionToggleListeners`, as it seems to be already attached and was double toggling on click.
* This will not work with full TOC collapse `CollapseToggleListeners` it has to be reattached for it to work
Bug: T316033
Change-Id: I756b2a929fd94d9167a7b56df668b1202e695a38
This reverts commit b63244f367.
Reason for revert: Per standup this morning we'll revert this so
that we are back to a known state, and try this again in a second
attempt.
Change-Id: Ie1349fecbab6c49ce63d328aba08162d74145cb9
Follow up to Ibf837775d972deb29e9619cc6c12c919aae5155a
Depends-On: Ib5ae640bb260cee46e654228b785c776722c7003
Bug: T316027
Change-Id: I8ab2a554f753348ea2fb0fd4d28053ea17fbe83e
In f7f78023e we added new variables to the Vector 2022 variables
that overrode the defaults, but forgot to preserve the defaults
in Vector legacy. This resulted in changes documented in
T213778#8181795
Going forward it makes sense to separate these.
Bug: T213778
Change-Id: I5e4f1729fc0f41b21579807fc83a7dda9c3519ea
Due to recent updates that affected dropdowns in modern and
legacy Vector, the dropdowns in legacy Vector were not appearing
on hover as they were intended.
Bug: T315418
Change-Id: Iad3c3d89566f211d331233a752d67744d6522af0
These overrides are now redundant now that Vector and Vector 2022
are separate skins.
This override was technical debt, but is now causing inconsistency
in styles as a result of T315321
These are now defined in the variables file instead.
Bug: T315662
Change-Id: I7cb3e7f439daa9d1974ec414ee4c8a905b5e513f
* Temp solution for quick fix
* Full solution should be supplied by cssjanus PR shortly after
Bug: T314652
Change-Id: Ic3ac53f884bc1b9bc14c951b7348e2bf263065a2
Re-applying: Unify on using standard OOUI 'linkExternal' icon, which is
directly replacing Vector's image without relying on ResourceLoader.
This time we have lo- and hi-dpi optimized icon.
Please note that the icon features standard link color `#36c` which is
implemented in a later step. Due to the small icon size and the fact
that current external link icon is also not using the legacy color, this
seems acceptable to move forward with.
Also using relative `em` instead of `px` to support user text zoom
capabilities and introducing a `@size-indicator` variable to be replaced
by WikimediaUI Base variables later.
Alternative to I49de3bfff45.
Replacing images and image names to make quicker lookup with icon
collection possible future-facing.
Note that CSSJanus is flipping the `ltr` string in the background image
rule to `rtl`, therefore making sure that both icons are available.
Bug: T261391
Change-Id: I1c3cfb4cd83fe4d5d08c06b84cdc192cb90c0dfe
The width of the active link is increased via calc to reduce the
chances that the line will wrap because of the bold text.
Bug: T314670
Change-Id: I58aa72871b7d80c8342df60478894dafcf448ae7
For modern Vector, the preferred way to place an icon
beside a link is with a dedicated <span> element instead
of a `:before` pseudo-element.
This change appends a <span> element with an icon to
links created by mw.util.addPortletLink instead of
using the `.mw-ui-icon-before` class.
Bug: T314798
Change-Id: I019470d9ca38a6bd63a690882bed03b5f1ac03c4
Follow Web Content Accessibility Guidelines and
use Wikimedia Design Style Guide colors with
at least 3:1 contrast with surrounding body text.
Also unify external and normal links as the color difference is
basically opaque to understand beyond a small group of power users.
Bug: T213778
Bug: T315321
Change-Id: I8a309eedd70b9a82fcca91c2cf9a30beea602b6b
Visual changes:
- TOC icon in sticky header
- Small update to the narrow screens collapsed TOC spacing when open
Bug: T311103
Depends-on: Ic94fda79bd14856ccda14985d5860aa54d3118d0
Change-Id: I977092f951ba2843816609e706bce4b99583f623
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
- Include temporary feature requirement for TOC A/B test.
- Assumes 100% of logged-in users with even/odd user ids
being assigned to treatment/control buckets respectively.
- Sampling rates passed in by config are not considered
during bucketing.
- Update hook for adding needed TOC A/B test body classes.
- Add test for temp feature.
Note: the temporary feature requirement and associated hooks
should be removed once the 2nd TOC A/B test concludes.
Bug: T313435
Change-Id: If9c75235614af289cd50182baab29bec3155eb81
For idwiki/viwiki, we wish to run the sticky header edit button AB
test so that treatment1 group sees the sticky header without edit
buttons, treatment2 groups sees the sticky header with edit buttons,
and the control/unsampled groups see no sticky header at all.
This patch overrides the configuration to make the sticky header
w/o edit buttons for treatment1, sticky header w/ edit buttons for
treatment2, and hides sticky header for everyone else. This depends
on a configuration with the treatment groups having "treatment1"
and "treatment2" as substrings in their bucket names.
The full configuration for idwiki/viwiki would be something like
the following:
```
$wgVectorStickyHeader = [
"logged_in" => true,
"logged_out" => false,
];
$wgVectorStickyHeaderEdit = [
"logged_in" => true,
"logged_out" => false,
];
$wgVectorWebABTestEnrollment = [
"name" => "vector.sticky_header_edit",
"enabled" => true,
"buckets" => [
"unsampled" => [
"samplingRate" => 0
],
"noStickyHeaderControl" => [
"samplingRate" => 0.34
],
"stickyHeaderNoEditButtonTreatment1" => [
"samplingRate" => 0.33
],
"stickyHeaderEditButtonTreatment2" => [
"samplingRate" => 0.33
]
],
];
```
Bug: T312573
Change-Id: I15c360fdf5393f5594602acc33b5b916e904016d
Collapsed dropdowns are hidden via `opacity:0;` and
`visiblility:hidden;`. This doesn't prevent them from having a
height, which can be an issue when the language selector is
at the bottom of the page, producing a large gap near the footer.
Bug: T314546
Change-Id: Iec5d78469c8d5e10bd78e5d062f9e46a54fb3a98
This reverts commit 1f94104cdf.
Reason for revert: I3427b9ca05957b33a95bba4de4ddf87b61b5ccc7 would
be a more future proof solution to this problem.
Depends-On: I3427b9ca05957b33a95bba4de4ddf87b61b5ccc7
Change-Id: Ie09ccad772e25689c89608bba73c5248a55b4a7d
Provide better compatibility with gadgets that create dropdowns
like Twinkle by explicitly setting the font-weight and font-size
on `.vector-menu-heading`.
This is needed because in legacy Vector, menu headings
were <H3>'s, which have bold text and a larger font size.
Bug: T312157
Change-Id: Ic414cef4c7145740812e590f431294bc85a405b4
- 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
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
This reverts commit cffd494107.
Reason for revert: Reverting due to how the new icon doesn't scale well at 2x resolution. https://phabricator.wikimedia.org/T261391#8111726
Bug: T261391
Change-Id: I6d49fed2b9e249de15cf40216c01153c7b793ee2
Visual changes: 11 expected in Pixel
- Elements on the right side of page toolbar are now flush with the rest of the content
Change-Id: Id02cd379687fa292188a447c85951e7a87ade509
Only apply sticky header offset to mw-sticky-header-element if the
header is actually sticky, currently at min-desktop-width of 1000px
Bug: T313187
Bug: T313619
Change-Id: I081c694b263a68498468b837cffa1cbea136d36f
Following-up I05b832a36e8, which has seen the right canvas of 12x12, but
an older, incorrect version of the icon not perfectly optimized for
the lo-dpi screens.
Bug: T261391
Change-Id: Ia0054372c4d3bd5bb7e4b24a8f412bcaf6bcd80b
Splits MenuDropdown styles into modern and legacy styles.
Leaves a common MenuDropdownCheckbox.less file (for lack
of a better name) for common styles related to the checkbox
behaviour and dropdown menu resets.
Adds a new file in common/mixins.less for a shared
dropdown mixin.
Bug: T312157
Change-Id: Ib60b25ea3121843ed5ed54820d6295a81289b332
The subject link does not have a consistent ID like the talk link,
so it needs to be computed from the canonical namespace name.
Something similar is done in VE.
Bug: T309424
Change-Id: Ie82ca61aef30204edd09793963b25464febb17fe
Test by adding .vector-toc-collapsed class to the body
We use grid only when supported for grade C browsers.
Visual changes:
* Slight changes to position of the button and title
(movement by a pixel or 2)
Bug: T311447
Change-Id: Ib16c7b5b35be66776d013833e29f24f3f5316d9b
Wrong watchstar icons were specified when splitting the watchstar
into modern and legacy Vector in 3c0559a7.
Change-Id: Ice369f5d81818b093014cf508c2d4336c66368ed
When the article exist only in one language, currently we do not show
language selector. This prevents showing the entry points to create article
in other languages by various means.
Show the language selector so that options like translate, interlanguage
links, language settings can be shown.
Bug: T275147
Bug: T290436
Depends-On: I42c5d44ec15e291d71723c9738ddb8f0d1cf0b09
Change-Id: I7fb68457c1203d824fe7433c9f272f300a483c44
Using indicator 12x12 canvas, following up Ibd15517f3adf, to cater to
lo-dpi screens.
We've already had that canvas in the original patch, but in the first
new patch left it behind.
Bug: T261391
Change-Id: I05b832a36e89f6d75ab4f620b8db60b6eb578f73
- Update related selectors, styles.
- Remove unneeded styles.
- Remove link hijack js.
- Simplify hook to only add experiment name to body.
Bug: T310527
Change-Id: I25527261d529a16e28f1b90f2f5af234d26fd40f
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
Hack has first been introduced in I7d4b075ac90 more than 4 years ago.
It has been introduced to tackle IE <=8.
Bug: T306486
Bug: T308344
Change-Id: Ie84a177f79d226be98298a42ebfdd447e33a1372
IE9 is out of basic supported browsers, so removing this fallback.
Also using “Flexbox” as standard term in comment.
Bug: T306486
Bug: T308344
Change-Id: I6fcb0c4b54fea3d05593ae294c05e046131c93d2
Unify on using standard OOUI 'linkExternal' icon, which is directly
replacing Vector's image without relying on ResourceLoader.
Please note that the icon features standard link color `#36c` which is
implemented in a later step. Due to the small icon size and the fact
that current external link icon is also not using the legacy color, this
seems acceptable to move forward with.
Also using relative `em` instead of `px` to support user text zoom
capabilities and introducing a `@size-indicator` variable to be replaced
by WikimediaUI Base variables later.
Alternative to I49de3bfff45.
Replacing images and image names to make quicker lookup with icon
collection possible future-facing.
Note that CSSJanus is flipping the `ltr` string in the background image
rule to `rtl`, therefore making sure that both icons are available.
Bug: T261391
Change-Id: Ibd15517f3adf06010807901e8fb3299e2046a473
This doesn't change any behavior, it just suppresses a compatibility
warning and ensures that future changes to this file won't introduce
code that relies on Vue 2 compatibility features.
Change-Id: Id15af7d5d5035f59dc8f402f00d8f7f0d73a77f7
Removing old PNG divider fallbacks, which were included for IE9, old
Firefox and Chrome browsers and are not mission critical even when not
rendered to unknown browsers.
Bug: T306486
Bug: T308344
Change-Id: I8a6622237a1cbb8116930a12e632329618d5c291
Fix for iOS Safari 13 & 14 (T309223):
- Replaces flex-box layout from the top-level #right-navigation
and #left-navigation tab elements with floats.
Then for vertical alignment, sets the child <li> elements and
<a> elements to inline block.
Opportunistic refactor (T308344):
- Moves the font-size rules to top-level #left/right-navigation,
but leaving them as-is for legacy Vector.
- Removes a (seemingly) unnecessary `display:none` rule from
Vector 2022, which previously applied to H3 labels in the
sidebar, which are no longer targeted by the styles in
MenuTabs.less.
- Removes an unnecessary selector and duplicated rules from
ArticleToolbar.less
This change fixes a flexbox issue on iOS Safari 13 & 14, but also
reduces the CSS bytesize of the skins.vector.styles module by
0.9kB (uncompressed), from 54.2kB in the previous commit to
53.3kB with this commit.
Expected visual changes:
* The tab underline now overlaps with the toolbar underline, and text
pushed down on certain tabs
* The variant tab is now equally spaced
* Right navigation tabs slightly shifted to the right
Unexpected visual changes:
* More menu shifts to the left [see note at top of commit, will be
fixed in a follow up]
NOTE: this introduces a visual regression in the mobile viewport in that
the more menu.
Given this viewport is still experimental, after talking to Jan
we agreed to address this in a follow-up.
NOTE: Update addresses the reason for revert 5599cf2 and compatibility
with CSS Grid layout by adding a clearfix (display:flow-root)
for #right-navigation and #left-navigation elements inside toolbar.
Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I1482a81d16c53e0ba1977b0d98ba8c8a21362a6c
Also de-coupling border and background vars as they are aimed to
be fully replaced by tokens in future.
Bug: T313243
Change-Id: I5b7e46b6d2a0cc6975cb3c760645eaf2d5d30de5
This reverts commit 0c5e6ed9fe.
Reason for revert: I was so focused on testing the current layout
I forgot to test the more important grid layout, which is being
deployed this week. The "from mediawiki" tagline is overlapping
with the tabs.
Change-Id: I3c53a8d243caf84e5c2766d730ced3d7da345026
NOTE: this introduces a visual regression in the mobile viewport in that
the more menu.
Given this viewport is still experimental, after talking to Jan
we agreed to address this in a follow-up.
Fix for iOS Safari 13 & 14 (T309223):
- Replaces flex-box layout from the top-level #right-navigation
and #left-navigation tab elements with floats.
Then for vertical alignment, sets the child <li> elements and
<a> elements to inline block.
Opportunistic refactor (T308344):
- Moves the font-size rules to top-level #left/right-navigation,
but leaving them as-is for legacy Vector.
- Removes a (seemingly) unnecessary `display:none` rule from
Vector 2022, which previously applied to H3 labels in the
sidebar, which are no longer targeted by the styles in
MenuTabs.less.
- Removes an unnecessary selector and duplicated rules from
ArticleToolbar.less
This change fixes a flexbox issue on iOS Safari 13 & 14, but also
reduces the CSS bytesize of the skins.vector.styles module by
0.9kB (uncompressed), from 54.2kB in the previous commit to
53.3kB with this commit.
Expected visual changes:
* The tab underline now overlaps with the toolbar underline, and text
pushed down on certain tabs
* The variant tab is now equally spaced
* Right navigation tabs slightly shifted to the right
Unexpected visual changes:
* More menu shifts to the left [see note at top of commit, will be
fixed in a follow up]
Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I77f3dd8e8ccfe3a1d9693746106d9783cc0d38b9
[Visual changes]
This should result in 9 visual regression failures relating to
increased height of search results and loading bar
[More details about change]
- Migrate search app from Vue 2 to Vue 3; update tests
accordingly
- Remove dependence on WVUI and use Codex instead, via the special
`@wikimedia/codex-search` package
- Update search app to use CdxTypeaheadSearch, which no longer
takes in props related to the search client or fetch start/end
instrumentation. Instead, directly use the restSearchClient
and call fetch start/end events in the search app.
- Handle hideDirection in the search app/API response formatting
code, not within the TypeaheadSearch component
- Handle showing/hiding the search button in the app
- Move the WVUI URL generator into Vector
- Update server-rendered search box styles to match design updates
included with CdxTypeaheadSearch
- Replace references to WVUI with references to Codex
- Update values of various LESS variables to match Codex, and update
searchBox styling to prevent jankiness when the searchBox is replaced
with the Codex TypeaheadSearch component
The VectorWvuiSearchOptions config variable has been maintained and
will be updated to a code-agnostic name in a future patch.
Bug: T300573
Bug: T302137
Bug: T303558
Bug: T309722
Bug: T310525
Co-Authored-By: Anne Tomasevich <atomasevich@wikimedia.org>
Change-Id: I59fa3a006d988b14ebd8020cbd58e8d7bedbfe01
- Update TOC bottom padding to match spec in T304166.
Before (30px): https://phabricator.wikimedia.org/F35312302
After (20px): https://phabricator.wikimedia.org/F35312299
- Rearrange/combine some selectors in TableOfContents.less
- Delete some unnecessary styles/selectors
- Rename variables in TableOfContents.less
Change-Id: Ifffc434dcab4256a0c3ae8faf43a342935b820ff
This patch also fixes a regression for non grid layout Vector on tablet viewports when the sidebar and collapsed TOC is open
https://jmp.sh/xZhkU6q
No pixel regressions
Change-Id: Ic371f9b7ddd017af835565834e26a65ad3c2afc8
Restore header margin between search and user links, as its
still needed for grid (Fixes F35282398)
Bug: T303484
Change-Id: Ie8cf4adcadff430ebfc675029635e6c22061b238
On tablet, where the table of contents is hidden, the
sidebar should take up the full screen when open.
Fixes Pixel regression
MediaWiki_Test_vector-2022_sidebar-open_0_html_1_tablet.png
Bug: T303484
Change-Id: Ie0aa9f661a652e137d691a1fa4b05e69f0c5f8ab
Since CSS grid uses row-gap we need to decrease
the margin we used in the legacy layout to keep these
the same
Bug: T303484
Change-Id: Ib28f0d5ee0afbb809591c99ef18cd3cbecf1f800
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
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
Content should always be aligned with the hamburger icon in the
new design between the tablet and desktop breakpoints.
Fixes: F35282438
Bug: T303484
Change-Id: I15215703d6392cd69ec57212d25c9a52149a6ac0
The 'mw-workspace-container' class is present on both
the footer and the sidebar. The CSS rule should only hide
the latter.
When there is no table of contents on the page, and the sidebar
is closed, the content
should always span the grid columns and the sidebar container
closed.
Bug: T293443
Change-Id: I852b9024fbd21339b7c78dbb4deba811ab17c7e7
Follow up to c5cfd4d
1) Partial paths are incorrect
These are not a problem with our current Mustache template
parser but could break with any changes in our PHP implementation
2) Add dedicated class to legacy menus
On the longer term this will allow us to further separate the
old and new CSS.
Change-Id: I056b033855c28f919a4af99784620503f10b9dcb
Briefly add it onto the originals when the click is being proxied so
that VE can pick up on it.
Bug: T309364
Change-Id: I871494b6e783018b1433f294e09b0d53dded6c3d
Reverts the border color of the page title introduced in
I5d807f09bfbbceaded756daa78dbb023efcc91dc
Bug: T310533
Change-Id: I877f91bcd4c0915cc495b5237a53bda6ad971497
Removes gradients from tabs (i.e. article toolbar) in new Vector, moving
the existing MenuTabs.less component into the skins.vector.styles.legacy module
and creating a new MenuTabs.less component for modern Vector.
Bug: T309398
Change-Id: I5d807f09bfbbceaded756daa78dbb023efcc91dc
It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.
Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
This will also apply to the grid layout so this seems a more
appropriate place, given the class relates to search.
Bug: T303484
Change-Id: Ib5b57fd948ecb5eefbf1d66e0e71045aed6e3102
When the vector-sticky-header-enabled class is removed from the body
it means the feature is not enabled, it doesn't mean the sticky header
should be invisible.
Call the hide method instead, and move it out of the function given
its a side effect
Bug: T308343
Change-Id: I4ecd6524146f203af926847812e20275c9573cab
