Opened 6 years ago

Closed 6 years ago

#5927 closed Bug (fixed)

Option to specify custom styles to apply just to the control element in dialog elements

Reported by: alfonsoml Owned by: alfonsoml
Priority: Normal Milestone: CKEditor 3.4
Component: UI : Dialogs Version: 3.3.1
Keywords: Doc? Cc:

Description

Currently it's a little hard to do nice designs with the dialog.ui elements, for example one problem is that specifying a style option in the definition is applied to both the wrapper and the native control, so putting things like width makes it go crazy.

By allowing a new attribute "controlStyle" we can allow to specify some css that must be applied only to the control and make it render as expected.

The screenshot shows in the first part how it looks without applying any style, the wrapper tries to take all the width and it's ugly. The second part shows that if we specify a width, the select element becomes too wide, so that isn't the solution. The third one shows the rendering after applying the patch to this dialog.

		contents : [
			{
				id : 'Info',
				elements :
				[
							{
								id : 'cmbStrokeWidth',
								label: editor.lang.googlemaps.strokeWidth,
								labelLayout : 'horizontal',
								widths: [ '50', '66'],
								style : 'width:116px;',
								controlStyle : 'width:45px; ',
								type : 'select',
								items :
								[
									[ '10', '10']
								]
							},
							{
								id : 'cmbStrokeOpacity',
								label: editor.lang.googlemaps.strokeOpacity,
								labelLayout : 'horizontal',
								widths: [ '50', '64'],
								style : 'width:116px;',
								controlStyle : 'width:45px; ',
								type : 'select',
								items :
								[
									[ '1', '1']
								]
							},
							{
									type:'hbox',
									widths: [ '130', '80'],
									children:
									[
										{
											id : 'txtStrokeColor',
											label: editor.lang.googlemaps.strokeColor,
											labelLayout : 'horizontal',
											widths: [ '50', '64'],
											style : 'width:116px;',
											controlStyle : 'width:64px; ',
											type : 'text'
										},
										{
											id : 'btnColor',
											type : 'button',
											label : editor.lang.googlemaps.chooseColor
										}
									]
							}
				]
			}
		]

Attachments (2)

dialog styles.png (10.8 KB) - added by alfonsoml 6 years ago.
screenshots
5927.patch (2.0 KB) - added by alfonsoml 6 years ago.
Proposed patch

Download all attachments as: .zip

Change History (5)

Changed 6 years ago by alfonsoml

screenshots

Changed 6 years ago by alfonsoml

Proposed patch

comment:1 Changed 6 years ago by fredck

  • Keywords Review+ added; Review? removed

comment:2 Changed 6 years ago by alfonsoml

  • Keywords Doc? added

Fixed with [5685]

It still needs correct documentation, in general I don't think that the dialogs stuff is easy to understand with the current docs. I'll try to write something about this in the wiki and check that the automatic docs are updated.

comment:3 Changed 6 years ago by fredck

  • Keywords Doc? added; Doc removed
  • Resolution set to fixed
  • Status changed from review_passed to closed

Ok, Doc? is still valid for closed ticket.

Note: See TracTickets for help on using tickets.
© 2003 – 2016 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy