Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/133190
Change subject: Make icons in overlays and drawers global and reusable
......................................................................
Make icons in overlays and drawers global and reusable
Share icons between toggling and drawer
Change-Id: I813bfd76ea2fafa6eebe42cafcbbe1c59856ac2c
---
M javascripts/modules/talk/TalkSectionAddOverlay.js
M javascripts/modules/toggling/toggle.js
M less/common/OverlayNew.less
M less/common/drawer.less
M less/common/icons.less
R less/common/images/hide.png
R less/common/images/show.png
M less/modules/toc/toc.less
M less/modules/toggle.less
M templates/OverlayNew.html
M templates/ctaDrawer.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
16 files changed, 56 insertions(+), 54 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/90/133190/1
diff --git a/javascripts/modules/talk/TalkSectionAddOverlay.js
b/javascripts/modules/talk/TalkSectionAddOverlay.js
index 0ec7d8f..0a0d8f2 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 d70ec2f..1dacd4b 100644
--- a/javascripts/modules/toggling/toggle.js
+++ b/javascripts/modules/toggling/toggle.js
@@ -10,6 +10,11 @@
var isCollapsed = $heading.is( '.openSection' );
$heading.toggleClass( 'openSection' );
+ if ( $heading.hasClass( 'openSection' ) ) {
+ $heading.addClass( 'icon-arrow-up' );
+ } else {
+ $heading.removeClass( 'icon-arrow-up' );
+ }
$heading.next()
.toggleClass( 'openSection' )
.attr( {
@@ -50,7 +55,7 @@
if ( $page.find( 'h1' ).length > 0 ) {
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/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 2412204..be9135e 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -163,36 +163,6 @@
.v-border:last-child li:last-child {
border-left: 1px solid @grayLight;
}
-
- // FIXME: Move all these into icons.less
- .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 dc7fe26..c4ddfa1 100644
--- a/less/common/drawer.less
+++ b/less/common/drawer.less
@@ -41,7 +41,6 @@
padding: 0 0 1.2em;
display: block;
width: 100%;
- .background-image('../modules/images/show.png');
background-position: 50% 8px;
}
diff --git a/less/common/icons.less b/less/common/icons.less
index 20a9bbe..53f227b 100644
--- a/less/common/icons.less
+++ b/less/common/icons.less
@@ -35,6 +35,10 @@
background-position: center center;
text-indent: -9999px;
overflow: hidden;
+
+ &[disabled] {
+ opacity: .5;
+ }
}
// FIXME: Merge with above rule when the cache is clear
.icon {
@@ -235,3 +239,32 @@
.icon-cancel-light {
.background-image('images/close-button-beta.png');
}
+
+// FIXME: Move all these into icons.less
+.icon-clear {
+ .background-image('images/clear.png');
+}
+
+.icon-submit {
+ .background-image('images/check.png');
+ // FIXME: This should use mw-ui-constructive
+ background-color: #00af8b;
+}
+
+.icon-continue {
+ .background-image('images/continue-ltr.png');
+ // FIXME: This should use mw-ui-progressive
+ 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/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/modules/images/show.png b/less/common/images/show.png
similarity index 100%
rename from less/modules/images/show.png
rename to less/common/images/show.png
Binary files differ
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..d98237d 100644
--- a/less/modules/toggle.less
+++ b/less/modules/toggle.less
@@ -21,13 +21,10 @@
.section_heading {
position: relative;
- .background-image('images/show.png');
- background-position: left 1.05;
+ //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/templates/OverlayNew.html b/templates/OverlayNew.html
index 41c1655..e9fa9a9 100644
--- a/templates/OverlayNew.html
+++ b/templates/OverlayNew.html
@@ -1,7 +1,7 @@
<div class="overlay-header-container visible {{#fixedHeader}}
position-fixed{{/fixedHeader}}">
<div class="overlay-header">
<ul class="v-border 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/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/editor/EditorOverlayBase.html
b/templates/modules/editor/EditorOverlayBase.html
index bafa82c..c99b329 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="v-border 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="v-border 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 c9e2835..44a3157 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="v-border 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 d92f78c..1f17615 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="v-border 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">
@@ -14,7 +14,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 4bc37dd..1d18aa9 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="v-border 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 a76bc44..35ee31e 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="v-border 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>
--
To view, visit https://gerrit.wikimedia.org/r/133190
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I813bfd76ea2fafa6eebe42cafcbbe1c59856ac2c
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
