Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/133189
Change subject: Icon cleanup
......................................................................
Icon cleanup
Now everything uses box-sizing clean up css so that .icon has
a default padding to give it the needed width.
Introduce icon-cancel-light and icon-cancel
Change-Id: I18f044babf7efae0f01973068108dfb93e16361e
---
M javascripts/modules/uploads/PhotoUploaderButton.js
M less/common/OverlayNew.less
M less/common/drawer.less
M less/common/icons.less
M less/modules/mediaViewer.less
M less/modules/references.less
M less/modules/uploads/PhotoUploaderButton.less
M templates/ReferencesDrawer.html
M templates/modules/ImageOverlay.html
M templates/uploads/PhotoUploaderButton.html
10 files changed, 42 insertions(+), 25 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/89/133189/1
diff --git a/javascripts/modules/uploads/PhotoUploaderButton.js
b/javascripts/modules/uploads/PhotoUploaderButton.js
index 44b6a7f..ca0c0e0 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 photo icon
icon-text',
postRender: function() {
var self = this, $input = this.$( 'input' );
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 9330241..2412204 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -164,6 +164,7 @@
border-left: 1px solid @grayLight;
}
+ // FIXME: Move all these into icons.less
.icon {
&[disabled] {
diff --git a/less/common/drawer.less b/less/common/drawer.less
index d229969..dc7fe26 100644
--- a/less/common/drawer.less
+++ b/less/common/drawer.less
@@ -40,9 +40,7 @@
a.cancel {
padding: 0 0 1.2em;
display: block;
- overflow: hidden;
width: 100%;
- height: 16px;
.background-image('../modules/images/show.png');
background-position: 50% 8px;
}
diff --git a/less/common/icons.less b/less/common/icons.less
index 3a1a672..20a9bbe 100644
--- a/less/common/icons.less
+++ b/less/common/icons.less
@@ -36,6 +36,11 @@
text-indent: -9999px;
overflow: hidden;
}
+// FIXME: Merge with above rule when the cache is clear
+.icon {
+ // Ensure it is at least 24px by 24px
+ padding: 12px;
+}
// Icon (text)
//
@@ -52,7 +57,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 +67,7 @@
// FIXME: Replace all instances of icon-12px with icon-16px
.icon-12px {
.background-size( auto, 12px );
+ padding: 6px;
}
// FIXME: Replace all instances of icon-15px with icon-16px
@@ -204,3 +211,27 @@
.background-image('images/watched.png');
}
}
+
+// Icon (cancel)
+//
+// Renders a cancel icon to escape a Drawer or Overlay
+//
+// Markup:
+// <div class="icon icon-cancel">cancel</div>
+//
+// Styleguide 8.3.5.
+.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.6.
+.icon-cancel-light {
+ .background-image('images/close-button-beta.png');
+}
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/uploads/PhotoUploaderButton.less
b/less/modules/uploads/PhotoUploaderButton.less
index f5f33b0..04485e1 100644
--- a/less/modules/uploads/PhotoUploaderButton.less
+++ b/less/modules/uploads/PhotoUploaderButton.less
@@ -3,19 +3,14 @@
@import "minerva.mixins";
// Restrict to content to avoid interference with rules in button.less
-.content .button.photo {
+.mw-ui-progressive.icon.icon-text.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');
- // Note: Use left to ensure it flips in RTL mode
- background-position: left 45%;
- margin: 0 10px;
- }
+ .background-image('../images/camera.png');
+ // Note: Use left to ensure it flips in RTL mode
+ background-position: left 10px center;
input {
opacity: 0;
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/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/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/133189
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I18f044babf7efae0f01973068108dfb93e16361e
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
