Merge "Added layouts and fixed up dialog styling issues"

VisualEditor.php

@@ -328,9 +328,6 @@ $wgResourceModules += array(
 			've/ui/ve.ui.Toolbar.js',
 			've/ui/ve.ui.ToolFactory.js',
 
-			've/ui/layouts/ve.ui.GridLayout.js',
-			've/ui/layouts/ve.ui.PanelLayout.js',
-
 			've/ui/widgets/ve.ui.LabeledWidget.js',
 			've/ui/widgets/ve.ui.FlaggableWidget.js',
 			've/ui/widgets/ve.ui.GroupWidget.js',
@@ -350,6 +347,11 @@ $wgResourceModules += array(
 			've/ui/widgets/ve.ui.LinkTargetInputWidget.js',
 			've/ui/widgets/ve.ui.MWLinkTargetInputWidget.js',
 
+			've/ui/layouts/ve.ui.GridLayout.js',
+			've/ui/layouts/ve.ui.PanelLayout.js',
+			've/ui/layouts/panels/ve.ui.TitledPanelLayout.js',
+			've/ui/layouts/panels/ve.ui.EditorPanelLayout.js',
+
 			've/ui/dialogs/ve.ui.ContentDialog.js',
 			've/ui/dialogs/ve.ui.MetaDialog.js',
 

demos/ve/index.php

@@ -209,8 +209,6 @@ $html = file_get_contents( $page );
 		<script src="../../modules/ve/ui/ve.ui.Tool.js"></script>
 		<script src="../../modules/ve/ui/ve.ui.Toolbar.js"></script>
 		<script src="../../modules/ve/ui/ve.ui.ToolFactory.js"></script>
-		<script src="../../modules/ve/ui/layouts/ve.ui.GridLayout.js"></script>
-		<script src="../../modules/ve/ui/layouts/ve.ui.PanelLayout.js"></script>
 		<script src="../../modules/ve/ui/widgets/ve.ui.LabeledWidget.js"></script>
 		<script src="../../modules/ve/ui/widgets/ve.ui.FlaggableWidget.js"></script>
 		<script src="../../modules/ve/ui/widgets/ve.ui.GroupWidget.js"></script>
@@ -229,6 +227,10 @@ $html = file_get_contents( $page );
 		<script src="../../modules/ve/ui/widgets/ve.ui.TextInputMenuWidget.js"></script>
 		<script src="../../modules/ve/ui/widgets/ve.ui.LinkTargetInputWidget.js"></script>
 		<script src="../../modules/ve/ui/widgets/ve.ui.MWLinkTargetInputWidget.js"></script>
+		<script src="../../modules/ve/ui/layouts/ve.ui.GridLayout.js"></script>
+		<script src="../../modules/ve/ui/layouts/ve.ui.PanelLayout.js"></script>
+		<script src="../../modules/ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js"></script>
+		<script src="../../modules/ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js"></script>
 		<script src="../../modules/ve/ui/dialogs/ve.ui.ContentDialog.js"></script>
 		<script src="../../modules/ve/ui/dialogs/ve.ui.MetaDialog.js"></script>
 		<script src="../../modules/ve/ui/tools/ve.ui.ButtonTool.js"></script>
@@ -261,7 +263,7 @@ $html = file_get_contents( $page );
 					ve.createDocumentFromHTML( <?php echo json_encode( $html ) ?> )
 				);
 				$( '.ve-ce-documentNode' ).focus();
-				//ve.instances[0].dialogs.open( 'meta' );
+				ve.instances[0].dialogs.open( 'meta' );
 			} );
 		</script>
 

modules/ve/test/index.php

@@ -154,8 +154,6 @@
 		<script src="../../ve/ui/ve.ui.Tool.js"></script>
 		<script src="../../ve/ui/ve.ui.Toolbar.js"></script>
 		<script src="../../ve/ui/ve.ui.ToolFactory.js"></script>
-		<script src="../../ve/ui/layouts/ve.ui.GridLayout.js"></script>
-		<script src="../../ve/ui/layouts/ve.ui.PanelLayout.js"></script>
 		<script src="../../ve/ui/widgets/ve.ui.LabeledWidget.js"></script>
 		<script src="../../ve/ui/widgets/ve.ui.FlaggableWidget.js"></script>
 		<script src="../../ve/ui/widgets/ve.ui.GroupWidget.js"></script>
@@ -174,6 +172,10 @@
 		<script src="../../ve/ui/widgets/ve.ui.TextInputMenuWidget.js"></script>
 		<script src="../../ve/ui/widgets/ve.ui.LinkTargetInputWidget.js"></script>
 		<script src="../../ve/ui/widgets/ve.ui.MWLinkTargetInputWidget.js"></script>
+		<script src="../../ve/ui/layouts/ve.ui.GridLayout.js"></script>
+		<script src="../../ve/ui/layouts/ve.ui.PanelLayout.js"></script>
+		<script src="../../ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js"></script>
+		<script src="../../ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js"></script>
 		<script src="../../ve/ui/dialogs/ve.ui.ContentDialog.js"></script>
 		<script src="../../ve/ui/dialogs/ve.ui.MetaDialog.js"></script>
 		<script src="../../ve/ui/tools/ve.ui.ButtonTool.js"></script>

modules/ve/ui/dialogs/ve.ui.MetaDialog.js

@@ -35,6 +35,8 @@ ve.inheritClass( ve.ui.MetaDialog, ve.ui.Dialog );
  */
 ve.ui.MetaDialog.static.titleMessage = 'visualeditor-dialog-meta-title';
 
+ve.ui.MetaDialog.static.icon = 'settings';
+
 /* Methods */
 
 /**
@@ -48,7 +50,9 @@ ve.ui.MetaDialog.prototype.initialize = function () {
 
 	// Properties
 	this.outlinePanel = new ve.ui.PanelLayout( { '$$': this.$$ } );
-	this.editorPanel = 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] }

modules/ve/ui/layouts/panels/ve.ui.EditorPanelLayout.js

@@ -0,0 +1,38 @@
+/*!
+ * VisualEditor UserInterface EditorPanelLayout class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Editor panel layout.
+ *
+ * @class
+ * @extends ve.ui.PanelLayout
+ * @mixins ve.ui.LabeledWidget
+ *
+ * @constructor
+ * @param {Object} [config] Config options
+ * @cfg {string} [icon=''] Symbolic icon name
+ */
+ve.ui.EditorPanelLayout = function VeUiEditorPanelLayout( config ) {
+	// Config initialization
+	config = ve.extendObject( config, { 'scroll': true } );
+
+	// Parent constructor
+	ve.ui.PanelLayout.call( this, config );
+
+	// Mixin constructors
+	ve.ui.TitledPanelLayout.call( this, this.$$( '<div>' ), config );
+
+	// Initialization
+	this.$title.addClass( 've-ui-icon-' + config.icon + '-big' );
+	this.$.append( this.$title ).addClass( 've-ui-editorPanelLayout' );
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.EditorPanelLayout, ve.ui.PanelLayout );
+
+ve.mixinClass( ve.ui.EditorPanelLayout, ve.ui.TitledPanelLayout );

modules/ve/ui/layouts/panels/ve.ui.TitledPanelLayout.js

@@ -0,0 +1,49 @@
+/*!
+ * VisualEditor UserInterface TitledPanelLayout class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Creates an ve.ui.TitledPanelLayout object.
+ *
+ * @class
+ * @abstract
+ *
+ * @constructor
+ * @param {jQuery} $title Label element
+ * @param {Object} [config] Config options
+ * @cfg {jQuery|string} [title=''] Title text
+ */
+ve.ui.TitledPanelLayout = function VeUiTitledPanelLayout( $title, config ) {
+	// Config intialization
+	config = config || {};
+
+	// Properties
+	this.$title = $title;
+
+	// Initialization
+	this.$title.addClass( 've-ui-titledPanelLayout-title' );
+	this.setTitle( config.title );
+};
+
+/* Methods */
+
+/**
+ * Set the title.
+ *
+ * @method
+ * @param {jQuery|string} [value] jQuery HTML node selection or string text value to use for label
+ * @chainable
+ */
+ve.ui.TitledPanelLayout.prototype.setTitle = function ( value ) {
+	if ( typeof value === 'string' && value.length && /[^\s]*/.test( value ) ) {
+		this.$title.text( value );
+	} else if ( value instanceof jQuery ) {
+		this.$title.empty().append( value );
+	} else {
+		this.$title.html( ' ' );
+	}
+	return this;
+};

modules/ve/ui/styles/ve.ui.Dialog.css

@@ -11,9 +11,6 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
-	margin: auto;
-	min-height: 3em;
-	max-height: 600px;
 	padding: 1em;
 	line-height: 1em;
 	background-color: #fff;
@@ -22,9 +19,15 @@
 }
 
 .ve-ui-dialog .ve-ui-window-frame {
-	width: 800px;
+	position: fixed;
-	height: 100%;
+	top: 1em;
+	right: 0;
+	bottom: 1em;
+	left: 0;
 	margin: auto;
+	width: 800px;
+	min-height: 3em;
+	max-height: 600px;
 	background-color: #fff;
 	border: solid 1px #ccc;
 	border-radius: 0.5em;
@@ -70,4 +73,4 @@
 
 .ve-ui-metaDialog-outlinePanel {
 	border-right: solid 1px #ddd;
-}
+}

modules/ve/ui/styles/ve.ui.Icons-raster.css

@@ -25,6 +25,11 @@
 	background-image: url(images/icons/categories.png);
 }
 
+.ve-ui-icon-settings {
+	/* @embed */
+	background-image: url(images/icons/settings.png);
+}
+
 .ve-ui-icon-remove {
 	/* @embed */
 	background-image: url(images/icons/remove.png);

modules/ve/ui/styles/ve.ui.Icons-vector.css

@@ -25,6 +25,11 @@
 	background-image: url(images/icons/categories.svg);
 }
 
+.ve-ui-icon-settings {
+	/* @embed */
+	background-image: url(images/icons/settings.svg);
+}
+
 .ve-ui-icon-remove {
 	/* @embed */
 	background-image: url(images/icons/remove.svg);

modules/ve/ui/styles/ve.ui.Inspector.css

@@ -18,6 +18,10 @@
 	height: 3em;
 }
 
+.ve-ui-window-head {
+	height: 2em;
+}
+
 .ve-ui-window-icon {
 	padding-left: 0.5em;
 	margin-left: 0.25em;

modules/ve/ui/styles/ve.ui.Layout.css

@@ -20,3 +20,20 @@
 .ve-ui-panelLayout {
 	position: absolute;
 }
+
+/* ve.ui.EditorPanelLayout */
+
+.ve-ui-editorPanelLayout {
+	padding: 1.5em;
+	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	box-sizing:border-box;
+}
+
+.ve-ui-editorPanelLayout .ve-ui-titledPanelLayout-title {
+	font-size: 1.5em;
+	padding-left: 1.75em;
+	margin-bottom: 1em;
+	background-position: left center;
+	background-repeat: no-repeat;
+}

modules/ve/ui/styles/ve.ui.Window.css

@@ -10,7 +10,6 @@
 }
 
 .ve-ui-window-head {
-	height: 2em;
 	padding: 0.5em;
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;

modules/ve/ui/ve.ui.Frame.js

@@ -49,7 +49,8 @@ ve.inheritClass( ve.ui.Frame, ve.EventEmitter );
  * @emits initialize
  */
 ve.ui.Frame.prototype.onLoad = function () {
-	var i, len, doc, $head,
+	var i, len, doc,
+		css = [],
 		promises = [],
 		stylesheets = this.config.stylesheets,
 		stylesheetPath = ve.init.platform.getModulesUrl() + '/ve/ui/styles/';
@@ -66,16 +67,19 @@ ve.ui.Frame.prototype.onLoad = function () {
 	// Properties
 	this.$$ = ve.ui.get$$( doc, this );
 	this.$content = this.$$( '.ve-ui-frame-content' );
+
 	// Add stylesheets
-	$head = this.$$( 'head' );
+	function setter( index ) {
-	function embedCss( css ) {
+		return function ( data ) {
-		$head.append( '<style>' + css + '</style>' );
+			css[index] = data;
+		};
 	}
 	for ( i = 0, len = stylesheets.length; i < len; i++ ) {
-		promises.push( $.get( stylesheetPath + stylesheets[i], embedCss ) );
+		promises.push( $.get( stylesheetPath + stylesheets[i], setter( i ) ) );
 	}
 	$.when.apply( $, promises )
 		.done( ve.bind( function () {
+			this.$$( 'head' ).append( '<style>' + css.join( '\n' ) + '</style>' );
 			this.initialized = true;
 			this.emit( 'initialize' );
 		}, this ) );