Jdlrobson has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/330357 )
Change subject: New chrome header with branding ...................................................................... New chrome header with branding * Replace search input in header with search icon and heading * Search button without JS will take user to Special:Search as fallback * Search form is now visible on Special:Search page * Search button with JS will load search overlay Logo can be enabled in header+footer like so: ``` $wgMFCustomLogos = [ 'copyright' => 'https://en.m.wikipedia.org/static/images/mobile/wikipedia-wordmark-en.png' ]; ``` additional changes: * cleaned up multiple uses of magnifying-glass icon Note: Distinguishing stable from beta will be handled in a follow up commit. Bug: T152458 Change-Id: I53558f7a69e541eb36ded822e70e4a9602353648 --- M extension.json M includes/skins/MinervaTemplate.php M includes/skins/minerva.mustache D includes/skins/search_form.mustache D resources/skins.minerva.base.styles/magnifying-glass.png D resources/skins.minerva.base.styles/magnifying-glass.svg M resources/skins.minerva.base.styles/ui.less D resources/skins.minerva.icons.images/magnifying-glass-white.svg A resources/skins.minerva.icons.images/magnifying-glass.svg M resources/skins.minerva.special.search.styles/search.less 10 files changed, 46 insertions(+), 70 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/57/330357/1 diff --git a/extension.json b/extension.json index 3370ac2..de820c8 100644 --- a/extension.json +++ b/extension.json @@ -172,7 +172,7 @@ "mainmenu": "resources/skins.minerva.icons.images/hamburger.svg", "edit": "resources/skins.minerva.icons.images/editLocked.svg", "edit-enabled": "resources/skins.minerva.icons.images/edit.svg", - "magnifying-glass-white": "resources/skins.minerva.icons.images/magnifying-glass-white.svg", + "magnifying-glass": "resources/skins.minerva.icons.images/magnifying-glass.svg", "language-switcher": "resources/skins.minerva.icons.images/languageSwitcher.svg" } }, diff --git a/includes/skins/MinervaTemplate.php b/includes/skins/MinervaTemplate.php index 5739257..2c0dfe1 100644 --- a/includes/skins/MinervaTemplate.php +++ b/includes/skins/MinervaTemplate.php @@ -17,34 +17,6 @@ protected $isMainPage; /** - * Gets the header content for the top chrome. - * @param array $data Data used to build the page - * @return string - */ - protected function getChromeHeaderContentHtml( $data ) { - return $this->getSearchForm( $data ); - } - - /** - * Generates the HTML required to render the search form. - * - * @param array $data The data used to render the page - * @return string - */ - protected function getSearchForm( $data ) { - $args = [ - 'action' => $data['wgScript'], - 'searchInput' => $this->makeSearchInput( $data['searchInputAttributes'] ), - 'searchButton' => $this->makeSearchButton( 'fulltext', [ - 'class' => MobileUI::buttonClass( 'progressive', - 'fulltext-search' ), - ] ) - ]; - $templateParser = new TemplateParser( __DIR__ ); - return $templateParser->processTemplate( 'search_form', $args ); - } - - /** * Start render the page in template */ public function execute() { @@ -292,23 +264,6 @@ } /** - * Get HTML for header elements - * @param array $data Data used to build the header - * @return string - */ - protected function getHeaderHtml( $data ) { - // Note these should be wrapped in divs - // see https://phabricator.wikimedia.org/T98498 for details - $html = '<div>' . $data['menuButton'] . '</div>' - . $this->getChromeHeaderContentHtml( $data ); - // Do not show the secondary button container if no secondary button is available - if ( $data['secondaryButton'] ) { - $html .= '<div>' . $data['secondaryButton'] . '</div>'; - } - return $html; - } - - /** * Render the entire page * @param array $data Data used to build the page * @todo replace with template engines @@ -320,7 +275,14 @@ $templateData = [ 'banners' => $data['banners'], 'headelement' => $data[ 'headelement' ], - 'headerhtml' => $this->getHeaderHtml( $data ), + 'menuButton' => $data['menuButton'], + 'headinghtml' => $data['footer-site-heading-html'], + 'searchButton' => Html::element( 'a', [ + 'href' => SpecialPage::getTitleFor( 'Search' )->getLocalURL(), + 'id' => 'searchInput', + 'class' => MobileUI::iconClass( 'magnifying-glass', 'element' ), + ], wfMessage( 'searchbutton' ) ), + 'secondaryButton' => $data['secondaryButton'], 'mainmenuhtml' => $this->getMainMenuHtml( $data ), 'contenthtml' => $this->getContentWrapperHtml( $data ), 'footer' => $this->getFooterTemplateData( $data ), diff --git a/includes/skins/minerva.mustache b/includes/skins/minerva.mustache index da552b7..91ac914 100644 --- a/includes/skins/minerva.mustache +++ b/includes/skins/minerva.mustache @@ -10,7 +10,12 @@ </div> <div class="header-container"> <div class="header"> - {{{headerhtml}}} + <div>{{{menuButton}}}</div> + <div class="main"> + <h1>{{{headinghtml}}}</h1> + </div> + <div>{{{searchButton}}}</div> + <div>{{{secondaryButton}}}</div> </div> </div> <div id="content" class="mw-body"> diff --git a/includes/skins/search_form.mustache b/includes/skins/search_form.mustache deleted file mode 100644 index e889459..0000000 --- a/includes/skins/search_form.mustache +++ /dev/null @@ -1,8 +0,0 @@ -<form action="{{{ action }}}" class="search-box"> - <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-magnifying-glass-white button-wrapper no-js-only"> - {{{ searchButton }}} - </div> - <div class="input-wrapper"> - {{{ searchInput }}} - </div> -</form> diff --git a/resources/skins.minerva.base.styles/magnifying-glass.png b/resources/skins.minerva.base.styles/magnifying-glass.png deleted file mode 100644 index fa603b3..0000000 --- a/resources/skins.minerva.base.styles/magnifying-glass.png +++ /dev/null Binary files differ diff --git a/resources/skins.minerva.base.styles/magnifying-glass.svg b/resources/skins.minerva.base.styles/magnifying-glass.svg deleted file mode 100644 index 6c13512..0000000 --- a/resources/skins.minerva.base.styles/magnifying-glass.svg +++ /dev/null @@ -1,4 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24"> - <path fill="#777" d="M5.9 15.2c1.2 1.2 2.7 1.8 4.4 1.8 1.5 0 2.9-.5 4-1.4l4.3 3.9s1-.3 1.3-1.4l-4.3-3.9c1.6-2.4 1.3-5.7-.8-7.8-1.2-1.2-2.7-1.8-4.4-1.8-1.7-.1-3.3.6-4.4 1.8-2.5 2.4-2.5 6.4-.1 8.8zM7 7.7s.1-.1.2-.1c.9-.9 2-1.3 3.2-1.3 1.2 0 2.4.5 3.2 1.3 1.8 1.8 1.8 4.7 0 6.4-.9.9-2 1.3-3.2 1.3-1.2 0-2.4-.5-3.2-1.3-1.8-1.7-1.8-4.5-.2-6.3z"/> -</svg> diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less index 3a1cbc5..4d93d0d 100644 --- a/resources/skins.minerva.base.styles/ui.less +++ b/resources/skins.minerva.base.styles/ui.less @@ -87,7 +87,7 @@ } // Search field - > form, + .main, // Spinner > div { vertical-align: middle; @@ -100,9 +100,19 @@ } // Search - > form { + .main { width: auto; vertical-align: middle; + + h1 { + font-size: 1.25em; + margin-left: 5px; + + img { + height: 18px; + width: auto; + } + } } > .header-title { @@ -187,7 +197,6 @@ } input.search { - .background-image-svg( 'magnifying-glass.svg', 'magnifying-glass.png' ); outline: 0; width: 100%; // FIXME: unable to check but the important may not be needed for Nokia S60; diff --git a/resources/skins.minerva.icons.images/magnifying-glass-white.svg b/resources/skins.minerva.icons.images/magnifying-glass-white.svg deleted file mode 100644 index 8e9fe23..0000000 --- a/resources/skins.minerva.icons.images/magnifying-glass-white.svg +++ /dev/null @@ -1,4 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg xmlns="http://www.w3.org/2000/svg"; id="Layer_1" viewBox="0 0 24 24"> - <path d="M5.9 15.2c1.2 1.2 2.7 1.8 4.4 1.8 1.5 0 2.9-.5 4-1.4l4.3 3.9s1-.3 1.3-1.4l-4.3-3.9c1.6-2.4 1.3-5.7-.8-7.8-1.2-1.2-2.7-1.8-4.4-1.8-1.7-.1-3.3.6-4.4 1.8-2.5 2.4-2.5 6.4-.1 8.8zM7 7.7s.1-.1.2-.1c.9-.9 2-1.3 3.2-1.3 1.2 0 2.4.5 3.2 1.3 1.8 1.8 1.8 4.7 0 6.4-.9.9-2 1.3-3.2 1.3-1.2 0-2.4-.5-3.2-1.3-1.8-1.7-1.8-4.5-.2-6.3z" id="path3" fill="#FFF"/> -</svg> diff --git a/resources/skins.minerva.icons.images/magnifying-glass.svg b/resources/skins.minerva.icons.images/magnifying-glass.svg new file mode 100644 index 0000000..660281c --- /dev/null +++ b/resources/skins.minerva.icons.images/magnifying-glass.svg @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> + <!-- Generator: sketchtool 41.2 (35397) - http://www.bohemiancoding.com/sketch --> + <title>7C4F4673-7738-4B60-92D8-DB9437F6B241</title> + <desc>Created with sketchtool.</desc> + <defs></defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="Header---Signed-in" transform="translate(-292.000000, -85.000000)" fill="#54595D"> + <g id="header" transform="translate(0.000000, 65.000000)"> + <g id="Actions" transform="translate(15.000000, 18.000000)"> + <g id="SearchIcon" transform="translate(275.000000, 0.000000)"> + <path d="M16.4735179,15.4411986 C17.6205768,14.0647143 18.3088235,12.2294454 18.3088235,10.2794339 C18.3088235,5.80591599 14.7529297,2.25002217 10.2794118,2.25002217 C5.80588924,2.25002217 2.25,5.80591599 2.25,10.2794339 C2.25,14.7529565 5.80588924,18.3088457 10.2794118,18.3088457 C12,18.3088457 13.491165,17.8500291 14.7529297,16.9323613 L19.2264591,21.4058839 C19.6852712,21.8647005 20.4882238,21.8647005 21.0617532,21.4058839 L21.75,20.7176417 L16.4735179,15.4411986 Z M4.54411765,10.2794339 C4.54411765,7.0676807 7.06766082,4.54413982 10.2794118,4.54413982 C13.491165,4.54413982 16.0147059,7.0676807 16.0147059,10.2794339 C16.0147059,13.4911849 13.491165,16.0147281 10.2794118,16.0147281 C7.06766082,16.0147281 4.54411765,13.3765065 4.54411765,10.2794339 Z" id="Page-1"></path> + </g> + </g> + </g> + </g> + </g> +</svg> \ No newline at end of file diff --git a/resources/skins.minerva.special.search.styles/search.less b/resources/skins.minerva.special.search.styles/search.less index c849116..15f7bc3 100644 --- a/resources/skins.minerva.special.search.styles/search.less +++ b/resources/skins.minerva.special.search.styles/search.less @@ -24,8 +24,6 @@ } .mw-search-createlink, -.mw-search-profile-tabs, -// FIXME: Revisit when search input is not in a table -.client-js #search { +.mw-search-profile-tabs { display: none; } -- To view, visit https://gerrit.wikimedia.org/r/330357 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I53558f7a69e541eb36ded822e70e4a9602353648 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: master Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
