jenkins-bot has submitted this change and it was merged.
Change subject: Hygiene: Icon cleanup
......................................................................
Hygiene: Icon cleanup
Now everything uses box-sizing clean up css so that .icon has
a default dimensions. Make all the icons global and reusable.
Introduce icon-cancel-light and icon-cancel, icon-submit,
icon-continue, icon-photo, icon-clear, icon-back, icon-arrow-up
and icon-arrow-down
Share icons between toggling and drawer
Change-Id: I813bfd76ea2fafa6eebe42cafcbbe1c59856ac2c
---
M javascripts/modules/talk/TalkSectionAddOverlay.js
M javascripts/modules/toggling/toggle.js
M javascripts/modules/uploads/PhotoUploadOverlay.js
M javascripts/modules/uploads/PhotoUploaderButton.js
M javascripts/specials/uploads.js
M less/common/Overlay.less
M less/common/drawer.less
M less/common/icons.less
R less/common/images/camera.png
R less/common/images/hide.png
A less/common/images/show.png
D less/modules/images/show.png
M less/modules/mediaViewer.less
M less/modules/references.less
M less/modules/toc/toc.less
M less/modules/toggle.less
M less/modules/uploads/PhotoUploaderButton.less
M templates/Overlay.html
M templates/ReferencesDrawer.html
M templates/ctaDrawer.html
M templates/modules/ImageOverlay.html
M templates/modules/editor/EditorOverlayBase.html
M templates/modules/editor/EditorOverlayHeader.html
M templates/modules/editor/VisualEditorOverlayHeader.html
M templates/modules/search/SearchOverlay.html
M templates/uploads/PhotoUploadProgress.html
M templates/uploads/PhotoUploaderButton.html
27 files changed, 122 insertions(+), 100 deletions(-)
Approvals:
Kaldari: Looks good to me, approved
jenkins-bot: Verified
diff --git a/javascripts/modules/talk/TalkSectionAddOverlay.js
b/javascripts/modules/talk/TalkSectionAddOverlay.js
index 4624bdd..0129d2e 100644
--- a/javascripts/modules/talk/TalkSectionAddOverlay.js
+++ b/javascripts/modules/talk/TalkSectionAddOverlay.js
@@ -9,7 +9,7 @@
TalkSectionAddOverlay = Overlay.extend( {
defaults: {
headerButtons: [
- { className: 'submit icon confirm-save', msg:
mw.msg( 'mobile-frontend-editor-continue' ) }
+ { className: 'submit icon icon-submit
confirm-save', msg: mw.msg( 'mobile-frontend-editor-continue' ) }
],
cancelMsg: mw.msg( 'mobile-frontend-editor-cancel' ),
confirmMsg: mw.msg( 'mobile-frontend-editor-save' ),
diff --git a/javascripts/modules/toggling/toggle.js
b/javascripts/modules/toggling/toggle.js
index f965dd0..3c27552 100644
--- a/javascripts/modules/toggling/toggle.js
+++ b/javascripts/modules/toggling/toggle.js
@@ -11,6 +11,11 @@
var isCollapsed = $heading.is( '.openSection' );
$heading.toggleClass( 'openSection' );
+ if ( $heading.hasClass( 'openSection' ) ) {
+ $heading.addClass( 'icon-arrow-up' ).removeClass(
'icon-arrow-down' );
+ } else {
+ $heading.removeClass( 'icon-arrow-up' ).addClass(
'icon-arrow-down' );
+ }
$heading.next()
.toggleClass( 'openSection' )
.attr( {
@@ -70,7 +75,8 @@
$( 'html' ).removeClass( 'stub' );
$firstHeading = $page.find( 'h1,h2,h3,h4,h5,h6' ).eq(0);
tagName = $firstHeading.prop( 'tagName' ) || 'H1';
- $page.find( tagName ).addClass( 'section_heading icon icon-text
icon-15px' );
+ $page.find( tagName ).addClass( 'section_heading icon icon-text
icon-15px icon-arrow-down' );
+
$headings = $page.find( '.section_heading' );
$headings.next( 'div' ).addClass( 'content_block' );
diff --git a/javascripts/modules/uploads/PhotoUploadOverlay.js
b/javascripts/modules/uploads/PhotoUploadOverlay.js
index ebed02d..3a483e5 100644
--- a/javascripts/modules/uploads/PhotoUploadOverlay.js
+++ b/javascripts/modules/uploads/PhotoUploadOverlay.js
@@ -23,7 +23,7 @@
heading: mw.msg(
'mobile-frontend-image-heading-describe' ),
headerButtonsListClassName: '',
headerButtons: [
- { className: 'submit icon', msg: mw.msg(
'mobile-frontend-photo-submit' ) }
+ { className: 'submit icon-submit icon', msg:
mw.msg( 'mobile-frontend-photo-submit' ) }
]
},
diff --git a/javascripts/modules/uploads/PhotoUploaderButton.js
b/javascripts/modules/uploads/PhotoUploaderButton.js
index 44b6a7f..79ff271 100644
--- a/javascripts/modules/uploads/PhotoUploaderButton.js
+++ b/javascripts/modules/uploads/PhotoUploaderButton.js
@@ -45,7 +45,7 @@
*/
PhotoUploaderButton = View.extend( {
template: M.template.get( 'uploads/PhotoUploaderButton' ),
- className: 'mw-ui-progressive mw-ui-button button photo',
+ className: 'mw-ui-progressive mw-ui-button button icon-photo
icon icon-text',
postRender: function() {
var self = this, $input = this.$( 'input' );
diff --git a/javascripts/specials/uploads.js b/javascripts/specials/uploads.js
index 7f82c25..a4af3d5 100644
--- a/javascripts/specials/uploads.js
+++ b/javascripts/specials/uploads.js
@@ -189,11 +189,11 @@
if ( $container.length ) {
if ( user.getEditCount() === 0 ) {
- $a = $( '<a class="button photo
mw-ui-button mw-ui-progressive">' ).
+ $a = $( '<a class="button icon
icon-photo icon-text mw-ui-button mw-ui-progressive">' ).
text( mw.msg(
'mobile-frontend-photo-upload-generic' ) ).
attr( 'href',
'#/upload-tutorial/uploads' ).appendTo( $container );
// FIXME: This is needed so the camera
shows. Eww.
- $( '<div class="icon icon-24px">'
).appendTo( $a );
+ $( '<div class="icon icon icon-24px">'
).appendTo( $a );
} else {
createButton( $container );
}
diff --git a/less/common/Overlay.less b/less/common/Overlay.less
index 884a6cb..3002343 100644
--- a/less/common/Overlay.less
+++ b/less/common/Overlay.less
@@ -152,35 +152,6 @@
min-height: @headerHeight;
display: block;
}
-
- .icon {
-
- &[disabled] {
- opacity: .5;
- }
-
- &.cancel {
- background-image: url('images/cancel.png');
- }
-
- &.clear {
- background-image: url('images/clear.png');
- }
-
- &.submit {
- background-image: url('images/check.png');
- background-color: #00af8b;
- }
-
- &.continue {
- background-image:
url('images/continue-ltr.png');
- background-color: #2f81f0;
- }
-
- &.back {
- background-image: url('images/back-ltr.png');
- }
- }
}
.overlay-header-container {
diff --git a/less/common/drawer.less b/less/common/drawer.less
index 0c8d126..f7014e5 100644
--- a/less/common/drawer.less
+++ b/less/common/drawer.less
@@ -39,10 +39,8 @@
a.cancel {
display: block;
- overflow: hidden;
width: 100%;
height: 32px;
- .background-image('../modules/images/show.png');
background-position: 50% 8px;
}
diff --git a/less/common/icons.less b/less/common/icons.less
index 558ba15..5c81a27 100644
--- a/less/common/icons.less
+++ b/less/common/icons.less
@@ -3,6 +3,10 @@
@import "minerva.mixins";
@import "mediawiki.mixins";
+.default-icon-size( @size ) {
+ min-height: @size;
+ min-width: @size;
+}
// Icons
//
// Styleguide 8.
@@ -35,6 +39,11 @@
background-position: center center;
text-indent: -9999px;
overflow: hidden;
+ .default-icon-size( 24px );
+
+ &[disabled] {
+ opacity: .5;
+ }
}
// Icon (text)
@@ -52,7 +61,8 @@
.stable #page-secondary-actions .mw-ui-button.mw-ui-progressive.icon,
// FIXME: Kill above rule when mediawiki ui stops using background property
and cache is clear
.profile .icon-talk-blue,
-// FIXME: Kill above rule when mediawiki ui buttons stops using background
property
+.mw-ui-button.mw-ui-progressive.icon.icon-text,
+// FIXME: Kill above 2 rules when mediawiki ui buttons stops using background
property
.icon-text {
text-indent: 0;
background-position: left center;
@@ -61,6 +71,7 @@
// FIXME: Replace all instances of icon-12px with icon-16px
.icon-12px {
.background-size( auto, 12px );
+ .default-icon-size( 12px );
}
// FIXME: Replace all instances of icon-15px with icon-16px
@@ -78,6 +89,7 @@
//
// Styleguide 8.1.1
.icon-16px {
+ .default-icon-size( 16px );
.background-size( 16px, auto );
}
@@ -110,6 +122,7 @@
// FIXME: Kill above when mediawiki ui buttons does not use background
declaration
.icon-32px {
.background-size( 32px, auto );
+ .default-icon-size( 32px );
}
// Icon (max-x)
@@ -220,3 +233,60 @@
background-color: #FFF;
.background-image-svg-quick('images/magnifying-glass');
}
+
+// Icon (cancel)
+//
+// Renders a cancel icon to escape a Drawer or Overlay
+//
+// Markup:
+// <div class="icon icon-cancel">cancel</div>
+//
+// Styleguide 8.3.6.
+.icon-cancel {
+ .background-image('images/cancel.png');
+}
+
+// Icon (cancel light)
+//
+// Renders a cancel icon to escape a Drawer or Overlay for a dark background
+//
+// Markup:
+// <div class="icon icon-cancel-light">cancel</div>
+//
+// Styleguide 8.3.7.
+.icon-cancel-light {
+ .background-image('images/close-button-beta.png');
+}
+
+
+.icon-photo {
+ .background-image('images/camera.png') !important;
+}
+
+.icon-clear {
+ .background-image('images/clear.png');
+}
+
+.icon-submit {
+ .background-image('images/check.png');
+ // FIXME: This should be inherited from mw-ui-constructive class
+ background-color: #00af8b;
+}
+
+.icon-continue {
+ .background-image('images/continue-ltr.png');
+ // FIXME: This should be inherited from mw-ui-progressive class
+ background-color: #2f81f0;
+}
+
+.icon-back {
+ .background-image('images/back-ltr.png');
+}
+
+.icon-arrow-down {
+ .background-image('images/show.png');
+}
+
+.icon-arrow-up {
+ .background-image('images/hide.png');
+}
diff --git a/less/modules/images/camera.png b/less/common/images/camera.png
similarity index 100%
rename from less/modules/images/camera.png
rename to less/common/images/camera.png
Binary files differ
diff --git a/less/modules/images/hide.png b/less/common/images/hide.png
similarity index 100%
rename from less/modules/images/hide.png
rename to less/common/images/hide.png
Binary files differ
diff --git a/less/common/images/show.png b/less/common/images/show.png
new file mode 100644
index 0000000..d6fb40c
--- /dev/null
+++ b/less/common/images/show.png
Binary files differ
diff --git a/less/modules/images/show.png b/less/modules/images/show.png
deleted file mode 100644
index 1975ece..0000000
--- a/less/modules/images/show.png
+++ /dev/null
Binary files differ
diff --git a/less/modules/mediaViewer.less b/less/modules/mediaViewer.less
index 8050b4d..2eb24d4 100644
--- a/less/modules/mediaViewer.less
+++ b/less/modules/mediaViewer.less
@@ -44,10 +44,6 @@
position: absolute;
right: 10px;
top: 10px;
- text-indent: -9999px;
- width: 24px;
- height: 24px;
- background: url(../common/images/close-button-beta.png)
no-repeat;
}
.details {
diff --git a/less/modules/references.less b/less/modules/references.less
index bb08618..2345e79 100644
--- a/less/modules/references.less
+++ b/less/modules/references.less
@@ -12,12 +12,8 @@
display: none;
}
- .icon-close {
+ .icon {
float: right;
margin-top: .7em;
- width: 16px;
- height: 12px;
- // FIXME: Use the same close icon as overlays
- .background-image('../common/images/close-button-beta.png');
}
}
diff --git a/less/modules/toc/toc.less b/less/modules/toc/toc.less
index c2b3b32..f179fc0 100644
--- a/less/modules/toc/toc.less
+++ b/less/modules/toc/toc.less
@@ -16,15 +16,13 @@
@paddingVertical: 1em;
@fontSize: .8em;
h2 {
- font-family: @fontFamily;
- line-height: @iconSize;
margin-left: @leftMargin;
margin-right: @leftMargin;
background-position: right center;
- font-size: @fontSize;
font-weight: bold;
+ // Resetting heading styles seems bad.
padding: @paddingVertical 0 @paddingVertical @iconSize +
@iconHeadingGap;
- border-bottom: none;
+ font-size: @fontSize;
.icon {
.background-image('images/contents.png');
diff --git a/less/modules/toggle.less b/less/modules/toggle.less
index fc8c953..99ad08a 100644
--- a/less/modules/toggle.less
+++ b/less/modules/toggle.less
@@ -21,13 +21,9 @@
.section_heading {
position: relative;
- .background-image('images/show.png');
- background-position: left 1.05;
padding-left: 24px;
- cursor: pointer;
&.openSection {
- .background-image('images/hide.png');
padding-right: @sectionIconWidth + 15px;
border-bottom: solid 1px @sectionBorderColor;
margin-bottom: @headingMargin;
diff --git a/less/modules/uploads/PhotoUploaderButton.less
b/less/modules/uploads/PhotoUploaderButton.less
index f5f33b0..46237c9 100644
--- a/less/modules/uploads/PhotoUploaderButton.less
+++ b/less/modules/uploads/PhotoUploaderButton.less
@@ -2,38 +2,29 @@
@import "minerva.variables";
@import "minerva.mixins";
-// Restrict to content to avoid interference with rules in button.less
-.content .button.photo {
- position: relative;
- display: table;
- margin: 0 auto;
- padding-left: 44px;
- text-align: left; /* override text-align center - chrome not clickable
*/
-
- .icon {
- .background-image('../images/camera.png');
+.ctaUploadPhoto {
+ .icon-photo {
// Note: Use left to ensure it flips in RTL mode
- background-position: left 45%;
- margin: 0 10px;
- }
+ // FIXME: !important needed to override icon-text rule in
icons.less
+ background-position: left 10px center !important;
+ display: table;
+ position: relative;
+ margin: 0 auto;
+ padding-left: 44px;
- input {
- opacity: 0;
- z-index: 2;
- }
+ input {
+ opacity: 0;
+ z-index: 2;
+ }
- input, div {
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
+ input, div {
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
}
-}
-
-#content > .button.photo {
- display: block;
- margin-bottom: 10px;
}
diff --git a/templates/Overlay.html b/templates/Overlay.html
index 7552622..76586aa 100644
--- a/templates/Overlay.html
+++ b/templates/Overlay.html
@@ -1,7 +1,7 @@
<div class="overlay-header-container visible {{#fixedHeader}}
position-fixed{{/fixedHeader}}">
<div class="overlay-header">
<ul class="bottom-border">
- <li><button class="cancel
icon">{{closeMsg}}</button></li>
+ <li><button class="cancel icon
icon-cancel">{{closeMsg}}</button></li>
</ul>
<div class="overlay-title bottom-border">
<h2>{{{heading}}}</h2>
diff --git a/templates/ReferencesDrawer.html b/templates/ReferencesDrawer.html
index 07a4ffc..cb6249f 100644
--- a/templates/ReferencesDrawer.html
+++ b/templates/ReferencesDrawer.html
@@ -1,4 +1,4 @@
-<button class="cancel icon icon-close icon-12px"></button>
+<button class="cancel icon icon-cancel icon-12px"></button>
<h3>{{title}}</h3>
{{{text}}}
diff --git a/templates/ctaDrawer.html b/templates/ctaDrawer.html
index 71bfdeb..a7c64e6 100644
--- a/templates/ctaDrawer.html
+++ b/templates/ctaDrawer.html
@@ -1,4 +1,4 @@
-<a class="cancel icon" href="#">{{cancelMessage}}</a>
+<a class="cancel icon icon-arrow-down" href="#">{{cancelMessage}}</a>
<p>{{content}}</p>
<div class="buttonBar mw-ui-button-group">
<a class="button wide mw-ui-button mw-ui-block mw-ui-progressive"
href="{{loginUrl}}">{{loginCaption}}</a>
diff --git a/templates/modules/ImageOverlay.html
b/templates/modules/ImageOverlay.html
index 0f5a98a..e8e3f1e 100644
--- a/templates/modules/ImageOverlay.html
+++ b/templates/modules/ImageOverlay.html
@@ -1,4 +1,4 @@
-<button class="cancel">{{closeMsg}}</button>
+<button class="cancel icon icon-cancel-light">{{closeMsg}}</button>
<div class="container loading"><div></div></div>
<div class="content details cloaked-element">
<a class="mw-ui-button mw-ui-progressive button"
href="#">{{detailsMsg}}</a>
diff --git a/templates/modules/editor/EditorOverlayBase.html
b/templates/modules/editor/EditorOverlayBase.html
index 70de5b2..e1f5da1 100644
--- a/templates/modules/editor/EditorOverlayBase.html
+++ b/templates/modules/editor/EditorOverlayBase.html
@@ -2,18 +2,18 @@
{{>header}}
<div class="overlay-header save-header hideable hidden">
<ul class="bottom-border">
- <li><button class="back icon-24px
icon">{{keepEditingMsg}}</button></li>
+ <li><button class="back icon-24px icon
icon-cancel">{{keepEditingMsg}}</button></li>
</ul>
<div class="overlay-title bottom-border">
<h2>{{{previewingMsg}}}</h2>
</div>
<ul>
- <li><button class="submit
icon">{{saveMsg}}</button></li>
+ <li><button class="submit icon-submit
icon">{{saveMsg}}</button></li>
</ul>
</div>
<div class="overlay-header saving-header hideable hidden">
<ul class="bottom-border">
- <li><button class="cancel icon"
disabled>{{closeMsg}}</button></li>
+ <li><button class="cancel icon icon-cancel"
disabled>{{closeMsg}}</button></li>
</ul>
<div class="overlay-title bottom-border">
<h2>{{{waitMsg}}}</h2>
diff --git a/templates/modules/editor/EditorOverlayHeader.html
b/templates/modules/editor/EditorOverlayHeader.html
index 0401ccc..f84720d 100644
--- a/templates/modules/editor/EditorOverlayHeader.html
+++ b/templates/modules/editor/EditorOverlayHeader.html
@@ -1,6 +1,6 @@
<div class="overlay-header initial-header hideable hidden">
<ul class="bottom-border">
- <li><button class="cancel icon">{{closeMsg}}</button></li>
+ <li><button class="cancel icon
icon-cancel">{{closeMsg}}</button></li>
</ul>
{{#editSwitcher}}
<div class="switcher-container bottom-border">
@@ -16,7 +16,7 @@
</div>
{{^readOnly}}
<ul>
- <li><button class="continue icon"
disabled>{{continueMsg}}</button></li>
+ <li><button class="continue icon icon-continue"
disabled>{{continueMsg}}</button></li>
</ul>
{{/readOnly}}
</div>
diff --git a/templates/modules/editor/VisualEditorOverlayHeader.html
b/templates/modules/editor/VisualEditorOverlayHeader.html
index 8a00df0..157a241 100644
--- a/templates/modules/editor/VisualEditorOverlayHeader.html
+++ b/templates/modules/editor/VisualEditorOverlayHeader.html
@@ -1,6 +1,6 @@
<div class="overlay-header initial-header hideable hidden">
<ul class="bottom-border">
- <li><button class="cancel icon">{{closeMsg}}</button></li>
+ <li><button class="cancel icon
icon-cancel">{{closeMsg}}</button></li>
</ul>
<div class="switcher-container bottom-border">
@@ -15,7 +15,7 @@
<div class="toolbar bottom-border"></div>
{{^readOnly}}
<ul>
- <li><button class="continue icon"
disabled>{{continueMsg}}</button></li>
+ <li><button class="continue icon icon-continue"
disabled>{{continueMsg}}</button></li>
</ul>
{{/readOnly}}
</div>
diff --git a/templates/modules/search/SearchOverlay.html
b/templates/modules/search/SearchOverlay.html
index 4db4288..67cb473 100644
--- a/templates/modules/search/SearchOverlay.html
+++ b/templates/modules/search/SearchOverlay.html
@@ -2,7 +2,7 @@
<div class="overlay-header-container visible position-fixed">
<div class="overlay-header">
<ul class="bottom-border">
- <li><button class="cancel
icon">{{closeMsg}}</button></li>
+ <li><button class="cancel icon
icon-cancel">{{closeMsg}}</button></li>
</ul>
<div class="overlay-search bottom-border">
<form method="get" action="{{action}}">
@@ -11,7 +11,7 @@
</form>
</div>
<ul class="bottom-border">
- <li><button class="clear
icon">{{clearMsg}}</button></li>
+ <li><button class="clear icon
icon-clear">{{clearMsg}}</button></li>
</ul>
</div>
</div>
diff --git a/templates/uploads/PhotoUploadProgress.html
b/templates/uploads/PhotoUploadProgress.html
index d7503e5..79aa598 100644
--- a/templates/uploads/PhotoUploadProgress.html
+++ b/templates/uploads/PhotoUploadProgress.html
@@ -1,7 +1,7 @@
<div class="overlay-header-container visible position-fixed">
<div class="overlay-header progress-header hideable">
<ul class="bottom-border">
- <li><button class="cancel
icon">{{closeMsg}}</button></li>
+ <li><button class="cancel icon
icon-cancel">{{closeMsg}}</button></li>
</ul>
<div class="bottom-border">
<h2 class="uploading">{{{uploadingMsg}}}</h2>
@@ -17,7 +17,7 @@
<div class="bottom-border">
</div>
<ul>
- <li><button class="submit
icon">{{saveMsg}}</button></li>
+ <li><button class="submit icon
icon-submit">{{saveMsg}}</button></li>
</ul>
</div>
</div>
diff --git a/templates/uploads/PhotoUploaderButton.html
b/templates/uploads/PhotoUploaderButton.html
index fb6d300..aa9b4bf 100644
--- a/templates/uploads/PhotoUploaderButton.html
+++ b/templates/uploads/PhotoUploaderButton.html
@@ -1,2 +1,2 @@
{{buttonCaption}}
-<div class="icon"><input name="file" type="file" class="cloaked-element"></div>
+<input name="file" type="file" class="cloaked-element">
--
To view, visit https://gerrit.wikimedia.org/r/133190
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I813bfd76ea2fafa6eebe42cafcbbe1c59856ac2c
Gerrit-PatchSet: 9
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Awjrichards <aricha...@wikimedia.org>
Gerrit-Reviewer: JGonera <jgon...@wikimedia.org>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Kaldari <rkald...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
