Before Vue/WVUI lazy loads, we have intermediate search components that
are rendered on the server and that need to be styled based on the
`autoExpandWidth` prop passed to the search component. This commit
refactors VueEnhancedSearchBox to use this class if present.
Additionaly:
* Cleanup fixmes from Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
* Replace `vector-search-box-show-thumbnail` class with
`.vector-search-box-auto-expand-width` class in Header.less now that
the class has been cached in the HTML.
Depends-On: Ic914ecaee591008f987bd6d754fda8628125de7b
Bug: T297531
Change-Id: Ia6b7afa990fa4b04578740b483ba21dbef45a016
In preparation for I30c670e3f195f77a27715c6b494a3088b7a55712, refactor
the search component expand behavior so that it can accomodate the new
changes in WVUI while maintaining backwards compatibility with the
status quo.
Additionally, pass/enable the `auto-expand-width` prop to the main
header's search. This will be inert until the new changes in WVUI have
landed.
Bug: T297531
Change-Id: Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
Follow up to 9dcfc1f
This simplifies the template by removing the need for the html-class.
The font-size can be provided to the entire content area meaning we don't
need the link-only class
Change-Id: Id5c49358f6ec007b3205ee390cf68334a1e56de5
Aligns the notifications produced by `mw.notify` so that they don't
obstruct the sticky header or usage of elements inside the sticky header.
Bug: T260338
Change-Id: If00f27ec19e71f6803231678fbb733ffaa6c6aaf
Since a margin was added to adjacent sibling spans of icons (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/736919), Vector icon buttons have had too much spacing. This patch removes the extra spacing defined in Vector CSS and the accidental whitespace that was included in the ULS buttons..
Change-Id: I308d1941c5f82cb144c2a9d233fbf44c730413a7
- Add edit icons.
- Update data passed to sticky header, button templates.
- Show/hide edit icons client-side based on ids in fixed header.
- Disable sticky header when in Visual Editor mode.
- Use Visual Editor hooks to toggle IntersectionObserver.
- Remove extraneous js for setting offsets for other sticky elements (simplify by moving known sticky element th to css - follow up to https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/722475/comment/7b8ab2db_cd5c7e78/).
Bug: T289723
Change-Id: Ifbab2f1c4d716f8fc261e3d7fa35fc71c6065ec5
When the sticky header is visible, it has a global impact on the
scrolling UX. For example, it can undesirably overlap elements when the
user clicks on a jump link and when the user tabs through elements in
reverse order. Therefore, we need to add scroll padding to the root
element when the sticky header is enabled (when the feature flag is on
and at higher resolutions)
Known limitations:
* Scroll padding is supported by all the latest modern browsers except
for Safari [1]. This was considered an acceptable tradeoff with the
caveat that this decision may be revisited in the future as we learn
more about user interaction with the sticky header.
[1] https://caniuse.com/mdn-css_properties_scroll-padding-top
Bug: T290518
Change-Id: Ie5eb01d7eafd18ce740be620dfb5c8849386af6e
Styling should not depend on IDs to allow us to have multiple
searches in the page.
Precursor for wiring up search in the sticky header.
This also tweaks performance metrics to track separate metrics
for the sticky header search
Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
- Fixes blank sticky header language button when no languages are present
- Adds arrow to sticky header language button
Bug: T289815
Change-Id: I36dc5fb0aad9c3ca1fced0d46e5167e8707f6731
Per T289724#7342741, server renders an anchor tag pointing to #p-search
into the "button-start" bucket of the sticky header.
In the future after T289718, this anchor will then acts as a button when
the search module is loaded and searchToggle executes.
* skins.vector.search was modified to accomodate instantiating multiple
search components (one in the main header and one in the sticky
header).
* searchToggle.js was modified to accept a searchToggle element as a
param which the caller can then instantiate when ideal. For the sticky
header toggle, this needs to happen *after* the search module loads.
Before then, the toggle will act as a link.
* Drops one jQuery usage from searchToggle so that it can be jQuery
free. Because the native .closest method is used, IE11 support is also
dropped. However, the script feature detects and returns early if the
API isn't available.
* Makes App.vue accept an `id` prop so that multiple instances of it can
be created.
Bug: T289724
Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
We have many styles related to the layout and visibility of search that
are only useful in the context of the main header. Since many of these
elements have classes that will also be in the sticky header, we should
scope these rules to the main header so that we avoid an uphill battle
of styles trying to override eachother.
Additional changes:
* We previously had a mix of #p-search and .vector-search-box selectors
for the same element in the CSS. Header.less now only uses
.vector-searchbox to avoid specificity wars.
* Removed nearly all of the #p-search rules previously found on L147 -
L167 in screen.less after observing nothing relatively bad happening
when they were removed.
Bug: T289724
Change-Id: I2e6c269e29717cd20d8acfaddc3631ea1b8fedfa
- Show sticky header after bottom of first h1.
- Hide sticky header before bottom of first h1.
- Add media query for reduce motion preference.
Bug: T290101
Change-Id: I2b1ecd31ac360a1ef5bf2f016978d6e0665a316c
- Separate icon classes from button classes in user links/language
- Upgrades the personal tools language button preference to
a mw-ui-button with icon
- Adds a generic selector for dropdown menus without an icon
- Cleans up user links CSS now mw-list-item class is available
- Removes icon hack CSS
Bug: T289630
Bug: T283757
Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.
Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
Per T287522#7295558, the username should have a computed max-width of
200px above 1200px and a max-width of 155px below 1200px.
Additional changes:
* Use flex-wrap: nowrap on header instead of wrap. I think the former
may have been an unintended consequence of the consolidated links
feature flag clean up.
* Use core's text-overflow mixin for both the username and the usermenu
items
* Change the user menu's max-width to use relative units
Bug: T287522
Change-Id: I536e6371f85ccde75673af46c7667eb447eff081
Now that we bind the ULS dialog to the checkbox element,
(see c08ae11) the default behaviour of the checkbos is prevented,
so it is impossible for the dropdown to ever
be shown when ULS is enabled and clicked so this code no longer
serves any purpose.
Depends-On: I97a69c30b27cb1ded06451389e086229561c3589
Change-Id: Ic9d03dea12ee8bb2d7430eccd70e4343e3805d36
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed
Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
WVUI sets the icon as `left: -11px` [1]. Vector should do the same to
ensure the icon doesn't move when WVUI loads. Also set top and bottom
properties to zero so that the height of the icon's container is the
same as in WVUI (32 px).
[1] https://phabricator.wikimedia.org/F34622194
Change-Id: I73fa55f9013dc1bdd51581d357109d4817638d91
- Keep double-dash class name for cached HTML.
- Update instances of renamed class in less + js.
Bug: T253671
Change-Id: Ieb1ce630e8fa84167e2ca8497f66a20183fdaf90
When implementing how to cut overflowing text, a white fade out was
considered instead of an ellipsis, but that implementation brings
additional complexity when considering the user menu's hover states.
Therefore, the widely used `text-overflow: ellipsis` was used instead
with approval from the designer [1]
[1] https://phabricator.wikimedia.org/T287522#7255400
Bug: T287522
Change-Id: I49e6084bd621ca1637fbd167c8eaf8c07ee695ca
The padding-top of the orange notification set in
ext.echo.styles.alert.less was being overriden by the `padding-top: 0`
set in UserLinks.less which was intended to only override the padding
set in Menu.less.
This commit:
* Scopes the li styles in Menu.less to apply only to the legacy user
menu (found in both legacy and modern vector with the consolidated user
links feature off) which appears to be the only menus that needs these
rules.
* The padding-top previously in UserLinks is no longer needed as a
result of the above point.
* Adjusts/cleans up the positioning of the orange notification by
removing an unneeded margin/padding-top and setting the top to 100% (the
previous `calc` statement was unintentionally resulting in 112%).
Bug: T287633
Change-Id: Ia7069d291f53d8e0e0e576d7b96b7a8b1a6cb29d
