Bmansurov has uploaded a new change for review.
https://gerrit.wikimedia.org/r/219153
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
Bug: T101295
Change-Id: Ib23aead42ad804e4db89a20588e2bc28adeea40b
---
M includes/Resources.php
M includes/skins/MinervaTemplateAlpha.php
M includes/skins/MinervaTemplateBeta.php
M includes/skins/SkinMinervaAlpha.php
M resources/mobile.head/init.js
M resources/mobile.mainMenu/MainMenu.js
M resources/mobile.overlays/Overlay.less
M resources/mobile.search/SearchOverlay.less
M resources/mobile.special.mobilemenu.styles/mobilemenu.less
M resources/mobile.startup/Skin.js
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
17 files changed, 108 insertions(+), 144 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/53/219153/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 0cc10fb..e4d9908 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -102,12 +102,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',
@@ -202,13 +196,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(
@@ -217,6 +204,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(
@@ -248,18 +236,11 @@
'rtl' => 'images/icons/move-rtl.svg',
),
),
+ // 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',
- 'selector' => '.mw-ui-icon-{name}:before',
- 'images' => array(
- // Special:MobileMenu-specific back icon
- 'back-mobilemenu' =>
'images/icons/alpha/back-ltr.svg',
- 'search' => 'images/icons/magnifying-glass.svg',
- ),
- ),
);
$wgResourceModules = array_merge( $wgResourceModules, array(
diff --git a/includes/skins/MinervaTemplateAlpha.php
b/includes/skins/MinervaTemplateAlpha.php
index 76368e6..1725919 100644
--- a/includes/skins/MinervaTemplateAlpha.php
+++ b/includes/skins/MinervaTemplateAlpha.php
@@ -49,64 +49,4 @@
return $result;
}
-
- /**
- * @inheritdoc
- */
- protected function getHeaderHtml( $data ) {
- $templateParser = new TemplateParser( __DIR__ );
- $args = array(
- 'siteName' => SkinMinerva::getSitename(),
- 'mobileMenuClass' => MobileUI::iconClass( 'search',
'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(
- // FIXME: If this ever makes it to stable
replace with search-inverted
- 'class' => MobileUI::iconClass( 'search-white',
'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 92c1803..8482116 100644
--- a/includes/skins/MinervaTemplateBeta.php
+++ b/includes/skins/MinervaTemplateBeta.php
@@ -102,4 +102,66 @@
<?php
}
}
+
+ /**
+ * @inheritdoc
+ */
+ protected function getHeaderHtml( $data ) {
+ $templateParser = new TemplateParser( __DIR__ );
+ $args = array(
+ 'siteName' => SkinMinerva::getSitename(),
+ 'mobileMenuClass' => MobileUI::iconClass( 'search',
'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(
+ // FIXME: If this ever makes it to stable
replace with search-inverted
+ 'class' => MobileUI::iconClass( 'search-white',
'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 8a719b9..9c287e9 100644
--- a/includes/skins/SkinMinervaAlpha.php
+++ b/includes/skins/SkinMinervaAlpha.php
@@ -57,17 +57,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/resources/mobile.head/init.js b/resources/mobile.head/init.js
index 2d87ed9..cf15196 100644
--- a/resources/mobile.head/init.js
+++ b/resources/mobile.head/init.js
@@ -80,9 +80,9 @@
M.on( 'history-link-loaded', initHistoryLink );
M.on( 'header-loaded', function () {
// Render MainMenu when needed
- // In alpha there is no #mw-mf-main-menu-button, the user can
click on the header
+ // In alpha and beta there is no #mw-mf-main-menu-button, the
user can click on the header
// search icon or the site name in the header to open the main
menu
- $( '#mw-mf-main-menu-button, .alpha .header a.header-icon,
.alpha .header .header-title a' )
+ $( '#mw-mf-main-menu-button, .header a.header-icon, .header
.header-title a' )
.on( 'click', function ( ev ) {
mainMenu.openNavigationDrawer();
ev.preventDefault();
diff --git a/resources/mobile.mainMenu/MainMenu.js
b/resources/mobile.mainMenu/MainMenu.js
index 7ff25ba..db3efb0 100644
--- a/resources/mobile.mainMenu/MainMenu.js
+++ b/resources/mobile.mainMenu/MainMenu.js
@@ -84,9 +84,9 @@
}
// Listen to the main menu button clicks
- // In alpha there is no #mw-mf-main-menu-button, the
user can click on the header
+ // In alpha and beta there is no
#mw-mf-main-menu-button, the user can click on the header
// search icon or the site name in the header to open
the main menu
- $( '#mw-mf-main-menu-button, .alpha .header
a.header-icon, .alpha .header .header-title a' )
+ $( '#mw-mf-main-menu-button, .header a.header-icon,
.header .header-title a' )
.off( 'click' )
.on( 'click', function ( ev ) {
if ( self.isOpen() ) {
diff --git a/resources/mobile.overlays/Overlay.less
b/resources/mobile.overlays/Overlay.less
index 096d1e9..8589951 100644
--- a/resources/mobile.overlays/Overlay.less
+++ b/resources/mobile.overlays/Overlay.less
@@ -394,5 +394,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/SearchOverlay.less
b/resources/mobile.search/SearchOverlay.less
index dfc62bd..df9729b 100644
--- a/resources/mobile.search/SearchOverlay.less
+++ b/resources/mobile.search/SearchOverlay.less
@@ -79,7 +79,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 5f3f34e..5e92e36 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/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js
index 11711fe..9e0b67a 100644
--- a/resources/mobile.startup/Skin.js
+++ b/resources/mobile.startup/Skin.js
@@ -42,11 +42,11 @@
// Make sure the menu is open and we are not clicking
on the menu button
if (
this.mainMenu.isOpen() &&
- // stable and beta
+ // stable
ev.target.id !== 'mw-mf-main-menu-button' &&
- // alpha header icon and header title links,
which open the menu
- $target.get( 0 ) !== $( '.alpha .header
a.header-icon' ).get( 0 ) &&
- $target.get( 0 ) !== $( '.alpha .header
.header-title a' ).get( 0 )
+ // alpha and beta header icon and header title
links, which open the menu
+ $target.get( 0 ) !== $( '.header a.header-icon'
).get( 0 ) &&
+ $target.get( 0 ) !== $( '.header .header-title
a' ).get( 0 )
) {
this.mainMenu.closeNavigationDrawers();
ev.preventDefault();
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index 0b6df81..8cb6ef2 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -263,9 +263,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 5596690..4f3a997 100644
--- a/resources/skins.minerva.tablet.beta.styles/common.less
+++ b/resources/skins.minerva.tablet.beta.styles/common.less
@@ -47,13 +47,17 @@
top: 36px;
padding: 0;
}
- }
- .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;
}
+
+ .header-icon {
+ // so that the icon image is aligned with the content
+ left: -@iconGutterWidth;
+ }
}
}
--
To view, visit https://gerrit.wikimedia.org/r/219153
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib23aead42ad804e4db89a20588e2bc28adeea40b
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <bmansu...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
