jenkins-bot has submitted this change and it was merged.
Change subject: More work on dialog classes and their mw specific handling.
......................................................................
More work on dialog classes and their mw specific handling.
Changes include:
VisualEditor.i18n.php, VisualEditor.php
* i18n labels for dialogs
ve.init.mw.ViewPageTarget.js
* Initial go at onOpenDialog and onCloseDialog methods
ve.init.Target.js
* Change calls to dialog hide & show to close & open
ve.ui.MetaDialog.js, ve.ui.ContentDialog.js
* Pass surface when constructing
* Add static title message property
ve.ui.Surface.css
* Set high z-index for toolbar for shadow to overlap dialog.
ve.ui.Dialog.js
* Extends EventEmitter class.
* Changed hide/show method names to open/close.
* Create base ui elements.
ve.Surface.js
* Create instance of meta dialog.
Change-Id: I867ca0546606eeb5e2ab7f612bb5af700ab877ec
---
M VisualEditor.i18n.php
M VisualEditor.php
M modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
M modules/ve/init/ve.init.Target.js
M modules/ve/ui/dialogs/ve.ui.ContentDialog.js
M modules/ve/ui/dialogs/ve.ui.MetaDialog.js
A modules/ve/ui/styles/ve.ui.Dialog.css
M modules/ve/ui/styles/ve.ui.Surface.css
M modules/ve/ui/ve.ui.Dialog.js
M modules/ve/ve.Surface.js
10 files changed, 145 insertions(+), 15 deletions(-)
Approvals:
Trevor Parscal: Looks good to me, approved
jenkins-bot: Verified
diff --git a/VisualEditor.i18n.php b/VisualEditor.i18n.php
index ac7ccaf..708b0b2 100644
--- a/VisualEditor.i18n.php
+++ b/VisualEditor.i18n.php
@@ -17,6 +17,9 @@
'visualeditor-ca-editsource' => 'Edit source',
'visualeditor-ca-ve-edit' => 'VisualEditor',
'visualeditor-ca-ve-create' => 'VisualEditor',
+ 'visualeditor-dialog-meta-title' => 'Page Settings',
+ 'visualeditor-dialog-content-title' => 'Generated Content',
+ 'visualeditor-dialog-label-apply' => 'Apply changes',
'visualeditor-toolbar-savedialog' => 'Review and save',
'visualeditor-savedialog-title-review' => 'Review your changes',
'visualeditor-savedialog-title-report' => 'Report a problem',
@@ -110,6 +113,9 @@
'visualeditor-ca-ve-create' => '{{Optional}}
Link text of the dedicated VisualEditor Create tab.
{{Identical|visualeditor}}',
+ 'visualeditor-dialog-meta-title' => 'MetaData dialog title text',
+ 'visualeditor-dialog-content-title' => 'Content dialog title text',
+ 'visualeditor-dialog-label-apply' => 'Label text for button to apply
changes made in dialog',
'visualeditor-toolbar-savedialog' => 'Label text for button to trigger
review and save interface',
'visualeditor-savedialog-title-review' => 'Title for reviewing slide',
'visualeditor-savedialog-title-report' => 'Title for reporting slide',
diff --git a/VisualEditor.php b/VisualEditor.php
index ddcd05a..c9184bc 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -349,6 +349,7 @@
've/ce/styles/ve.ce.Surface.css',
// ui
've/ui/styles/ve.ui.Context.css',
+ 've/ui/styles/ve.ui.Dialog.css',
've/ui/styles/ve.ui.Inspector.css',
've/ui/styles/ve.ui.Surface.css',
've/ui/styles/ve.ui.Toolbar.css',
@@ -408,6 +409,9 @@
'visualeditor-saveerror',
'visualeditor-editconflict',
'visualeditor-aliennode-tooltip',
+ 'visualeditor-dialog-meta-title',
+ 'visualeditor-dialog-content-title',
+ 'visualeditor-dialog-label-apply',
),
),
'ext.visualEditor.icons-raster' => $wgVisualEditorResourceTemplate +
array(
diff --git a/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
index 750bd50..6ec51c6 100644
--- a/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
+++ b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
@@ -1625,6 +1625,8 @@
ve.init.mw.ViewPageTarget.prototype.onAddDialog = function ( name ) {
var dialog = this.dialogs[name];
+ // Init the dialog closed and bypass events.
+ dialog.$.hide();
// Append dialog to target container
this.$.append( dialog.$ );
};
@@ -1635,9 +1637,30 @@
* @method
* @param {string} name Name of dialog
*/
-ve.init.mw.ViewPageTarget.prototype.onOpenDialog = function () {
- // TODO: Replace toolbar contents with dialog title bar
- // TODO: Set the dialog size and add window resize handlers to keep it
there
+ve.init.mw.ViewPageTarget.prototype.onOpenDialog = function ( name ) {
+ var dialog = this.dialogs[name],
+ $toolbar = this.surface.toolbars.top.$;
+
+ // Set dialog size.
+ function setDialogSize () {
+ var height = $( 'body' ).height() - $toolbar.height() -
$toolbar.offset().top;
+ dialog.$.css( { 'width': $toolbar.width(), 'height': height } );
+ }
+ // Hide to toolbar controls
+ $toolbar.find( '.ve-ui-toolbarGroups, .ve-ui-actions' ).hide();
+
+ // Move the title & actions elements from the dialog into the toolbar.
+ $toolbar.prepend( dialog.$title, dialog.$actions );
+
+ // Init dialog
+ $toolbar.append( dialog.$ );
+
+ setDialogSize();
+ // Put the dialog just under the toolbar.
+ dialog.$.css( { 'top': $toolbar.height() } );
+
+ // Events
+ $( window ).on( { 'resize.ve-dialog': setDialogSize } );
};
/**
@@ -1646,9 +1669,18 @@
* @method
* @param {string} name Name of dialog
*/
-ve.init.mw.ViewPageTarget.prototype.onCloseDialog = function () {
- // TODO: Restore toolbar contents
- // TODO: Remove window resize handlers for dialog
+ve.init.mw.ViewPageTarget.prototype.onCloseDialog = function ( name ) {
+ var dialog = this.dialogs[name],
+ $toolbar = this.surface.toolbars.top.$;
+
+ // Move title and action elements back to the top of the dialog.
+ dialog.$.prepend( dialog.$title, dialog.$actions );
+
+ // Show the toolbar elements.
+ $toolbar.find( '.ve-ui-toolbarGroups, .ve-ui-actions' ).show();
+
+ // Events teardown
+ $( window ).off( 'resize.ve-dialog' );
};
/* Initialization */
diff --git a/modules/ve/init/ve.init.Target.js
b/modules/ve/init/ve.init.Target.js
index bb2cb92..2084d2b 100644
--- a/modules/ve/init/ve.init.Target.js
+++ b/modules/ve/init/ve.init.Target.js
@@ -94,7 +94,7 @@
}
this.currentDialogName = name;
- dialog.show();
+ dialog.open();
this.emit( 'openDialog', name );
};
@@ -109,7 +109,7 @@
var name = this.currentDialogName;
this.currentDialogName = null;
- this.dialogs[name].hide();
+ this.dialogs[name].close();
this.emit( 'closeDialog', name );
};
diff --git a/modules/ve/ui/dialogs/ve.ui.ContentDialog.js
b/modules/ve/ui/dialogs/ve.ui.ContentDialog.js
index 9015c18..2ded73d 100644
--- a/modules/ve/ui/dialogs/ve.ui.ContentDialog.js
+++ b/modules/ve/ui/dialogs/ve.ui.ContentDialog.js
@@ -13,15 +13,27 @@
* @extends ve.ui.Dialog
*
* @constructor
+ * @param {ve.ui.Surface} surface
*/
-ve.ui.ContentDialog = function VeUiContentDialog() {
+ve.ui.ContentDialog = function VeUiContentDialog( surface ) {
// Parent constructor
- ve.ui.Dialog.call( this );
+ ve.ui.Dialog.call( this, surface );
};
/* Inheritance */
ve.inheritClass( ve.ui.ContentDialog, ve.ui.Dialog );
+/* Static Properties */
+
+/**
+ * Localized message for dialog title.
+ *
+ * @static
+ * @property
+ * @type {string}
+ */
+ve.ui.ContentDialog.static.dialogTitleMessage =
'visualeditor-dialog-content-title';
+
/* Methods */
diff --git a/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
b/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
index 281942e..8312288 100644
--- a/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
+++ b/modules/ve/ui/dialogs/ve.ui.MetaDialog.js
@@ -13,15 +13,29 @@
* @extends ve.ui.Dialog
*
* @constructor
+ * @param {ve.ui.Surface} surface
*/
-ve.ui.MetaDialog = function VeUiMetaDialog() {
+ve.ui.MetaDialog = function VeUiMetaDialog( surface ) {
// Parent constructor
- ve.ui.Dialog.call( this );
+ ve.ui.Dialog.call( this, surface );
+
+ // TODO: Construct meta dialog inside .ve-ui-dialog-container
};
/* Inheritance */
ve.inheritClass( ve.ui.MetaDialog, ve.ui.Dialog );
-/* Methods */
+/* Static Properties */
+
+/**
+ * Localized message for dialog title.
+ *
+ * @static
+ * @property
+ * @type {string}
+ */
+ve.ui.MetaDialog.static.dialogTitleMessage = 'visualeditor-dialog-meta-title';
+
+/* Methods */
diff --git a/modules/ve/ui/styles/ve.ui.Dialog.css
b/modules/ve/ui/styles/ve.ui.Dialog.css
new file mode 100644
index 0000000..42324e7
--- /dev/null
+++ b/modules/ve/ui/styles/ve.ui.Dialog.css
@@ -0,0 +1,28 @@
+.ve-ui-dialog {
+ position: absolute;
+ background: #FFFFFF;
+ line-height: 1em;
+ z-index: 99;
+}
+
+.ve-ui-dialog-title {
+ line-height: 2.6em;
+ height: 2em;
+ padding: 0 .75em;
+ display: inline-block;
+ border-right: solid 1px #f0f3f5;
+ vertical-align: middle;
+ color: #555;
+}
+
+.ve-ui-dialog-actions {
+ float: right;
+ padding: 0.25em;
+ font-size: 0.8em;
+}
+
+.ve-ui-dialog-actions .ve-ui-buttonWidget {
+ margin-left: 0.25em;
+ margin-right: 0.25em;
+ margin-top: 0.2em;
+}
diff --git a/modules/ve/ui/styles/ve.ui.Surface.css
b/modules/ve/ui/styles/ve.ui.Surface.css
index 697fee1..9ddc6ec 100644
--- a/modules/ve/ui/styles/ve.ui.Surface.css
+++ b/modules/ve/ui/styles/ve.ui.Surface.css
@@ -12,6 +12,7 @@
background-image: url(images/fade-up.png);
background-position: left bottom;
background-repeat: repeat-x;
+ z-index: 100;
}
.ve-ui-toolbarGroups,
diff --git a/modules/ve/ui/ve.ui.Dialog.js b/modules/ve/ui/ve.ui.Dialog.js
index 40bd387..faf881a 100644
--- a/modules/ve/ui/ve.ui.Dialog.js
+++ b/modules/ve/ui/ve.ui.Dialog.js
@@ -15,11 +15,40 @@
* @param {ve.ui.Surface} surface
*/
ve.ui.Dialog = function VeUiDialog( surface ) {
+ // Parent constructor
+ ve.EventEmitter.call( this );
+
+ var dialog = this;
// Properties
this.surface = surface;
this.visible = false;
this.$ = $( '<div class="ve-ui-dialog"></div>' );
+
+ // Initialization
+ this.cancelButton = new ve.ui.ButtonWidget( { 'label': ve.msg( 'cancel'
) } );
+
+ //this.cancelButton.on( 'click', ve.bind(
this.surface.target.closeDialog, this ) );
+ this.cancelButton.on( 'click', function() {
dialog.surface.target.closeDialog(); } );
+
+ this.applyButton = new ve.ui.ButtonWidget( {
+ 'label': ve.msg( 'visualeditor-dialog-label-apply' ),
+ 'flags': ['constructive'],
+ 'disabled': false
+ } );
+
+ // Base elements
+ this.$title = $( '<div class="ve-ui-dialog-title"></div>' ).text(
+ ve.msg( this.constructor.static.dialogTitleMessage )
+ );
+ this.$actions = $( '<div class="ve-ui-dialog-actions"><div>' ).append(
+ this.cancelButton.$, this.applyButton.$
+ );
+ this.$.append( this.$title, this.$actions, $( '<div
class="ve-ui-dialog-container"></div>' ) );
};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.Dialog, ve.EventEmitter );
/* Methods */
@@ -27,12 +56,14 @@
return this.visible;
};
-ve.ui.Dialog.prototype.show = function () {
+ve.ui.Dialog.prototype.open = function () {
+ this.emit( 'open' );
this.$.show();
this.visible = true;
};
-ve.ui.Dialog.prototype.hide = function () {
+ve.ui.Dialog.prototype.close = function () {
+ this.emit( 'close' );
this.$.hide();
this.visible = false;
};
diff --git a/modules/ve/ve.Surface.js b/modules/ve/ve.Surface.js
index 6372194..f6d27c7 100644
--- a/modules/ve/ve.Surface.js
+++ b/modules/ve/ve.Surface.js
@@ -37,6 +37,8 @@
// Initialization
this.target.$.append( this.$.addClass( 've-surface' ) );
+ this.target.addDialog( 'meta', new ve.ui.MetaDialog( this ) );
+
this.view.getDocument().getDocumentNode().setLive( true );
this.setupToolbars();
this.setupCommands();
--
To view, visit https://gerrit.wikimedia.org/r/52538
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I867ca0546606eeb5e2ab7f612bb5af700ab877ec
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Robmoen <[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
