[MediaWiki-commits] [Gerrit] Add more dialog sizes and make them switchable - change (oojs/ui)

[Trevor Parscal (Code Review)]

Trevor Parscal has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/116892

Change subject: Add more dialog sizes and make them switchable
......................................................................

Add more dialog sizes and make them switchable

Now small, medium and large are available through the setSize() method.

Change-Id: Icc91d776b82011c1dccebd87ba036376535c1ee4
---
M src/OO.ui.Dialog.js
M src/styles/OO.ui.Dialog.less
2 files changed, 54 insertions(+), 13 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/92/116892/1

diff --git a/src/OO.ui.Dialog.js b/src/OO.ui.Dialog.js
index 8806157..50a2e18 100644
--- a/src/OO.ui.Dialog.js
+++ b/src/OO.ui.Dialog.js
@@ -8,11 +8,11 @@
  * @constructor
  * @param {Object} [config] Configuration options
  * @cfg {boolean} [footless] Hide foot
- * @cfg {boolean} [small] Make the dialog small
+ * @cfg {string} [size='medium'] Symbolic name of dialog size, `small`, 
`medium` or `large`
  */
 OO.ui.Dialog = function OoUiDialog( config ) {
        // Configuration initialization
-       config = config || {};
+       config = $.extend( { 'size': 'medium' }, config );
 
        // Parent constructor
        OO.ui.Window.call( this, config );
@@ -20,7 +20,7 @@
        // Properties
        this.visible = false;
        this.footless = !!config.footless;
-       this.small = !!config.small;
+       this.size = null;
        this.onWindowMouseWheelHandler = OO.ui.bind( this.onWindowMouseWheel, 
this );
        this.onDocumentKeyDownHandler = OO.ui.bind( this.onDocumentKeyDown, 
this );
 
@@ -30,6 +30,7 @@
 
        // Initialization
        this.$element.addClass( 'oo-ui-dialog' );
+       this.setSize( config.size );
 };
 
 /* Inheritance */
@@ -47,6 +48,18 @@
  * @inheritable
  */
 OO.ui.Dialog.static.name = '';
+
+/**
+ * Map of symbolic size names and CSS classes.
+ *
+ * @static
+ * @property {Object}
+ */
+OO.ui.Dialog.static.sizeCssClasses = {
+       'small': 'oo-ui-dialog-small',
+       'medium': 'oo-ui-dialog-medium',
+       'large': 'oo-ui-dialog-large'
+};
 
 /* Methods */
 
@@ -109,6 +122,29 @@
 };
 
 /**
+ * Set dialog size.
+ *
+ * @param {string} [size='medium'] Symbolic name of dialog size, `small`, 
`medium` or `large`
+ */
+OO.ui.Dialog.prototype.setSize = function ( size ) {
+       var name, state, cssClass,
+               sizeCssClasses = OO.ui.Dialog.static.sizeCssClasses;
+
+       if ( !sizeCssClasses[size] ) {
+               size = 'medium';
+       }
+       this.size = size;
+       for ( name in sizeCssClasses ) {
+               state = name === size;
+               cssClass = sizeCssClasses[name];
+               this.$element.toggleClass( cssClass, state );
+               if ( this.frame.$content ) {
+                       this.frame.$content.toggleClass( cssClass, state );
+               }
+       }
+};
+
+/**
  * @inheritdoc
  */
 OO.ui.Dialog.prototype.initialize = function () {
@@ -131,9 +167,6 @@
        this.frame.$content.addClass( 'oo-ui-dialog-content' );
        if ( this.footless ) {
                this.frame.$content.addClass( 'oo-ui-dialog-content-footless' );
-       }
-       if ( this.small ) {
-               this.$frame.addClass( 'oo-ui-window-frame-small' );
        }
        this.closeButton.$element.addClass( 'oo-ui-window-closeButton' );
        this.$head.append( this.closeButton.$element );
diff --git a/src/styles/OO.ui.Dialog.less b/src/styles/OO.ui.Dialog.less
index 5b1f728..428c982 100644
--- a/src/styles/OO.ui.Dialog.less
+++ b/src/styles/OO.ui.Dialog.less
@@ -15,16 +15,24 @@
                right: 0;
                bottom: 1em;
                left: 0;
-               margin: auto;
-               width: 800px;
                min-height: 12em;
-               max-height: 600px;
+               margin: auto;
                overflow: hidden;
+       }
 
-               &-small {
-                       max-width: 600px;
-                       max-height: 400px;
-               }
+       &-small .oo-ui-window-frame {
+               width: 600px;
+               max-height: 400px;
+       }
+
+       &-medium .oo-ui-window-frame {
+               width: 800px;
+               max-height: 600px;
+       }
+
+       &-large .oo-ui-window-frame {
+               width: 960px;
+               max-height: 720px;
        }
 
        .oo-ui-frame {

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

Gerrit-MessageType: newchange
Gerrit-Change-Id: Icc91d776b82011c1dccebd87ba036376535c1ee4
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <tpars...@wikimedia.org>

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