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