mediawiki-extensions-Visual.../modules/ve/ui/dialogs/ve.ui.MetaDialog.js
Trevor Parscal 168fcec387 Added layouts and fixed up dialog styling issues
ve.ui.Dialog.css
* Fix issue where the use of margin auto on the outer dialog wrapper
  would expose parts of the underlying content - this is resolved by
  making the outer wrapper cover the whole screen and making the
  window frame use margin auto

ve.ui.Icons*.css
* Added missing settings icon rule

ve.ui.Layout.css
* Added styles for editor panel

ve.ui.Window.css
* Removed default height, setting it specifically in inspector now

ve.ui.EditorPanelLayout.js
* New layout, adds a title and icon above the content

ve.ui.TitledEditorLayout.js
* Similar to labeled widget, but for panels

ve.ui.MetaDialog.js
* Using settings icon now
* Switched to using a specific layout - still hard-coded for
  categories

ve.ui.Frame.js
* Modified style loader to guarantee order of style rules, no matter
  what order they load in

*.php
* Moved layouts to be included after widgets so they can use widgets
* Added links to new layouts

Change-Id: I7ff5f5f095460fd4f6cf841f4182bfb92bf034da
2013-03-26 20:52:35 +00:00

84 lines
2 KiB
JavaScript

/*!
* VisualEditor user interface MetaDialog class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Document dialog.
*
* @class
* @abstract
* @extends ve.ui.Dialog
*
* @constructor
* @param {ve.Surface} surface
*/
ve.ui.MetaDialog = function VeUiMetaDialog( surface ) {
// Parent constructor
ve.ui.Dialog.call( this, surface );
};
/* Inheritance */
ve.inheritClass( ve.ui.MetaDialog, ve.ui.Dialog );
/* Static Properties */
/**
* Localized message for dialog title.
*
* @static
* @property
* @type {string}
*/
ve.ui.MetaDialog.static.titleMessage = 'visualeditor-dialog-meta-title';
ve.ui.MetaDialog.static.icon = 'settings';
/* Methods */
/**
* Handle frame ready events.
*
* @method
*/
ve.ui.MetaDialog.prototype.initialize = function () {
// Call parent method
ve.ui.Dialog.prototype.initialize.call( this );
// Properties
this.outlinePanel = new ve.ui.PanelLayout( { '$$': this.$$ } );
this.editorPanel = new ve.ui.EditorPanelLayout( {
'$$': this.$$, 'title': 'Categories', 'icon': 'categories'
} );
this.layout = new ve.ui.GridLayout(
[this.outlinePanel, this.editorPanel],
{ '$$': this.$$, 'widths': [1, 2] }
);
// HACK
this.outlineWidget = new ve.ui.OutlineWidget( { '$$': this.$$ } );
this.outlineWidget.addItems( [
new ve.ui.OutlineItemWidget(
'categories', { '$$': this.$$, 'icon': 'categories', 'label': 'Categories' }
),
new ve.ui.OutlineItemWidget(
'languages', { '$$': this.$$, 'icon': 'language', 'label': 'Languages' }
)
] );
this.outlineWidget.selectItem( this.outlineWidget.getClosestSelectableItem( 0 ) );
// Initialization
this.outlinePanel.$.addClass( 've-ui-metaDialog-outlinePanel' );
this.editorPanel.$.addClass( 've-ui-metaDialog-editorPanel' );
this.$body.append( this.layout.$ );
this.outlinePanel.$.append( this.outlineWidget.$ );
this.layout.update();
};
/* Registration */
ve.ui.dialogFactory.register( 'meta', ve.ui.MetaDialog );