jenkins-bot has submitted this change and it was merged.
Change subject: Alpha experiment: Replace search bar with branding and icon
......................................................................
Alpha experiment: Replace search bar with branding and icon
The input serves no purpose in JavaScript other
than to make the entire header area clickable and make it
possible to search from the page itself without JavaScript
That said, according to the Zero team people click the search
icon without a search term thinking it is a link.
I'd be interested in us using this space for other things.
Change-Id: I3bbea996d8de3d23bb768e9cc4ffe202ccca0ca1
---
M includes/skins/MinervaTemplate.php
M includes/skins/MinervaTemplateAlpha.php
M includes/skins/SkinMinerva.php
M javascripts/modules/search/init.js
M less/iconsNew.less
A less/images/icons/magnifying-glass.png
A less/images/icons/magnifying-glass.svg
M less/ui.less
8 files changed, 60 insertions(+), 15 deletions(-)
Approvals:
Jhernandez: Looks good to me, approved
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/skins/MinervaTemplate.php
b/includes/skins/MinervaTemplate.php
index 83b5950..2e2b8f6 100644
--- a/includes/skins/MinervaTemplate.php
+++ b/includes/skins/MinervaTemplate.php
@@ -20,6 +20,27 @@
protected $isMainPage;
/**
+ * Renders the header content for the top chrome.
+ * @param array $data Data used to build the page
+ */
+ protected function makeChromeHeaderContent( $data ) {
+ echo Html::openElement( 'form',
+ array(
+ 'action' => $data['wgScript'],
+ 'class' => 'search-box',
+ )
+ ) .
+ $this->makeSearchInput( $this->getSearchAttributes() ) .
+ $this->makeSearchButton(
+ 'fulltext',
+ array(
+ 'class' => 'fulltext-search no-js-only
icon icon-search',
+ )
+ ) .
+ Html::closeElement( 'form' );
+ }
+
+ /**
* Get elements for personal toolbar
* @return array
*/
@@ -357,18 +378,7 @@
<div class="header">
<?php
$this->html( 'menuButton' );
- ?>
- <form action="<?php
echo $data['wgScript'] ?>" class="search-box">
- <?php
- echo
$this->makeSearchInput( $this->getSearchAttributes() );
- // FIXME: change this
into a search icon instead of a text button
- echo
$this->makeSearchButton(
- 'fulltext',
- array( 'class'
=> 'fulltext-search no-js-only icon icon-search' )
- );
- ?>
- </form>
- <?php
+ $this->makeChromeHeaderContent(
$data );
echo $data['secondaryButton'];
?>
</div>
diff --git a/includes/skins/MinervaTemplateAlpha.php
b/includes/skins/MinervaTemplateAlpha.php
index c2fb95e..7989d53 100644
--- a/includes/skins/MinervaTemplateAlpha.php
+++ b/includes/skins/MinervaTemplateAlpha.php
@@ -16,6 +16,28 @@
protected $searchPlaceHolderMsg = 'mobile-frontend-placeholder-alpha';
/**
+ * @inheritdoc
+ * Renders a search link and branding.
+ */
+ protected function makeChromeHeaderContent( $data ) {
+ echo Html::element( 'a',
+ array(
+ 'id' => 'searchInput',
+ 'class' => MobileUI::iconClass(
'search' ),
+ 'href' => Title::newFromText(
'Special:Search' )->getLocalUrl(),
+ ),
+ 'Search'
+ ) .
+ Html::openElement( 'div',
+ array(
+ 'class' => 'header-title',
+ )
+ ) .
+ SkinMinerva::getSitename() .
+ Html::closeElement( 'div' );
+ }
+
+ /**
* Get button information to link to Special:Nearby to find articles
* (geographically) related to this
*/
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 430f399..4214e68 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -1034,10 +1034,10 @@
* Returns the site name for the footer, either as a text or <img> tag
* @return string
*/
- protected function getSitename() {
+ public static function getSitename() {
global $wgMFCustomLogos, $wgMFTrademarkSitename;
- $footerSitename = $this->msg( 'mobile-frontend-footer-sitename'
)->text();
+ $footerSitename = wfMessage( 'mobile-frontend-footer-sitename'
)->text();
if ( isset( $wgMFCustomLogos['copyright'] ) ) {
$suffix = $wgMFTrademarkSitename ? ' ®' : '';
diff --git a/javascripts/modules/search/init.js
b/javascripts/modules/search/init.js
index 8ebd9a4..fe3b2d7 100644
--- a/javascripts/modules/search/init.js
+++ b/javascripts/modules/search/init.js
@@ -9,7 +9,8 @@
// focus() (see SearchOverlay#show) opens virtual keyboard only if
triggered
// from user context event, so using it in route callback won't work
//
http://stackoverflow.com/questions/6837543/show-virtual-keyboard-on-mobile-phones-in-javascript
- $( '#searchInput' ).on( 'click', function () {
+ $( '#searchInput' ).on( 'click', function ( ev ) {
+ ev.preventDefault();
schema.log( 'UI', 'search' );
new SearchOverlay( {
searchTerm: $( this ).val()
diff --git a/less/iconsNew.less b/less/iconsNew.less
index 9bf1651..3190029 100644
--- a/less/iconsNew.less
+++ b/less/iconsNew.less
@@ -176,6 +176,10 @@
.m-background-image-svg-quick('images/icons/arrow-up');
}
+.mw-ui-icon-search {
+ .m-background-image-svg-quick('images/icons/magnifying-glass');
+}
+
// FIXME: Find better workaround for this
span.mw-ui-icon {
// a block inside an inline element is never a good idea - effects line
height of mobile diff bytesadded class
diff --git a/less/images/icons/magnifying-glass.png
b/less/images/icons/magnifying-glass.png
new file mode 100644
index 0000000..46dd94b
--- /dev/null
+++ b/less/images/icons/magnifying-glass.png
Binary files differ
diff --git a/less/images/icons/magnifying-glass.svg
b/less/images/icons/magnifying-glass.svg
new file mode 100644
index 0000000..9c982b2
--- /dev/null
+++ b/less/images/icons/magnifying-glass.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24"
enable-background="new 0 0 612 792">
+ <path d="M3.065 16.536c1.765 1.766 4.073 2.732 6.583 2.732 2.187 0
4.25-.744 5.913-2.112l6.76 6.112s1.517-.398 1.89-2.086l-6.78-6.135c2.384-3.63
1.963-8.498-1.194-11.655C14.47 1.626 12.162.66 9.676.66c-2.487 0-4.822.97-6.584
2.71-3.656 3.647-3.63 9.537-.027
13.166zm1.54-11.11c.073-.1.175-.198.272-.272C6.17 3.887 7.86 3.166 9.672
3.166c1.812 0 3.504.72 4.794 1.988 2.635 2.635 2.66 6.934-.023 9.593-1.29
1.29-2.982 1.988-4.795 1.988-1.812
0-3.504-.72-4.794-1.988-2.534-2.534-2.66-6.634-.25-9.32z" id="path4"
fill="#555"/>
+</svg>
diff --git a/less/ui.less b/less/ui.less
index a3e4d81..5bade49 100644
--- a/less/ui.less
+++ b/less/ui.less
@@ -84,6 +84,10 @@
vertical-align: middle;
}
+ > .header-title {
+ vertical-align: middle;
+ }
+
.fulltext-search {
margin: 0 3px 0 9px;
}
--
To view, visit https://gerrit.wikimedia.org/r/177952
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I3bbea996d8de3d23bb768e9cc4ffe202ccca0ca1
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Jhernandez <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
