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. // 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). // 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. // 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; return $searchBoxData;
} }

7
includes/templates/SearchBox.mustache
View File

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

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

@ -3,6 +3,7 @@
*/ */
import searchBoxTemplate from '!!raw-loader!../includes/templates/SearchBox.mustache'; import searchBoxTemplate from '!!raw-loader!../includes/templates/SearchBox.mustache';
import Button from '!!raw-loader!../includes/templates/Button.mustache';
import { htmlUserLanguageAttributes } from './utils'; import { htmlUserLanguageAttributes } from './utils';
/** /**
@ -25,10 +26,21 @@ const legacySearchBoxData = {
const searchBoxData = Object.assign( {}, legacySearchBoxData, { const searchBoxData = Object.assign( {}, legacySearchBoxData, {
class: 'vector-search-box vector-search-show-thumbnail vector-search-box-collapses', class: 'vector-search-box vector-search-show-thumbnail vector-search-box-collapses',
'is-collapsible': true, '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 { export {
SEARCH_TEMPLATE_PARTIALS,
searchBoxTemplate, searchBoxTemplate,
legacySearchBoxData, legacySearchBoxData,
searchBoxData searchBoxData

8
stories/SearchBox.stories.js
View File

@ -1,16 +1,18 @@
import mustache from 'mustache'; import mustache from 'mustache';
import '../resources/skins.vector.styles/SearchBox.less'; import '../resources/skins.vector.styles/SearchBox.less';
import '../resources/skins.vector.styles/layouts/screen.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 { export default {
title: 'SearchBox' title: 'SearchBox'
}; };
export const legacySimpleSearch = () => ` export const legacySimpleSearch = () => `
${mustache.render( searchBoxTemplate, legacySearchBoxData )} ${mustache.render( searchBoxTemplate, legacySearchBoxData, SEARCH_TEMPLATE_PARTIALS )}
`; `;
export const simpleSearch = () => ` 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 { PERSONAL_MENU_TEMPLATE_DATA } from './UserLinks.stories.data';
import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data'; import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.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, import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, OPT_OUT_DATA,
sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data'; sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data';
import { FOOTER_TEMPLATE_DATA, FOOTER_TEMPLATE_PARTIALS, import { FOOTER_TEMPLATE_DATA, FOOTER_TEMPLATE_PARTIALS,
@ -65,7 +65,7 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
Menu: menuTemplate, Menu: menuTemplate,
'legacy/UserLinks': userLinksTemplateLegacy, 'legacy/UserLinks': userLinksTemplateLegacy,
Footer: footerTemplate Footer: footerTemplate
}, FOOTER_TEMPLATE_PARTIALS ); }, FOOTER_TEMPLATE_PARTIALS, SEARCH_TEMPLATE_PARTIALS );
/** /**
* @type {Indicator[]} * @type {Indicator[]}