From 853e4872b41fe517d9cd1cee5e1a8cce3217e2a7 Mon Sep 17 00:00:00 2001 From: Trevor Parscal Date: Fri, 25 Apr 2014 16:50:21 -0700 Subject: [PATCH] Restyle parameter pages * Move description to a popup behind a little info icon button * Make required indicator generic status indicator (required/deprecated) and move to left of the field * Move param name and actions to above the field * Show deprecated status and description Bonus: * Use auto-focus on CitationDialog (whoops!) * Make pages that aren't meant to scroll not scroll (whoops again!?) Depends on I59211b2 in OOUI Bug: 53612 Change-Id: I3b968ad14aa6c43b6484e2565a9367d2ebc72fc5 --- VisualEditor.php | 5 + .../ve-mw/dm/models/ve.dm.MWParameterModel.js | 15 ++- .../dm/models/ve.dm.MWTemplateSpecModel.js | 6 +- modules/ve-mw/i18n/en.json | 5 + modules/ve-mw/i18n/qqq.json | 5 + .../ui/dialogs/ve.ui.MWTemplateDialog.js | 3 +- .../ui/dialogs/ve.ui.MWTransclusionDialog.js | 19 ++- .../ve-mw/ui/pages/ve.ui.MWParameterPage.js | 102 +++++++++++---- .../pages/ve.ui.MWParameterPlaceholderPage.js | 5 + .../ve-mw/ui/pages/ve.ui.MWTemplatePage.js | 5 + .../pages/ve.ui.MWTemplatePlaceholderPage.js | 5 + .../pages/ve.ui.MWTransclusionContentPage.js | 5 + .../ui/styles/pages/ve.ui.MWParameterPage.css | 121 +++++++++--------- .../ui/styles/pages/ve.ui.MWTemplatePage.css | 4 + .../widgets/ve.ui.MWParameterResultWidget.css | 1 + 15 files changed, 202 insertions(+), 104 deletions(-) diff --git a/VisualEditor.php b/VisualEditor.php index 4a392cd309..3833dc5bd2 100644 --- a/VisualEditor.php +++ b/VisualEditor.php @@ -1041,17 +1041,22 @@ $wgResourceModules += array( 'visualeditor-dialog-transclusion-add-param', 'visualeditor-dialog-transclusion-add-template', 'visualeditor-dialog-transclusion-content', + 'visualeditor-dialog-transclusion-deprecated-parameter', + 'visualeditor-dialog-transclusion-deprecated-parameter-description', 'visualeditor-dialog-transclusion-insert-template', 'visualeditor-dialog-transclusion-insert-transclusion', 'visualeditor-dialog-transclusion-loading', 'visualeditor-dialog-transclusion-multiple-mode', 'visualeditor-dialog-transclusion-no-template-description', 'visualeditor-dialog-transclusion-options', + 'visualeditor-dialog-transclusion-param-info', + 'visualeditor-dialog-transclusion-param-info-missing', 'visualeditor-dialog-transclusion-placeholder', 'visualeditor-dialog-transclusion-remove-content', 'visualeditor-dialog-transclusion-remove-param', 'visualeditor-dialog-transclusion-remove-template', 'visualeditor-dialog-transclusion-required-parameter', + 'visualeditor-dialog-transclusion-required-parameter-description', 'visualeditor-dialog-transclusion-single-mode', 'visualeditor-dialog-transclusion-wikitext-label', 'visualeditor-dialogbutton-template-tooltip', diff --git a/modules/ve-mw/dm/models/ve.dm.MWParameterModel.js b/modules/ve-mw/dm/models/ve.dm.MWParameterModel.js index f3a961489d..270a0ee813 100644 --- a/modules/ve-mw/dm/models/ve.dm.MWParameterModel.js +++ b/modules/ve-mw/dm/models/ve.dm.MWParameterModel.js @@ -44,7 +44,6 @@ OO.mixinClass( ve.dm.MWParameterModel, OO.EventEmitter ); * Check if parameter is required. * * @method - * @param {string} name Parameter name * @returns {boolean} Parameter is required */ ve.dm.MWParameterModel.prototype.isRequired = function () { @@ -52,7 +51,7 @@ ve.dm.MWParameterModel.prototype.isRequired = function () { }; /** - * Check if parameter is suggestyed. + * Check if parameter is suggested. * * @method * @param {string} name Parameter name @@ -63,7 +62,17 @@ ve.dm.MWParameterModel.prototype.isSuggested = function () { }; /** - * Get template parameter is part of. + * Check if parameter is deprecated. + * + * @method + * @returns {boolean} Parameter is deprecated + */ +ve.dm.MWParameterModel.prototype.isDeprecated = function () { + return this.template.getSpec().isParameterDeprecated( this.name ); +}; + +/** + * Get template of which this parameter is part. * * @returns {ve.dm.MWTemplateModel} Template */ diff --git a/modules/ve-mw/dm/models/ve.dm.MWTemplateSpecModel.js b/modules/ve-mw/dm/models/ve.dm.MWTemplateSpecModel.js index 2bb2ea5248..abfbca32a8 100644 --- a/modules/ve-mw/dm/models/ve.dm.MWTemplateSpecModel.js +++ b/modules/ve-mw/dm/models/ve.dm.MWTemplateSpecModel.js @@ -281,10 +281,12 @@ ve.dm.MWTemplateSpecModel.prototype.isParameterDeprecated = function ( name ) { * Get parameter deprecation description. * * @param {string} name Parameter name - * @returns {string} Explaining of why parameter is deprecated, empty if parameter is not deprecated + * @returns {string} Explaining of why parameter is deprecated, empty if parameter is either not + * deprecated or no description has been specified */ ve.dm.MWTemplateSpecModel.prototype.getParameterDeprecationDescription = function ( name ) { - return this.params[name].deprecated || ''; + return typeof this.params[name].deprecated === 'string' ? + this.params[name].deprecated : ''; }; /** diff --git a/modules/ve-mw/i18n/en.json b/modules/ve-mw/i18n/en.json index 822d32b92d..11df952a80 100644 --- a/modules/ve-mw/i18n/en.json +++ b/modules/ve-mw/i18n/en.json @@ -127,17 +127,22 @@ "visualeditor-dialog-transclusion-add-param": "Add parameter", "visualeditor-dialog-transclusion-add-template": "Add template", "visualeditor-dialog-transclusion-content": "Content", + "visualeditor-dialog-transclusion-deprecated-parameter": "Deprecated parameter", + "visualeditor-dialog-transclusion-deprecated-parameter-description": "Parameter is deprecated. $1", "visualeditor-dialog-transclusion-insert-template": "Insert template", "visualeditor-dialog-transclusion-insert-transclusion": "Insert transclusion", "visualeditor-dialog-transclusion-loading": "Loading...", "visualeditor-dialog-transclusion-multiple-mode": "Show options", "visualeditor-dialog-transclusion-no-template-description": "{{GENDER:$3|You are adding}} the \"$1\" template to this page. It doesn't yet have a description, but there might be some information on the template's page.", "visualeditor-dialog-transclusion-options": "Options", + "visualeditor-dialog-transclusion-param-info": "Parameter description", + "visualeditor-dialog-transclusion-param-info-missing": "No parameter description available", "visualeditor-dialog-transclusion-placeholder": "New template", "visualeditor-dialog-transclusion-remove-content": "Remove content", "visualeditor-dialog-transclusion-remove-param": "Remove parameter", "visualeditor-dialog-transclusion-remove-template": "Remove template", "visualeditor-dialog-transclusion-required-parameter": "Required parameter", + "visualeditor-dialog-transclusion-required-parameter-description": "Parameter is required.", "visualeditor-dialog-transclusion-single-mode": "Hide options", "visualeditor-dialogbutton-media-tooltip": "Media", "visualeditor-dialogbutton-meta-tooltip": "Page settings", diff --git a/modules/ve-mw/i18n/qqq.json b/modules/ve-mw/i18n/qqq.json index 6cd782d294..66814d99b8 100644 --- a/modules/ve-mw/i18n/qqq.json +++ b/modules/ve-mw/i18n/qqq.json @@ -131,6 +131,8 @@ "visualeditor-dialog-transclusion-add-content": "Label for button that adds parameter content to a transclusion.", "visualeditor-dialog-transclusion-add-param": "Label for button that adds parameter a parameter to a template.\n{{Identical|Add parameter}}", "visualeditor-dialog-transclusion-add-template": "Label for button that adds parameter a template to a transclusion.\n{{Identical|Add template}}", + "visualeditor-dialog-transclusion-deprecated-parameter": "Tooltip for deprecated parameter indicator", + "visualeditor-dialog-transclusion-deprecated-parameter-description": "Label describing that a parameter is deprecated.\n\nParameters:\n* $1 - Description given in TemplateData for why parameter is deprecated, which may be empty.", "visualeditor-dialog-transclusion-content": "Label for editor of content between transclusion parts.\n{{Identical|Content}}", "visualeditor-dialog-transclusion-insert-template": "Label for button in the transclusion dialog while in single mode that closes the dialog inserts a template.\n{{Identical|Insert template}}", "visualeditor-dialog-transclusion-insert-transclusion": "Label for button in the transclusion dialog while in multiple mode that closes the dialog inserts a transclusion", @@ -138,11 +140,14 @@ "visualeditor-dialog-transclusion-multiple-mode": "Label for button that shows advanced options in transclusion dialog", "visualeditor-dialog-transclusion-no-template-description": "Message to user that no template information is available for the template.\n\nParameters:\n* $1 - the title of the template\n* $2 - contains attributes for the link to the template's page. e.g. 'target=\"_blank\" href=\"...\"'\n* $3 - user object for GENDER.", "visualeditor-dialog-transclusion-options": "Label for section with options for templates, content or parameters.\n{{Identical|Options}}", + "visualeditor-dialog-transclusion-param-info": "Title of button that hides and shows parameter descriptions", + "visualeditor-dialog-transclusion-param-info-missing": "Title of button that hides and shows parameter descriptions when no description is available", "visualeditor-dialog-transclusion-placeholder": "Label for section with options for adding a new template to a multi part transclusion", "visualeditor-dialog-transclusion-remove-content": "Label for button that removes content between transclusion parts", "visualeditor-dialog-transclusion-remove-param": "Label for button that removes a parameter from a template", "visualeditor-dialog-transclusion-remove-template": "Label for button that removes a template from a transclusion.\n{{Identical|Remove template}}", "visualeditor-dialog-transclusion-required-parameter": "Tooltip for required parameter indicator", + "visualeditor-dialog-transclusion-required-parameter-description": "Label describing that a parameter is required.", "visualeditor-dialog-transclusion-single-mode": "Label for button that hides advanced options in transclusion dialog", "visualeditor-dialogbutton-media-tooltip": "{{Identical|Media}}", "visualeditor-dialogbutton-meta-tooltip": "{{Identical|Page settings}}", diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js b/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js index 4b0878ed27..5b7045f148 100644 --- a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js +++ b/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js @@ -45,7 +45,8 @@ ve.ui.MWTemplateDialog.static.modelClasses = [ ve.dm.MWTransclusionNode ]; */ ve.ui.MWTemplateDialog.static.bookletLayoutConfig = { 'continuous': true, - 'outlined': false + 'outlined': false, + 'autoFocus': true }; /* Methods */ diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js b/modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js index 5969c89c46..40ad2940f9 100644 --- a/modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js +++ b/modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js @@ -45,11 +45,7 @@ ve.ui.MWTransclusionDialog.static.modeCssClasses = { ve.ui.MWTransclusionDialog.static.bookletLayoutConfig = ve.extendObject( {}, ve.ui.MWTemplateDialog.static.bookletLayoutConfig, - { - 'autoFocus': true, - 'outlined': true, - 'editable': true - } + { 'outlined': true, 'editable': true } ); /* Methods */ @@ -61,7 +57,6 @@ ve.ui.MWTransclusionDialog.prototype.onTransclusionReady = function () { // Parent method ve.ui.MWTransclusionDialog.super.prototype.onTransclusionReady.call( this ); - this.modeButton.setDisabled( false ); this.setMode( 'auto' ); }; @@ -229,11 +224,13 @@ ve.ui.MWTransclusionDialog.prototype.setMode = function ( mode ) { } this.setSize( single ? 'medium' : 'large' ); this.bookletLayout.toggleOutline( !single ); - this.modeButton.setLabel( ve.msg( - single ? - 'visualeditor-dialog-transclusion-multiple-mode' : - 'visualeditor-dialog-transclusion-single-mode' - ) ); + this.modeButton + .setLabel( ve.msg( + single ? + 'visualeditor-dialog-transclusion-multiple-mode' : + 'visualeditor-dialog-transclusion-single-mode' + ) ) + .setDisabled( !this.isSingleTemplateTransclusion() ); this.updateTitle(); }; diff --git a/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js b/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js index 3f35418491..910c4e34db 100644 --- a/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js +++ b/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js @@ -19,6 +19,11 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config ) { var paramName = parameter.getName(); + // Configuration initialization + config = ve.extendObject( { + 'scrollable': false + }, config ); + // Parent constructor OO.ui.PageLayout.call( this, name, config ); @@ -26,13 +31,12 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config ) this.parameter = parameter; this.spec = parameter.getTemplate().getSpec(); this.defaultValue = this.spec.getParameterDefaultValue( paramName ); + this.$info = this.$( '
' ); + this.$actions = this.$( '
' ); this.$label = this.$( '
' ); this.$field = this.$( '
' ); - this.$actions = this.$( '
' ); - this.$indicators = this.$( '
' ); - this.$info = this.$( '
' ); - this.$description = this.$( '
' ); this.$more = this.$( '
' ); + this.$description = this.$( '
' ); this.valueInput = new OO.ui.TextInputWidget( { '$': this.$, 'multiline': true, @@ -46,9 +50,18 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config ) 'frameless': true, 'icon': 'remove', 'title': ve.msg( 'visualeditor-dialog-transclusion-remove-param' ), - 'tabIndex': -1 + 'tabIndex': -1, + 'classes': [ 've-ui-mwParameterPage-removeButton' ] } ) .connect( this, { 'click': 'onRemoveButtonClick' } ); + this.infoButton = new OO.ui.PopupButtonWidget( { + '$': this.$, + 'frameless': true, + 'icon': 'info', + 'title': ve.msg( 'visualeditor-dialog-transclusion-param-info' ), + 'tabIndex': -1, + 'classes': [ 've-ui-mwParameterPage-infoButton' ] + } ); this.addButton = new OO.ui.ButtonWidget( { '$': this.$, 'frameless': true, @@ -57,9 +70,11 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config ) 'tabIndex': -1 } ) .connect( this, { 'click': 'onAddButtonClick' } ); - this.requiredIndicator = new OO.ui.IndicatorWidget( { '$': this.$ } ); + this.statusIndicator = new OO.ui.IndicatorWidget( { + '$': this.$, + 'classes': [ 've-ui-mwParameterPage-statusIndicator' ] + } ); - // TODO: Use spec.deprecation // TODO: Use spec.type // Events @@ -67,37 +82,68 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config ) this.$description.on( 'click', ve.bind( this.onDescriptionClick, this ) ); // Initialization + this.$info + .addClass( 've-ui-mwParameterPage-info' ) + .append( this.$label, this.statusIndicator.$element ); + this.$actions + .addClass( 've-ui-mwParameterPage-actions' ) + .append( this.infoButton.$element, this.removeButton.$element ); this.$label .addClass( 've-ui-mwParameterPage-label' ) .text( this.spec.getParameterLabel( paramName ) ); - this.$actions - .addClass( 've-ui-mwParameterPage-actions' ) - .append( this.removeButton.$element ); - this.$indicators - .addClass( 've-ui-mwParameterPage-indicators' ) - .append( this.requiredIndicator.$element ); - this.$description - .addClass( 've-ui-mwParameterPage-description' ) - .text( this.spec.getParameterDescription( paramName ) || '' ); - this.$info - .addClass( 've-ui-mwParameterPage-info' ) - .append( this.$description ); this.$field .addClass( 've-ui-mwParameterPage-field' ) - .append( this.valueInput.$element, this.$indicators, this.$actions, this.$info ); + .append( + this.valueInput.$element + ); this.$more .addClass( 've-ui-mwParameterPage-more' ) .append( this.addButton.$element ); this.$element .addClass( 've-ui-mwParameterPage' ) - .append( this.$label, this.$field, this.$more ); + .append( this.$info, this.$actions, this.$field, this.$more ); + this.$description + .addClass( 've-ui-mwParameterPage-description' ) + .append( this.$( '

