jenkins-bot has submitted this change and it was merged.
Change subject: Promote alpha header to beta
......................................................................
Promote alpha header to beta
Also:
* remove the extra space before the search input in search overlay
* make the overlay background white (similar to alpha) so that the
open left nav is not visible behind the overlay
Depends on I5b9da2e7f9145b4c58dbc4b7eba2d57917f26466
Bug: T101295
Change-Id: Ib23aead42ad804e4db89a20588e2bc28adeea40b
---
R images/icons/beta/back-ltr.svg
M includes/Resources.php
M includes/skins/MinervaTemplateAlpha.php
M includes/skins/MinervaTemplateBeta.php
M includes/skins/SkinMinervaAlpha.php
M includes/skins/SkinMinervaBeta.php
M resources/mobile.overlays/Overlay.less
M resources/mobile.search.beta/SearchOverlay.less
M resources/mobile.special.mobilemenu.styles/mobilemenu.less
M resources/skins.minerva.base.styles/ui.less
R resources/skins.minerva.beta.styles/magnifying-glass-gray.svg
R resources/skins.minerva.beta.styles/magnifying-glass.png
R resources/skins.minerva.beta.styles/magnifying-glass.svg
R resources/skins.minerva.beta.styles/ui.less
D resources/skins.minerva.tablet.alpha.styles/common.alpha.less
M resources/skins.minerva.tablet.beta.styles/common.less
16 files changed, 100 insertions(+), 152 deletions(-)
Approvals:
Phuedx: Looks good to me, approved
jenkins-bot: Verified
diff --git a/images/icons/alpha/back-ltr.svg b/images/icons/beta/back-ltr.svg
similarity index 100%
rename from images/icons/alpha/back-ltr.svg
rename to images/icons/beta/back-ltr.svg
diff --git a/includes/Resources.php b/includes/Resources.php
index 2292cbf..4c7ed0c 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -103,12 +103,6 @@
'resources/skins.minerva.tablet.beta.styles/hacks.less',
),
),
- 'skins.minerva.tablet.alpha.styles' =>
$wgMFResourceFileModuleBoilerplate + array(
- 'position' => 'top',
- 'styles' => array(
-
'resources/skins.minerva.tablet.alpha.styles/common.alpha.less'
- ),
- ),
'skins.minerva.icons.images' => $wgMFResourceFileModuleBoilerplate +
array(
'class' => 'ResourceLoaderImageModule',
'prefix' => 'mw-ui',
@@ -212,13 +206,6 @@
),
),
- 'skins.minerva.alpha.styles' => $wgMFResourceFileModuleBoilerplate +
array(
- 'position' => 'top',
- 'styles' => array(
- 'resources/skins.minerva.alpha.styles/ui.alpha.less',
- ),
- ),
-
'skins.minerva.beta.styles' => $wgMFResourceFileModuleBoilerplate +
array(
'position' => 'top',
'styles' => array(
@@ -227,6 +214,7 @@
'resources/skins.minerva.beta.styles/footer.less',
'resources/skins.minerva.beta.styles/main.less',
'resources/skins.minerva.beta.styles/hacks.less',
+ 'resources/skins.minerva.beta.styles/ui.less',
),
),
'skins.minerva.beta.images' => $wgMFResourceFileModuleBoilerplate +
array(
@@ -238,7 +226,10 @@
'invert' => array(
'color' => '#FFFFFF',
'global' => true,
- )
+ ),
+ 'gray' => array(
+ 'color' => '#555555',
+ ),
),
'images' => array(
// page actions
@@ -258,29 +249,8 @@
'rtl' => 'images/icons/move-rtl.svg',
),
),
- // NOTE: these icons are available but not used
anywhere yet. This note will be
- // removed in a later patch.
// Special:MobileMenu-specific back icon
- 'back-mobilemenu' => 'images/icons/alpha/back-ltr.svg',
- 'search' => 'images/icons/magnifying-glass.svg',
- ),
- ),
- 'skins.minerva.alpha.images' => $wgMFResourceFileModuleBoilerplate +
array(
- 'position' => 'bottom',
- 'class' => 'ResourceLoaderImageModule',
- 'selectorWithoutVariant' => '.mw-ui-icon-{name}:before',
- 'selectorWithVariant' => '.mw-ui-icon-{name}-{variant}:before',
- 'variants' => array(
- 'gray' => array(
- 'color' => '#555555',
- ),
- 'invert' => array(
- 'color' => '#FFFFFF',
- )
- ),
- 'images' => array(
- // Special:MobileMenu-specific back icon
- 'back-mobilemenu' => 'images/icons/alpha/back-ltr.svg',
+ 'back-mobilemenu' => 'images/icons/beta/back-ltr.svg',
'search' => array(
'file' => array(
'default' =>
'images/icons/magnifying-glass.svg',
@@ -1832,7 +1802,6 @@
'skins.minerva.beta.scripts' => $wgMFResourceFileModuleBoilerplate +
array(
'dependencies' => array(
'skins.minerva.scripts',
- 'skins.minerva.beta.images',
// Feature modules that should be loaded in beta should
be listed below here.
// These modules should only setup routes/events or
// load code under certain conditions.
diff --git a/includes/skins/MinervaTemplateAlpha.php
b/includes/skins/MinervaTemplateAlpha.php
index a592b96..1725919 100644
--- a/includes/skins/MinervaTemplateAlpha.php
+++ b/includes/skins/MinervaTemplateAlpha.php
@@ -49,63 +49,4 @@
return $result;
}
-
- /**
- * @inheritdoc
- */
- protected function getHeaderHtml( $data ) {
- $templateParser = new TemplateParser( __DIR__ );
- $args = array(
- 'siteName' => SkinMinerva::getSitename(),
- 'mobileMenuClass' => MobileUI::iconClass(
'search-gray', 'element', 'header-icon' ),
- 'mobileMenuLink' => SpecialPage::getTitleFor(
'MobileMenu' )->getLocalUrl(),
- 'mobileMenuTitle' => wfMessage(
'mobile-frontend-main-menu' )->parse(),
- 'secondaryButton' => $data['secondaryButton'],
- );
-
- return $templateParser->processTemplate( 'header', $args );
- }
-
- protected function getSearchAttributes() {
- $searchAttributes = parent::getSearchAttributes();
- $searchAttributes['class'] = MobileUI::semanticClass(
'mw-ui-input', '', 'search' );
-
- return $searchAttributes;
- }
-
- /**
- * @inheritdoc
- */
- protected function getSearchForm( $data ) {
- return Html::openElement( 'form',
- array(
- 'action' => $data['wgScript'],
- 'class' => 'search-box',
- )
- ) .
- Html::openElement( 'div', array(
- 'class' => MobileUI::iconClass(
'search-invert', 'element',
- 'fulltext-search no-js-only' ),
- ) ) .
- $this->makeSearchButton( 'fulltext' ) .
- Html::closeElement( 'div' ) .
- Html::openElement( 'span' ) .
- $this->makeSearchInput( $this->getSearchAttributes() ) .
- Html::closeElement( 'span' ) .
- Html::closeElement( 'form' );
- }
-
- /**
- * In addition to the main menu, this function renders the search form
on top of the menu
- * @inheritdoc
- */
- protected function getMainMenuHtml( $data ) {
- $templateParser = new TemplateParser( __DIR__ );
- $args = array(
- 'searchForm' => $this->getSearchForm( $data )
- );
- return $templateParser->processTemplate( 'searchForm', $args )
- . parent::getMainMenuHtml( $data );
- }
-
}
diff --git a/includes/skins/MinervaTemplateBeta.php
b/includes/skins/MinervaTemplateBeta.php
index 1fbf4b0..d2baf58 100644
--- a/includes/skins/MinervaTemplateBeta.php
+++ b/includes/skins/MinervaTemplateBeta.php
@@ -72,4 +72,65 @@
return $result;
}
+
+ /**
+ * @inheritdoc
+ */
+ protected function getHeaderHtml( $data ) {
+ $templateParser = new TemplateParser( __DIR__ );
+ $args = array(
+ 'siteName' => SkinMinerva::getSitename(),
+ 'mobileMenuClass' => MobileUI::iconClass(
'search-gray', 'element', 'header-icon' ),
+ 'mobileMenuLink' => SpecialPage::getTitleFor(
'MobileMenu' )->getLocalUrl(),
+ 'mobileMenuTitle' => wfMessage(
'mobile-frontend-main-menu' )->parse(),
+ 'secondaryButton' => $data['secondaryButton'],
+ );
+
+ return $templateParser->processTemplate( 'header', $args );
+ }
+
+ /**
+ * @inheritdoc
+ */
+ protected function getSearchAttributes() {
+ $searchAttributes = parent::getSearchAttributes();
+ $searchAttributes['class'] = MobileUI::semanticClass(
'mw-ui-input', '', 'search' );
+
+ return $searchAttributes;
+ }
+
+ /**
+ * @inheritdoc
+ */
+ protected function getSearchForm( $data ) {
+ return Html::openElement( 'form',
+ array(
+ 'action' => $data['wgScript'],
+ 'class' => 'search-box',
+ )
+ ) .
+ Html::openElement( 'div', array(
+ 'class' => MobileUI::iconClass(
'search-invert', 'element',
+ 'fulltext-search no-js-only' ),
+ ) ) .
+ $this->makeSearchButton( 'fulltext' ) .
+ Html::closeElement( 'div' ) .
+ Html::openElement( 'span' ) .
+ $this->makeSearchInput( $this->getSearchAttributes() ) .
+ Html::closeElement( 'span' ) .
+ Html::closeElement( 'form' );
+ }
+
+ /**
+ * In addition to the main menu, this function renders the search form
on top of the menu
+ * @inheritdoc
+ */
+ protected function getMainMenuHtml( $data ) {
+ $templateParser = new TemplateParser( __DIR__ );
+ $args = array(
+ 'searchForm' => $this->getSearchForm( $data )
+ );
+ return $templateParser->processTemplate( 'searchForm', $args )
+ . parent::getMainMenuHtml( $data );
+ }
}
diff --git a/includes/skins/SkinMinervaAlpha.php
b/includes/skins/SkinMinervaAlpha.php
index ce6278a..b0800f0 100644
--- a/includes/skins/SkinMinervaAlpha.php
+++ b/includes/skins/SkinMinervaAlpha.php
@@ -56,17 +56,4 @@
return $vars;
}
-
- /**
- * @inheritdoc
- */
- protected function getSkinStyles() {
- $skinStyles = parent::getSkinStyles();
-
- $skinStyles[] = 'skins.minerva.alpha.styles';
- $skinStyles[] = 'skins.minerva.alpha.images';
- $skinStyles[] = 'skins.minerva.tablet.alpha.styles';
-
- return $skinStyles;
- }
}
diff --git a/includes/skins/SkinMinervaBeta.php
b/includes/skins/SkinMinervaBeta.php
index ed53b15..c67b907 100644
--- a/includes/skins/SkinMinervaBeta.php
+++ b/includes/skins/SkinMinervaBeta.php
@@ -131,6 +131,7 @@
$styles = parent::getSkinStyles();
$styles[] = 'skins.minerva.beta.styles';
$styles[] = 'skins.minerva.tablet.beta.styles';
+ $styles[] = 'skins.minerva.beta.images';
if ( $this->getTitle()->isMainPage() ) {
$styles[] = 'skins.minerva.mainPage.beta.styles';
}
diff --git a/resources/mobile.overlays/Overlay.less
b/resources/mobile.overlays/Overlay.less
index cd093cc..d2c421d 100644
--- a/resources/mobile.overlays/Overlay.less
+++ b/resources/mobile.overlays/Overlay.less
@@ -389,5 +389,9 @@
// so that the icon image is aligned with the content
right: -@iconGutterWidth;
}
+ .overlay-header input.search {
+ // because we're pulling .cancel to the left too (see
above)
+ margin-left: -@iconGutterWidth;
+ }
}
}
diff --git a/resources/mobile.search.beta/SearchOverlay.less
b/resources/mobile.search.beta/SearchOverlay.less
index 0121be4..f3a496c 100644
--- a/resources/mobile.search.beta/SearchOverlay.less
+++ b/resources/mobile.search.beta/SearchOverlay.less
@@ -27,7 +27,8 @@
}
}
-.alpha {
+.alpha,
+.beta {
.search-overlay {
background: white;
.overlay-header-container.position-fixed {
diff --git a/resources/mobile.special.mobilemenu.styles/mobilemenu.less
b/resources/mobile.special.mobilemenu.styles/mobilemenu.less
index a083f9a..77d5ee2 100644
--- a/resources/mobile.special.mobilemenu.styles/mobilemenu.less
+++ b/resources/mobile.special.mobilemenu.styles/mobilemenu.less
@@ -23,7 +23,8 @@
}
}
- .alpha {
+ .alpha,
+ .beta {
.header {
.search-box {
span {
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index 8062775..2aafb60 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -268,9 +268,8 @@
}
.client-nojs {
- // alpha uses a magnifying glass as the search button so it doesn't
need this styling
- .stable,
- .beta {
+ // alpha and beta use a magnifying glass as the search button so it
doesn't need this styling
+ .stable {
.header {
.search {
// FIXME: padding values should be variables
diff --git a/resources/skins.minerva.alpha.styles/magnifying-glass-gray.svg
b/resources/skins.minerva.beta.styles/magnifying-glass-gray.svg
similarity index 100%
rename from resources/skins.minerva.alpha.styles/magnifying-glass-gray.svg
rename to resources/skins.minerva.beta.styles/magnifying-glass-gray.svg
diff --git a/resources/skins.minerva.alpha.styles/magnifying-glass.png
b/resources/skins.minerva.beta.styles/magnifying-glass.png
similarity index 100%
rename from resources/skins.minerva.alpha.styles/magnifying-glass.png
rename to resources/skins.minerva.beta.styles/magnifying-glass.png
Binary files differ
diff --git a/resources/skins.minerva.alpha.styles/magnifying-glass.svg
b/resources/skins.minerva.beta.styles/magnifying-glass.svg
similarity index 100%
rename from resources/skins.minerva.alpha.styles/magnifying-glass.svg
rename to resources/skins.minerva.beta.styles/magnifying-glass.svg
diff --git a/resources/skins.minerva.alpha.styles/ui.alpha.less
b/resources/skins.minerva.beta.styles/ui.less
similarity index 64%
rename from resources/skins.minerva.alpha.styles/ui.alpha.less
rename to resources/skins.minerva.beta.styles/ui.less
index 558b0ff..c1cdb2a 100644
--- a/resources/skins.minerva.alpha.styles/ui.alpha.less
+++ b/resources/skins.minerva.beta.styles/ui.less
@@ -1,4 +1,3 @@
-
@import "minerva.variables";
@import "minerva.mixins";
@import "mediawiki.mixins";
@@ -31,26 +30,23 @@
}
}
-.alpha {
+.header {
+ background-color: #fff;
+ position: relative;
- .header {
- background-color: #fff;
- position: relative;
-
- .header-title {
- // align the text in the middle regardless of whether
the notification icon exists or not
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- text-align: center;
- top: 0;
- width: auto;
- a {
- display: block;
- line-height: @headerHeight;
- text-decoration: none;
- }
+ .header-title {
+ // align the text in the middle regardless of whether the
notification icon exists or not
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ top: 0;
+ width: auto;
+ a {
+ display: block;
+ line-height: @headerHeight;
+ text-decoration: none;
}
}
}
diff --git a/resources/skins.minerva.tablet.alpha.styles/common.alpha.less
b/resources/skins.minerva.tablet.alpha.styles/common.alpha.less
deleted file mode 100644
index 02436f9..0000000
--- a/resources/skins.minerva.tablet.alpha.styles/common.alpha.less
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "minerva.variables";
-@import "mediawiki.ui/variables";
-
-@media all and (min-width: @wgMFDeviceWidthTablet) {
- .alpha {
- .header-icon {
- // so that the icon image is aligned with the content
- left: -@iconGutterWidth;
- }
- }
-}
diff --git a/resources/skins.minerva.tablet.beta.styles/common.less
b/resources/skins.minerva.tablet.beta.styles/common.less
index bd19be9..c6e39d2 100644
--- a/resources/skins.minerva.tablet.beta.styles/common.less
+++ b/resources/skins.minerva.tablet.beta.styles/common.less
@@ -32,7 +32,8 @@
// FIXME: Zero should use banner-container class or better -
append to banner-container
#mw-mf-page-center .mw-mf-banner,
.banner-container,
- .header,
+ // Alpha and beta have a .header in navigation drawer
+ #mw-mf-page-center .header,
.pre-content,
.post-content,
.content-unstyled,
@@ -51,8 +52,7 @@
margin-top: -1px;
}
- // stable and beta hamburger icon
- #mw-mf-main-menu-button {
+ .header-icon {
// so that the icon image is aligned with the content
left: -@iconGutterWidth;
}
@@ -61,11 +61,10 @@
// so that the icon image is aligned with the content
right: -@iconGutterWidth;
}
- }
- .beta {
- // Search input in the header
- #searchInput {
+ // FIXME: remove when cache clears. Beta doesn't have
searchInput in the header anymore
+ // Search input in the header inside page-center (rather than
the left nav)
+ #mw-mf-page-center #searchInput {
// because we're pulling #mw-mf-main-menu-button to the
left too (see above)
margin-left: -@iconGutterWidth;
}
--
To view, visit https://gerrit.wikimedia.org/r/219153
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ib23aead42ad804e4db89a20588e2bc28adeea40b
Gerrit-PatchSet: 14
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
Gerrit-Reviewer: BarryTheBrowserTestBot <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Jhernandez <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
