mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-05 04:30:22 +00:00
ce77018b7c
[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
189 lines
6.6 KiB
Plaintext
189 lines
6.6 KiB
Plaintext
@import '../../common/variables.less';
|
|
|
|
/**
|
|
* Minimal styling for initial no-JS server-rendered
|
|
* search form, which gets replaced by Codex on focus.
|
|
* Most values are hard-coded since they aim to
|
|
* mimic Codex-specific variables and disable the
|
|
* ResourceLoader LESS transformation of `calc`.
|
|
*/
|
|
|
|
// Derived from @size-base design token in Codex
|
|
@size-base: 32px;
|
|
|
|
@min-size-search-button: 30px;
|
|
@background-size-x-search-button: unit( 20px / @font-size-browser / @font-size-base, em );
|
|
|
|
// Search container
|
|
// We have to put those styles outside `.skin-vector-search-vue`,
|
|
// as we can't address no-JS modern and Vue enhanced otherwise.
|
|
.vector-search-box {
|
|
// Use Vector's base font-size, as this is a component outside of `.vector-body`.
|
|
font-size: @font-size-base;
|
|
// Support IE 9-11, Trident cuts values 2 digits after decimal point.
|
|
// `calc` enables to set correct calculation in place again. See T102364.
|
|
font-size: @font-size-base--trident-hack;
|
|
// If this is a flex item, make sure it grows into available space.
|
|
flex-grow: 1;
|
|
|
|
> div {
|
|
max-width: @max-width-search;
|
|
}
|
|
}
|
|
|
|
// Typeahead search elements
|
|
.vector-search-box-vue .vector-search-box-input,
|
|
.vector-search-box-vue .searchButton {
|
|
// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
|
|
font-size: inherit;
|
|
}
|
|
|
|
.vector-search-box-vue .vector-search-box-input {
|
|
height: @size-base;
|
|
}
|
|
|
|
.vector-search-box-vue .searchButton {
|
|
background-size: @background-size-x-search-button auto;
|
|
}
|
|
|
|
// Only apply the following Codex-related rules to clients who have js enabled.
|
|
.client-js .vector-search-box-vue {
|
|
// Derived from @size-search-figure in Codex.
|
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/typeahead-search/TypeaheadSearch.vue#676
|
|
@size-search-figure: 40px;
|
|
// Derived from text input start icon padding in Codex.
|
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/text-input/TextInput.vue#257
|
|
@padding-left-start-icon: 36px;
|
|
|
|
.cdx-typeahead-search {
|
|
// Hide the button, only show it on hover or when the input or the button itself is focused
|
|
.cdx-search-input__end-button {
|
|
opacity: 0;
|
|
// 250ms transition to match the border-color transition in CdxTextInput
|
|
transition: opacity 250ms;
|
|
|
|
&:focus {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Hide the border between the input and the button
|
|
.cdx-text-input__input:not( :hover ):not( :focus ) {
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
&--active,
|
|
&:hover {
|
|
.cdx-search-input__end-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
// Make the text input's right border appear on top of the button's left border,
|
|
// otherwise the hover transition looks weird
|
|
.cdx-text-input {
|
|
z-index: 1;
|
|
}
|
|
|
|
// Use straight corners instead of rounded corners for the border between the
|
|
// input and the button. Only apply this on hover, to reduce (but not eliminate) the
|
|
// tiny gap in the input's border when the button is hidden
|
|
.cdx-text-input__input {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
.cdx-menu-item {
|
|
// Remove margin-bottom on li elements that is applied by
|
|
// mediawiki.skinning/elements.css.
|
|
margin-bottom: 0;
|
|
|
|
a {
|
|
// Remove link underline on hover that is applied by
|
|
// mediawiki.skinning/elements.css.
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// Reset Codex. Prevents the input border and the start icon from animating
|
|
// when the input gets inserted into the DOM while being focused.
|
|
&.vector-search-box-disable-transitions {
|
|
.cdx-text-input__input:enabled,
|
|
.cdx-text-input__start-icon {
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vector-search-box-input {
|
|
padding-left: @padding-left-start-icon;
|
|
// Derived from @padding-input-text in Codex's TextInput component.
|
|
padding-right: 8px;
|
|
}
|
|
|
|
// Move & resize search icon to match Codex.
|
|
.searchButton {
|
|
// T270202: Act like a an inert element instead of a submit button before
|
|
// Codex loads to discourage people clicking on it since it is a submit
|
|
// button styled to look like Codex's inert start icon. Note, ideally these
|
|
// submit buttons should be changed to inert elements like span to be
|
|
// semantically correct.
|
|
pointer-events: none;
|
|
// Override the default right & left position of the icon.
|
|
right: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
// Accounts for the 1px input border.
|
|
left: @border-width-base;
|
|
// Increase size to match Codex.
|
|
width: @padding-left-start-icon;
|
|
// Set opacity to match icon color from Codex (0.51 approximates #72777d)
|
|
opacity: 0.51;
|
|
}
|
|
|
|
.vector-search-box-input:focus ~ .searchButton {
|
|
// When the input is focused, change icon color to match Codex (0.87 approximates #202122)
|
|
opacity: 0.87;
|
|
}
|
|
|
|
&.vector-search-box-show-thumbnail {
|
|
> div {
|
|
// Ensure the input + search button = 500px when unfocused and `auto-expand-width` enabled (i.e. search in header)
|
|
// Also increases the width of the sticky header search, which has `auto-expand-width` disabled
|
|
max-width: @max-width-search + unit( @size-search-expand / @font-size-browser / @font-size-base, em ); // 37.42857143em @ 16 & 0.875em
|
|
}
|
|
|
|
&.vector-search-box-auto-expand-width .searchButton {
|
|
// Accounts for the margin that allocates space for the input expanding and
|
|
// 1px input border.
|
|
left: @size-search-expand + @border-width-base;
|
|
}
|
|
|
|
&.vector-search-box-auto-expand-width .vector-search-box-input {
|
|
margin-left: @size-search-expand;
|
|
width: ~'calc( 100% - @{size-search-expand} )';
|
|
}
|
|
|
|
// Recreate Codex expanding input.
|
|
&:not( .vector-search-box-auto-expand-width ) .vector-search-box-input,
|
|
&.vector-search-box-auto-expand-width .vector-search-box-input:focus {
|
|
margin-left: 0;
|
|
// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
|
|
padding-left: ~'calc( @{padding-left-start-icon} + @{size-search-expand} )';
|
|
width: 100%;
|
|
}
|
|
|
|
// Reposition search icon for expanded input.
|
|
&:not( .vector-search-box-auto-expand-width ) .vector-search-box-input ~ .searchButton,
|
|
&.vector-search-box-auto-expand-width .vector-search-box-input:focus ~ .searchButton {
|
|
// Derived from @spacing-start-typeahead-icon in Codex
|
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/typeahead-search/TypeaheadSearch.vue#708
|
|
@spacing-start-typeahead-icon: 22px;
|
|
// Codex uses left: @spacing-start-typeahead-icon, but we have to account for the fact
|
|
// that we made the search button wider and centered the icon in it
|
|
@size-icon-px: 20px;
|
|
left: @spacing-start-typeahead-icon - ( @padding-left-start-icon - @size-icon-px ) / 2;
|
|
}
|
|
}
|
|
}
|