[MediaWiki-commits] [Gerrit] oojs/ui[master]: demo: Add test for ClippableElements at the bottom of their ...

[jenkins-bot (Code Review)]

jenkins-bot has submitted this change and it was merged. ( 
https://gerrit.wikimedia.org/r/330374 )

Change subject: demo: Add test for ClippableElements at the bottom of their 
containers
..


demo: Add test for ClippableElements at the bottom of their containers

Change-Id: I82ac7c8f558818435483672aa4896db1d54339f8
---
M demos/pages/dialogs.js
1 file changed, 78 insertions(+), 0 deletions(-)

Approvals:
  Bartosz Dziewoński: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/demos/pages/dialogs.js b/demos/pages/dialogs.js
index bed75f9..ef5c62d 100644
--- a/demos/pages/dialogs.js
+++ b/demos/pages/dialogs.js
@@ -675,6 +675,77 @@
return 
DialogWithDropdowns.parent.prototype.getActionProcess.call( this, action );
};
 
+   function DialogWithPopupAndDropdown( config ) {
+   DialogWithPopupAndDropdown.parent.call( this, config );
+   }
+   OO.inheritClass( DialogWithPopupAndDropdown, OO.ui.ProcessDialog );
+   DialogWithPopupAndDropdown.static.title = 'Dialog with popup and 
dropdown (ClippableElement test)';
+   DialogWithPopupAndDropdown.static.actions = [
+   { action: 'save', label: 'Done', flags: [ 'primary', 
'progressive' ] },
+   { action: 'cancel', label: 'Cancel', flags: [ 'safe', 'back' ] }
+   ];
+   DialogWithPopupAndDropdown.prototype.getBodyHeight = function () {
+   return 300;
+   };
+   DialogWithPopupAndDropdown.prototype.initialize = function () {
+   var $spacer = $( '' ).height( 240 );
+   DialogWithPopupAndDropdown.parent.prototype.initialize.apply( 
this, arguments );
+   this.bookletLayout = new OO.ui.BookletLayout( {
+   outlined: true
+   } );
+   this.pages = [
+   new SamplePage( 'info', {
+   label: 'Information',
+   icon: 'info',
+   content: [
+   'Widgets that don\'t use $overlay get 
clipped at the bottom of their container. ',
+   'This is a test of two such cases'
+   ]
+   } ),
+   new SamplePage( 'dropdownbottom', {
+   label: 'DropdownWidget at bottom',
+   content: [ $spacer.clone(), new 
OO.ui.DropdownWidget( {
+   menu: {
+   items: this.makeItems()
+   }
+   } ) ]
+   } ),
+   new SamplePage( 'popupbottom', {
+   label: 'Popup at bottom',
+   content: [ $spacer.clone(), new 
OO.ui.PopupButtonWidget( {
+   icon: 'info',
+   label: 'Popup here',
+   framed: false,
+   popup: {
+   head: true,
+   label: 'More information',
+   $content: $( 'Extra 
information here.' ),
+   padded: true
+   }
+   } ) ]
+   } )
+   ];
+   this.bookletLayout.addPages( this.pages );
+   this.$body.append( this.bookletLayout.$element );
+   };
+   DialogWithPopupAndDropdown.prototype.makeItems = function () {
+   return [ 0, 1, 2, 3, 4 ].map( function ( val ) {
+   return new OO.ui.MenuOptionWidget( {
+   data: val,
+   label: String( val )
+   } );
+   } );
+   };
+
+   DialogWithPopupAndDropdown.prototype.getActionProcess = function ( 
action ) {
+   if ( action ) {
+   return new OO.ui.Process( function () {
+   this.close( { action: action } );
+   }, this );
+   }
+   return 
DialogWithPopupAndDropdown.parent.prototype.getActionProcess.call( this, action 
);
+   };
+
configQuick = [
{
name: 'Quick alert',
@@ -845,6 +916,13 @@
}
},
{
+   name: 'Dialog with popup and dropdown (ClippableElement 
test)',
+   dialogClass: DialogWithPopupAndDropdown,
+   config: {
+   size: 'large'
+   }
+   },
+   

