Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/209198
Change subject: Redesign CiteFromIdInspector
......................................................................
Redesign CiteFromIdInspector
Bug: T97390
Change-Id: I92d38e00eaa77e1bd78599ce0b9bcd5e0a2ae4e2
---
M i18n/en.json
M i18n/qqq.json
M modules/ve.ui.CiteFromIdInspector.css
M modules/ve.ui.CiteFromIdInspector.js
4 files changed, 189 insertions(+), 86 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Citoid
refs/changes/98/209198/1
diff --git a/i18n/en.json b/i18n/en.json
index 147942c..8e0b4d7 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -11,8 +11,6 @@
"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-citeFromIDTool-title": "Cite",
"citoid-desc": "Provides access points between the citoid service and
MediaWiki",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 5120f4d..ca5ec9b 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..845a64b 100644
--- a/modules/ve.ui.CiteFromIdInspector.css
+++ b/modules/ve.ui.CiteFromIdInspector.css
@@ -1,3 +1,20 @@
+/*!
+ * 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-preview + .ve-ui-citeFromIdInspector-preview {
border-top: 1px solid #cccccc;
}
@@ -42,15 +59,15 @@
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..6c5e10c 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,14 @@
this.lookupPromise = null;
this.service = null;
this.inDialog = '';
+ this.currentModePanel = null;
+ 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 */
@@ -91,31 +90,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,24 +165,7 @@
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( {
@@ -166,58 +179,126 @@
)
)
} );
- this.noticePanel.$element
- .append( noticeLabel.$element );
+ this.autoProcessPanels.notice.$element.append( noticeLabel.$element );
+
+ 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.modeSelect.connect( this, { select: 'onModeSelectSelect' } );
this.lookupInput.connect( this, { change: 'onLookupInputChange' } );
this.lookupButton.connect( this, { click: 'onLookupButtonClick' } );
- this.previewSelectWidget.connect( this, {
- choose: 'onPreviewSelectWidgetChoose'
- } );
+ 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 );
+};
+
+ve.ui.CiteFromIdInspector.prototype.onModeSelectSelect = function ( item ) {
+ this.setModePanel( item.getData() );
};
/**
- * Switch between panels in the inspector
- * @param {string} panel Panel name
+ * Switch to a specific mode panel
+ *
+ * @param {string} panelName Panel name
*/
-ve.ui.CiteFromIdInspector.prototype.switchPanels = function ( panelName ) {
- var panel;
-
+ve.ui.CiteFromIdInspector.prototype.setModePanel = function ( panelName ) {
+ if ( this.currentModePanel === panelName ) {
+ return;
+ }
+ this.currentModePanel = panelName;
+ this.modeStack.setItem( this.modePanels[panelName] );
switch ( panelName ) {
- case 'lookup':
- panel = this.lookupPanel;
+ case 'auto':
+ this.lookupInput.focus();
break;
- case 'result':
- panel = this.resultPanel;
- break;
- case 'notice':
- panel = this.noticePanel;
+ case 'reuse':
+ this.search.buildIndex();
+ this.search.getQuery().focus();
break;
}
+ this.updateSize();
+};
+
+/**
+ * Switch to a specific panel in the auto process
+ *
+ * @param {string} panelName Panel name
+ */
+ve.ui.CiteFromIdInspector.prototype.setAutoProcessPanel = function ( panelName
) {
+ if ( this.currentAutoProcessPanel === panelName ) {
+ return;
+ }
+ this.currentAutoProcessPanel = panelName;
+
+ this.autoProcessStack.setItem( this.autoProcessPanels[panelName] );
+ this.setModePanel( 'auto' );
+ this.updateSize();
this.actions.setMode( panelName );
- this.panels.setItem( panel );
- this.updateSize();
+};
+
+/**
+ * Handle source select choose events
+ *
+ * @param {OO.ui.OptionWidget} item Chosen item
+ */
+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();
+
+ // Close this dialog then open the new dialog
+ this.close().then( function () {
+ manager.getSurface().execute( 'mwcite', 'open',
data.windowName, $.extend( {
+ fragment: fragment
+ }, data.dialogData ) );
+ } );
+};
+
+/**
+ * Handle search select events.
+ *
+ * @param {ve.dm.MWReferenceModel|null} ref Reference model or null if no item
is selected
+ */
+ve.ui.CiteFromIdInspector.prototype.onSearchSelect = function ( ref ) {
+ if ( ref instanceof ve.dm.MWReferenceModel ) {
+ ref.insertReferenceNode( this.getFragment() );
+ this.getFragment().getSurface().applyStaging();
+ }
};
/**
@@ -346,6 +427,9 @@
// 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();
@@ -355,7 +439,8 @@
this.referenceModel.insertReferenceNode(
this.getFragment() );
}
- this.switchPanels( 'lookup' );
+ this.modeSelect.selectItemByData( 'auto' );
+ this.setAutoProcessPanel( 'lookup' );
}, this );
};
@@ -383,6 +468,9 @@
// Empty the input
this.lookupInput.setValue( null );
+ // Clear selection
+ this.sourceSelect.selectItem();
+
// Reset
if ( this.lookupPromise ) {
this.lookupPromise.abort();
@@ -390,6 +478,8 @@
this.lookupPromise = null;
this.clearResults();
this.referenceModel = null;
+ this.currentModePanel = null;
+ this.currentAutoProcessPanel = null;
}, this );
};
@@ -417,7 +507,7 @@
if ( action === 'back' ) {
return new OO.ui.Process( function () {
// Clear the results
- this.switchPanels( 'lookup' );
+ this.setAutoProcessPanel( 'lookup' );
}, this );
}
// Fallback to parent handler
@@ -458,7 +548,7 @@
// Build results
return inspector.buildTemplateResults(
searchResults )
.then( function () {
- inspector.switchPanels(
'result' );
+ inspector.setAutoProcessPanel(
'result' );
} );
},
// Fail
@@ -467,7 +557,7 @@
return $.Deferred().reject();
}
// Enable the input and lookup button
- inspector.switchPanels( 'notice' );
+ inspector.setAutoProcessPanel( '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: newchange
Gerrit-Change-Id: I92d38e00eaa77e1bd78599ce0b9bcd5e0a2ae4e2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Citoid
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
