wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-24 06:24:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Template dialog cleanup

Browse source 
Objectives:

* Break template page creation into it's own method
* Get rid of styling being applied in JavaScript
* Fix styling issues

Changes:

ve.ui.MWTemplateDialog.js
* Add method for adding a template page
* Replace css calls with addition of classes for styling
* Cleanup of append calls

ve.ui.Dialog.css
* Make inputs in the template dialog full width and a reasonable height

ve.ui.Widget.css
* Swap margins with padding in labels to prevent layout issues
* Prevent textareas from being resized in safari/chrome

Change-Id: I4030d8605aad865251ecd0aeb8cc72d333bed6a4
This commit is contained in:
Trevor Parscal 2013-05-29 11:03:52 +01:00
parent 42fc8ecf4c
commit da679b7a9c
3 changed files with 40 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
modules/ve/ui/dialogs/ve.ui.MWTemplateDialog.js
View file

@ -154,7 +154,7 @@ ve.ui.MWTemplateDialog.prototype.setupPages = function () {
template = parts[i].template; template = parts[i].template;
spec = specs[template.target.url]; spec = specs[template.target.url];
// Add template page // Add template page
this.addPage( 'part_' + i, { 'label': template.target.url, 'icon': 'template' } ); this.addTemplatePage( 'part_' + i, template );
// Add parameter pages // Add parameter pages
for ( param in template.params ) { for ( param in template.params ) {
this.addParameterPage( this.addParameterPage(
@ -236,14 +236,36 @@ ve.ui.MWTemplateDialog.prototype.addWikitextPage = function ( page, value ) {
} ); } );
textInput = new ve.ui.TextInputWidget( { '$$': this.frame.$$, 'multiline': true } ); textInput = new ve.ui.TextInputWidget( { '$$': this.frame.$$, 'multiline': true } );
textInput.$input.css( { 'height': 100, 'width': '100%' } );
textInput.setValue( value.wt ); textInput.setValue( value.wt );
textInput.on( 'change', function () { textInput.on( 'change', function () {
value.wt = textInput.getValue(); value.wt = textInput.getValue();
} ); } );
textInput.$.addClass( 've-ui-mwTemplateDialog-input' );
fieldset.$.append( textInput.$ );
this.addPage( page, { 'label': 'Content', 'icon': 'source' } ); this.addPage( page, { 'label': 'Content', 'icon': 'source' } );
this.pages[page].$.append( fieldset.$.append( textInput.$ ) ); this.pages[page].$.append( fieldset.$ );
};
/**
* Add page for a template.
*
* @method
* @param {string} page Unique page name
* @param {Object} template Template info
*/
ve.ui.MWTemplateDialog.prototype.addTemplatePage = function ( page, template ) {
var fieldset,
label = template.target.url || template.target.wt;
fieldset = new ve.ui.FieldsetLayout( {
'$$': this.frame.$$,
'label': label,
'icon': 'template'
} );
this.addPage( page, { 'label': label, 'icon': 'template' } );
this.pages[page].$.append( fieldset.$ );
}; };
/** /**
@ -267,11 +289,12 @@ ve.ui.MWTemplateDialog.prototype.addParameterPage = function ( page, name, value
} ); } );
textInput = new ve.ui.TextInputWidget( { '$$': this.frame.$$, 'multiline': true } ); textInput = new ve.ui.TextInputWidget( { '$$': this.frame.$$, 'multiline': true } );
textInput.$input.css( { 'height': 100, 'width': '100%' } );
textInput.setValue( value.wt ); textInput.setValue( value.wt );
textInput.on( 'change', function () { textInput.on( 'change', function () {
value.wt = textInput.getValue(); value.wt = textInput.getValue();
} ); } );
textInput.$.addClass( 've-ui-mwTemplateDialog-input' );
fieldset.$.append( textInput.$ );
if ( description ) { if ( description ) {
inputLabel = new ve.ui.InputLabelWidget( { inputLabel = new ve.ui.InputLabelWidget( {
@ -288,7 +311,7 @@ ve.ui.MWTemplateDialog.prototype.addParameterPage = function ( page, name, value
// TODO: Use spec.type // TODO: Use spec.type
this.addPage( page, { 'label': label, 'icon': 'parameter', 'level': 1 } ); this.addPage( page, { 'label': label, 'icon': 'parameter', 'level': 1 } );
this.pages[page].$.append( fieldset.$.append( textInput.$ ) ); this.pages[page].$.append( fieldset.$ );
}; };
/* Registration */ /* Registration */

10
modules/ve/ui/styles/ve.ui.Dialog.css
View file

@ -153,3 +153,13 @@
border-top-right-radius: 0; border-top-right-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
} }
/* ve.ui.MWTemplateDialog */
.ve-ui-mwTemplateDialog-input {
width: 100%;
}
.ve-ui-mwTemplateDialog-input textarea {
height: 10em;
}

3
modules/ve/ui/styles/ve.ui.Widget.css
View file

@ -205,7 +205,7 @@
/* ve.ui.InputLabelWidget */ /* ve.ui.InputLabelWidget */
.ve-ui-inputLabelWidget { .ve-ui-inputLabelWidget {
margin: 0.5em 0; padding: 0.5em 0;
} }
/* ve.ui.TextInputWidget */ /* ve.ui.TextInputWidget */
@ -236,6 +236,7 @@
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
resize: none;
/* Animation */ /* Animation */
-webkit-transition: border-color 200ms, box-shadow 200ms, background-color 200ms; -webkit-transition: border-color 200ms, box-shadow 200ms, background-color 200ms;