Changeset 7222 for CKEditor/trunk

Timestamp:

08/24/11 16:41:31 (22 months ago)

Author:

garry.yao

Message:

#6200: visual focus outline for checkbox, radio, lock button.

Location:

CKEditor/trunk

Files:

• CHANGES.html (modified) (1 diff)
• _source/plugins/dialog/plugin.js (modified) (1 diff)
• _source/skins/kama/dialog.css (modified) (1 diff)
• _source/skins/office2003/dialog.css (modified) (1 diff)
• _source/skins/v2/dialog.css (modified) (1 diff)

CKEditor/trunk/CHANGES.html

@@ -69 +69 @@
                 <li><a href="http://dev.ckeditor.com/ticket/7490">#7490</a> : [IE] Block format leaks to the next unselected line when <code>enterMode</code> is set to <code>BR</code>.</li>
                 <li><a href="http://dev.ckeditor.com/ticket/8087">#8087</a> : Indenting list items may add redundant text direction attributes.</li>
+                <li><a href="http://dev.ckeditor.com/ticket/6200">#6200</a> : Styling for certain dialog element type that miss focus outline like checkbox.</li>
                 <li>Updated the following language files:<ul>
                         <li><a href="http://dev.ckeditor.com/ticket/8128">#8128</a> : Italian;</li>

CKEditor/trunk/_source/plugins/dialog/plugin.js

@@ -2357 +2357 @@
                                 dialog.on( 'load', function()
                                         {
-                                                if ( me.getInputElement() )
+                                                var input = me.getInputElement();
+                                                if ( input )
                                                 {
-                                                        me.getInputElement().on( 'focus', function()
+                                                        var focusClass = me.type in { 'checkbox' : 1, 'ratio' : 1 } && CKEDITOR.env.ie && CKEDITOR.env.version < 8 ? 'cke_dialog_ui_focused' : '';
+                                                        input.on( 'focus', function()
                                                                 {
                                                                         dialog._.tabBarMode = false;
                                                                         dialog._.hasFocus = true;
                                                                         me.fire( 'focus' );
-                                                                }, me );
+                                                                        focusClass && this.addClass( focusClass );
+
+                                                                });
+
+                                                        input.on( 'blur', function()
+                                                                {
+                                                                        me.fire( 'blur' );
+                                                                        focusClass && this.removeClass( focusClass );
+                                                                });
                                                 }
                                         } );

CKEditor/trunk/_source/skins/kama/dialog.css

@@ -943 +943 @@
 }
 
+/* Compensate focus outline for some input elements. (#6200) */
+.cke_skin_kama .cke_browser_gecko .cke_dialog_ui_checkbox_input:focus,
+.cke_skin_kama .cke_browser_gecko .cke_dialog_ui_radio_input:focus,
+.cke_skin_kama .cke_browser_opera .cke_dialog_ui_checkbox_input:focus,
+.cke_skin_kama .cke_browser_opera .cke_dialog_ui_radio_input:focus,
+.cke_skin_kama .cke_browser_gecko .cke_dialog_ui_input_select:focus,
+.cke_skin_kama .cke_browser_gecko .cke_btn_over,
+.cke_skin_kama .cke_browser_opera .cke_btn_over,
+.cke_skin_kama .cke_browser_ie .cke_btn_over
+{
+        outline: 1px dotted #696969;
+}
+
+/* IE<8 instead doesn't support CSS outline property, emulated with dotted border. */
+
+/* Predefined border to avoid visual size change impact. */
+.cke_skin_kama .cke_browser_ie .cke_dialog_ui_checkbox_input,
+.cke_skin_kama .cke_browser_ie .cke_dialog_ui_ratio_input,
+.cke_skin_kama .cke_browser_ie .cke_btn_reset,
+.cke_skin_kama .cke_browser_ie .cke_btn_locked,
+.cke_skin_kama .cke_browser_ie .cke_btn_unlocked
+{
+        *border: 1px solid transparent !important;
+        /* Emulating border-color: transparent in IE6.*/
+        -filter: chroma(color=black);
+}
+
+.cke_skin_kama .cke_browser_ie .cke_dialog_ui_focused,
+.cke_skin_kama .cke_browser_ie .cke_btn_over
+{
+        *border: 1px dotted #696969 !important;
+}
+
 .cke_skin_kama .cke_iframe_shim
 {

CKEditor/trunk/_source/skins/office2003/dialog.css

@@ -844 +844 @@
 }
 
+/* Compensate focus outline for some input elements. (#6200) */
+.cke_skin_office2003 .cke_browser_gecko .cke_dialog_ui_checkbox_input:focus,
+.cke_skin_office2003 .cke_browser_gecko .cke_dialog_ui_radio_input:focus,
+.cke_skin_office2003 .cke_browser_opera .cke_dialog_ui_checkbox_input:focus,
+.cke_skin_office2003 .cke_browser_opera .cke_dialog_ui_radio_input:focus,
+.cke_skin_office2003 .cke_browser_gecko .cke_dialog_ui_input_select:focus,
+.cke_skin_office2003 .cke_browser_gecko .cke_btn_over,
+.cke_skin_office2003 .cke_browser_opera .cke_btn_over,
+.cke_skin_office2003 .cke_browser_ie .cke_btn_over
+{
+        outline: 1px dotted #696969;
+}
+
+/* IE<8 instead doesn't support CSS outline property, emulated with dotted border. */
+
+/* Predefined border to avoid visual size change impact. */
+.cke_skin_office2003 .cke_browser_ie .cke_dialog_ui_checkbox_input,
+.cke_skin_office2003 .cke_browser_ie .cke_dialog_ui_ratio_input,
+.cke_skin_office2003 .cke_browser_ie .cke_btn_reset,
+.cke_skin_office2003 .cke_browser_ie .cke_btn_locked,
+.cke_skin_office2003 .cke_browser_ie .cke_btn_unlocked
+{
+        *border: 1px solid transparent !important;
+        /* Emulating border-color: transparent in IE6.*/
+        -filter: chroma(color=black);
+}
+
+.cke_skin_office2003 .cke_browser_ie .cke_dialog_ui_focused,
+.cke_skin_office2003 .cke_browser_ie .cke_btn_over
+{
+        *border: 1px dotted #696969 !important;
+}
+
 .cke_skin_office2003 .cke_iframe_shim
 {

CKEditor/trunk/_source/skins/v2/dialog.css

@@ -861 +861 @@
 }
 
+/* Compensate focus outline for some input elements. (#6200) */
+.cke_skin_v2 .cke_browser_gecko .cke_dialog_ui_checkbox_input:focus,
+.cke_skin_v2 .cke_browser_gecko .cke_dialog_ui_radio_input:focus,
+.cke_skin_v2 .cke_browser_opera .cke_dialog_ui_checkbox_input:focus,
+.cke_skin_v2 .cke_browser_opera .cke_dialog_ui_radio_input:focus,
+.cke_skin_v2 .cke_browser_gecko .cke_dialog_ui_input_select:focus,
+.cke_skin_v2 .cke_browser_gecko .cke_btn_over,
+.cke_skin_v2 .cke_browser_opera .cke_btn_over,
+.cke_skin_v2 .cke_browser_ie .cke_btn_over
+{
+        outline: 1px dotted #696969;
+}
+
+/* IE<8 instead doesn't support CSS outline property, emulated with dotted border. */
+
+/* Predefined border to avoid visual size change impact. */
+.cke_skin_v2 .cke_browser_ie .cke_dialog_ui_checkbox_input,
+.cke_skin_v2 .cke_browser_ie .cke_dialog_ui_ratio_input,
+.cke_skin_v2 .cke_browser_ie .cke_btn_reset,
+.cke_skin_v2 .cke_browser_ie .cke_btn_locked,
+.cke_skin_v2 .cke_browser_ie .cke_btn_unlocked
+{
+        *border: 1px solid transparent !important;
+        /* Emulating border-color: transparent in IE6.*/
+        -filter: chroma(color=black);
+}
+
+.cke_skin_v2 .cke_browser_ie .cke_dialog_ui_focused,
+.cke_skin_v2 .cke_browser_ie .cke_btn_over
+{
+        *border: 1px dotted #696969 !important;
+}
+
 .cke_skin_v2 .cke_iframe_shim
 {