IndexLayout nested in a continuous StackLayout
ActivePublic
Actions

Authored by Huji on Apr 5 2019, 1:46 AM.

Tags

None

Referenced Files

	F28583672: raw.txt
	Apr 5 2019, 1:46 AM

Subscribers

None

	(function($, mw) {
	'use strict';
	var windowManager;
	var SD;
	var SDOptions = {
	install: function() {
	mw.loader.using(['oojs-ui-core', 'oojs-ui-widgets', 'oojs-ui-windows', 'mediawiki.api']).done(SDOptions.createWindow);
	mw.loader.load(['oojs-ui-core', 'oojs-ui-widgets', 'oojs-ui-windows', 'mediawiki.api']);
	},
	createWindow: function() {
	function SimpleDialog(config) {
	SimpleDialog.super.call(this, config);
	}
	OO.inheritClass(SimpleDialog, OO.ui.ProcessDialog);
	SimpleDialog.static.name = 'Simple dialog';
	SimpleDialog.static.title = 'Simple Dialog';
	SimpleDialog.static.actions = [{
	action: 'Go',
	label: 'Go',
	flags: 'primary'
	}, {
	label: 'Cancel',
	flags: 'safe'
	}];
	SimpleDialog.prototype.initialize = function() {
	var dialog = this;

	SimpleDialog.super.prototype.initialize.apply(this, arguments);

	this.tabPanel = [];

	this.tabPanel['FirstTab'] = new OO.ui.TabPanelLayout('FirstTab', {
	label: 'Tab One',
	scrollable: false,
	padded: true
	});
	this.tabPanel['SecondTab'] = new OO.ui.TabPanelLayout('SecondTab', {
	label: 'Tab Two',
	scrollable: false,
	padded: true
	});

	this.buttonHappy = new OO.ui.ButtonOptionWidget({
	id: 'buttonHappy',
	label: 'Happy :)'
	});
	this.buttonSad = new OO.ui.ButtonOptionWidget({
	id: 'buttonSad',
	label: 'Sad :('
	});
	this.buttonCat = new OO.ui.ButtonOptionWidget({
	id: 'buttonCat',
	label: 'Meow!'
	});
	this.buttonDog = new OO.ui.ButtonOptionWidget({
	id: 'buttonDog',
	label: 'Woof!'
	});
	this.buttonSelect = [];
	this.buttonSelect['FirstTab'] = new OO.ui.ButtonSelectWidget({
	items: [
	this.buttonHappy,
	this.buttonSad
	]
	});
	this.buttonSelect['SecondTab'] = new OO.ui.ButtonSelectWidget({
	items: [
	this.buttonCat,
	this.buttonDog
	]
	});

	this.tabPanel['FirstTab'].$element.append(this.buttonSelect['FirstTab'].$element);
	this.tabPanel['SecondTab'].$element.append(this.buttonSelect['SecondTab'].$element);

	this.indexLayout = new OO.ui.IndexLayout({
	autoFocus: false
	});
	var tabList = [];
	tabList = [
	this.tabPanel['FirstTab'],
	this.tabPanel['SecondTab']
	];
	this.indexLayout.addTabPanels(tabList);

	this.panelTop = new OO.ui.PanelLayout({
	expanded: true,
	padded: true
	});
	this.panelMiddle = new OO.ui.PanelLayout({
	expanded: true,
	padded: true
	});
	this.panelBottom = new OO.ui.PanelLayout({
	expanded: true,
	padded: true
	});
	this.panelTop.$element.append(this.indexLayout.$element);
	this.panelMiddle.$element.empty().append($('<p>Middle</p>'));
	this.panelBottom.$element.empty().append($('<p>Bottom</p>'));

	this.stackLayout = new OO.ui.StackLayout({
	items: [
	this.panelTop,
	this.panelMiddle,
	this.panelBottom
	],
	continuous: true,
	scrollable: false
	});
	this.$body.append(this.stackLayout.$element);
	};
	if (!windowManager) {
	windowManager = new OO.ui.WindowManager();
	$('body').append(windowManager.$element);
	}
	SD = new SimpleDialog({
	size: 'large'
	});
	SD.on('opened', function(){
	console.log('Something');
	});
	windowManager.addWindows([SD]);
	windowManager.openWindow(SD);
	}
	}
	if (mw.config.get('wgPageName') != 'User:Huji/OOUI.js'){
	$(SDOptions.install);
	}
	})(jQuery, mediaWiki);

Event Timeline

Huji created this paste.Apr 5 2019, 1:46 AM

Huji mentioned this in T220165: When an IndexLayout is nested inside a continuous StackLayout, other panels overlap its content.Apr 5 2019, 1:49 AM

IndexLayout nested in a continuous StackLayoutActivePublicActions

Event Timeline

IndexLayout nested in a continuous StackLayout
ActivePublic
Actions