Merge "Style fixes for the UI changes"

This commit is contained in:
jenkins-bot 2014-09-24 21:14:51 +00:00 committed by Gerrit Code Review
commit 6c2fe0aaf5
6 changed files with 44 additions and 35 deletions

View file

@ -124,8 +124,6 @@
this.canvas.empty(); this.canvas.empty();
this.buttons.empty(); this.buttons.empty();
this.fileReuse.empty();
}; };
/** /**

View file

@ -29,6 +29,7 @@
bottom: @metadatabar-above-fold-height; bottom: @metadatabar-above-fold-height;
left: 0px; left: 0px;
right: 0px; right: 0px;
overflow-y: auto;
} }
.mw-mmv-image-inner-wrapper { .mw-mmv-image-inner-wrapper {

View file

@ -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 () { C.handleDialogEvent = function ( e ) {
this.dialogOpen = true; switch ( e.type ) {
this.$image.addClass( 'mw-mmv-dialog-is-open' ); 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;
}
/** this.dialogOpen = this.reuseOpen || this.downloadOpen;
* Handles a "dialog close" event from dialogs on the page. this.$image.toggleClass( 'mw-mmv-dialog-is-open', this.dialogOpen );
*/
C.handleDialogClose = function () {
this.dialogOpen = false;
this.$image.removeClass( 'mw-mmv-dialog-is-open' );
}; };
/** /**
@ -170,10 +177,10 @@
C.setUpImageClick = function () { C.setUpImageClick = function () {
var canvas = this; var canvas = this;
this.handleEvent( 'mmv-reuse-opened', $.proxy( this.handleDialogOpen, this ) ); this.handleEvent( 'mmv-reuse-opened', $.proxy( this.handleDialogEvent, this ) );
this.handleEvent( 'mmv-reuse-closed', $.proxy( this.handleDialogClose, this ) ); this.handleEvent( 'mmv-reuse-closed', $.proxy( this.handleDialogEvent, this ) );
this.handleEvent( 'mmv-download-opened', $.proxy( this.handleDialogOpen, this ) ); this.handleEvent( 'mmv-download-opened', $.proxy( this.handleDialogEvent, this ) );
this.handleEvent( 'mmv-download-closed', $.proxy( this.handleDialogClose, this ) ); this.handleEvent( 'mmv-download-closed', $.proxy( this.handleDialogEvent, this ) );
this.$image this.$image
.on( 'click.mmv-view-original', function () { .on( 'click.mmv-view-original', function () {

View file

@ -116,6 +116,7 @@
} }
.mw-mmv-reuse-button { .mw-mmv-reuse-button {
right: @buttons-offset - 2px;
bottom: @buttons-offset + @metadatabar-above-fold-height + @progress-bar-height; bottom: @buttons-offset + @metadatabar-above-fold-height + @progress-bar-height;
/* @embed */ /* @embed */
background-image: url(img/use-ltr.svg); background-image: url(img/use-ltr.svg);

View file

@ -3,7 +3,7 @@
.mw-mmv-download-dialog { .mw-mmv-download-dialog {
@divider-border-height: 1px; @divider-border-height: 1px;
@dialog-height: 300px; @dialog-height: 230px;
height: @dialog-height; height: @dialog-height;
@ -11,7 +11,7 @@
position: fixed; position: fixed;
bottom: @metadatabar-above-fold-height + @progress-bar-height + 35px; bottom: @metadatabar-above-fold-height + @progress-bar-height + 35px;
.oo-ui-optionWidget { .mw-mmv-download-size .oo-ui-optionWidget {
@tab-border-height: 3px; @tab-border-height: 3px;
@highlighted-tab-color: rgb(225, 243, 255); @highlighted-tab-color: rgb(225, 243, 255);
@selected-tab-color: rgb(0, 113, 188); @selected-tab-color: rgb(0, 113, 188);
@ -19,15 +19,10 @@
display: inline-block; display: inline-block;
padding: 10px 25px; padding: 10px 25px;
font-size: 1.2em; font-size: 16px;
&.oo-ui-optionWidget-highlighted { &.oo-ui-optionWidget-selected {
border-bottom: (@tab-border-height - @divider-border-height) solid @highlighted-tab-color; border: none;
}
&.oo-ui-optionWidget-selected,
&.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected {
border-bottom: @tab-border-height solid @selected-tab-color;
} }
&:first-child { &:first-child {

View file

@ -20,6 +20,7 @@
.mw-mmv-download-area { .mw-mmv-download-area {
padding-top: 20px; padding-top: 20px;
padding-left: 10px;
width: 100%; width: 100%;
.mw-mmv-download-go-button { .mw-mmv-download-go-button {
@ -41,6 +42,8 @@
&:hover { &:hover {
border-bottom: 1px solid mix(#000, @mw-ui-constructive-button-color, 20%); border-bottom: 1px solid mix(#000, @mw-ui-constructive-button-color, 20%);
} }
min-width: 10px;
} }
.mw-mmv-download-image-size-name { .mw-mmv-download-image-size-name {
@ -79,24 +82,28 @@
text-align: start; text-align: start;
display: none; display: none;
margin-top: 0; margin-top: 0;
margin-right: 20px;
width: auto; width: auto;
&.active { &.active {
display: block; display: block;
} }
/* Changes to pulldown menu */
.oo-ui-inlineMenuWidget-handle {
display: none;
}
.oo-ui-menuItemWidget {
display: block;
}
.oo-ui-widget-disabled { .oo-ui-widget-disabled {
display: none; display: none;
} }
/* Changes to pulldown menu */ .oo-ui-labelElement-label {
.oo-ui-icon-check, margin-left: 20px;
.oo-ui-inlineMenuWidget-handle {
display: none;
}
.oo-ui-menuItemWidget {
width: 100%;
} }
} }
} }