golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Make expanding search input dependent on $wgVectorWvuiSearchOptions 

Per T270202#6767750 the input should expand when focused before WVUI
loads. However, the input should *only* expand when `showThumbnail` is
`true` in `$wgVectorWvuiSearchOptions` to match how its done in WVUI
where it takes into account the size of the thumbnails. When
`showThumbnail` is false, it should not expand as the input won't match
WVUI and the WVUI load transition will be jarring.

To test locally, toggle between true/false in your LocalSettings.php:

```
$wgVectorWvuiSearchOptions = [
  "showThumbnail" => false,
];
```
Bug: T270202
Change-Id: I70277c1082a504fbd5f6023e9873e8071de7e35d
This commit is contained in:
Nicholas Ray 2021-01-26 16:48:20 -07:00
parent 8c76a17e43
commit 1e7ed6b2e1
3 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
includes/SkinVector.php
View File

@ -138,7 +138,10 @@ class SkinVector extends SkinMustache {
'input-location' => $this->getSearchBoxInputLocation(),
'sidebar-visible' => $this->isSidebarVisible(),
'is-language-in-header' => $this->isLanguagesInHeader(),
'should-search-expand' => $this->shouldSearchExpand(),
] );
if ( $skin->getUser()->isRegistered() ) {
@ -169,6 +172,22 @@ class SkinVector extends SkinMustache {
return Constants::SEARCH_BOX_INPUT_LOCATION_MOVED;
}
/**
* Determines whether or not the search input should expand when focused
* before WVUI search is loaded. In WVUI, the search input expands to
* accomodate thumbnails in the suggestion list. When thumbnails are
* disabled, the input should not expand. Note this is only relevant for WVUI
* search (not legacy search).
*
* @return bool
*/
private function shouldSearchExpand() : bool {
$featureManager = VectorServices::getFeatureManager();
return $featureManager->isFeatureEnabled( Constants::FEATURE_USE_WVUI_SEARCH ) &&
$this->getConfig()->get( 'VectorWvuiSearchOptions' )['showThumbnail'];
}
/**
* Determines wheather the initial state of sidebar is visible on not
*

2
includes/templates/SearchBox.mustache
View File

@ -1,7 +1,7 @@
{{!
See @typedef SearchData
}}
<div id="p-search" role="search">
<div id="p-search" role="search" {{#should-search-expand}}class="p-search--show-thumbnail"{{/should-search-expand}}>
<h3 {{{html-user-language-attributes}}}>
<label for="searchInput">{{msg-search}}</label>
</h3>

36
resources/skins.vector.styles/VueEnhancedSearchBox.less
View File

@ -65,15 +65,6 @@
padding-left: @size-search-figure;
// Derived from @padding-input-text in WVUI's Input component.
padding-right: 8px;
// Recreate WVUI expanding input.
&:focus {
position: relative;
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
padding-left: ~'calc( 12px + @{size-search-figure} + 12px )';
width: ~'calc( 100% + 24px )';
left: ~'calc( -1 * 24px )';
}
}
// Move & resize search icon to match WVUI.
@ -94,17 +85,28 @@
width: @size-search-figure;
}
// Reposition search icon for expanded input.
#searchInput:focus ~ #searchButton,
#searchInput:focus ~ #mw-searchButton {
// Derived from
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
left: -11px;
}
// Reset WVUI. Prevents the input border from animating
// when it gets inserted into the DOM while being focused.
.wvui-input__input:not( [ disabled ] ) {
.transition( none );
}
.p-search--show-thumbnail {
// Recreate WVUI expanding input.
#searchInput:focus {
position: relative;
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
padding-left: ~'calc( 12px + @{size-search-figure} + 12px )';
width: ~'calc( 100% + 24px )';
left: ~'calc( -1 * 24px )';
}
// Reposition search icon for expanded input.
#searchInput:focus ~ #searchButton,
#searchInput:focus ~ #mw-searchButton {
// Derived from
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
left: -11px;
}
}
}