Changeset 7029 for CKEditor/trunk


Ignore:
Timestamp:
06/09/11 16:45:58 (4 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 – 2015 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy