Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/161321
Change subject: WIP: Use mw-ui-icon
......................................................................
WIP: Use mw-ui-icon
Change-Id: I8b9312baa5240a3910d1688636d82cb6ae7671bc
Dependency: I68a1b207d8a4af57879361921a5f8c3aeda3fd9a
---
M includes/skins/SkinMinerva.php
M javascripts/modules/watchstar/Watchstar.js
M less/common/icons.less
M less/common/mainmenu.less
M less/common/pageactions.less
M less/minerva.less/minerva.mixins.less
M less/modules/watchstar.less
M less/tablet/common.less
M tests/browser/features/support/pages/article_page.rb
M tests/qunit/modules/test_PageList.js
10 files changed, 61 insertions(+), 46 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/21/161321/1
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 4e4c1ec..cc62c1e 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -151,7 +151,7 @@
return Html::element( 'a', array(
'href' => '#/editor/' . $section,
'data-section' => $section,
- 'class' => 'edit-page icon icon-32px icon-edit
enabled'
+ 'class' => 'edit-page mw-ui-icon
mw-ui-icon-element icon-32px mw-ui-icon-edit enabled'
), $message );
}
}
@@ -298,7 +298,7 @@
'href' =>
$this->getUser()->isLoggedIn() ?
$watchTitle->getLocalUrl( $watchlistQuery ) :
$this->getLoginUrl(
array( 'returnto' => $watchTitle ) ),
- 'class' => 'icon-watchlist icon
icon-text',
+ 'class' =>
'mw-ui-icon-watchlist mw-ui-icon mw-ui-icon-before',
),
),
)
@@ -311,7 +311,7 @@
'text' => wfMessage(
'mobile-frontend-main-menu-upload' )->escaped(),
'href' =>
$this->getUser()->isLoggedIn() ? $donateTitle->getLocalUrl() :
$this->getLoginUrl( array( 'returnto' => $donateTitle ) ),
- 'class' =>
'icon-uploads icon icon-text',
+ 'class' =>
'mw-ui-icon-uploads mw-ui-icon mw-ui-icon-before icon-text',
),
),
'class' => 'jsonly',
@@ -323,7 +323,7 @@
'text' => wfMessage(
'mobile-frontend-main-menu-settings' )->escaped(),
'href' =>
SpecialPage::getTitleFor( 'MobileOptions' )->
getLocalUrl( array(
'returnto' => $returnToTitle ) ),
- 'class' => 'icon-settings icon
icon-text',
+ 'class' => 'mw-ui-icon-settings
mw-ui-icon mw-ui-icon-before',
),
),
);
@@ -336,7 +336,7 @@
'text' => wfMessage(
'preferences' )->escaped(),
'href' =>
$this->getUser()->isLoggedIn() ? $prefUrl :
$this->getLoginUrl(
array( 'returnto' => $prefUrl ) ),
- 'class' => 'icon-settings icon
icon-text',
+ 'class' => 'mw-ui-icon-settings
mw-ui-icon mw-ui-icon-before',
),
),
);
@@ -379,7 +379,7 @@
array(
'text' => wfMessage(
'mobile-frontend-home-button' )->escaped(),
'href' =>
Title::newMainPage()->getLocalUrl(),
- 'class' => 'icon-home icon
icon-text',
+ 'class' => 'mw-ui-icon-home
mw-ui-icon mw-ui-icon-before',
),
),
),
@@ -390,7 +390,7 @@
'href' =>
SpecialPage::getTitleFor( 'Randompage',
MWNamespace::getCanonicalName( $wgMFContentNamespace ) )->getLocalUrl() .
'#/random',
- 'class' => 'icon-random icon
icon-text',
+ 'class' => 'mw-ui-icon-random
mw-ui-icon mw-ui-icon-before',
'id' => 'randomButton',
),
),
@@ -400,7 +400,7 @@
array(
'text' => wfMessage(
'mobile-frontend-main-menu-nearby' )->escaped(),
'href' =>
SpecialPage::getTitleFor( 'Nearby' )->getLocalURL(),
- 'class' => 'icon-nearby icon
icon-text',
+ 'class' => 'mw-ui-icon-nearby
mw-ui-icon mw-ui-icon-before',
),
),
'class' => 'jsonly',
@@ -698,7 +698,7 @@
// empty placeholder for edit and photos which both require js
if ( $this->isAllowedPageAction( 'edit' ) ) {
$menu['edit'] = array( 'id' => 'ca-edit', 'text' => '',
- 'class' => 'icon icon-32px icon-edit' );
+ 'class' => 'mw-ui-icon mw-ui-icon-element
icon-32px mw-ui-icon-edit' );
}
if (
@@ -707,7 +707,7 @@
&& $this->mobileContext->userCanUpload()
) {
$menu['photo'] = array( 'id' => 'ca-upload', 'text' =>
'',
- 'class' => 'icon icon-32px' );
+ 'class' => 'mw-ui-icon mw-ui-icon-element
icon-32px' );
}
if ( $this->isAllowedPageAction( 'talk' ) ) {
@@ -723,9 +723,9 @@
// Javascript, so if the talk page hasn't been
created yet, add a 'hidden'
// CSS class which will be removed later via
Javascript.
if ( $menu['talk']['class'] === 'new' ) {
- $menu['talk']['class'] = 'hidden icon
icon-32px icon-talk';
+ $menu['talk']['class'] = 'hidden
mw-ui-icon mw-ui-icon-element icon-32px mw-ui-icon-talk';
} else {
- $menu['talk']['class'] = 'icon
icon-32px icon-talk';
+ $menu['talk']['class'] = 'mw-ui-icon
mw-ui-icon-element icon-32px mw-ui-icon-talk';
}
if ( isset( $tpl->data['_talkdata'] ) ) {
$menu['talk']['text'] =
$tpl->data['_talkdata']['text'];
@@ -740,7 +740,7 @@
if ( $this->isAllowedPageAction( 'watch' ) ) {
$watchTemplate = array(
'id' => 'ca-watch',
- 'class' => 'watch-this-article icon icon-32px',
+ 'class' => 'mw-ui-icon-watch mw-ui-icon-element
mw-ui-icon icon-32px',
);
// standardise watch article into one menu item
if ( isset( $actions['watch'] ) ) {
@@ -899,6 +899,7 @@
protected function getSkinStyles() {
$title = $this->getTitle();
$styles = array(
+ 'mediawiki.ui.icon',
'skins.minerva.chrome.styles',
'skins.minerva.content.styles',
'skins.minerva.drawers.styles',
diff --git a/javascripts/modules/watchstar/Watchstar.js
b/javascripts/modules/watchstar/Watchstar.js
index 330ee07..219ba74 100644
--- a/javascripts/modules/watchstar/Watchstar.js
+++ b/javascripts/modules/watchstar/Watchstar.js
@@ -17,7 +17,7 @@
page: M.getCurrentPage()
},
tagName: 'div',
- className: 'icon icon-32px watch-this-article',
+ className: 'mw-ui-icon mw-ui-icon-element icon-32px
mw-ui-icon-watch',
template: M.template.compile( '<a>', 'hogan' ),
initialize: function( options ) {
var self = this, _super = this._super,
diff --git a/less/common/icons.less b/less/common/icons.less
index 484cdaa..b412c6a 100644
--- a/less/common/icons.less
+++ b/less/common/icons.less
@@ -7,6 +7,7 @@
min-height: @size;
min-width: @size;
}
+
// Icons
//
// Styleguide 8.
@@ -111,8 +112,13 @@
.mw-ui-button.mw-ui-progressive.icon-32px,
// FIXME: Kill above when mediawiki ui buttons does not use background
declaration
.icon-32px {
+ // FIXME: Remove when cache cleared and mw-ui-icon used exclusively
.background-size( 32px, auto );
.default-icon-size( 32px );
+
+ &:before {
+ .background-size( 32px, auto );
+ }
}
// Icon (max-x)
@@ -166,6 +172,15 @@
}
}
+.mw-ui-icon-edit {
+ :before {
+ .background-image('images/pagemenu/edit-locked.png');
+ }
+ &.enabled:before {
+ .background-image('images/pagemenu/edit.png');
+ }
+}
+
// Icon (talk)
//
// Renders a talk icon
@@ -186,9 +201,8 @@
// <div class="icon watch-this-article">watch</div>
//
// Styleguide 8.3.4.
-// FIXME: Rename to watch-icon for consistency
-.watch-this-article {
- .background-image('images/watch.png');
+.mw-ui-icon-watch {
+ .m-background-image('images/watch.png');
// Icon (watched)
//
@@ -199,7 +213,7 @@
//
// Styleguide 8.3.4.
&.watched {
- .background-image('images/watched.png');
+ .m-background-image('images/watched.png');
}
}
diff --git a/less/common/mainmenu.less b/less/common/mainmenu.less
index a1a938f..2db5f48 100644
--- a/less/common/mainmenu.less
+++ b/less/common/mainmenu.less
@@ -55,40 +55,40 @@
}
}
- .icon-home {
- .background-image('images/menu/home.png');
+ .mw-ui-icon-home {
+ .m-background-image('images/menu/home.png');
}
- .icon-random {
- .background-image('images/menu/random.png');
+ .mw-ui-icon-random {
+ .m-background-image('images/menu/random.png');
}
- .icon-watchlist {
- .background-image('images/menu/watchlist.png');
+ .mw-ui-icon-watchlist {
+ .m-background-image('images/menu/watchlist.png');
}
- .icon-uploads {
- .background-image('images/menu/uploads.png');
+ .mw-ui-icon-uploads {
+ .m-background-image('images/menu/uploads.png');
}
- .icon-nearby {
- .background-image('images/menu/nearby.png');
+ .mw-ui-icon-nearby {
+ .m-background-image('images/menu/nearby.png');
}
- .icon-settings {
- .background-image('images/menu/settings.png');
+ .mw-ui-icon-settings {
+ .m-background-image('images/menu/settings.png');
}
- .icon-secondary-logout {
- .background-image('images/menu/loginout.png');
+ .mw-ui-icon-secondary-logout {
+ .m-background-image('images/menu/loginout.png');
}
- .icon-profile {
- .background-image('images/menu/user.png');
+ .mw-ui-icon-profile {
+ .m-background-image('images/menu/user.png');
}
- .icon-anon {
- .background-image('images/menu/anon.png');
+ .mw-ui-icon-anon {
+ .m-background-image('images/menu/anon.png');
}
li {
@@ -122,7 +122,7 @@
a {
color: white;
display: block;
- padding: 13px 10px 11px 34px;
+ padding: 13px 10px 11px 0;
line-height: 22px;
margin-left: 9px;
&:hover {
diff --git a/less/common/pageactions.less b/less/common/pageactions.less
index 88276b5..c27e34e 100644
--- a/less/common/pageactions.less
+++ b/less/common/pageactions.less
@@ -30,10 +30,7 @@
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
diff --git a/less/minerva.less/minerva.mixins.less
b/less/minerva.less/minerva.mixins.less
index 1ee537b..f24b587 100644
--- a/less/minerva.less/minerva.mixins.less
+++ b/less/minerva.less/minerva.mixins.less
@@ -5,6 +5,12 @@
.background-image-svg( ~"@{url}.svg", ~"@{url}.png" );
}
+.m-background-image( @url ) {
+ &:before {
+ .background-image(@url)
+ }
+}
+
.box-sizing( @value ) {
-moz-box-sizing: @value;
-webkit-box-sizing: @value;
diff --git a/less/modules/watchstar.less b/less/modules/watchstar.less
index 19179d6..3a6dfe7 100644
--- a/less/modules/watchstar.less
+++ b/less/modules/watchstar.less
@@ -5,7 +5,7 @@
@watchThisArticleSize: 48px;
// watchlist and search results
-.page-list .watch-this-article {
+.page-list .mw-ui-icon-watch {
position: absolute;
right: 0;
top: 50%;
diff --git a/less/tablet/common.less b/less/tablet/common.less
index 4575157..4b18b88 100644
--- a/less/tablet/common.less
+++ b/less/tablet/common.less
@@ -34,9 +34,6 @@
position: absolute;
right: 0;
top: 0;
- li {
- margin: 0 0 0 16px;
- }
}
}
diff --git a/tests/browser/features/support/pages/article_page.rb
b/tests/browser/features/support/pages/article_page.rb
index 33cf319..d31f71e 100644
--- a/tests/browser/features/support/pages/article_page.rb
+++ b/tests/browser/features/support/pages/article_page.rb
@@ -49,7 +49,7 @@
## watch star
a(:watch_link, css: "#ca-watch a")
- a(:unwatch_link, css: ".watch-this-article.watched a")
+ a(:unwatch_link, css: ".mw-ui-icon-watch.watched a")
button(:watch_confirm, class: "mw-htmlform-submit")
# search
diff --git a/tests/qunit/modules/test_PageList.js
b/tests/qunit/modules/test_PageList.js
index 7247d25..445e78c 100644
--- a/tests/qunit/modules/test_PageList.js
+++ b/tests/qunit/modules/test_PageList.js
@@ -23,7 +23,7 @@
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( '.mw-ui-icon-watch' ).length,
2, "2 articles have watch stars" );
assert.strictEqual( pl.$el.find( '.watched' ).length, 1, "1 of
articles is marked as watched" );
} );
--
To view, visit https://gerrit.wikimedia.org/r/161321
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I8b9312baa5240a3910d1688636d82cb6ae7671bc
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
