jenkins-bot has submitted this change and it was merged.
Change subject: Redesign CiteFromIdInspector
......................................................................
Redesign CiteFromIdInspector
Bug: T97390
Change-Id: I92d38e00eaa77e1bd78599ce0b9bcd5e0a2ae4e2
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M modules/ve.ui.CiteFromIdInspector.css
M modules/ve.ui.CiteFromIdInspector.js
5 files changed, 195 insertions(+), 149 deletions(-)
Approvals:
Trevor Parscal: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index e7e060c..cd81832 100644
--- a/extension.json
+++ b/extension.json
@@ -44,8 +44,6 @@
"citoid-citeFromIDDialog-search-placeholder",
"citoid-citeFromIDDialog-search-progress",
"citoid-citeFromIDDialog-title",
-
"citoid-citeFromIDDialog-use-general-dialog-button",
-
"citoid-citeFromIDDialog-use-general-dialog-message",
"citoid-citeFromIDDialog-use-general-error-message",
"citoid-citeFromIDTool-title",
"citoid-template-type-map.json",
diff --git a/i18n/en.json b/i18n/en.json
index 2147e9d..e8e9965 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -11,9 +11,7 @@
"citoid-citeFromIDDialog-search-placeholder": "e.g.
http://www.example.com";,
"citoid-citeFromIDDialog-search-progress": "Searching, please wait...",
"citoid-citeFromIDDialog-title": "Add a citation",
- "citoid-citeFromIDDialog-use-general-dialog-button": "full citation
dialog",
- "citoid-citeFromIDDialog-use-general-dialog-message": "Or use the $1 to
fill in the details yourself.",
- "citoid-citeFromIDDialog-use-general-error-message": "We couldn't make
a citation for you. You can make one by using the $1.",
+ "citoid-citeFromIDDialog-use-general-error-message": "We couldn't make
a citation for you. You can create one manually using the 'Manual' tab above.",
"citoid-citeFromIDTool-title": "Cite",
"citoid-desc": "Provides access points between the citoid service and
MediaWiki",
"citoid-typeMap-config-error": "Mediawiki:citoid-template-type-map.json
is improperly configured.",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index a76eacf..ef0082b 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -16,8 +16,6 @@
"citoid-citeFromIDDialog-search-placeholder": "Placeholder for the
URL/DOI search field.",
"citoid-citeFromIDDialog-search-progress": "Message for when the search
is in progress",
"citoid-citeFromIDDialog-title": "The title displayed on the dialog",
- "citoid-citeFromIDDialog-use-general-dialog-button": "Label for the
user to click to use the full citation tool.",
- "citoid-citeFromIDDialog-use-general-dialog-message": "Label for the
user to use the full citation tool.\n* $1 – the link to open the citation
dialog; link label:
{{msg-mw|citoid-citeFromIDDialog-use-general-dialog-button}}",
"citoid-citeFromIDDialog-use-general-error-message": "Label notifying
the user there was a problem creating their reference, and offering to use the
full citation tool.\n* $1 – link to open the citation dialog; link label:
{{msg-mw|citoid-citeFromIDDialog-use-general-dialog-button}}",
"citoid-citeFromIDTool-title": "Label for the button to add a citation
in the toolbar\n{{Identical|Cite}}",
"citoid-desc":
"{{desc|name=Citoid|url=https://www.mediawiki.org/wiki/Citoid}}";,
diff --git a/modules/ve.ui.CiteFromIdInspector.css
b/modules/ve.ui.CiteFromIdInspector.css
index acaef50..4f893d3 100644
--- a/modules/ve.ui.CiteFromIdInspector.css
+++ b/modules/ve.ui.CiteFromIdInspector.css
@@ -1,10 +1,31 @@
+/*!
+ * VisualEditor UserInterface CiteFromId styles.
+ */
+
+.ve-ui-citeFromIdInspector-form {
+ margin: 0;
+}
+
+.citoid-citeFromIDDialog-panel-auto,
+.citoid-citeFromIDDialog-panel-manual {
+ margin: 0.75em;
+}
+
+.ve-ui-citeFromIdInspector-search {
+ min-height: 20em;
+}
+
+.ve-ui-citeFromIdInspector-search .ve-ui-mwReferenceResultWidget {
+ padding: 0.5em;
+}
+
.ve-ui-citeFromIdInspector-preview + .ve-ui-citeFromIdInspector-preview {
border-top: 1px solid #cccccc;
}
.ve-ui-citeFromIdInspector-preview {
max-height: 15em;
- margin-top: 0.5em;
+ margin-top: 1em;
padding: 0.5em;
overflow-y: auto;
}
@@ -14,13 +35,8 @@
}
.ve-ui-citeFromIdInspector-dialog-error,
-.ve-ui-citeFromIdReferenceWidget-wrapper {
- margin-top: 0.6em;
- line-height: 1.3em;
-}
-
-.ve-ui-citeFromIdReferenceWidget-wrapper a:hover {
- text-decoration: none;
+.ve-ui-citeFromIdReferenceWidget {
+ line-height: 1.5em;
}
.ve-ui-citeFromIdReferenceWidget .oo-ui-labelElement-label {
@@ -38,19 +54,23 @@
vertical-align: middle;
}
+.ve-ui-citeFromIdReferenceWidget .ve-ui-previewWidget {
+ margin-top: 0.5em;
+}
+
.ve-ui-citeFromIdReferenceWidget-insert-button {
float: right;
}
-.ve-ui-citeFromIdInspector-clickable a {
- font-weight: bold;
-}
-
-.ve-ui-citeFromIdInspector-dialog-link {
- display: inline-block;
- margin: 1.5em 0 1em 0;
-}
-
.ve-ui-citeFromIdInspector-dialog-error {
display: inline-block;
}
+
+.ve-ui-citeFromIdInspector-sourceSelect .oo-ui-optionWidget {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ display: inline-block;
+ width: 50%;
+ margin: 0.5em 0;
+}
diff --git a/modules/ve.ui.CiteFromIdInspector.js
b/modules/ve.ui.CiteFromIdInspector.js
index 481033a..9dbe369 100644
--- a/modules/ve.ui.CiteFromIdInspector.js
+++ b/modules/ve.ui.CiteFromIdInspector.js
@@ -6,12 +6,9 @@
* @constructor
* @param {Object} [config] Configuration options
*/
-
ve.ui.CiteFromIdInspector = function VeUiCiteFromIdInspector( config ) {
// Parent constructor
ve.ui.CiteFromIdInspector.super.call( this, config );
-
- config = config || {};
this.referenceModel = null;
this.doneStaging = false;
@@ -21,12 +18,13 @@
this.lookupPromise = null;
this.service = null;
this.inDialog = '';
+ this.currentAutoProcessPanel = null;
- this.$element
- .addClass( 've-ui-citeFromIdInspector' );
+ this.$element.addClass( 've-ui-citeFromIdInspector' );
};
/* Inheritance */
+
OO.inheritClass( ve.ui.CiteFromIdInspector, ve.ui.FragmentInspector );
/* Static properties */
@@ -47,13 +45,13 @@
{
label: OO.ui.deferMsg( 'visualeditor-dialog-action-cancel' ),
flags: 'safe',
- modes: [ 'lookup' ]
+ modes: [ 'auto-lookup', 'manual', 'reuse' ]
},
{
action: 'back',
label: OO.ui.deferMsg( 'citoid-citeFromIDDialog-back' ),
flags: 'safe',
- modes: [ 'result', 'notice' ]
+ modes: [ 'auto-result', 'auto-notice' ]
}
];
@@ -63,7 +61,7 @@
* @inheritDoc
*/
ve.ui.CiteFromIdInspector.prototype.initialize = function () {
- var lookupActionFieldLayout, noticeLabel,
+ var lookupActionFieldLayout, $noticeLabel,
lookupFieldset = new OO.ui.FieldsetLayout(),
limit = ve.init.target.constructor.static.citationToolsLimit;
@@ -91,31 +89,62 @@
}
} );
- this.panels = new OO.ui.StackLayout( {
+ this.modeSelect = new OO.ui.TabSelectWidget( {
+ classes: [ 've-ui-citeFromIdInspector-modeSelect' ],
+ items: [
+ new OO.ui.TabOptionWidget( { data: 'auto', label:
'Automatic' } ),
+ new OO.ui.TabOptionWidget( { data: 'manual', label:
'Manual' } ),
+ new OO.ui.TabOptionWidget( { data: 'reuse', label:
'Re-use' } )
+ ]
+ } );
+
+ // Modes
+ this.modeStack = new OO.ui.StackLayout( {
expanded: false,
scrollable: false
} );
- this.lookupPanel = new OO.ui.PanelLayout( {
- $: this.$,
- classes: [ 'citoid-citeFromIDDialog-panel-lookup' ],
+ this.modePanels = {
+ auto: new OO.ui.PanelLayout( {
+ classes: [ 'citoid-citeFromIDDialog-panel-auto' ],
+ expanded: false,
+ scrollable: false
+ } ),
+ manual: new OO.ui.PanelLayout( {
+ classes: [ 'citoid-citeFromIDDialog-panel-manual' ],
+ expanded: false,
+ scrollable: false
+ } ),
+ reuse: new OO.ui.PanelLayout( {
+ classes: [ 'citoid-citeFromIDDialog-panel-reuse' ],
+ expanded: false,
+ scrollable: false
+ } )
+ };
+
+ // Auto mode
+ this.autoProcessStack = new OO.ui.StackLayout( {
expanded: false,
scrollable: false
} );
- this.resultPanel = new OO.ui.PanelLayout( {
- $: this.$,
- classes: [ 'citoid-citeFromIDDialog-panel-result' ],
- expanded: false,
- scrollable: false
- } );
-
- this.noticePanel = new OO.ui.PanelLayout( {
- $: this.$,
- classes: [ 'citoid-citeFromIDDialog-panel-notice' ],
- expanded: false,
- scrollable: false
- } );
+ this.autoProcessPanels = {
+ lookup: new OO.ui.PanelLayout( {
+ classes: [ 'citoid-citeFromIDDialog-panel-lookup' ],
+ expanded: false,
+ scrollable: false
+ } ),
+ result: new OO.ui.PanelLayout( {
+ classes: [ 'citoid-citeFromIDDialog-panel-result' ],
+ expanded: false,
+ scrollable: false
+ } ),
+ notice: new OO.ui.PanelLayout( {
+ classes: [ 'citoid-citeFromIDDialog-panel-notice' ],
+ expanded: false,
+ scrollable: false
+ } )
+ };
// Lookup fieldset
this.lookupInput = new OO.ui.TextInputWidget( {
@@ -135,134 +164,129 @@
lookupActionFieldLayout.$element
);
- // Citation dialog label
- this.citeDialogLabel = new OO.ui.LabelWidget( {
- // Double-parse
- label: $( '<span>' )
- .addClass( 've-ui-citeFromIdInspector-clickable
ve-ui-citeFromIdInspector-dialog-link' )
- .append(
- this.doubleParseMessage(
-
'citoid-citeFromIDDialog-use-general-dialog-message',
-
'citoid-citeFromIDDialog-use-general-dialog-button'
- )
- )
- } );
-
- this.lookupPanel.$element
- .append(
- lookupFieldset.$element,
- this.citeDialogLabel.$element
- );
+ this.autoProcessPanels.lookup.$element.append( lookupFieldset.$element
);
// Error label
- noticeLabel = new OO.ui.LabelWidget( {
- // Double-parse
- label: $( '<span>' )
- .addClass( 've-ui-citeFromIdInspector-clickable
ve-ui-citeFromIdInspector-dialog-error' )
- .append(
- this.doubleParseMessage(
-
'citoid-citeFromIDDialog-use-general-error-message',
-
'citoid-citeFromIDDialog-use-general-dialog-button'
- )
- )
- } );
- this.noticePanel.$element
- .append( noticeLabel.$element );
+ $noticeLabel = $( '<span>' ).addClass(
've-ui-citeFromIdInspector-dialog-error' ).text(
+ ve.msg( 'citoid-citeFromIDDialog-use-general-error-message' )
+ );
+ this.autoProcessPanels.notice.$element.append( $noticeLabel );
+
+ this.modePanels.auto.$element.append( this.autoProcessStack.$element );
// Preview fieldset
this.previewSelectWidget = new ve.ui.CiteFromIdGroupWidget();
- this.resultPanel.$element.append( this.previewSelectWidget.$element );
+ this.autoProcessPanels.result.$element.append(
this.previewSelectWidget.$element );
+
+ // Manual mode
+ this.sourceSelect = new ve.ui.MWReferenceSourceSelectWidget( {
+ classes: [ 've-ui-citeFromIdInspector-sourceSelect' ]
+ } );
+ this.modePanels.manual.$element.append( this.sourceSelect.$element );
+
+ // Re-use mode
+ this.search = new ve.ui.MWReferenceSearchWidget( {
+ classes: [ 've-ui-citeFromIdInspector-search' ]
+ } );
+ this.modePanels.reuse.$element.append( this.search.$element );
// Events
- this.lookupInput.connect( this, { change: 'onLookupInputChange' } );
- this.lookupButton.connect( this, { click: 'onLookupButtonClick' } );
- this.previewSelectWidget.connect( this, {
- choose: 'onPreviewSelectWidgetChoose'
+ this.modeSelect.connect( this, { choose: 'onModeSelectChoose' } );
+ this.lookupInput.connect( this, {
+ change: 'onLookupInputChange',
+ enter: 'onLookupButtonClick'
} );
+ this.lookupButton.connect( this, { click: 'onLookupButtonClick' } );
+ this.previewSelectWidget.connect( this, { choose:
'onPreviewSelectWidgetChoose' } );
+ this.sourceSelect.connect( this, { choose: 'onSourceSelectChoose' } );
+ this.search.connect( this, { select: 'onSearchSelect' } );
- this.panels.addItems( [
- this.lookupPanel,
- this.resultPanel,
- this.noticePanel
+ this.autoProcessStack.addItems( [
+ this.autoProcessPanels.lookup,
+ this.autoProcessPanels.result,
+ this.autoProcessPanels.notice
] );
- this.form.$element.append( this.panels.$element );
+ this.modeStack.addItems( [
+ this.modePanels.auto,
+ this.modePanels.manual,
+ this.modePanels.reuse
+ ] );
// Attach
this.form.$element
- .append( this.panels.$element )
- // Connect the dialog link to the event
- .find( '.ve-ui-citeFromIdInspector-clickable a' )
- .click( this.onOpenFullDialogLinkClick.bind( this ) );
+ .addClass( 've-ui-citeFromIdInspector-form' )
+ .append( this.modeSelect.$element, this.modeStack.$element );
};
/**
- * Switch between panels in the inspector
- * @param {string} panel Panel name
+ * Handle choose events from mode select widget
+ *
+ * @param {OO.ui.OptionWidget} item Chosen option
*/
-ve.ui.CiteFromIdInspector.prototype.switchPanels = function ( panelName ) {
- var panel;
+ve.ui.CiteFromIdInspector.prototype.onModeSelectChoose = function ( item ) {
+ this.setModePanel( item.getData(), null, true );
+};
+/**
+ * Switch to a specific mode panel
+ *
+ * @param {string} panelName Panel name
+ * @param {boolean} [fromSelect] Mode was changed by the select widget
+ * @param {boolean} [fromSelect] Mode was changed by the select widget
+ */
+ve.ui.CiteFromIdInspector.prototype.setModePanel = function ( panelName,
processPanelName, fromSelect ) {
+ this.modeStack.setItem( this.modePanels[panelName] );
switch ( panelName ) {
- case 'lookup':
- panel = this.lookupPanel;
+ case 'auto':
+ processPanelName = processPanelName ||
this.currentAutoProcessPanel || 'lookup';
+ this.autoProcessStack.setItem(
this.autoProcessPanels[processPanelName] );
+ if ( processPanelName === 'lookup' ) {
+ this.lookupInput.setDisabled( false
).focus().select();
+ }
+ this.currentAutoProcessPanel = processPanelName;
break;
- case 'result':
- panel = this.resultPanel;
- break;
- case 'notice':
- panel = this.noticePanel;
+ case 'reuse':
+ this.search.buildIndex();
+ this.search.getQuery().focus();
break;
}
-
- this.actions.setMode( panelName );
- this.panels.setItem( panel );
+ if ( !fromSelect ) {
+ this.modeSelect.selectItemByData( panelName );
+ }
+ this.actions.setMode( panelName + ( processPanelName ? '-' +
processPanelName : '' ) );
this.updateSize();
};
/**
- * Double-parse a message to be able to display links inside it.
- * @param {string} wrapperMessage Wrapping message key
- * @param {string} linkMessage Link message key
- * @return {string} The final message, parsed.
+ * Handle source select choose events
+ *
+ * @param {OO.ui.OptionWidget} item Chosen item
*/
-ve.ui.CiteFromIdInspector.prototype.doubleParseMessage = function (
wrapperMessage, linkMessage ) {
- var plainMsg, parsedMsg;
+ve.ui.CiteFromIdInspector.prototype.onSourceSelectChoose = function ( item ) {
+ var data = item.getData(),
+ // Closing the dialog may unset some properties, so cache the
ones we want
+ fragment = this.getFragment(),
+ manager = this.getManager();
- // Once more, with feeling: there's a bug in mw.messages that prevents
us from
- // using a link in the message unless we double-parse it.
- // See https://phabricator.wikimedia.org/T49395#490610
- mw.messages.set( {
- 'citoid-citeFromIDDialog-temporary-message': '<a href="#">' +
mw.message( linkMessage ) + '</a>'
- } );
- plainMsg = mw.message( 'citoid-citeFromIDDialog-temporary-message'
).plain();
- mw.messages.set( { 'citoid-citeFromIDDialog-temporary-message-parsed':
plainMsg } );
- parsedMsg = mw.message(
'citoid-citeFromIDDialog-temporary-message-parsed' );
- return mw.message( wrapperMessage, parsedMsg ).parse();
-};
-
-/**
- * Respond to full dialog link click
- */
-ve.ui.CiteFromIdInspector.prototype.onOpenFullDialogLinkClick = function () {
- var inspector = this,
- fragment = this.getFragment();
-
- // Preserve the staging
- this.deliveredToAnotherDialog = true;
+ // Close this dialog then open the new dialog
this.close().then( function () {
- inspector.getManager().getSurface().execute( 'window', 'open',
'generalreference', {
+ manager.getSurface().execute( 'mwcite', 'open',
data.windowName, $.extend( {
fragment: fragment
- } );
+ }, data.dialogData ) );
} );
};
/**
- * Respond to form submit.
+ * Handle search select events.
+ *
+ * @param {ve.dm.MWReferenceModel|null} ref Reference model or null if no item
is selected
*/
-ve.ui.CiteFromIdInspector.prototype.onFormSubmit = function () {
- this.executeAction( 'lookup' );
- return false;
+ve.ui.CiteFromIdInspector.prototype.onSearchSelect = function ( ref ) {
+ if ( ref instanceof ve.dm.MWReferenceModel ) {
+ ref.insertReferenceNode( this.getFragment() );
+ this.getFragment().getSurface().applyStaging();
+ }
};
/**
@@ -308,6 +332,7 @@
/**
* Respond to change value of the search input.
+ *
* @param {string} value Current value
*/
ve.ui.CiteFromIdInspector.prototype.onLookupInputChange = function ( value ) {
@@ -346,16 +371,19 @@
// Create model
this.referenceModel = new ve.dm.MWReferenceModel();
+ this.search.setInternalList(
this.getFragment().getDocument().getInternalList() );
+ this.modeSelect.getItemFromData( 'reuse' ).setDisabled(
this.search.isIndexEmpty() );
+
if ( this.inDialog !== 'reference' ) {
// Stage an empty reference
this.getFragment().getSurface().pushStaging();
// Insert an empty reference
this.referenceModel.insertInternalItem(
this.getFragment().getSurface() );
- this.referenceModel.insertReferenceNode(
this.getFragment() );
+ this.referenceModel.insertReferenceNode(
this.getFragment(), true );
}
- this.switchPanels( 'lookup' );
+ this.modeSelect.selectItemByData( 'auto' );
}, this );
};
@@ -363,10 +391,10 @@
* @inheritdoc
*/
ve.ui.CiteFromIdInspector.prototype.getReadyProcess = function ( data ) {
- return ve.ui.LinkInspector.super.prototype.getReadyProcess.call( this,
data )
+ return ve.ui.CiteFromIdInspector.super.prototype.getReadyProcess.call(
this, data )
.next( function () {
- // Focus on the input
- this.lookupInput.setDisabled( false ).focus().select();
+ // Set the panel after ready as it focuses the input too
+ this.setModePanel( 'auto', 'lookup' );
}, this );
};
@@ -383,6 +411,9 @@
// Empty the input
this.lookupInput.setValue( null );
+ // Clear selection
+ this.sourceSelect.selectItem();
+
// Reset
if ( this.lookupPromise ) {
this.lookupPromise.abort();
@@ -390,6 +421,7 @@
this.lookupPromise = null;
this.clearResults();
this.referenceModel = null;
+ this.currentAutoProcessPanel = null;
}, this );
};
@@ -417,7 +449,7 @@
if ( action === 'back' ) {
return new OO.ui.Process( function () {
// Clear the results
- this.switchPanels( 'lookup' );
+ this.setModePanel( 'auto', 'lookup' );
}, this );
}
// Fallback to parent handler
@@ -458,7 +490,7 @@
// Build results
return inspector.buildTemplateResults(
searchResults )
.then( function () {
- inspector.switchPanels(
'result' );
+ inspector.setModePanel( 'auto',
'result' );
} );
},
// Fail
@@ -467,7 +499,7 @@
return $.Deferred().reject();
}
// Enable the input and lookup button
- inspector.switchPanels( 'notice' );
+ inspector.setModePanel( 'auto', 'notice' );
return $.Deferred().resolve();
} )
.always( function () {
--
To view, visit https://gerrit.wikimedia.org/r/209198
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I92d38e00eaa77e1bd78599ce0b9bcd5e0a2ae4e2
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/extensions/Citoid
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Alex Monk <kren...@gmail.com>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Mvolz <mv...@wikimedia.org>
Gerrit-Reviewer: Siebrand <siebr...@kitano.nl>
Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