[MediaWiki-commits] [Gerrit] oojs/ui[master]: demo: Add test for ClippableElements at the bottom of their ...

[Prtksxna (Code Review)]

Prtksxna has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/330374 )

Change subject: demo: Add test for ClippableElements at the bottom of their 
containers
..

demo: Add test for ClippableElements at the bottom of their containers

Change-Id: I82ac7c8f558818435483672aa4896db1d54339f8
---
M demos/pages/dialogs.js
1 file changed, 80 insertions(+), 0 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/74/330374/1

diff --git a/demos/pages/dialogs.js b/demos/pages/dialogs.js
index bed75f9..186a4b7 100644
--- a/demos/pages/dialogs.js
+++ b/demos/pages/dialogs.js
@@ -675,6 +675,79 @@
return 
DialogWithDropdowns.parent.prototype.getActionProcess.call( this, action );
};
 
+   function DialogWithPopupAndDropdown( config ) {
+   DialogWithPopupAndDropdown.parent.call( this, config );
+   }
+   OO.inheritClass( DialogWithPopupAndDropdown, OO.ui.ProcessDialog );
+   DialogWithPopupAndDropdown.static.title = 'Dialog with popup and 
dropdown (ClippableElement test)';
+   DialogWithPopupAndDropdown.static.actions = [
+   { action: 'save', label: 'Done', flags: [ 'primary', 
'progressive' ] },
+   { action: 'cancel', label: 'Cancel', flags: [ 'safe', 'back' ] }
+   ];
+   DialogWithPopupAndDropdown.prototype.getBodyHeight = function () {
+   return 300;
+   };
+   DialogWithPopupAndDropdown.prototype.initialize = function () {
+   var $spacer = $( '' ).height( 240 );
+   DialogWithPopupAndDropdown.parent.prototype.initialize.apply( 
this, arguments );
+   this.bookletLayout = new OO.ui.BookletLayout( {
+   outlined: true
+   } );
+   this.pages = [
+   new SamplePage( 'info', {
+   label: 'Information',
+   icon: 'info',
+   content: [
+   'Widgets that don\'t use $overlay get 
clipped at the bottom of their container. ',
+   'This is a test of two such cases'
+   ]
+   } ),
+   new SamplePage( 'dropdownbottom', {
+   label: 'DropdownWidget at bottom',
+   content: [ $spacer.clone(), new 
OO.ui.DropdownWidget( {
+   menu: {
+   items: this.makeItems()
+   }
+   } )]
+   } ),
+   new SamplePage( 'popupbottom', {
+   label: 'Popup at bottom',
+   content: [ $spacer.clone(),
+   new OO.ui.PopupButtonWidget( {
+   icon: 'info',
+   label: 'Popup here',
+   framed: false,
+   popup: {
+   head: true,
+   label: 'More 
information',
+   $content: $( 'Extra 
information here.' ),
+   padded: true
+   }
+   } )
+   ]
+   } )
+   ];
+   this.bookletLayout.addPages( this.pages );
+   this.$body.append( this.bookletLayout.$element );
+   };
+   DialogWithPopupAndDropdown.prototype.makeItems = function () {
+   return [ 0, 1, 2 ].map( function ( val ) {
+   return new OO.ui.MenuOptionWidget( {
+   data: val,
+   label: String( val )
+   } );
+   } );
+   };
+
+   DialogWithPopupAndDropdown.prototype.getActionProcess = function ( 
action ) {
+   if ( action ) {
+   return new OO.ui.Process( function () {
+   this.close( { action: action } );
+   }, this );
+   }
+   return 
DialogWithPopupAndDropdown.parent.prototype.getActionProcess.call( this, action 
);
+   };
+
configQuick = [
{
name: 'Quick alert',
@@ -845,6 +918,13 @@
}
},
{
+   name: 'Dialog with popup and dropdown (ClippableElement 
test)',
+   dialogClass: DialogWithPopupAndDropdown,
+