' ).text( this.spec.getParameterDescription( paramName ) || '' ) ); if ( this.parameter.isRequired() ) { - this.requiredIndicator + this.statusIndicator .setIndicator( 'required' ) .setIndicatorTitle( ve.msg( 'visualeditor-dialog-transclusion-required-parameter' ) ); + this.$description.append( + this.$( '

' ) + .addClass( 've-ui-mwParameterPage-description-required' ) + .text( + ve.msg( 'visualeditor-dialog-transclusion-required-parameter-description' ) + ) + ); + } else if ( this.parameter.isDeprecated() ) { + this.statusIndicator + .setIndicator( 'alert' ) + .setIndicatorTitle( + ve.msg( 'visualeditor-dialog-transclusion-deprecated-parameter' ) + ); + this.$description.append( + this.$( '

' ) + .addClass( 've-ui-mwParameterPage-description-deprecated' ) + .text( + ve.msg( + 'visualeditor-dialog-transclusion-deprecated-parameter-description', + this.spec.getParameterDeprecationDescription( paramName ) + ) + ) + ); + } + if ( this.$description.text() === '' ) { + this.infoButton + .setDisabled( true ) + .setTitle( + ve.msg( 'visualeditor-dialog-transclusion-param-info-missing' ) + ); + } else { + this.infoButton.getPopup().$body.append( this.$description ); } }; @@ -134,11 +180,6 @@ ve.ui.MWParameterPage.prototype.onLabelClick = function () { this.valueInput.simulateLabelClick(); }; -ve.ui.MWParameterPage.prototype.onDescriptionClick = function () { - this.valueInput.simulateLabelClick(); - this.$description.toggleClass( 've-ui-mwParameterPage-description-all' ); -}; - /** * @inheritdoc */ @@ -162,5 +203,12 @@ ve.ui.MWParameterPage.prototype.setOutlineItem = function ( outlineItem ) { ve.msg( 'visualeditor-dialog-transclusion-required-parameter' ) ); } + if ( this.parameter.isDeprecated() ) { + this.outlineItem + .setIndicator( 'alert' ) + .setIndicatorTitle( + ve.msg( 'visualeditor-dialog-transclusion-deprecated-parameter' ) + ); + } } }; diff --git a/modules/ve-mw/ui/pages/ve.ui.MWParameterPlaceholderPage.js b/modules/ve-mw/ui/pages/ve.ui.MWParameterPlaceholderPage.js index 55bdc0a973..73348421fa 100644 --- a/modules/ve-mw/ui/pages/ve.ui.MWParameterPlaceholderPage.js +++ b/modules/ve-mw/ui/pages/ve.ui.MWParameterPlaceholderPage.js @@ -17,6 +17,11 @@ * @param {Object} [config] Configuration options */ ve.ui.MWParameterPlaceholderPage = function VeUiMWParameterPlaceholderPage( parameter, name, config ) { + // Configuration initialization + config = ve.extendObject( { + 'scrollable': false + }, config ); + // Parent constructor OO.ui.PageLayout.call( this, name, config ); diff --git a/modules/ve-mw/ui/pages/ve.ui.MWTemplatePage.js b/modules/ve-mw/ui/pages/ve.ui.MWTemplatePage.js index d0c03af8be..a201a1874b 100644 --- a/modules/ve-mw/ui/pages/ve.ui.MWTemplatePage.js +++ b/modules/ve-mw/ui/pages/ve.ui.MWTemplatePage.js @@ -21,6 +21,11 @@ ve.ui.MWTemplatePage = function VeUiMWTemplatePage( template, name, config ) { var title; + // Configuration initialization + config = ve.extendObject( { + 'scrollable': false + }, config ); + // Parent constructor OO.ui.PageLayout.call( this, name, config ); diff --git a/modules/ve-mw/ui/pages/ve.ui.MWTemplatePlaceholderPage.js b/modules/ve-mw/ui/pages/ve.ui.MWTemplatePlaceholderPage.js index 6a2fb3d20e..1bffd2432b 100644 --- a/modules/ve-mw/ui/pages/ve.ui.MWTemplatePlaceholderPage.js +++ b/modules/ve-mw/ui/pages/ve.ui.MWTemplatePlaceholderPage.js @@ -17,6 +17,11 @@ * @param {Object} [config] Configuration options */ ve.ui.MWTemplatePlaceholderPage = function VeUiMWTemplatePlaceholderPage( placeholder, name, config ) { + // Configuration initialization + config = ve.extendObject( { + 'scrollable': false + }, config ); + // Parent constructor OO.ui.PageLayout.call( this, name, config ); diff --git a/modules/ve-mw/ui/pages/ve.ui.MWTransclusionContentPage.js b/modules/ve-mw/ui/pages/ve.ui.MWTransclusionContentPage.js index 7135725209..89db30e8ad 100644 --- a/modules/ve-mw/ui/pages/ve.ui.MWTransclusionContentPage.js +++ b/modules/ve-mw/ui/pages/ve.ui.MWTransclusionContentPage.js @@ -17,6 +17,11 @@ * @param {Object} [config] Configuration options */ ve.ui.MWTransclusionContentPage = function VeUiMWTransclusionContentPage( content, name, config ) { + // Configuration initialization + config = ve.extendObject( { + 'scrollable': false + }, config ); + // Parent constructor OO.ui.PageLayout.call( this, name, config ); diff --git a/modules/ve-mw/ui/styles/pages/ve.ui.MWParameterPage.css b/modules/ve-mw/ui/styles/pages/ve.ui.MWParameterPage.css index f83d1d3bcd..254183e154 100644 --- a/modules/ve-mw/ui/styles/pages/ve.ui.MWParameterPage.css +++ b/modules/ve-mw/ui/styles/pages/ve.ui.MWParameterPage.css @@ -18,85 +18,86 @@ background-color: #f3f3f3; } -.ve-ui-mwParameterPage-label, -.ve-ui-mwParameterPage-field, -.ve-ui-mwParameterPage-info, -.ve-ui-mwParameterPage-actions, -.ve-ui-mwParameterPage-indicators, -.ve-ui-mwParameterPage .oo-ui-textInputWidget { - display: inline-block; - vertical-align: top; +.ve-ui-mwParameterPage-info { + float: left; + cursor: default; + padding-left: 2.5em; + width: 80%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.ve-ui-mwParameterPage-actions { + float: right; + cursor: default; + padding-right: 2.5em; + width: 20%; + text-align: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ve-ui-mwParameterPage-label { - width: 20%; - padding: 1.33em 1em; - text-align: right; - cursor: default; + display: inline; + vertical-align: middle; + font-size: 1.1em; + font-weight: bold; +} + +.ve-ui-mwParameterPage-statusIndicator { + display: inline-block; + vertical-align: middle; + opacity: 0.5; +} + +.ve-ui-mwParameterPage-description { + font-size: 0.9em; + line-height: 1.5em; + padding: 0.25em 1em; +} + +.ve-ui-mwParameterPage-description-required, +.ve-ui-mwParameterPage-description-deprecated { + font-style: italic; + color: #555; +} + +.ve-ui-mwParameterPage-infoButton, +.ve-ui-mwParameterPage-removeButton { + display: none; +} + +.ve-ui-mwParameterPage-infoButton .oo-ui-popupWidget { + z-index: 100; + text-align: left; +} + +.oo-ui-pageLayout-active .ve-ui-mwParameterPage-infoButton, +.oo-ui-pageLayout-active .ve-ui-mwParameterPage-removeButton { + display: inline-block; } .ve-ui-mwParameterPage-field { - width: 80%; position: relative; - padding-top: 0.75em; + padding: 0.75em 2.5em; + clear: both; } .ve-ui-mwParameterPage .oo-ui-textInputWidget { - width: 86%; + display: inline-block; + vertical-align: top; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .ve-ui-mwParameterPage .oo-ui-textInputWidget textarea { height: 2.5em; } -.ve-ui-mwParameterPage-indicators, -.ve-ui-mwParameterPage-actions { - width: 7%; - padding: 0.33em 0; - text-align: right; -} - -.ve-ui-mwParameterPage-actions { - display: none; -} - -.ve-ui-mwParameterPage.oo-ui-pageLayout-active .ve-ui-mwParameterPage-actions { - display: inline-block; -} - -.ve-ui-mwParameterPage-info { - position: relative; - width: 90%; - padding-bottom: 0.75em; - cursor: default; -} - -.ve-ui-mwParameterPage-description { - color: #ddd; - font-size: 0.9em; - line-height: 1.5em; - height: 1.5em; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - -webkit-transition: color 200ms; - -moz-transition: color 200ms; - -o-transition: color 200ms; - transition: color 200ms; -} - -.ve-ui-mwParameterPage-description-all { - height: auto; - white-space: normal; -} - -.ve-ui-mwParameterPage.oo-ui-pageLayout-active .ve-ui-mwParameterPage-description { - color: #999; -} - .ve-ui-mwParameterPage-more { display: none; margin: 1em 0 0.5em 0; diff --git a/modules/ve-mw/ui/styles/pages/ve.ui.MWTemplatePage.css b/modules/ve-mw/ui/styles/pages/ve.ui.MWTemplatePage.css index fa39f35bdb..0fdf1654ee 100644 --- a/modules/ve-mw/ui/styles/pages/ve.ui.MWTemplatePage.css +++ b/modules/ve-mw/ui/styles/pages/ve.ui.MWTemplatePage.css @@ -14,6 +14,10 @@ display: block; } +.ve-ui-mwTemplatePage-description { + color: #555; +} + .ve-ui-mwTemplatePage-description-missing { font-style: italic; } \ No newline at end of file diff --git a/modules/ve-mw/ui/styles/widgets/ve.ui.MWParameterResultWidget.css b/modules/ve-mw/ui/styles/widgets/ve.ui.MWParameterResultWidget.css index 3aac91a985..1f2a8a7373 100644 --- a/modules/ve-mw/ui/styles/widgets/ve.ui.MWParameterResultWidget.css +++ b/modules/ve-mw/ui/styles/widgets/ve.ui.MWParameterResultWidget.css @@ -49,4 +49,5 @@ .ve-ui-mwParameterResultWidget-description { clear: both; + color: #555; }