Changeset 7029 for CKEditor/trunk


Ignore:
Timestamp:
06/09/2011 04:45:58 PM (3 years ago)
Author:
garry.yao
Message:

#7991: Introduce 'inputStyle' and 'controlStyle' on dialog element definition to avoid long label text get cut off.

Location:
CKEditor/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • CKEditor/trunk/CHANGES.html

    r7027 r7029  
    4949                <li><a href="http://dev.ckeditor.com/ticket/7959">#7959</a> : The cursor will now blink in the first cell after a table is inserted.</li> 
    5050                <li><a href="http://dev.ckeditor.com/ticket/7885">#7885</a> : New <code>editor::removeMenuItem</code> API for removing plugin context menu items introduced.</li> 
     51                <li><a href="http://dev.ckeditor.com/ticket/7991">#7991</a> : Introduce the <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.labeledElement#controlStyle">controlStyle</a> and <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.labeledElement#inputStyle">inputStyle</a> definitions to allow fine-graded controlling of dialog element styles.</li> 
    5152        </ul> 
    5253        <p> 
  • CKEditor/trunk/_source/plugins/dialog/dialogDefinition.js

    r6942 r7029  
    501501 */ 
    502502 
     503// ----- labeled element ------ 
     504 
     505/** 
     506 * The definition of labeled user interface element (textarea, textInput etc). 
     507 * <div class="notapi">This class is not really part of the API. It just illustrates the properties 
     508 * that developers can use to define and create dialog UI elements.</div> 
     509 * @name CKEDITOR.dialog.definition.labeledElement 
     510 * @extends CKEDITOR.dialog.definition.uiElement 
     511 * @constructor 
     512 * @see CKEDITOR.ui.dialog.labeledElement 
     513 * @example 
     514 * // There is no constructor for this class, the user just has to define an 
     515 * // object with the appropriate properties. 
     516 */ 
     517 
     518/** 
     519 * The label of the UI element. 
     520 * @name CKEDITOR.dialog.definition.labeledElement.prototype.label 
     521 * @type String 
     522 * @field 
     523 * @example 
     524 * { 
     525 *              type : 'text', 
     526 *              label : 'My Label ' 
     527 * } 
     528 */ 
     529 
     530/** 
     531 * (Optional) Specify the layout of the label. Set to 'horizontal' for horizontal layout. 
     532 * The default layout is vertical. 
     533 * @name CKEDITOR.dialog.definition.labeledElement.prototype.labelLayout 
     534 * @type String 
     535 * @field 
     536 * @example 
     537 * { 
     538 *              type : 'text', 
     539 *              label : 'My Label ', 
     540 *      <strong>        labelLayout : 'horizontal',</strong> 
     541 * } 
     542 */ 
     543 
     544/** 
     545 * (Optional) Applies only to horizontal layouts: a two elements array of lengths to specify the widths of the 
     546*       label and the content element. See also {@link CKEDITOR.dialog.definition.labeledElement#labelLayout}. 
     547 * @name CKEDITOR.dialog.definition.labeledElement.prototype.widths 
     548 * @type Array 
     549 * @field 
     550 * @example 
     551 * { 
     552 *              type : 'text', 
     553 *              label : 'My Label ', 
     554 *              labelLayout : 'horizontal', 
     555 *      <strong>        widths : [100, 200],</strong> 
     556 * } 
     557 */ 
     558 
     559/** 
     560 *  Specify the inline style of the uiElement label. 
     561 * @name CKEDITOR.dialog.definition.labeledElement.prototype.labelStyle 
     562 * @type String 
     563 * @field 
     564 * @example 
     565 * { 
     566 *              type : 'text', 
     567 *              label : 'My Label ', 
     568 *      <strong>        labelStyle : 'color: red',</strong> 
     569 * } 
     570 */ 
     571 
     572 
     573/** 
     574 *  Specify the inline style of the input element. 
     575 * @name CKEDITOR.dialog.definition.labeledElement.prototype.inputStyle 
     576 * @type String 
     577 * @field 
     578 * @example 
     579 * { 
     580 *              type : 'text', 
     581 *              label : 'My Label ', 
     582 *      <strong>        inputStyle : 'text-align:center',</strong> 
     583 * } 
     584 */ 
     585 
     586/** 
     587 *  Specify the inline style of the input element container . 
     588 * @name CKEDITOR.dialog.definition.labeledElement.prototype.controlStyle 
     589 * @type String 
     590 * @field 
     591 * @example 
     592 * { 
     593 *              type : 'text', 
     594 *              label : 'My Label ', 
     595 *      <strong>        controlStyle : 'width:3em',</strong> 
     596 * } 
     597 */ 
     598 
     599 
    503600// ----- button ------ 
    504601 
     
    614711 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. 
    615712 * @name CKEDITOR.dialog.definition.file 
    616  * @extends CKEDITOR.dialog.definition.uiElement 
     713 * @extends CKEDITOR.dialog.definition.labeledElement 
    617714 * @constructor 
    618715 * @example 
     
    645742 * @field 
    646743 * @type Function 
    647  * @example 
    648  */ 
    649  
    650 /** 
    651  * The label of the UI element. 
    652  * @name CKEDITOR.dialog.definition.file.prototype.label 
    653  * @type String 
    654  * @field 
    655744 * @example 
    656745 */ 
     
    829918 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. 
    830919 * @name CKEDITOR.dialog.definition.radio 
    831  * @extends CKEDITOR.dialog.definition.uiElement 
     920 * @extends CKEDITOR.dialog.definition.labeledElement 
    832921 * @constructor 
    833922 * @example 
     
    874963 */ 
    875964 
    876 /** 
    877  * The label of the UI element. 
    878  * @name CKEDITOR.dialog.definition.radio.prototype.label 
    879  * @type String 
    880  * @field 
    881  * @example 
    882  */ 
    883  
    884965// ----- selectElement ------ 
    885966 
     
    893974 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. 
    894975 * @name CKEDITOR.dialog.definition.select 
    895  * @extends CKEDITOR.dialog.definition.uiElement 
     976 * @extends CKEDITOR.dialog.definition.labeledElement 
    896977 * @constructor 
    897978 * @example 
     
    9541035 */ 
    9551036 
    956 /** 
    957  * The label of the UI element. 
    958  * @name CKEDITOR.dialog.definition.select.prototype.label 
    959  * @type String 
    960  * @field 
    961  * @example 
    962  */ 
    963  
    9641037// ----- textInput ----- 
    9651038 
     
    9731046 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. 
    9741047 * @name CKEDITOR.dialog.definition.textInput 
    975  * @extends CKEDITOR.dialog.definition.uiElement 
     1048 * @extends CKEDITOR.dialog.definition.labeledElement 
    9761049 * @constructor 
    9771050 * @example 
     
    10261099 */ 
    10271100 
    1028 /** 
    1029  * The label of the UI element. 
    1030  * @name CKEDITOR.dialog.definition.textInput.prototype.label 
    1031  * @type String 
    1032  * @field 
    1033  * @example 
    1034  */ 
    1035  
    10361101// ----- textarea ------ 
    10371102 
     
    10451110 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}. 
    10461111 * @name CKEDITOR.dialog.definition.textarea 
    1047  * @extends CKEDITOR.dialog.definition.uiElement 
     1112 * @extends CKEDITOR.dialog.definition.labeledElement 
    10481113 * @constructor 
    10491114 * @example 
     
    10981163 * @example 
    10991164 */ 
    1100  
    1101 /** 
    1102  * The label of the UI element. 
    1103  * @name CKEDITOR.dialog.definition.textarea.prototype.label 
    1104  * @type String 
    1105  * @field 
    1106  * @example 
    1107  */ 
  • CKEditor/trunk/_source/plugins/dialogui/plugin.js

    r6904 r7029  
    159159                                                                ' id="'+  _.labelId + '"', 
    160160                                                                ' for="' + _.inputId + '"', 
    161                                                                 ' style="' + elementDefinition.labelStyle + '">', 
     161                                                                ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +'>', 
    162162                                                                elementDefinition.label, 
    163163                                                                '</label>', 
    164                                                                 '<div class="cke_dialog_ui_labeled_content" role="presentation">', 
     164                                                                '<div class="cke_dialog_ui_labeled_content"' + ( elementDefinition.controlStyle ? ' style="' + elementDefinition.controlStyle + '"' : '' ) + ' role="presentation">', 
    165165                                                                contentHtml.call( this, dialog, elementDefinition ), 
    166166                                                                '</div>' ); 
     
    178178                                                                                ' id="' + _.labelId + '"' + 
    179179                                                                                ' for="' + _.inputId + '"' + 
    180                                                                                 ' style="' + elementDefinition.labelStyle + '">' + 
     180                                                                                ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +'>' + 
    181181                                                                                   CKEDITOR.tools.htmlEncode( elementDefinition.label ) + 
    182182                                                                                '</span>' 
     
    184184                                                                { 
    185185                                                                        type : 'html', 
    186                                                                         html : '<span class="cke_dialog_ui_labeled_content">' + 
     186                                                                        html : '<span class="cke_dialog_ui_labeled_content"' + ( elementDefinition.controlStyle ? ' style="' + elementDefinition.controlStyle + '"' : '' ) + '>' + 
    187187                                                                                contentHtml.call( this, dialog, elementDefinition ) + 
    188188                                                                                '</span>' 
     
    238238                                        attributes.size = elementDefinition.size; 
    239239 
    240                                 if ( elementDefinition.controlStyle ) 
    241                                         attributes.style = elementDefinition.controlStyle; 
     240                                if ( elementDefinition.inputStyle ) 
     241                                        attributes.style = elementDefinition.inputStyle; 
    242242 
    243243                                // If user presses Enter in a text box, it implies clicking OK for the dialog. 
     
    324324                                attributes.cols = elementDefinition.cols || 20; 
    325325 
     326                                if ( typeof elementDefinition.inputStyle != 'undefined' ) 
     327                                        attributes.style = elementDefinition.inputStyle; 
     328 
     329 
    326330                                /** @ignore */ 
    327331                                var innerHTML = function() 
     
    381385                                                attributes.checked = 'checked'; 
    382386 
    383                                         if ( typeof myDefinition.controlStyle != 'undefined' ) 
    384                                                 myDefinition.style = myDefinition.controlStyle; 
     387                                        if ( typeof myDefinition.inputStyle != 'undefined' ) 
     388                                                myDefinition.style = myDefinition.inputStyle; 
    385389 
    386390                                        _.checkbox = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'input', null, attributes ); 
    387                                         html.push( ' <label id="', labelId, '" for="', attributes.id, '">', 
     391                                        html.push( ' <label id="', labelId, '" for="', attributes.id, '"' + ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) + '>', 
    388392                                                        CKEDITOR.tools.htmlEncode( elementDefinition.label ), 
    389393                                                        '</label>' ); 
     
    463467                                                cleanInnerDefinition( labelDefinition ); 
    464468 
    465                                                 if ( typeof inputDefinition.controlStyle != 'undefined' ) 
    466                                                         inputDefinition.style = inputDefinition.controlStyle; 
     469                                                if ( typeof inputDefinition.inputStyle != 'undefined' ) 
     470                                                        inputDefinition.style = inputDefinition.inputStyle; 
    467471 
    468472                                                children.push( new CKEDITOR.ui.dialog.uiElement( dialog, inputDefinition, inputHtml, 'input', null, inputAttributes ) ); 
     
    623627                                        } 
    624628 
    625                                         if ( typeof myDefinition.controlStyle != 'undefined' ) 
    626                                                 myDefinition.style = myDefinition.controlStyle; 
     629                                        if ( typeof myDefinition.inputStyle != 'undefined' ) 
     630                                                myDefinition.style = myDefinition.inputStyle; 
    627631 
    628632                                        _.select = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'select', null, attributes, innerHTML.join( '' ) ); 
  • CKEditor/trunk/_source/plugins/docprops/dialogs/docprops.js

    r6932 r7029  
    547547                                                                                label : lang.marginTop, 
    548548                                                                                style : 'width: 80px; text-align: center; margin: 0px auto', 
    549                                                                                 controlStyle : 'text-align: center', 
     549                                                                                inputStyle : 'text-align: center', 
    550550                                                                                setup : function( doc, html, head, body ) 
    551551                                                                                { 
     
    566566                                                                                                label : lang.marginLeft, 
    567567                                                                                                style : 'width: 80px; text-align: center; margin: 0px auto', 
    568                                                                                                 controlStyle : 'text-align: center', 
     568                                                                                                inputStyle : 'text-align: center', 
    569569                                                                                                setup : function( doc, html, head, body ) 
    570570                                                                                                { 
     
    582582                                                                                                label : lang.marginRight, 
    583583                                                                                                style : 'width: 80px; text-align: center; margin: 0px auto', 
    584                                                                                                 controlStyle : 'text-align: center', 
     584                                                                                                inputStyle : 'text-align: center', 
    585585                                                                                                setup : function( doc, html, head, body ) 
    586586                                                                                                { 
     
    591591                                                                                                { 
    592592                                                                                                        this.getElement().getParent().setStyle( 'text-align', 'center' ); 
    593                                                                                                 } 
     593                                                                                        } 
    594594                                                                                        } 
    595595                                                                                ] 
     
    600600                                                                                label : lang.marginBottom, 
    601601                                                                                style : 'width: 80px; text-align: center; margin: 0px auto', 
    602                                                                                 controlStyle : 'text-align: center', 
     602                                                                                inputStyle : 'text-align: center', 
    603603                                                                                setup : function( doc, html, head, body ) 
    604604                                                                                { 
     
    609609                                                                                { 
    610610                                                                                        this.getElement().getParent().setStyle( 'text-align', 'center' ); 
    611                                                                                 } 
     611                                                                        } 
    612612                                                                        } 
    613613                                                                ] 
  • CKEditor/trunk/_source/plugins/table/dialogs/table.js

    r7011 r7029  
    263263                                                                                        label : editor.lang.table.rows, 
    264264                                                                                        required : true, 
    265                                                                                         style : 'width:5em', 
     265                                                                                        controlStyle : 'width:5em', 
    266266                                                                                        validate : function() 
    267267                                                                                        { 
     
    289289                                                                                        label : editor.lang.table.columns, 
    290290                                                                                        required : true, 
    291                                                                                         style : 'width:5em', 
     291                                                                                        controlStyle : 'width:5em', 
    292292                                                                                        validate : function() 
    293293                                                                                        { 
     
    355355                                                                                        'default' : 1, 
    356356                                                                                        label : editor.lang.table.border, 
    357                                                                                         style : 'width:3em', 
     357                                                                                        controlStyle : 'width:3em', 
    358358                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidBorder ), 
    359359                                                                                        setup : function( selectedTable ) 
     
    408408                                                                                                        type : 'text', 
    409409                                                                                                        id : 'txtWidth', 
    410                                                                                                         style : 'width:5em', 
     410                                                                                                        controlStyle : 'width:5em', 
    411411                                                                                                        label : editor.lang.common.width, 
    412412                                                                                                        'default' : 500, 
     
    435435                                                                                                        type : 'text', 
    436436                                                                                                        id : 'txtHeight', 
    437                                                                                                         style : 'width:5em', 
     437                                                                                                        controlStyle : 'width:5em', 
    438438                                                                                                        label : editor.lang.common.height, 
    439439                                                                                                        'default' : '', 
     
    462462                                                                                        type : 'text', 
    463463                                                                                        id : 'txtCellSpace', 
    464                                                                                         style : 'width:3em', 
     464                                                                                        controlStyle : 'width:3em', 
    465465                                                                                        label : editor.lang.table.cellSpace, 
    466466                                                                                        'default' : 1, 
     
    481481                                                                                        type : 'text', 
    482482                                                                                        id : 'txtCellPad', 
    483                                                                                         style : 'width:3em', 
     483                                                                                        controlStyle : 'width:3em', 
    484484                                                                                        label : editor.lang.table.cellPad, 
    485485                                                                                        'default' : 1, 
Note: See TracChangeset for help on using the changeset viewer.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy