Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/165096
Change subject: WIP: Use mw-ui-icon in beta
......................................................................
WIP: Use mw-ui-icon in beta
This changes Mobile to use the standard approach
for icons outlined in the living styleguide.
TODO:
* tiny notification icon
* Move icons into core / use svgs for all to fix bug 64101
* Work out what to do with page images
* this page has issues
* VE/EditorOverlay edit switcher and icons
Bug: 64101
Bug: 71071
Bug: 71181
Change-Id: Id155a3f2e6ac80d0a30d1d35902a871e85db9722
Dependency: I68a1b207d8a4af57879361921a5f8c3aeda3fd9a
Dependency: I5133d243ef98b17adada313f03cac48d8d3fc827
---
M includes/Resources.php
M includes/skins/SkinMinerva.php
M includes/skins/SkinMinervaAlpha.php
M includes/skins/SkinMinervaBeta.php
M includes/specials/MobileSpecialPageFeed.php
M includes/specials/SpecialMobileDiff.php
M includes/specials/SpecialMobileHistory.php
M includes/specials/SpecialUserProfile.php
M javascripts/CtaDrawer.js
M javascripts/Overlay.js
M javascripts/modules/editor/editor.js
M javascripts/modules/issues/issues.js
M javascripts/modules/references/references.js
M javascripts/modules/toc/toc.js
M javascripts/modules/toggling/toggle.js
M javascripts/modules/uploads/LeadPhotoUploaderButton.js
M javascripts/modules/uploads/PhotoUploaderButton.js
M javascripts/modules/uploads/UploadTutorial.js
M javascripts/modules/watchstar/Watchstar.js
M javascripts/modules/watchstar/init.js
M less/Overlay.less
M less/drawer.less
M less/icons.less
A less/iconsNew.less
M less/mainmenu.less
M less/minerva.less/minerva.mixins.less
M less/modules/issues.less
M less/modules/references.less
M less/modules/toc/toc.less
M less/modules/toggle.less
M less/modules/uploads/PhotoUploaderButton.less
M less/modules/uploads/UploadTutorial.less
M less/modules/watchstar.less
M less/pageactions.less
D less/specials/images/profile/talk.png
M less/specials/mobilediff.less
M less/specials/pagefeed.less
M less/specials/userprofile.less
M less/tablet/common.less
M less/ui.less
M templates/ReferencesDrawer.hogan
M templates/backButton.hogan
M templates/cancelButton.hogan
M templates/ctaDrawer.hogan
M templates/modules/search/SearchOverlay.hogan
M templates/modules/toc/toc.hogan
M templates/overlays/cleanup.hogan
M templates/page.hogan
M templates/section.hogan
M templates/uploads/UploadTutorial.hogan
M tests/qunit/modules/test_PageList.js
51 files changed, 533 insertions(+), 104 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/96/165096/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 54f1a70..ca65476 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -115,6 +115,13 @@
'position' => 'top',
),
+ 'skins.minerva.icons.styles' => $wgMFMobileResourceBoilerplate + array(
+ 'styles' => array(
+ 'less/iconsNew.less',
+ ),
+ 'position' => 'top',
+ ),
+
// Important: This module is loaded on both mobile and desktop skin
'mobile.head' => $wgMFMobileResourceBoilerplate + array(
'dependencies' => array(
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 2329bad..791034d 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -768,7 +768,7 @@
$menu['watch'] = array_merge(
$actions['watch'], $watchTemplate );
} elseif ( isset( $actions['unwatch'] ) ) {
$menu['watch'] = array_merge(
$actions['unwatch'], $watchTemplate );
- $menu['watch']['class'] .= ' watched';
+ $menu['watch']['class'] .= '
mw-ui-icon-watched';
} else {
// placeholder for not logged in
$menu['watch'] = $watchTemplate;
diff --git a/includes/skins/SkinMinervaAlpha.php
b/includes/skins/SkinMinervaAlpha.php
index ac34c70..2ccdc0e 100644
--- a/includes/skins/SkinMinervaAlpha.php
+++ b/includes/skins/SkinMinervaAlpha.php
@@ -68,12 +68,12 @@
}
if ( $numTopics ) {
$talkLabel = $this->getLanguage()->formatNum(
$numTopics );
- $class = static::iconClass( 'talk', 'element',
'count icon-32px' );
+ $class = static::iconClass( 'talk', 'element',
'count' );
} else {
$talkLabel = wfMessage(
'mobile-frontend-talk-overlay-header' );
// add hidden css class to hide talk button,
when no content there. Adding content
// isn't possible without JS, so remove the
class in talk.js
- $class = static::iconClass( 'talk', 'element',
'hidden icon-32px' );
+ $class = static::iconClass( 'talk', 'element',
'hidden' );
}
$menu = $tpl->data['page_actions'];
if ( isset( $menu['talk'] ) ) {
diff --git a/includes/skins/SkinMinervaBeta.php
b/includes/skins/SkinMinervaBeta.php
index bef76cf..2f5fe75 100644
--- a/includes/skins/SkinMinervaBeta.php
+++ b/includes/skins/SkinMinervaBeta.php
@@ -14,6 +14,20 @@
/**
* initialize various variables and generate the template
+ * @param string iconName
+ * @param string iconType element or before
+ * @param string additionalClassNames additional class names you want
to associate with the iconed element
+ * @return string class name for use with HTML element
+ */
+ public static function iconClass( $iconName, $iconType = 'element',
$additionalClassNames = '' ) {
+ $modifiers = 'mw-ui-icon-' . $iconType;
+ $modifiers .= ' mw-ui-icon-' . $iconName;
+
+ return 'mw-ui-icon ' . $modifiers . ' ' . $additionalClassNames;
+ }
+
+ /**
+ * initialize various variables and generate the template
* @param OutputPage $out optional parameter: The OutputPage Obj.
*/
public function outputPage( OutputPage $out = null ) {
@@ -38,6 +52,13 @@
return $tpl;
}
+ protected function getSkinStyles() {
+ $styles = parent::getSkinStyles();
+ $styles[] = 'mediawiki.ui.icon';
+ $styles[] = 'skins.minerva.icons.styles';
+ return $styles;
+ }
+
/**
* Get various skin specific configuration.
* @return array
diff --git a/includes/specials/MobileSpecialPageFeed.php
b/includes/specials/MobileSpecialPageFeed.php
index 44adb0a..6c72622 100644
--- a/includes/specials/MobileSpecialPageFeed.php
+++ b/includes/specials/MobileSpecialPageFeed.php
@@ -86,9 +86,9 @@
$lang = $this->getLanguage();
if ( $isAnon ) {
- $usernameClass = SkinMinerva::iconClass( 'anonymous',
'before', 'icon-16px mw-mf-user mw-mf-anon' );
+ $usernameClass = call_user_func( array( get_class(
$this->getSkin() ), 'iconClass' ), 'anonymous', 'before', 'icon-16px
mw-mf-user mw-mf-anon' );
} else {
- $usernameClass = SkinMinerva::iconClass( 'user',
'before', 'icon-16px mw-mf-user' );
+ $usernameClass = call_user_func( array( get_class(
$this->getSkin() ), 'iconClass' ), 'user', 'before', 'icon-16px mw-mf-user' );
}
$html = Html::openElement( 'li', array( 'class' =>
'page-summary' ) );
@@ -122,9 +122,9 @@
$formattedBytes = $lang->formatNum( $bytes );
if ( $bytes > 0 ) {
$formattedBytes = '+' . $formattedBytes;
- $bytesClass = SkinMinerva::iconClass(
'bytesadded', 'before', 'icon-12px mw-mf-bytesadded' );
+ $bytesClass = call_user_func( array( get_class(
$this->getSkin() ), 'iconClass' ), 'bytesadded', 'before', 'icon-12px
mw-mf-bytesadded' );
} else {
- $bytesClass = SkinMinerva::iconClass(
'bytesremoved', 'before', 'icon-12px mw-mf-bytesremoved' );
+ $bytesClass = call_user_func( array( get_class(
$this->getSkin() ), 'iconClass' ), 'bytesremoved', 'before', 'icon-12px
mw-mf-bytesremoved' );
}
$html .= Html::element(
'p',
diff --git a/includes/specials/SpecialMobileDiff.php
b/includes/specials/SpecialMobileDiff.php
index 361290a..82a19ea 100644
--- a/includes/specials/SpecialMobileDiff.php
+++ b/includes/specials/SpecialMobileDiff.php
@@ -151,13 +151,13 @@
}
if ( $bytesChanged > 0 ) {
$changeMsg = 'mobile-frontend-diffview-bytesadded';
- $sizeClass = SkinMinerva::iconClass( 'bytesadded',
'before', 'icon-12px meta mw-mf-bytesadded' );
+ $sizeClass = call_user_func( array( get_class(
$this->getSkin() ), 'iconClass' ), 'bytesadded', 'before', 'icon-12px meta
mw-mf-bytesadded' );
} elseif ( $bytesChanged === 0 ) {
$changeMsg = 'mobile-frontend-diffview-bytesnochange';
- $sizeClass = SkinMinerva::iconClass( 'bytesneutral',
'before', 'icon-12px meta mw-mf-bytesneutral' );
+ $sizeClass = call_user_func( array( get_class(
$this->getSkin() ), 'iconClass' ), 'bytesneutral', 'before', 'icon-12px meta
mw-mf-bytesneutral' );
} else {
$changeMsg = 'mobile-frontend-diffview-bytesremoved';
- $sizeClass = SkinMinerva::iconClass( 'bytesremoved',
'before', 'icon-12px meta mw-mf-bytesremoved' );
+ $sizeClass = call_user_func( array( get_class(
$this->getSkin() ), 'iconClass' ), 'bytesremoved', 'before', 'icon-12px meta
mw-mf-bytesremoved' );
$bytesChanged = abs( $bytesChanged );
}
@@ -271,7 +271,7 @@
$user = User::newFromId( $userId );
$edits = $user->getEditCount();
$attrs = array(
- 'class' => SkinMinerva::iconClass( 'user',
'before', 'mw-mf-user icon-16px' ),
+ 'class' => call_user_func( array( get_class(
$this->getSkin() ), 'iconClass' ), 'user', 'before', 'mw-mf-user icon-16px' ),
'data-revision-id' => $this->revId,
'data-user-name' => $user->getName(),
'data-user-gender' => $user->getOption(
'gender' ),
@@ -300,7 +300,7 @@
$userPage = SpecialPage::getTitleFor( 'Contributions',
$ipAddr );
$output->addHtml(
Html::element( 'div', array(
- 'class' => SkinMinerva::iconClass(
'anonymous', 'before', 'mw-mf-user icon-16px mw-mf-anon' ),
+ 'class' => call_user_func( array(
get_class( $this->getSkin() ), 'iconClass' ), 'anonymous', 'before',
'mw-mf-user icon-16px mw-mf-anon' ),
), $this->msg(
'mobile-frontend-diffview-anonymous' ) ) .
'<div>' .
Linker::link( $userPage,
htmlspecialchars( $ipAddr ) ) .
diff --git a/includes/specials/SpecialMobileHistory.php
b/includes/specials/SpecialMobileHistory.php
index 0fb3c16..e5f9a6f 100644
--- a/includes/specials/SpecialMobileHistory.php
+++ b/includes/specials/SpecialMobileHistory.php
@@ -64,7 +64,7 @@
// manually style it as a userlink
$headerTitle = Html::element(
'span',
- array( 'class' => SkinMinerva::iconClass(
'user', 'before', 'mw-mf-user icon-16px' ) ),
+ array( 'class' => call_user_func( array(
get_class( $this->getSkin() ), 'iconClass' ), 'user', 'before', 'mw-mf-user
icon-16px' ) ),
$title
);
}
diff --git a/includes/specials/SpecialUserProfile.php
b/includes/specials/SpecialUserProfile.php
index 1fd91ff..098514c 100644
--- a/includes/specials/SpecialUserProfile.php
+++ b/includes/specials/SpecialUserProfile.php
@@ -144,7 +144,7 @@
protected function getTalkLink() {
// replace secondary icon
$attrs = array(
- 'class' => SkinMinerva::iconClass( 'talk', 'before',
'mw-ui-button' ),
+ 'class' => call_user_func( array( get_class(
$this->getSkin() ), 'iconClass' ), 'talk', 'before', 'mw-ui-button' ),
'href' =>
$this->targetUser->getTalkPage()->getLocalUrl(),
);
// FIXME: What if this is the user's own profile? Should we
change the message?
diff --git a/javascripts/CtaDrawer.js b/javascripts/CtaDrawer.js
index ce1c37f..7f9ea1f 100644
--- a/javascripts/CtaDrawer.js
+++ b/javascripts/CtaDrawer.js
@@ -10,6 +10,7 @@
* @extends Drawer
*/
CtaDrawer = Drawer.extend( {
+ className: 'drawer position-fixed drawer-cta',
defaults: {
loginCaption: mw.msg(
'mobile-frontend-watchlist-cta-button-login' ),
signupCaption: mw.msg(
'mobile-frontend-watchlist-cta-button-signup' )
diff --git a/javascripts/Overlay.js b/javascripts/Overlay.js
index b386948..82e2dcb 100644
--- a/javascripts/Overlay.js
+++ b/javascripts/Overlay.js
@@ -44,6 +44,8 @@
},
template: M.template.get( 'Overlay.hogan' ),
defaults: {
+ // FIXME: Remove when mw-ui-icon used in stable
+ inBeta: M.isBetaGroupMember(),
headerButtonsListClassName: '',
closeMsg: mw.msg( 'mobile-frontend-overlay-close' ),
fixedHeader: true
diff --git a/javascripts/modules/editor/editor.js
b/javascripts/modules/editor/editor.js
index 3692ed2..c60b99c 100644
--- a/javascripts/modules/editor/editor.js
+++ b/javascripts/modules/editor/editor.js
@@ -1,6 +1,8 @@
( function( M, $ ) {
var
+ enabledClass = M.isBetaGroupMember() ?
'mw-ui-icon-edit-enabled' : 'enabled',
+ disabledClass = M.isBetaGroupMember() ? 'mw-ui-icon-edit' : '',
user = M.require( 'user' ),
popup = M.require( 'toast' ),
// FIXME: Disable on IE < 10 for time being
@@ -147,7 +149,7 @@
return result;
} );
- $( '#ca-edit' ).addClass( 'enabled' );
+ $( '#ca-edit' ).addClass( enabledClass ).removeClass(
disabledClass );
// Make sure we never create two edit links by accident
if ( $( '#ca-edit .edit-page' ).length === 0 ) {
@@ -190,9 +192,10 @@
M.getCurrentPage().isEditable( user ).done( function(
isEditable ) {
if ( isEditable ) {
// FIXME: change when micro.tap.js in
stable
- $( '#ca-edit' ).addClass( 'enabled'
).on( M.tapEvent( 'click' ), function() {
- drawer.render().show();
- });
+ $( '#ca-edit' ).addClass( enabledClass
).removeClass( disabledClass ).
+ on( M.tapEvent( 'click' ),
function() {
+ drawer.render().show();
+ } );
} else {
showSorryToast(
'mobile-frontend-editor-disabled' );
}
diff --git a/javascripts/modules/issues/issues.js
b/javascripts/modules/issues/issues.js
index 93585a1..0e1de70 100644
--- a/javascripts/modules/issues/issues.js
+++ b/javascripts/modules/issues/issues.js
@@ -51,7 +51,13 @@
}
} );
- $link = $( '<a class="mw-mf-cleanup icon icon-text">' ).attr(
'href', '#/issues' );
+ // FIXME: Remove when mw-ui-icon in stable
+ if ( M.isBetaGroupMember() ) {
+ $link = $( '<a class="mw-ui-icon mw-ui-icon-before
mw-ui-icon-cleanup">' ).attr( 'href', '#/issues' );
+ } else {
+ $link = $( '<a class="mw-mf-cleanup icon icon-text">'
).attr( 'href', '#/issues' );
+ }
+
M.overlayManager.add( /^\/issues$/, function() {
return new CleanupOverlay( { issues: issues,
headingText: headingText } );
} );
diff --git a/javascripts/modules/references/references.js
b/javascripts/modules/references/references.js
index 33cac11..23c16c2 100644
--- a/javascripts/modules/references/references.js
+++ b/javascripts/modules/references/references.js
@@ -1,7 +1,19 @@
( function( M, $ ) {
var Drawer = M.require( 'Drawer' ), ReferencesDrawer, drawer;
+ /**
+ * @class ReferencesDrawer
+ * @extends Drawer
+ */
ReferencesDrawer = Drawer.extend( {
+ templatePartials: {
+ cancelButton: M.template.get( 'cancelButton.hogan' )
+ },
+ defaults: {
+ // FIXME: Remove when mw-ui-icon used in stable
+ inBeta: M.isBetaGroupMember(),
+ closeMsg: mw.msg( 'mobile-frontend-overlay-close' )
+ },
className: 'drawer position-fixed text references',
template: M.template.get( 'ReferencesDrawer.hogan' )
} );
diff --git a/javascripts/modules/toc/toc.js b/javascripts/modules/toc/toc.js
index fda92bb..cbf3c99 100644
--- a/javascripts/modules/toc/toc.js
+++ b/javascripts/modules/toc/toc.js
@@ -8,6 +8,7 @@
tocHeading: M.template.get(
'modules/toc/tocHeading.hogan' )
},
defaults: {
+ inBeta: M.isBetaGroupMember(),
contentsMsg: mw.msg( 'toc' )
},
tagName: 'div',
@@ -46,7 +47,7 @@
// prevent to float text right of toc
this.$( '.toc-mobile' ).after( '<div
style="clear:both;"></div>' );
}
- toggle.enable( toc.$el );
+ toggle.enable( toc.$el, true );
}
}
diff --git a/javascripts/modules/toggling/toggle.js
b/javascripts/modules/toggling/toggle.js
index a3e203b..ea3f27b 100644
--- a/javascripts/modules/toggling/toggle.js
+++ b/javascripts/modules/toggling/toggle.js
@@ -1,5 +1,7 @@
( function( M, $ ) {
- var eventName = M.tapEvent( 'mouseup' );
+ var eventName = M.tapEvent( 'mouseup' ),
+ classOpen = M.isBetaGroupMember() ? 'mw-ui-icon-arrow-up' :
'icon-arrow-up',
+ classClosed = M.isBetaGroupMember() ? 'mw-ui-icon-arrow-down'
: 'icon-arrow-down';
/**
* Given a heading, toggle it and any of its children
@@ -11,9 +13,9 @@
$heading.toggleClass( 'open-block' );
if ( $heading.hasClass( 'open-block' ) ) {
- $heading.addClass( 'icon-arrow-up' ).removeClass(
'icon-arrow-down' );
+ $heading.addClass( classOpen ).removeClass( classClosed
);
} else {
- $heading.removeClass( 'icon-arrow-up' ).addClass(
'icon-arrow-down' );
+ $heading.removeClass( classOpen ).addClass( classClosed
);
}
$heading.next()
.toggleClass( 'open-block' )
@@ -65,16 +67,22 @@
} catch ( e ) {}
}
- function enable( $page ) {
+ function enable( $page, useRightIcon ) {
var tagName, $headings, expandSections,
$firstHeading,
+ iconModifierClass = M.isBetaGroupMember() ?
'mw-ui-icon-before' : 'icon-text',
+ iconClass = M.isBetaGroupMember() ? 'mw-ui-icon
mw-ui-icon-arrow-down' : 'icon icon-15px icon-arrow-down',
collapseSectionsByDefault = mw.config.get(
'wgMFCollapseSectionsByDefault' );
$page = $page || $( '#content' );
+
+ if ( M.isBetaGroupMember() && useRightIcon ) {
+ iconModifierClass = 'mw-ui-icon-after';
+ }
$( 'html' ).removeClass( 'stub' );
$firstHeading = $page.find( 'h1,h2,h3,h4,h5,h6' ).eq(0);
tagName = $firstHeading.prop( 'tagName' ) || 'H1';
- $page.find( tagName ).addClass( 'collapsible-heading icon
icon-text icon-15px icon-arrow-down' );
+ $page.find( tagName ).addClass( 'collapsible-heading ' +
iconClass + ' ' + iconModifierClass );
$headings = $page.find( '.collapsible-heading' );
$headings.next( 'div' ).addClass( 'collapsible-block' );
diff --git a/javascripts/modules/uploads/LeadPhotoUploaderButton.js
b/javascripts/modules/uploads/LeadPhotoUploaderButton.js
index 7e4a498..b185299 100644
--- a/javascripts/modules/uploads/LeadPhotoUploaderButton.js
+++ b/javascripts/modules/uploads/LeadPhotoUploaderButton.js
@@ -5,7 +5,7 @@
LeadPhotoUploaderButton = PhotoUploaderButton.extend( {
template: M.template.get(
'uploads/LeadPhotoUploaderButton.hogan' ),
- className: 'enabled',
+ className: M.isBetaGroupMember() ?
'mw-ui-icon-addimage-enabled' : 'enabled',
defaults: {
buttonCaption: mw.msg( 'mobile-frontend-photo-upload' ),
diff --git a/javascripts/modules/uploads/PhotoUploaderButton.js
b/javascripts/modules/uploads/PhotoUploaderButton.js
index e8f3651..3b8e303 100644
--- a/javascripts/modules/uploads/PhotoUploaderButton.js
+++ b/javascripts/modules/uploads/PhotoUploaderButton.js
@@ -45,7 +45,9 @@
*/
PhotoUploaderButton = View.extend( {
template: M.template.get( 'uploads/PhotoUploaderButton.hogan' ),
- className: 'mw-ui-progressive mw-ui-button button icon-photo
icon icon-text',
+ className: M.isBetaGroupMember() ?
+ 'mw-ui-progressive mw-ui-button button mw-ui-icon-photo
mw-ui-icon mw-ui-icon-before' :
+ 'mw-ui-progressive mw-ui-button button icon-photo icon
icon-text',
postRender: function() {
var self = this, $input = this.$( 'input' );
diff --git a/javascripts/modules/uploads/UploadTutorial.js
b/javascripts/modules/uploads/UploadTutorial.js
index ab0b60b..0bec17d 100644
--- a/javascripts/modules/uploads/UploadTutorial.js
+++ b/javascripts/modules/uploads/UploadTutorial.js
@@ -11,6 +11,7 @@
className: 'overlay carousel tutorial',
defaults: {
+ inBeta: M.isBetaGroupMember(),
pages: [
{
caption: mw.msg(
'mobile-frontend-first-upload-wizard-new-page-1-header' ),
diff --git a/javascripts/modules/watchstar/Watchstar.js
b/javascripts/modules/watchstar/Watchstar.js
index b3490e4..ab7bfd2 100644
--- a/javascripts/modules/watchstar/Watchstar.js
+++ b/javascripts/modules/watchstar/Watchstar.js
@@ -17,7 +17,8 @@
page: M.getCurrentPage()
},
tagName: 'div',
- className: 'icon icon-32px watch-this-article',
+ className: M.isBetaGroupMember() ?
+ 'mw-ui-icon mw-ui-icon-element mw-ui-icon-watch' :
'icon icon-32px watch-this-article',
template: M.template.compile( '<a
title="{{tooltip}}">{{tooltip}}</a>', 'hogan' ),
initialize: function( options ) {
var self = this, _super = View.prototype.initialize,
@@ -48,6 +49,8 @@
},
postRender: function( options ) {
var self = this, callback,
+ unwatchedClass = M.isBetaGroupMember() ?
'mw-ui-icon-watch' : '',
+ watchedClass = M.isBetaGroupMember() ?
'mw-ui-icon-watched' : 'watched',
checker,
page = options.page,
$el = self.$el;
@@ -63,10 +66,12 @@
clearInterval( checker );
} ).done( function() {
if ( api.isWatchedPage( page )
) {
- $el.addClass( 'watched'
).find( 'a' ).attr( 'title', mw.msg( 'unwatchthispage' ) );
+ $el.addClass(
watchedClass ).removeClass( unwatchedClass ).
+ find( 'a'
).attr( 'title', mw.msg( 'unwatchthispage' ) );
toast.show( mw.msg(
'mobile-frontend-watchlist-add', page.title ) );
} else {
- $el.removeClass(
'watched' ).find( 'a' ).attr( 'title', mw.msg( 'watchthispage' ) );
+ $el.removeClass(
watchedClass ).addClass( unwatchedClass ).
+ find( 'a'
).attr( 'title', mw.msg( 'watchthispage' ) );
toast.show( mw.msg(
'mobile-frontend-watchlist-removed', page.title ) );
}
} ).fail( function() {
@@ -82,7 +87,7 @@
// Add watched class if necessary
if ( !user.isAnon() && api.isWatchedPage( page ) ) {
- $el.addClass( 'watched' );
+ $el.addClass( watchedClass ).removeClass(
unwatchedClass );
}
}
} );
diff --git a/javascripts/modules/watchstar/init.js
b/javascripts/modules/watchstar/init.js
index afd6e74..415fede 100644
--- a/javascripts/modules/watchstar/init.js
+++ b/javascripts/modules/watchstar/init.js
@@ -19,7 +19,7 @@
} );
}
$( function() {
- var isWatched = $( '#ca-watch' ).hasClass( 'watched' );
+ var isWatched = $( '#ca-watch' ).hasClass(
M.isBetaGroupMember() ? 'mw-ui-icon-watched' : 'watched' );
if ( !M.inNamespace( 'special' ) ) {
// FIXME: isWatched property should be part of the page
object and returned by api mobileview
init( M.getCurrentPage(), isWatched );
diff --git a/less/Overlay.less b/less/Overlay.less
index f895471..d28738e 100644
--- a/less/Overlay.less
+++ b/less/Overlay.less
@@ -239,6 +239,10 @@
min-height: @headerHeight;
display: block;
cursor: pointer;
+ position: relative;
+ &:before {
+ top: 0;
+ }
}
}
diff --git a/less/drawer.less b/less/drawer.less
index 3ce36df..6fb2b2c 100644
--- a/less/drawer.less
+++ b/less/drawer.less
@@ -38,11 +38,21 @@
margin-bottom: 1em;
}
- a.cancel {
- display: block;
- width: 100%;
- height: 32px;
- background-position: 50% 8px;
+ &.drawer-cta {
+ .cancel {
+ display: block;
+ margin: auto;
+
+ // FIXME: Remove when mw-ui-icon in stable
+ &.icon {
+ height: 32px;
+ background-position: 50% 8px;
+ }
+
+ &:before {
+ background-position: 50% 8px;
+ }
+ }
}
.progress-bar {
diff --git a/less/icons.less b/less/icons.less
index 785944e..14c1bd1 100644
--- a/less/icons.less
+++ b/less/icons.less
@@ -186,8 +186,8 @@
// <div class="icon watch-this-article">watch</div>
//
// Styleguide 8.3.4.
-// FIXME: Rename to watch-icon for consistency
-.watch-this-article {
+// FIXME: Remove when mw-ui-icon in stable
+.icon.watch-this-article {
.background-image('images/watch.png');
// Icon (watched)
diff --git a/less/iconsNew.less b/less/iconsNew.less
new file mode 100644
index 0000000..c7cbc0d
--- /dev/null
+++ b/less/iconsNew.less
@@ -0,0 +1,171 @@
+// FIXME: Standardise on all our icon sizes
+@import "minerva.variables";
+@import "minerva.mixins";
+@import "mediawiki.mixins";
+
+// Icon (talk)
+//
+// Renders a talk icon
+//
+// Markup:
+// <div class="icon icon-talk">talk</div>
+//
+// Styleguide 8.3.3.
+.mw-ui-icon-talk {
+ .m-background-image('images/pagemenu/talk.png');
+}
+
+// Icon (watch)
+//
+// Renders a watch icon where the page is not watched.
+//
+// Markup:
+// <div class="icon watch-this-article">watch</div>
+//
+// Styleguide 8.3.4.
+.mw-ui-icon-watch {
+ .m-background-image('images/watch.png');
+}
+
+.mw-ui-icon-edit {
+ .m-background-image('images/pagemenu/edit-locked.png');
+}
+
+.mw-ui-icon-edit-enabled {
+ .m-background-image('images/pagemenu/edit.png');
+}
+
+
+.mw-ui-icon-watched {
+ .m-background-image('images/watched.png');
+}
+
+.mw-ui-icon-home {
+ .m-background-image('images/menu/home.png');
+}
+
+.mw-ui-icon-random {
+ .m-background-image('images/menu/random.png');
+}
+
+.mw-ui-icon-watchlist {
+ .m-background-image('images/menu/watchlist.png');
+}
+
+.mw-ui-icon-uploads {
+ .m-background-image('images/menu/uploads.png');
+}
+
+.mw-ui-icon-nearby {
+ .m-background-image('images/menu/nearby.png');
+}
+
+.mw-ui-icon-settings {
+ .m-background-image('images/menu/settings.png');
+}
+
+.mw-ui-icon-secondary-logout {
+ .m-background-image('images/menu/loginout.png');
+}
+
+.mw-ui-icon-profile {
+ .m-background-image('images/menu/user.png');
+}
+
+.mw-ui-icon-anon {
+ .m-background-image('images/menu/anon.png');
+}
+
+.mw-ui-icon-cancel {
+ .m-background-image('images/cancel.png');
+}
+
+.mw-ui-icon-addimage {
+ .m-background-image('images/pagemenu/upload-locked.png');
+}
+
+.mw-ui-icon-addimage-enabled {
+ .m-background-image('images/pagemenu/upload.png');
+}
+
+.mw-ui-icon-clear {
+ .m-background-image('images/clear.png');
+}
+
+.mw-ui-icon-photo {
+ .m-background-image('images/camera.png');
+}
+
+.mw-ui-icon-arrow-down {
+ .m-background-image('images/show.png');
+}
+
+.mw-ui-icon-arrow-up {
+ .m-background-image('images/hide.png');
+}
+
+.mw-ui-icon-previous {
+ .m-background-image('modules/images/uploads/chevronLeft.png');
+}
+
+.mw-ui-icon-next {
+ .m-background-image('modules/images/uploads/chevronRight.png');
+}
+
+.mw-ui-icon-bytesadded {
+ .m-background-image('images/positive.png');
+}
+
+.mw-ui-icon-bytesremoved {
+ .m-background-image('images/negative.png');
+}
+
+.mw-ui-icon-bytesneutral {
+ .m-background-image('images/neutral.png');
+}
+
+.mw-ui-icon-back {
+ .m-background-image('images/back-ltr.png');
+}
+
+.mw-ui-icon-toc {
+ .m-background-image-svg-quick('modules/toc/images/contents-ltr');
+}
+
+.mw-ui-icon-cleanup {
+ .m-background-image-svg-quick( 'modules/images/issues/blue-triangle' );
+}
+
+.mw-ui-icon-cleanup-gray {
+ .m-background-image-svg-quick( 'modules/images/issues/gray-triangle' );
+}
+
+.mw-ui-icon-mainmenu {
+ .m-background-image-svg-quick( 'images/menu/hamburger' );
+}
+
+.mw-ui-icon-notifications {
+ .m-background-image-svg-quick( 'images/bell' );
+}
+
+.mw-ui-icon-user {
+ .m-background-image-svg-quick('specials/images/userNormal');
+}
+
+.mw-ui-icon-anonymous {
+ .m-background-image-svg-quick('specials/images/userAnonymous');
+}
+
+// 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
+ display: inline-block;
+}
+
+// FIXME: Upstream to mediawiki ui
+.mw-ui-icon {
+ &:before {
+ background-position: 50% 50%;
+ height: 100%;
+ }
+}
diff --git a/less/mainmenu.less b/less/mainmenu.less
index af27823..0ae2ba2 100644
--- a/less/mainmenu.less
+++ b/less/mainmenu.less
@@ -111,8 +111,16 @@
top: 0;
bottom: 0;
padding-right: 0;
- width: 0; // rely on padding
+ // FIXME: Remove when cache cleared and using mw-ui-icon
+ &.icon {
+ width: 0;
+ }
border-left: 1px solid #717171;
+
+ &.mw-ui-icon {
+ padding: 0;
+ margin: 0;
+ }
}
.icon-profile {
@@ -122,8 +130,14 @@
a {
color: white;
display: block;
- padding: 13px 10px 11px 34px;
- line-height: 22px;
+ padding: 13px 10px 11px 0;
+
+ // FIXME: Remove when cache cleared
+ &.icon {
+ padding: 13px 10px 11px 34px;
+ line-height: 22px;
+ }
+
margin-left: 9px;
&:hover {
text-decoration: none;
diff --git a/less/minerva.less/minerva.mixins.less
b/less/minerva.less/minerva.mixins.less
index 1ee537b..097913e 100644
--- a/less/minerva.less/minerva.mixins.less
+++ b/less/minerva.less/minerva.mixins.less
@@ -5,6 +5,24 @@
.background-image-svg( ~"@{url}.svg", ~"@{url}.png" );
}
+.m-background-image( @url ) {
+ &:after,
+ &:before {
+ .background-image(@url)
+ }
+}
+
+.m-background-image-svg( @svg, @fallback ) {
+ &:after,
+ &:before {
+ .background-image-svg( @svg, @fallback );
+ }
+}
+
+.m-background-image-svg-quick( @url ) {
+ .m-background-image-svg( ~"@{url}.svg", ~"@{url}.png" );
+}
+
.box-sizing( @value ) {
-moz-box-sizing: @value;
-webkit-box-sizing: @value;
diff --git a/less/modules/issues.less b/less/modules/issues.less
index 32b055f..9cfb683 100644
--- a/less/modules/issues.less
+++ b/less/modules/issues.less
@@ -8,16 +8,25 @@
.mw-mf-cleanup {
display: inline-block;
padding: 10px 15px 10px (@smallIconSize + 20px);
- .background-image('images/issues/blue.png');
margin-bottom: 4px;
- background-position: 10px center;
}
-.app,
-.alpha,
-.beta {
+// FIXME: remove when mw-ui-icon in stable
+.stable {
.mw-mf-cleanup {
- .background-image-svg( 'images/issues/blue-triangle.svg',
'images/issues/blue-triangle.png' );
+ .background-image('images/issues/blue.png');
+ background-position: 10px center;
+ }
+
+ .overlay {
+ .cleanup {
+ li {
+ .issue-notice {
+ .background-image-svg(
'images/issues/gray-triangle.svg', 'images/issues/gray-triangle.png' );
+ background-position: center
@smallIconSize;
+ }
+ }
+ }
}
}
@@ -28,25 +37,25 @@
border-bottom: solid 1px @grayLight;
.issue-notice {
padding: (@smallIconSize * 2.5) @contentMargin
@smallIconSize @contentMargin;
- .background-image-svg(
'images/issues/gray-triangle.svg', 'images/issues/gray-triangle.png' );
- background-position: center @smallIconSize;
}
}
}
}
@media all and (min-width: @wgMFDeviceWidthTablet) {
- .alpha,
- .beta {
- .overlay {
- .cleanup {
- li {
- .issue-notice {
- padding: 2em 1em 2em
(@largeIconSize + 10px);
- margin: 0 1em 0 @headerHeight;
- // FIXME: move to generic
icon.less class e.g. icon-responsive
+ .overlay {
+ .cleanup {
+ li {
+ .issue-notice {
+ &:before {
+ top: -1.5em;
+ left: 50%;
+ }
+ padding: 2em 1em 2em (@largeIconSize +
10px);
+ margin: 0 1em 0 @headerHeight;
+ &.icon {
.background-size(
@largeIconSize, @largeIconSize );
- background-position: left
center;
+ background-position: left
center;
}
}
}
diff --git a/less/modules/references.less b/less/modules/references.less
index 2345e79..1e71060 100644
--- a/less/modules/references.less
+++ b/less/modules/references.less
@@ -12,8 +12,14 @@
display: none;
}
+ // FIXME: Remove when mw-ui-icon in stable
.icon {
float: right;
margin-top: .7em;
}
+
+ .mw-ui-icon {
+ float: right;
+ line-height: normal;
+ }
}
diff --git a/less/modules/toc/toc.less b/less/modules/toc/toc.less
index b4346b5..98baac2 100644
--- a/less/modules/toc/toc.less
+++ b/less/modules/toc/toc.less
@@ -27,6 +27,7 @@
// add right padding to the chevron without reducing tapable
area
border-right: @paddingHorizontal solid transparent;
+ // FIXME: Remove when new icons used in stable
.icon {
// @todo: switch to .background-image-svg() when bug
66091 is fixed
background-image: url('images/contents-ltr.png');
@@ -39,6 +40,12 @@
left: @paddingVertical;
top: @paddingVertical;
}
+
+ .mw-ui-icon {
+ position: absolute;
+ left: 0;
+ top: .7em;
+ }
}
.collapsible-block {
diff --git a/less/modules/toggle.less b/less/modules/toggle.less
index e5220af..9c1d2e9 100644
--- a/less/modules/toggle.less
+++ b/less/modules/toggle.less
@@ -15,8 +15,16 @@
.collapsible-heading {
position: relative;
- padding-left: 24px;
+ // FIXME: Remove when cache clears
+ &.icon {
+ padding-left: 24px;
+ }
border-bottom: solid 1px @sectionBorderColor;
+
+ &:before {
+ font-size: .4em;
+ height: 3em;
+ }
}
.section-heading {
diff --git a/less/modules/uploads/PhotoUploaderButton.less
b/less/modules/uploads/PhotoUploaderButton.less
index ae9bef7..4f711eb 100644
--- a/less/modules/uploads/PhotoUploaderButton.less
+++ b/less/modules/uploads/PhotoUploaderButton.less
@@ -3,14 +3,16 @@
@import "minerva.mixins";
.ctaUploadPhoto {
+ // FIXME: Remove when mw-ui-icon in stable
.icon-photo {
- // Note: Use left to ensure it flips in RTL mode
- // FIXME: !important needed to override icon-text rule in
icons.less
background-position: left 10px center !important;
+ padding-left: 44px;
+ }
+
+ .mw-ui-icon-photo {
display: table;
position: relative;
margin: 0 auto;
- padding-left: 44px;
input {
opacity: 0;
diff --git a/less/modules/uploads/UploadTutorial.less
b/less/modules/uploads/UploadTutorial.less
index 26b175b..d03786a 100644
--- a/less/modules/uploads/UploadTutorial.less
+++ b/less/modules/uploads/UploadTutorial.less
@@ -12,14 +12,24 @@
bottom: 0;
z-index: @z-indexOverlay;
+ &:before {
+ top: 0;
+ }
+
&.prev {
left: 0;
- background-image:
url(../images/uploads/chevronLeft.png);
+ // FIXME: Remove when mw-ui-icon in stable
+ &.icon {
+ background-image:
url(../images/uploads/chevronLeft.png);
+ }
}
&.next {
right: 0;
- background-image:
url(../images/uploads/chevronRight.png);
+ // FIXME: Remove when mw-ui-icon in stable
+ &.icon {
+ background-image:
url(../images/uploads/chevronRight.png);
+ }
}
}
diff --git a/less/modules/watchstar.less b/less/modules/watchstar.less
index 19179d6..cb19f0e 100644
--- a/less/modules/watchstar.less
+++ b/less/modules/watchstar.less
@@ -5,7 +5,9 @@
@watchThisArticleSize: 48px;
// watchlist and search results
-.page-list .watch-this-article {
+.page-list .icon.watch-this-article,
+// FIXME: Remove above selector when mw-ui-icon in stable
+.page-list .mw-ui-icon-watch {
position: absolute;
right: 0;
top: 50%;
@@ -15,7 +17,9 @@
}
.animations {
- .watch-this-article {
+ .icon.watch-this-article,
+ // FIXME: Remove above selector when mw-ui-icon in stable
+ .mw-ui-icon-watch {
.transition-transform( .5s );
&.watched {
diff --git a/less/pageactions.less b/less/pageactions.less
index 88276b5..6d927ac 100644
--- a/less/pageactions.less
+++ b/less/pageactions.less
@@ -28,12 +28,6 @@
// Needed for non-JavaScript users
position: relative;
cursor: pointer;
- // FIXME: why is this necessary?
- vertical-align: top;
- height: 30px;
- width: 40px;
- background-position: 50% 0;
- margin: 0 16px 0 0;
// FIXME: use .cloaked class
// file inputs are notoriously difficult to style
@@ -50,6 +44,20 @@
height: 100%;
// needed for ContentOverlay pointer arrow
margin: 0 0 @verticalMargin;
+ }
+
+ // FIXME: Remove when mw-ui-icon moved to stable
+ &.icon {
+ vertical-align: top;
+ height: 30px;
+ width: 40px;
+ background-position: 50% 0;
+ margin: 0 16px 0 0;
+ }
+
+ &.mw-ui-icon {
+ font-size: 1.3em;
+ margin-right: 0;
}
}
}
@@ -68,12 +76,19 @@
}
#ca-upload {
- .background-image('images/pagemenu/upload-locked.png');
+ // FIXME: Remove when cache clears
+ &.icon {
+ .background-image('images/pagemenu/upload-locked.png');
+ }
+
input {
display: none;
}
&.enabled {
- .background-image('images/pagemenu/upload.png');
+ // FIXME: Remove when cache clears
+ &.icon {
+ .background-image('images/pagemenu/upload.png');
+ }
input {
display: block;
}
diff --git a/less/specials/images/profile/talk.png
b/less/specials/images/profile/talk.png
deleted file mode 100644
index dbaa6cb..0000000
--- a/less/specials/images/profile/talk.png
+++ /dev/null
Binary files differ
diff --git a/less/specials/mobilediff.less b/less/specials/mobilediff.less
index 66667df..d30d94b 100644
--- a/less/specials/mobilediff.less
+++ b/less/specials/mobilediff.less
@@ -9,20 +9,24 @@
#mw-mf-diffview {
@userInfoHeight: 5em;
+ // FIXME: Remove when mw-ui-icon in stable
.icon {
padding-left: 18px;
}
+ // FIXME: Remove when mw-ui-icon in stable
.mw-mf-bytesadded {
- background-image: url(images/positive.png);
+ .background-image('images/positive.png');
}
+ // FIXME: Remove when mw-ui-icon in stable
.mw-mf-bytesremoved {
- background-image: url(images/negative.png);
+ .m-background-image('images/negative.png');
}
+ // FIXME: Remove when mw-ui-icon in stable
.mw-mf-bytesneutral {
- background-image: url(images/neutral.png);
+ .m-background-image('images/neutral.png');
}
.meta {
diff --git a/less/specials/pagefeed.less b/less/specials/pagefeed.less
index 7ff3976..10a60f8 100644
--- a/less/specials/pagefeed.less
+++ b/less/specials/pagefeed.less
@@ -74,14 +74,22 @@
}
.mw-mf-user {
- padding: 1px 0 0 20px;
color: @grayMediumDark;
- .background-image-svg-quick("images/userNormal");
+
+ // FIXME: Remove when mw-ui-icon in stable
+ &.icon {
+ padding: 1px 0 0 20px;
+ .background-image-svg-quick("images/userNormal");
+ }
}
.mw-mf-anon {
color: inherit;
- .background-image-svg-quick("images/userAnonymous");
+
+ // FIXME: Remove when mw-ui-icon in stable
+ &.icon {
+ .background-image-svg-quick("images/userAnonymous");
+ }
}
a.more {
diff --git a/less/specials/userprofile.less b/less/specials/userprofile.less
index 2162f71..828e64f 100644
--- a/less/specials/userprofile.less
+++ b/less/specials/userprofile.less
@@ -82,8 +82,14 @@
clear: both;
padding: 2em 0 0;
- .icon-talk {
+ .icon-talk,
+ // FIXME: Remove above selector when mw-ui-icon in stable
+ .mw-ui-icon {
margin-top: 1.5em;
+ }
+
+ // FIXME: Remove when mw-ui-icon in stable
+ .icon-talk {
padding-left: 40px;
background-position: left 10px center;
}
diff --git a/less/tablet/common.less b/less/tablet/common.less
index d31e3af..2b40ce2 100644
--- a/less/tablet/common.less
+++ b/less/tablet/common.less
@@ -34,7 +34,8 @@
position: absolute;
right: 0;
top: 0;
- li {
+ // FIXME: Remove when mw-ui-icon in stable
+ li.icon {
margin: 0 0 0 16px;
}
}
diff --git a/less/ui.less b/less/ui.less
index 764e885..824e942 100644
--- a/less/ui.less
+++ b/less/ui.less
@@ -37,8 +37,20 @@
// FIXME: Id's for styling are bad m'kay?
#mw-mf-main-menu-button {
- background-position: 50% 50%;
- .background-image-svg( 'images/menu/hamburger.svg',
'images/menu/hamburger.png' );
+ // FIXME: Remove when cache clears.
+ &.icon {
+ background-position: 50% 50%;
+ .background-image-svg( 'images/menu/hamburger.svg',
'images/menu/hamburger.png' );
+ }
+}
+
+// FIXME: remove when mw-ui-icon in stable
+.stable {
+ .header {
+ > a {
+ vertical-align: middle;
+ }
+ }
}
.header {
@@ -57,13 +69,13 @@
// Search field
> form {
display: table-cell;
- vertical-align: middle;
}
// Search
> form {
padding: .15em @headerTitlePaddingH 0;
width: auto;
+ vertical-align: middle;
}
// FIXME: Overrides rules in common.less for input area that are
present in reset.less - should be unnecessary
@@ -137,11 +149,15 @@
.edit-page {
display: none;
position: absolute;
- background-position: 100% @headingMargin;
- width: @sectionIconWidth + 5px;
top: 0;
bottom: 0;
right: 0;
+
+ // FIXME: remove when cache clears
+ &.icon {
+ background-position: 100% @headingMargin;
+ width: @sectionIconWidth + 5px;
+ }
}
.open-block {
@@ -189,22 +205,29 @@
.header {
.user-button {
- height: @headerHeight;
- background-position: 50% 50%;
+ // FIXME: Remove when cache clears
+ &.icon {
+ height: @headerHeight;
+ background-position: 50% 50%;
+ }
}
// need to specify id or else other rules are more important
// FIXME: simplify when .icon class from Overlay used instead
#secondary-button.user-button,
.user-button {
- width: @headerHeight;
- text-align: right;
// Make sure count is positioned correctly in relation to bell
icon
position: relative;
- .background-image-svg-quick( 'images/bell' );
- // Fixes positioning in Firefox
- display: inline-block;
- float: right;
+
+ // FIXME: Remove when cache is cleared.
+ &.icon {
+ width: @headerHeight;
+ text-align: right;
+ .background-image-svg-quick( 'images/bell' );
+ // Fixes positioning in Firefox
+ display: inline-block;
+ float: right;
+ }
&.loading span {
display: none;
diff --git a/templates/ReferencesDrawer.hogan b/templates/ReferencesDrawer.hogan
index ea30d12..eb07928 100644
--- a/templates/ReferencesDrawer.hogan
+++ b/templates/ReferencesDrawer.hogan
@@ -1,3 +1,3 @@
-<button class="cancel icon icon-cancel icon-12px"></button>
+{{>cancelButton}}
<h3>{{title}}</h3>
{{{text}}}
diff --git a/templates/backButton.hogan b/templates/backButton.hogan
index c92b4ad..403c3d1 100644
--- a/templates/backButton.hogan
+++ b/templates/backButton.hogan
@@ -1 +1,6 @@
+{{^inBeta}}
<button class="back icon icon-back">{{closeMsg}}</button>
+{{/inBeta}}
+{{#inBeta}}
+<button class="back mw-ui-icon mw-ui-icon-element
mw-ui-icon-back">{{closeMsg}}</button>
+{{/inBeta}}
diff --git a/templates/cancelButton.hogan b/templates/cancelButton.hogan
index abd75e6..d196edc 100644
--- a/templates/cancelButton.hogan
+++ b/templates/cancelButton.hogan
@@ -1 +1,6 @@
+{{^inBeta}}
<button class="cancel icon icon-cancel">{{closeMsg}}</button>
+{{/inBeta}}
+{{#inBeta}}
+<button class="cancel mw-ui-icon mw-ui-icon-element
mw-ui-icon-cancel">{{closeMsg}}</button>
+{{/inBeta}}
diff --git a/templates/ctaDrawer.hogan b/templates/ctaDrawer.hogan
index 550088a..66874c8 100644
--- a/templates/ctaDrawer.hogan
+++ b/templates/ctaDrawer.hogan
@@ -1,4 +1,9 @@
+{{^inBeta}}
<a class="cancel icon icon-arrow-down" href="#">{{cancelMessage}}</a>
+{{/inBeta}}
+{{#inBeta}}
+<a class="cancel mw-ui-icon mw-ui-icon-element mw-ui-icon-arrow-down"
href="#">{{cancelMessage}}</a>
+{{/inBeta}}
<p>{{content}}</p>
<div class="mw-ui-button-group">
<a class="mw-ui-button mw-ui-block mw-ui-progressive"
href="{{loginUrl}}">{{loginCaption}}</a>
diff --git a/templates/modules/search/SearchOverlay.hogan
b/templates/modules/search/SearchOverlay.hogan
index 3393d28..2ebc07d 100644
--- a/templates/modules/search/SearchOverlay.hogan
+++ b/templates/modules/search/SearchOverlay.hogan
@@ -9,7 +9,12 @@
</form>
</div>
<ul>
+ {{^inBeta}}
<li><button class="clear icon
icon-clear">{{clearMsg}}</button></li>
+ {{/inBeta}}
+ {{#inBeta}}
+ <li><button class="clear mw-ui-icon mw-ui-icon-element
mw-ui-icon-clear">{{clearMsg}}</button></li>
+ {{/inBeta}}
</ul>
</div>
</div>
diff --git a/templates/modules/toc/toc.hogan b/templates/modules/toc/toc.hogan
index 5ef2977..68c05f2 100644
--- a/templates/modules/toc/toc.hogan
+++ b/templates/modules/toc/toc.hogan
@@ -1,4 +1,9 @@
+{{^inBeta}}
<h2>{{contentsMsg}} <span class="icon icon-16px"></span></h2>
+{{/inBeta}}
+{{#inBeta}}
+<h2>{{contentsMsg}} <span class="mw-ui-icon mw-ui-icon-element mw-ui-icon-toc
icon-16px"></span></h2>
+{{/inBeta}}
<div>
<ul>
{{#sections}}
diff --git a/templates/overlays/cleanup.hogan b/templates/overlays/cleanup.hogan
index 95a60c3..2e2b862 100644
--- a/templates/overlays/cleanup.hogan
+++ b/templates/overlays/cleanup.hogan
@@ -1,7 +1,12 @@
<ul class="cleanup">
{{#issues}}
<li>
+ {{^inBeta}}
<div class="issue-notice icon icon-text">
+ {{/inBeta}}
+ {{#inBeta}}
+ <div class="issue-notice mw-ui-icon mw-ui-icon-before
mw-ui-icon-cleanup-gray">
+ {{/inBeta}}
{{#icon}}<img src="{{icon}}"> {{/icon}}
{{{text}}}
</div>
diff --git a/templates/page.hogan b/templates/page.hogan
index 090fa33..581f779 100644
--- a/templates/page.hogan
+++ b/templates/page.hogan
@@ -5,9 +5,9 @@
<div class="pre-content">
<h1 id="section_0">{{displayTitle}}</h1>
<ul id="page-actions" class="hlist">
- <li id="ca-edit" class="icon icon-edit
icon-32px"></li>{{#userCanUpload}}<li id="ca-upload" class="icon icon-32px">
+ <li id="ca-edit" class="mw-ui-icon mw-ui-icon-element
mw-ui-icon-icon-edit icon-32px"></li>{{#userCanUpload}}<li id="ca-upload"
class="icon icon-32px">
</li>{{/userCanUpload}}<li id="ca-talk"
- class="{{#isTalkPage}}selected{{/isTalkPage}} icon
icon-32px icon-talk"><a href="{{talkLink}}" id="talk">{{talkLabel}}</a>
+ class="{{#isTalkPage}}selected{{/isTalkPage}}
mw-ui-icon mw-ui-icon-element mw-ui-icon-talk icon-32px"><a href="{{talkLink}}"
id="talk">{{talkLabel}}</a>
</li><li id="ca-watch"></li>
</ul>
</div>
@@ -16,7 +16,7 @@
{{#sections}}
<{{tag}} data-id="{{id}}">
<span id="{{anchor}}">{{{line}}}</span>
- <a href="#/editor/{{id}}" data-section="{{id}}"
class="edit-page icon icon-edit enabled icon-32px">{{editLabel}}</a>
+ <a href="#/editor/{{id}}" data-section="{{id}}"
class="edit-page mw-ui-icon mw-ui-icon-element mw-ui-icon-edit enabled
icon-32px">{{editLabel}}</a>
</{{tag}}>
<div>{{{text}}}</div>
{{/sections}}
diff --git a/templates/section.hogan b/templates/section.hogan
index 41d31ba..249323f 100644
--- a/templates/section.hogan
+++ b/templates/section.hogan
@@ -1,7 +1,7 @@
{{#heading}}
<h2>
<span id="{{anchor}}">{{{heading}}}</span>
- <a href="#/editor/{{id}}" data-section="{{id}}" class="edit-page
icon-edit icon icon-32px enabled">{{editLabel}}</a>
+ <a href="#/editor/{{id}}" data-section="{{id}}" class="edit-page
mw-ui-icon mw-ui-icon-element mw-ui-icon-edit icon-32px
enabled">{{editLabel}}</a>
</h2>
{{/heading}}
<div>
diff --git a/templates/uploads/UploadTutorial.hogan
b/templates/uploads/UploadTutorial.hogan
index d3ea9b5..8eb4206 100644
--- a/templates/uploads/UploadTutorial.hogan
+++ b/templates/uploads/UploadTutorial.hogan
@@ -1,4 +1,9 @@
+{{^inBeta}}
<button class="slider-button icon icon-20px prev"></button>
+{{/inBeta}}
+{{#inBeta}}
+<button class="slider-button mw-ui-icon mw-ui-icon-element mw-ui-icon-previous
prev"></button>
+{{/inBeta}}
<ul>
{{#pages}}
<li class="slide slide-image">
@@ -15,4 +20,9 @@
</li>
{{/pages}}
</ul>
+{{^inBeta}}
<button class="slider-button icon icon-20px next"></button>
+{{/inBeta}}
+{{#inBeta}}
+<button class="slider-button mw-ui-icon mw-ui-icon-element mw-ui-icon-next
next"></button>
+{{/inBeta}}
diff --git a/tests/qunit/modules/test_PageList.js
b/tests/qunit/modules/test_PageList.js
index 7247d25..626ee5d 100644
--- a/tests/qunit/modules/test_PageList.js
+++ b/tests/qunit/modules/test_PageList.js
@@ -23,8 +23,8 @@
inprop: 'watched',
pageids: [ 30, 50 ]
} ), 'A request to API was made to retrieve the statuses' );
- assert.strictEqual( pl.$el.find( '.watch-this-article'
).length, 2, "2 articles have watch stars" );
- assert.strictEqual( pl.$el.find( '.watched' ).length, 1, "1 of
articles is marked as watched" );
+ assert.strictEqual( pl.$el.find( '.mw-ui-icon-watch' ).length,
1, "1 articles is marked as not watched" );
+ assert.strictEqual( pl.$el.find( '.mw-ui-icon-watched'
).length, 1, "1 of articles is marked as watched" );
} );
}( jQuery, mw.mobileFrontend ) );
--
To view, visit https://gerrit.wikimedia.org/r/165096
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id155a3f2e6ac80d0a30d1d35902a871e85db9722
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
