jenkins-bot has submitted this change and it was merged.
Change subject: Make BookletLayout inherit from MenuLayout instead of embedding
a GridLayout
......................................................................
Make BookletLayout inherit from MenuLayout instead of embedding a GridLayout
Change-Id: I16fe6226929ca99b851dfd4b39f7c99f7b4621f9
TODO: Consider murdering GridLayout with a blunt object.
---
M build/modules.json
M demos/pages/dialogs.js
M src/layouts/BookletLayout.js
3 files changed, 105 insertions(+), 18 deletions(-)
Approvals:
Jforrester: Looks good to me, but someone else must approve
Trevor Parscal: Looks good to me, approved
jenkins-bot: Verified
diff --git a/build/modules.json b/build/modules.json
index f0e76c4..f24b1fd 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -39,13 +39,13 @@
"src/dialogs/MessageDialog.js",
"src/dialogs/ProcessDialog.js",
- "src/layouts/BookletLayout.js",
"src/layouts/FieldLayout.js",
"src/layouts/ActionFieldLayout.js",
"src/layouts/FieldsetLayout.js",
"src/layouts/FormLayout.js",
"src/layouts/GridLayout.js",
"src/layouts/MenuLayout.js",
+ "src/layouts/BookletLayout.js",
"src/layouts/PanelLayout.js",
"src/layouts/PageLayout.js",
"src/layouts/StackLayout.js",
diff --git a/demos/pages/dialogs.js b/demos/pages/dialogs.js
index 6414ac5..6483476 100644
--- a/demos/pages/dialogs.js
+++ b/demos/pages/dialogs.js
@@ -184,16 +184,48 @@
};
BookletDialog.prototype.initialize = function () {
BookletDialog.super.prototype.initialize.apply( this, arguments
);
- this.bookletLayout = new OO.ui.BookletLayout( { $: this.$,
outlined: true } );
+
+ var dialog = this;
+
+ function changePage( direction ) {
+ var pageIndex = dialog.pages.indexOf(
dialog.bookletLayout.getCurrentPage() );
+ pageIndex = ( dialog.pages.length + pageIndex +
direction ) % dialog.pages.length;
+ dialog.bookletLayout.setPage( dialog.pages[ pageIndex
].getName() );
+ }
+
+ this.navigationField = new OO.ui.FieldLayout(
+ new OO.ui.ButtonGroupWidget( {
+ items: [
+ new OO.ui.ButtonWidget( {
+ data: 'previous',
+ icon: 'previous'
+ } ).on( 'click', function () {
+ changePage( -1 );
+ } ),
+ new OO.ui.ButtonWidget( {
+ data: 'next',
+ icon: 'next'
+ } ).on( 'click', function () {
+ changePage( 1 );
+ } )
+ ]
+ } ),
+ {
+ label: 'Change page',
+ align: 'top'
+ }
+ );
+
+ this.bookletLayout = new OO.ui.BookletLayout( { $: this.$ } );
this.pages = [
- new SamplePage( 'small', { $: this.$, label: 'Small',
icon: 'window' } ),
- new SamplePage( 'medium', { $: this.$, label: 'Medium',
icon: 'window' } ),
- new SamplePage( 'large', { $: this.$, label: 'Large',
icon: 'window' } ),
- new SamplePage( 'larger', { $: this.$, label: 'Larger',
icon: 'window' } ),
- new SamplePage( 'full', { $: this.$, label: 'Full',
icon: 'window' } )
+ new SamplePage( 'page-1', { $: this.$, label: 'Page 1',
icon: 'window' } ),
+ new SamplePage( 'page-2', { $: this.$, label: 'Page 2',
icon: 'window' } ),
+ new SamplePage( 'page-3', { $: this.$, label: 'Page 3',
icon: 'window' } )
];
this.bookletLayout.addPages( this.pages );
this.bookletLayout.connect( this, { set: 'onBookletLayoutSet' }
);
+ this.bookletLayout.setPage( 'page-1' );
+
this.$body.append( this.bookletLayout.$element );
};
BookletDialog.prototype.getActionProcess = function ( action ) {
@@ -205,10 +237,52 @@
return BookletDialog.super.prototype.getActionProcess.call(
this, action );
};
BookletDialog.prototype.onBookletLayoutSet = function ( page ) {
+ page.$element.append( this.navigationField.$element );
+ };
+
+ function OutlinedBookletDialog( config ) {
+ OutlinedBookletDialog.super.call( this, config );
+ }
+ OO.inheritClass( OutlinedBookletDialog, OO.ui.ProcessDialog );
+ OutlinedBookletDialog.static.title = 'Booklet dialog';
+ OutlinedBookletDialog.static.actions = [
+ { action: 'save', label: 'Done', flags: [ 'primary',
'progressive' ] },
+ { action: 'cancel', label: 'Cancel', flags: 'safe' }
+ ];
+ OutlinedBookletDialog.prototype.getBodyHeight = function () {
+ return 250;
+ };
+ OutlinedBookletDialog.prototype.initialize = function () {
+ OutlinedBookletDialog.super.prototype.initialize.apply( this,
arguments );
+ this.bookletLayout = new OO.ui.BookletLayout( {
+ $: this.$,
+ outlined: true,
+ menuSize: '15em'
+ } );
+ this.pages = [
+ new SamplePage( 'small', { $: this.$, label: 'Small',
icon: 'window' } ),
+ new SamplePage( 'medium', { $: this.$, label: 'Medium',
icon: 'window' } ),
+ new SamplePage( 'large', { $: this.$, label: 'Large',
icon: 'window' } ),
+ new SamplePage( 'larger', { $: this.$, label: 'Larger',
icon: 'window' } ),
+ new SamplePage( 'full', { $: this.$, label: 'Full',
icon: 'window' } )
+ ];
+ this.bookletLayout.addPages( this.pages );
+ this.bookletLayout.connect( this, { set: 'onBookletLayoutSet' }
);
+ this.$body.append( this.bookletLayout.$element );
+ };
+ OutlinedBookletDialog.prototype.getActionProcess = function ( action ) {
+ if ( action ) {
+ return new OO.ui.Process( function () {
+ this.close( { action: action } );
+ }, this );
+ }
+ return
OutlinedBookletDialog.super.prototype.getActionProcess.call( this, action );
+ };
+ OutlinedBookletDialog.prototype.onBookletLayoutSet = function ( page ) {
this.setSize( page.getName() );
};
- BookletDialog.prototype.getSetupProcess = function ( data ) {
- return BookletDialog.super.prototype.getSetupProcess.call(
this, data )
+ OutlinedBookletDialog.prototype.getSetupProcess = function ( data ) {
+ return
OutlinedBookletDialog.super.prototype.getSetupProcess.call( this, data )
.next( function () {
this.bookletLayout.setPage( this.getSize() );
}, this );
@@ -360,6 +434,13 @@
}
},
{
+ name: 'Outlined booklet dialog',
+ dialogClass: OutlinedBookletDialog,
+ config: {
+ size: 'medium'
+ }
+ },
+ {
name: 'Menu dialog',
dialogClass: MenuDialog,
config: {
diff --git a/src/layouts/BookletLayout.js b/src/layouts/BookletLayout.js
index 60243ea..f1b8a1e 100644
--- a/src/layouts/BookletLayout.js
+++ b/src/layouts/BookletLayout.js
@@ -2,7 +2,7 @@
* Layout containing a series of pages.
*
* @class
- * @extends OO.ui.Layout
+ * @extends OO.ui.MenuLayout
*
* @constructor
* @param {Object} [config] Configuration options
@@ -23,6 +23,7 @@
this.pages = {};
this.ignoreFocus = false;
this.stackLayout = new OO.ui.StackLayout( { $: this.$, continuous:
!!config.continuous } );
+ this.$content.append( this.stackLayout.$element );
this.autoFocus = config.autoFocus === undefined || !!config.autoFocus;
this.outlineVisible = false;
this.outlined = !!config.outlined;
@@ -31,10 +32,7 @@
this.outlineControlsWidget = null;
this.outlineSelectWidget = new OO.ui.OutlineSelectWidget( { $:
this.$ } );
this.outlinePanel = new OO.ui.PanelLayout( { $: this.$,
scrollable: true } );
- this.gridLayout = new OO.ui.GridLayout(
- [ this.outlinePanel, this.stackLayout ],
- { $: this.$, widths: [ 1, 2 ] }
- );
+ this.$menu.append( this.outlinePanel.$element );
this.outlineVisible = true;
if ( this.editable ) {
this.outlineControlsWidget = new
OO.ui.OutlineControlsWidget(
@@ -42,6 +40,7 @@
);
}
}
+ this.toggleMenu( this.outlined );
// Events
this.stackLayout.connect( this, { set: 'onStackLayoutSet' } );
@@ -65,15 +64,12 @@
.addClass(
'oo-ui-bookletLayout-outlinePanel-editable' )
.append( this.outlineControlsWidget.$element );
}
- this.$element.append( this.gridLayout.$element );
- } else {
- this.$element.append( this.stackLayout.$element );
}
};
/* Setup */
-OO.inheritClass( OO.ui.BookletLayout, OO.ui.Layout );
+OO.inheritClass( OO.ui.BookletLayout, OO.ui.MenuLayout );
/* Events */
@@ -271,6 +267,16 @@
};
/**
+ * Get the current page
+ *
+ * @return {OO.ui.PageLayout|undefined} Current page, if found
+ */
+OO.ui.BookletLayout.prototype.getCurrentPage = function () {
+ var name = this.getCurrentPageName();
+ return name ? this.getPage( name ) : undefined;
+};
+
+/**
* Get the current page name.
*
* @return {string|null} Current page name
--
To view, visit https://gerrit.wikimedia.org/r/187824
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I16fe6226929ca99b851dfd4b39f7c99f7b4621f9
Gerrit-PatchSet: 2
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
