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

[refactor] SearchBox uses Icon template partial 

Change-Id: I8ff49b85dd2151618e48251e0fc38152a50ca381
This commit is contained in:
jdlrobson 2021-09-03 12:00:45 -07:00 committed by Jdlrobson
parent c97591189d
commit 31dba307ed
5 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
includes/SkinVector.php
View File

@ -420,7 +420,13 @@ class SkinVector extends SkinMustache {
// At lower resolutions the search input is hidden search and only the submit button is shown.
// It should behave like a form submit link (e.g. submit the form with no input value).
// We'll wire this up in a later task T284242.
$searchBoxData['href-search'] = Title::newFromText( $searchBoxData['page-title'] )->getLocalUrl();
$searchBoxData['data-collapse-icon'] = [
'href' => Title::newFromText( $searchBoxData['page-title'] )->getLocalUrl(),
'label' => $this->msg( 'search' ),
'icon' => 'wikimedia-search',
'is-quiet' => true,
'class' => 'search-toggle',
];
return $searchBoxData;
}

7
includes/templates/SearchBox.mustache
View File

@ -24,9 +24,8 @@
</form>
</div>
{{#is-collapsible}}
<a class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-wikimedia-search mw-ui-icon-element search-toggle"
href="{{href-search}}">
<span>{{msg-search}}</span>
</a>
{{#data-collapse-icon}}
{{>Button}}
{{/data-collapse-icon}}
{{/is-collapsible}}
</div>

14
stories/SearchBox.stories.data.js
View File

@ -3,6 +3,7 @@
*/
import searchBoxTemplate from '!!raw-loader!../includes/templates/SearchBox.mustache';
import Button from '!!raw-loader!../includes/templates/Button.mustache';
import { htmlUserLanguageAttributes } from './utils';
/**
@ -25,10 +26,21 @@ const legacySearchBoxData = {
const searchBoxData = Object.assign( {}, legacySearchBoxData, {
class: 'vector-search-box vector-search-show-thumbnail vector-search-box-collapses',
'is-collapsible': true,
'href-search': '/wiki/Special:Search'
'data-collapse-icon': {
icon: 'wikimedia-search',
'is-quiet': true,
class: 'search-toggle',
href: '/wiki/Special:Search',
label: 'Search'
}
} );
const SEARCH_TEMPLATE_PARTIALS = {
Button
};
export {
SEARCH_TEMPLATE_PARTIALS,
searchBoxTemplate,
legacySearchBoxData,
searchBoxData

8
stories/SearchBox.stories.js
View File

@ -1,16 +1,18 @@
import mustache from 'mustache';
import '../resources/skins.vector.styles/SearchBox.less';
import '../resources/skins.vector.styles/layouts/screen.less';
import { searchBoxData, legacySearchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
import { searchBoxData, legacySearchBoxData, searchBoxTemplate,
SEARCH_TEMPLATE_PARTIALS
} from './SearchBox.stories.data';
export default {
title: 'SearchBox'
};
export const legacySimpleSearch = () => `
${mustache.render( searchBoxTemplate, legacySearchBoxData )}
${mustache.render( searchBoxTemplate, legacySearchBoxData, SEARCH_TEMPLATE_PARTIALS )}
`;
export const simpleSearch = () => `
${mustache.render( searchBoxTemplate, searchBoxData )}
${mustache.render( searchBoxTemplate, searchBoxData, SEARCH_TEMPLATE_PARTIALS )}
`;

4
stories/skin.stories.data.js
View File

@ -10,7 +10,7 @@ import { menuTemplate } from './Menu.stories.data';
import { PERSONAL_MENU_TEMPLATE_DATA } from './UserLinks.stories.data';
import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
import { searchBoxData, searchBoxTemplate, SEARCH_TEMPLATE_PARTIALS } from './SearchBox.stories.data';
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, OPT_OUT_DATA,
sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data';
import { FOOTER_TEMPLATE_DATA, FOOTER_TEMPLATE_PARTIALS,
@ -65,7 +65,7 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
Menu: menuTemplate,
'legacy/UserLinks': userLinksTemplateLegacy,
Footer: footerTemplate
}, FOOTER_TEMPLATE_PARTIALS );
}, FOOTER_TEMPLATE_PARTIALS, SEARCH_TEMPLATE_PARTIALS );
/**
* @type {Indicator[]}