From 325a8a3e2713184c1869d7c7f565b082f1b1ad2b Mon Sep 17 00:00:00 2001 From: Mark Holmquist Date: Fri, 19 Sep 2014 11:34:18 -0700 Subject: [PATCH] Style fixes for the UI changes I decided to fix them all at once since we're merging all of these patches together anyway. I can pull changes into other patches if absolutely necessary. Also fixes the dialog open/close handlers for the canvas click event, and leaves the reuse dialog open on next/prev. Change-Id: Id1564425442aec72e5e41f2f80986d8a104dd92c --- resources/mmv/mmv.lightboxinterface.js | 2 -- resources/mmv/mmv.lightboxinterface.less | 1 + resources/mmv/ui/mmv.ui.canvas.js | 37 ++++++++++++-------- resources/mmv/ui/mmv.ui.canvasButtons.less | 1 + resources/mmv/ui/mmv.ui.download.dialog.less | 15 +++----- resources/mmv/ui/mmv.ui.download.pane.less | 23 +++++++----- 6 files changed, 44 insertions(+), 35 deletions(-) diff --git a/resources/mmv/mmv.lightboxinterface.js b/resources/mmv/mmv.lightboxinterface.js index d9ccac606..02281d448 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/resources/mmv/mmv.lightboxinterface.js @@ -124,8 +124,6 @@ this.canvas.empty(); this.buttons.empty(); - - this.fileReuse.empty(); }; /** diff --git a/resources/mmv/mmv.lightboxinterface.less b/resources/mmv/mmv.lightboxinterface.less index bd9a34ddf..2225a0795 100644 --- a/resources/mmv/mmv.lightboxinterface.less +++ b/resources/mmv/mmv.lightboxinterface.less @@ -28,6 +28,7 @@ bottom: @metadatabar-above-fold-height; left: 0px; right: 0px; + overflow-y: auto; } .mw-mmv-image-inner-wrapper { diff --git a/resources/mmv/ui/mmv.ui.canvas.js b/resources/mmv/ui/mmv.ui.canvas.js index 76cdde8e8..8358e75f9 100644 --- a/resources/mmv/ui/mmv.ui.canvas.js +++ b/resources/mmv/ui/mmv.ui.canvas.js @@ -149,19 +149,26 @@ }; /** - * Handles a "dialog open" event from dialogs on the page. + * Handles a "dialog open/close" event from dialogs on the page. */ - C.handleDialogOpen = function () { - this.dialogOpen = true; - this.$image.addClass( 'mw-mmv-dialog-is-open' ); - }; + C.handleDialogEvent = function ( e ) { + switch ( e.type ) { + case 'mmv-download-opened': + this.downloadOpen = true; + break; + case 'mmv-download-closed': + this.downloadOpen = false; + break; + case 'mmv-reuse-opened': + this.reuseOpen = true; + break; + case 'mmv-reuse-closed': + this.reuseOpen = false; + break; + } - /** - * Handles a "dialog close" event from dialogs on the page. - */ - C.handleDialogClose = function () { - this.dialogOpen = false; - this.$image.removeClass( 'mw-mmv-dialog-is-open' ); + this.dialogOpen = this.reuseOpen || this.downloadOpen; + this.$image.toggleClass( 'mw-mmv-dialog-is-open', this.dialogOpen ); }; /** @@ -170,10 +177,10 @@ C.setUpImageClick = function () { var canvas = this; - this.handleEvent( 'mmv-reuse-opened', $.proxy( this.handleDialogOpen, this ) ); - this.handleEvent( 'mmv-reuse-closed', $.proxy( this.handleDialogClose, this ) ); - this.handleEvent( 'mmv-download-opened', $.proxy( this.handleDialogOpen, this ) ); - this.handleEvent( 'mmv-download-closed', $.proxy( this.handleDialogClose, this ) ); + this.handleEvent( 'mmv-reuse-opened', $.proxy( this.handleDialogEvent, this ) ); + this.handleEvent( 'mmv-reuse-closed', $.proxy( this.handleDialogEvent, this ) ); + this.handleEvent( 'mmv-download-opened', $.proxy( this.handleDialogEvent, this ) ); + this.handleEvent( 'mmv-download-closed', $.proxy( this.handleDialogEvent, this ) ); this.$image .on( 'click.mmv-view-original', function () { diff --git a/resources/mmv/ui/mmv.ui.canvasButtons.less b/resources/mmv/ui/mmv.ui.canvasButtons.less index 05f94de96..5a7d2a652 100644 --- a/resources/mmv/ui/mmv.ui.canvasButtons.less +++ b/resources/mmv/ui/mmv.ui.canvasButtons.less @@ -116,6 +116,7 @@ } .mw-mmv-reuse-button { + right: @buttons-offset - 2px; bottom: @buttons-offset + @metadatabar-above-fold-height + @progress-bar-height; /* @embed */ background-image: url(img/use-ltr.svg); diff --git a/resources/mmv/ui/mmv.ui.download.dialog.less b/resources/mmv/ui/mmv.ui.download.dialog.less index a0cd33d7b..66da21bf0 100644 --- a/resources/mmv/ui/mmv.ui.download.dialog.less +++ b/resources/mmv/ui/mmv.ui.download.dialog.less @@ -3,7 +3,7 @@ .mw-mmv-download-dialog { @divider-border-height: 1px; - @dialog-height: 300px; + @dialog-height: 230px; height: @dialog-height; @@ -11,7 +11,7 @@ position: fixed; bottom: @metadatabar-above-fold-height + @progress-bar-height + 35px; - .oo-ui-optionWidget { + .mw-mmv-download-size .oo-ui-optionWidget { @tab-border-height: 3px; @highlighted-tab-color: rgb(225, 243, 255); @selected-tab-color: rgb(0, 113, 188); @@ -19,15 +19,10 @@ display: inline-block; padding: 10px 25px; - font-size: 1.2em; + font-size: 16px; - &.oo-ui-optionWidget-highlighted { - border-bottom: (@tab-border-height - @divider-border-height) solid @highlighted-tab-color; - } - - &.oo-ui-optionWidget-selected, - &.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected { - border-bottom: @tab-border-height solid @selected-tab-color; + &.oo-ui-optionWidget-selected { + border: none; } &:first-child { diff --git a/resources/mmv/ui/mmv.ui.download.pane.less b/resources/mmv/ui/mmv.ui.download.pane.less index 8cb7ee219..c2da70666 100644 --- a/resources/mmv/ui/mmv.ui.download.pane.less +++ b/resources/mmv/ui/mmv.ui.download.pane.less @@ -20,6 +20,7 @@ .mw-mmv-download-area { padding-top: 20px; + padding-left: 10px; width: 100%; .mw-mmv-download-go-button { @@ -41,6 +42,8 @@ &:hover { border-bottom: 1px solid mix(#000, @mw-ui-constructive-button-color, 20%); } + + min-width: 10px; } .mw-mmv-download-image-size-name { @@ -79,24 +82,28 @@ text-align: start; display: none; margin-top: 0; + margin-right: 20px; width: auto; &.active { display: block; } + /* Changes to pulldown menu */ + .oo-ui-inlineMenuWidget-handle { + display: none; + } + + .oo-ui-menuItemWidget { + display: block; + } + .oo-ui-widget-disabled { display: none; } - /* Changes to pulldown menu */ - .oo-ui-icon-check, - .oo-ui-inlineMenuWidget-handle { - display: none; - } - - .oo-ui-menuItemWidget { - width: 100%; + .oo-ui-labelElement-label { + margin-left: 20px; } } }