jenkins-bot has submitted this change and it was merged.
Change subject: Promote the enhanced search bar to stable
......................................................................
Promote the enhanced search bar to stable
Cached pages with no JS support will fall back to the simple search form
with a max-width as before.
Bug: T134894
Change-Id: I7b0dc769282c8550998dd29448a07105a73a1507
---
M extension.json
M includes/skins/MinervaTemplate.php
M includes/skins/search_form.mustache
M resources/mobile.overlays/Overlay.hogan
M resources/mobile.overlays/Overlay.less
M resources/mobile.search/SearchOverlay.js
M resources/mobile.search/SearchOverlay.less
M resources/mobile.search/header.hogan
R resources/skins.minerva.base.styles/magnifying-glass.svg
M resources/skins.minerva.base.styles/ui.less
D resources/skins.minerva.beta.styles/ui.less
R resources/skins.minerva.icons.images/magnifying-glass-white.svg
M tests/browser/features/support/pages/article_page.rb
13 files changed, 83 insertions(+), 135 deletions(-)
Approvals:
Phuedx: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index 4fb0960..e89b100 100644
--- a/extension.json
+++ b/extension.json
@@ -140,7 +140,6 @@
],
"position": "top",
"styles": [
- "resources/skins.minerva.beta.styles/ui.less",
"resources/skins.minerva.beta.styles/pageactions.less"
]
},
@@ -203,7 +202,8 @@
"notifications":
"resources/skins.minerva.icons.images/bell.svg",
"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"
+ "edit-enabled":
"resources/skins.minerva.icons.images/edit.svg",
+ "magnifying-glass-white":
"resources/skins.minerva.icons.images/magnifying-glass-white.svg"
}
},
"skins.minerva.icons.beta.images": {
@@ -211,8 +211,7 @@
"prefix": "mw-ui",
"selector": ".mw-ui-icon-{name}:before",
"images": {
- "language-switcher":
"resources/skins.minerva.icons.beta.images/languageSwitcher.svg",
- "magnifying-glass-white":
"resources/skins.minerva.icons.beta.images/magnifying-glass-white.svg"
+ "language-switcher":
"resources/skins.minerva.icons.beta.images/languageSwitcher.svg"
}
},
"mobile.overlay.images": {
diff --git a/includes/skins/MinervaTemplate.php
b/includes/skins/MinervaTemplate.php
index 97682bd..2cb0517 100644
--- a/includes/skins/MinervaTemplate.php
+++ b/includes/skins/MinervaTemplate.php
@@ -32,23 +32,13 @@
* @return string
*/
protected function getSearchForm( $data ) {
- $isBeta = MobileContext::singleton()->isBetaGroupMember();
- $additionalButtonClasses = '';
-
- if ( !$isBeta ) {
- // The enclosing div already has this class in beta, so
only add it
- // in stable.
- $additionalButtonClasses = ' no-js-only';
- }
-
$args = [
'action' => $data['wgScript'],
'searchInput' => $this->makeSearchInput(
$this->getSearchAttributes() ),
'searchButton' => $this->makeSearchButton( 'fulltext', [
'class' => MobileUI::buttonClass( 'progressive',
- 'fulltext-search' .
$additionalButtonClasses ),
- ] ),
- 'isBeta' => $isBeta
+ 'fulltext-search' ),
+ ] )
];
$templateParser = new TemplateParser( __DIR__ );
return $templateParser->processTemplate( 'search_form', $args );
diff --git a/includes/skins/search_form.mustache
b/includes/skins/search_form.mustache
index 43e1942..e889459 100644
--- a/includes/skins/search_form.mustache
+++ b/includes/skins/search_form.mustache
@@ -1,14 +1,8 @@
<form action="{{{ action }}}" class="search-box">
- {{# isBeta }}
- <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>
- {{/isBeta}}
- {{^ isBeta }}
- {{{ searchInput }}}
+ <div class="mw-ui-icon mw-ui-icon-element
mw-ui-icon-magnifying-glass-white button-wrapper no-js-only">
{{{ searchButton }}}
- {{/isBeta}}
-</form>
\ No newline at end of file
+ </div>
+ <div class="input-wrapper">
+ {{{ searchInput }}}
+ </div>
+</form>
diff --git a/resources/mobile.overlays/Overlay.hogan
b/resources/mobile.overlays/Overlay.hogan
index a87c9a7..304b83c 100644
--- a/resources/mobile.overlays/Overlay.hogan
+++ b/resources/mobile.overlays/Overlay.hogan
@@ -1,4 +1,4 @@
-<div class="overlay-header-container{{#fixedHeader}}
position-fixed{{/fixedHeader}}{{#isBeta}} header-chrome{{/isBeta}}">
+<div class="overlay-header-container header-chrome{{#fixedHeader}}
position-fixed{{/fixedHeader}}">
<div class="overlay-header">
{{>header}}
</div>
diff --git a/resources/mobile.overlays/Overlay.less
b/resources/mobile.overlays/Overlay.less
index 71dfc49..bf7c917 100644
--- a/resources/mobile.overlays/Overlay.less
+++ b/resources/mobile.overlays/Overlay.less
@@ -303,7 +303,7 @@
.overlay-header-container {
top: @headerMarginTop;
- border-bottom: 1px solid @grayLight;
+ border-bottom: 1px solid @chromeContentSeparator;
&.header-chrome {
background-color: @chromeColor;
@@ -372,12 +372,6 @@
overflow-y: scroll;
// smoother scrolling (with momentum) on iOS
-webkit-overflow-scrolling: touch;
- }
-}
-
-.beta {
- .overlay-header-container {
- border-bottom-color: @chromeContentSeparator;
}
}
diff --git a/resources/mobile.search/SearchOverlay.js
b/resources/mobile.search/SearchOverlay.js
index 4210327..8686800 100644
--- a/resources/mobile.search/SearchOverlay.js
+++ b/resources/mobile.search/SearchOverlay.js
@@ -7,8 +7,7 @@
WatchstarPageList = M.require(
'mobile.pagelist.scripts/WatchstarPageList' ),
SEARCH_DELAY = 300,
$html = $( 'html' ),
- feedbackLink = mw.config.get( 'wgCirrusSearchFeedbackLink' ),
- context = M.require( 'mobile.context/context' );
+ feedbackLink = mw.config.get( 'wgCirrusSearchFeedbackLink' );
/**
* Overlay displaying search results
@@ -82,8 +81,7 @@
href: feedbackLink
} ).options,
prompt: mw.msg(
'mobile-frontend-search-feedback-prompt' )
- },
- isBeta: context.isBetaGroupMember()
+ }
} ),
/**
* @inheritdoc
diff --git a/resources/mobile.search/SearchOverlay.less
b/resources/mobile.search/SearchOverlay.less
index 61f4b95..8b43d5d 100644
--- a/resources/mobile.search/SearchOverlay.less
+++ b/resources/mobile.search/SearchOverlay.less
@@ -14,21 +14,33 @@
.search-overlay {
background: #fff;
- .overlay-header,
.results,
.search-feedback {
// don't use background to preserve .loading properties
background-color: #fff;
}
+ .overlay-header {
+ background-color: transparent;
+ }
+ .overlay-title {
+ // because the clear icon is absolutely positioned
+ position: relative;
+ }
input {
border: none;
- padding: 0;
+ // save space for the clear icon
+ padding: 0 ( @iconSize + @iconGutterWidth * 2 ) 0 0;
// See
https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx (T102325)
&::-ms-clear {
display: none;
}
+ }
+ .clear {
+ position: absolute;
+ top: 0;
+ right: @iconGutterWidth;
}
.overlay-content {
@@ -154,27 +166,3 @@
}
}
-// FIXME: T134894
-.beta {
- .search-overlay {
- .overlay-header {
- background-color: transparent;
- }
-
- .overlay-title {
- // because the clear icon is absolutely positioned
- position: relative;
- }
-
- input {
- // save space for the clear icon
- padding-right: @iconSize + @iconGutterWidth * 2;
- }
-
- .clear {
- position: absolute;
- top: 0;
- right: @iconGutterWidth;
- }
- }
-}
diff --git a/resources/mobile.search/header.hogan
b/resources/mobile.search/header.hogan
index e8b585c..61f51ec 100644
--- a/resources/mobile.search/header.hogan
+++ b/resources/mobile.search/header.hogan
@@ -6,10 +6,5 @@
<input class="search" type="search" name="search"
autocomplete="off" placeholder="{{placeholderMsg}}" value="{{searchTerm}}">
</form>
{{! See: T136243. Do not put the clear button inside the form as
hitting enter on the input element triggers a button click, rather than
submitting the form. }}
- {{#isBeta}}{{#clearIcon}}{{>icon}}{{/clearIcon}}{{/isBeta}}
+ {{#clearIcon}}{{>icon}}{{/clearIcon}}
</div>
-{{^isBeta}}
-<ul>
- <li>{{#clearIcon}}{{>icon}}{{/clearIcon}}</li>
-</ul>
-{{/isBeta}}
diff --git a/resources/skins.minerva.beta.styles/magnifying-glass.svg
b/resources/skins.minerva.base.styles/magnifying-glass.svg
similarity index 100%
rename from resources/skins.minerva.beta.styles/magnifying-glass.svg
rename to resources/skins.minerva.base.styles/magnifying-glass.svg
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index fa760ce..e88d407 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -11,7 +11,26 @@
}
#content {
- border-top: 1px solid @grayLight;
+ //border-top: 1px solid @grayLight;
+ border-top-color: @chromeContentSeparator;
+}
+
+.header-container {
+ background-color: @chromeColor;
+}
+
+.search-overlay,
+.header {
+ .search {
+ padding: .5em 28px;
+ // FIXME: share this file with the similar file in
mobile.languages.structured
+ .background-image-svg( 'magnifying-glass.svg', '' );
+ background-position: 7px center;
+ background-repeat: no-repeat;
+ background-size: 20px 20px;
+ border-radius: @borderRadius;
+ box-shadow: 0 1px 1px rgba( 0, 0, 0, .05 );
+ }
}
.last-modified-bar {
@@ -115,18 +134,39 @@
.client-use-basic-search,
.client-nojs {
.search-box {
- .search,
- .fulltext-search {
- float: left;
- }
+ .fulltext-search, // FIXME: remove `.fulltext-search` selector
when cache clears
+ .button-wrapper {
+ background-color: @colorProgressive;
+ border-radius: @borderRadius;
+ cursor: pointer;
+ float: right;
+ margin-left: .5em;
+ padding: .375em 0;
- .search {
- // Assume the smallest possible screen size.
- // We want people to be able to search we don't care if
it looks pretty.
- width: 80px;
- margin-right: 8px;
- border: 1px solid @grayLight;
- padding: .5em .1em;
+ .fulltext-search {
+ opacity: 0; // the enclosing div is an icon,
no need to show the text
+ padding: 0;
+ }
+ }
+ .input-wrapper {
+ overflow: hidden;
+
+ .search {
+ margin-right: 0;
+ // FIXME: use the magnifying glass width,
rather than an absolute value
+ padding: .5em .1em .5em 2em; // 2em - space for
the magnifying glass icon
+ width: 100%;
+ }
+ }
+ // FIXME: remove when cache clears
+ > .search,
+ > .fulltext-search {
+ display: inline-block;
+ float: none;
+ }
+ // FIXME: remove when cache clears
+ > .search {
+ max-width: 180px;
}
}
diff --git a/resources/skins.minerva.beta.styles/ui.less
b/resources/skins.minerva.beta.styles/ui.less
deleted file mode 100644
index 9d6fb2b..0000000
--- a/resources/skins.minerva.beta.styles/ui.less
+++ /dev/null
@@ -1,50 +0,0 @@
-@import 'minerva.variables';
-@import 'minerva.mixins';
-
-#content {
- border-top-color: @chromeContentSeparator;
-}
-
-.header-container {
- background-color: @chromeColor;
-}
-
-.search-overlay,
-.header {
- .search {
- padding: .5em 28px;
- // FIXME: share this file with the similar file in
mobile.languages.structured
- .background-image-svg( 'magnifying-glass.svg', '' );
- background-position: 7px center;
- background-repeat: no-repeat;
- background-size: 20px 20px;
- border-radius: @borderRadius;
- box-shadow: 0 1px 1px rgba( 0, 0, 0, .05 );
- }
-}
-
-.client-use-basic-search,
-.client-nojs {
- .search-box {
- .button-wrapper {
- background-color: @colorProgressive;
- border-radius: .2em;
- cursor: pointer;
- float: right;
- margin-left: .5em;
- padding: .375em 0;
- }
- .fulltext-search {
- opacity: 0; // the enclosing div is an icon, no need
to show the text
- padding: 0;
- }
- .input-wrapper {
- overflow: hidden;
- }
- .search {
- margin-right: 0;
- padding: .5em .1em .5em 2em; // 2em - space for the
magnifying glass icon
- width: 100%;
- }
- }
-}
diff --git
a/resources/skins.minerva.icons.beta.images/magnifying-glass-white.svg
b/resources/skins.minerva.icons.images/magnifying-glass-white.svg
similarity index 100%
rename from resources/skins.minerva.icons.beta.images/magnifying-glass-white.svg
rename to resources/skins.minerva.icons.images/magnifying-glass-white.svg
diff --git a/tests/browser/features/support/pages/article_page.rb
b/tests/browser/features/support/pages/article_page.rb
index a9b5bbd..4b28ac3 100644
--- a/tests/browser/features/support/pages/article_page.rb
+++ b/tests/browser/features/support/pages/article_page.rb
@@ -56,7 +56,7 @@
button(:watch_confirm, class: 'mw-htmlform-submit')
# search
- button(:search_button, css: '.search-box input[type=submit]')
+ button(:search_button, css: '.search-box .button-wrapper')
p(:search_within_pages, css: '.without-results')
text_field(:search_box_placeholder, name: 'search', index: 0)
text_field(:search_box2, name: 'search', index: 1)
--
To view, visit https://gerrit.wikimedia.org/r/294644
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I7b0dc769282c8550998dd29448a07105a73a1507
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Jhernandez <jhernan...@wikimedia.org>
Gerrit-Reviewer: Jhobs <jhob...@wikimedia.org>
Gerrit-Reviewer: Phuedx <g...@samsmith.io>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
