jenkins-bot has submitted this change and it was merged.

Change subject: Fix UploadTutorial
......................................................................


Fix UploadTutorial

Unbreak the rendering of the finished button/icon

http://localhost:8080/wiki/Albert_Einstein#/upload-tutorial/foo

Change-Id: Ibeb904fc83470de7da31b7573b9c5cbec4d68361
---
M javascripts/modules/uploads/UploadTutorial.js
M less/modules/tutorials.less
M less/modules/uploads/UploadTutorial.less
M templates/modules/uploads/UploadTutorial.hogan
4 files changed, 43 insertions(+), 30 deletions(-)

Approvals:
  Jhernandez: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/javascripts/modules/uploads/UploadTutorial.js 
b/javascripts/modules/uploads/UploadTutorial.js
index 1017b08..02b15a1 100644
--- a/javascripts/modules/uploads/UploadTutorial.js
+++ b/javascripts/modules/uploads/UploadTutorial.js
@@ -1,4 +1,4 @@
-( function ( M, $ ) {
+( function ( M ) {
 
        var context = M.require( 'context' ),
                Overlay = M.require( 'Overlay' ),
@@ -39,12 +39,10 @@
                 */
                defaults: {
                        slideLeftButton: new Icon( {
-                               name: 'previous',
-                               additionalClassNames: 'slider-button prev'
+                               name: 'previous'
                        } ).toHtmlString(),
                        slideRightButton: new Icon( {
-                               name: 'next',
-                               additionalClassNames: 'slider-button next'
+                               name: 'next'
                        } ).toHtmlString(),
                        inBeta: context.isBetaGroupMember(),
                        pages: [
@@ -65,10 +63,11 @@
 
                /** @inheritdoc */
                postRender: function ( options ) {
-                       var $button = this.$( '.button' );
+                       var $button = this.$( '.button' ),
+                               photoUploaderButton;
 
                        if ( options.funnel ) {
-                               new LeadPhotoUploaderButton( {
+                               photoUploaderButton = new 
LeadPhotoUploaderButton( {
                                        el: $button,
                                        buttonCaption: buttonMsg,
                                        funnel: options.funnel
@@ -97,9 +96,10 @@
                 * @method
                 */
                onClickUploadButton: function () {
-                       // need timeout for the file dialog to open
-                       setTimeout( $.proxy( this, 'hide' ), 0 );
-                       setTimeout( $.proxy( this, 'emit', 'hide' ), 0 );
+                       this.emit( 'hide' );
+                       // FIXME: this is a hack. Not sure why this is needed 
but without it
+                       // when escaping the upload interface you will still 
see it.
+                       this.$el.hide();
                },
 
                /**
@@ -123,4 +123,4 @@
 
        M.define( 'modules/uploads/UploadTutorial', UploadTutorial );
 
-}( mw.mobileFrontend, jQuery ) );
+}( mw.mobileFrontend ) );
diff --git a/less/modules/tutorials.less b/less/modules/tutorials.less
index 19003e4..db72028 100644
--- a/less/modules/tutorials.less
+++ b/less/modules/tutorials.less
@@ -1,6 +1,20 @@
 @import "minerva.variables";
 @import "minerva.mixins";
 
+.stable {
+       .content-overlay {
+
+               .button {
+                       // FIXME: without this the cloaked input seems to 
interfere making cancel button start upload
+                       position: relative;
+                       // use background to override gradient in other buttons
+                       background: #fff;
+                       color: @colorTutorial;
+                       padding: 12px;
+                       font-weight: bold;
+               }
+       }
+}
 
 .content-overlay {
        position: absolute;
@@ -17,16 +31,6 @@
        p {
                line-height: 1.4;
                margin: 0 0 1em;
-       }
-
-       .button {
-               // FIXME: without this the cloaked input seems to interfere 
making cancel button start upload
-               position: relative;
-               // use background to override gradient in other buttons
-               background: #fff;
-               color: @colorTutorial;
-               padding: 12px;
-               font-weight: bold;
        }
 
        .cancel.inline {
diff --git a/less/modules/uploads/UploadTutorial.less 
b/less/modules/uploads/UploadTutorial.less
index fd04ba5..ec05e1d 100644
--- a/less/modules/uploads/UploadTutorial.less
+++ b/less/modules/uploads/UploadTutorial.less
@@ -12,25 +12,30 @@
                bottom: 0;
                z-index: @z-indexOverlay;
 
-               &:before {
-                       top: 0;
-               }
-
                &.prev {
                        left: 0;
                        // FIXME: Remove when mw-ui-icon in stable
-                       &.icon {
+                       .icon {
                                
.background-image('../images/uploads/chevronLeft.png');
+                               right: 0;
                        }
                }
 
                &.next {
                        right: 0;
                        // FIXME: Remove when mw-ui-icon in stable
-                       &.icon {
+                       .icon {
                                
.background-image('../images/uploads/chevronRight.png');
+                               right: @buttonWidth - 32px;
                        }
                }
+
+               // vertically align icon.
+               > * {
+                       position: absolute;
+                       top: 50%;
+                       margin-top: -50%
+               }
        }
 
        .slide {
diff --git a/templates/modules/uploads/UploadTutorial.hogan 
b/templates/modules/uploads/UploadTutorial.hogan
index f92578a..dcb8d63 100644
--- a/templates/modules/uploads/UploadTutorial.hogan
+++ b/templates/modules/uploads/UploadTutorial.hogan
@@ -1,4 +1,6 @@
-{{{slideLeftButton}}}
+<div class="prev slider-button">
+       {{{slideLeftButton}}}
+</div>
 <ul>
        {{#pages}}
        <li class="slide slide-image">
@@ -6,13 +8,15 @@
                <p>{{text}}</p>
                {{#button}}
                {{#funnel}}
-               <div class="button"></div>
+               <div class="mw-ui-button button"></div>
                {{/funnel}}
                {{^funnel}}
-               <button class="cancel button">{{button}}</button>
+               <button class="cancel button mw-ui-button">{{button}}</button>
                {{/funnel}}
                {{/button}}
        </li>
        {{/pages}}
 </ul>
+<div class="next slider-button">
 {{{slideRightButton}}}
+</div>

-- 
To view, visit https://gerrit.wikimedia.org/r/185850
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Ibeb904fc83470de7da31b7573b9c5cbec4d68361
Gerrit-PatchSet: 10
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Jhernandez <jhernan...@wikimedia.org>
Gerrit-Reviewer: Phuedx <g...@samsmith.io>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to