Community
Participate
Working Groups
Created attachment 199420 [details] Patches to allow text-shadow in theming css files As in http://www.eclipse.org/forums/index.php/t/217465/ described, it would be great to implement this functionality in RAP. Quote from the linked issue: " Unfortunately, the current RAP CSS styling does not supports text-shadow property. With text-shadow, it is possible to create appealing UI that reflects today's trends in UI design. Almost every modern rich Ajax application (or desktop application, not least in MacOS / IOS or GNOME) uses text-shadow to highlight lists, menus buttons or text titles. This feature we wanted have in our RAP-based applications. So I've adapted RAP 1.4 accordingly: as result, text-shadow for many RAP widgets is available now (see screenshots). " The attachment contains two files: projects_rwt_14_maintenance.patch -- patch for org.eclipse.rap.rwt and org.eclipse.rap.rwt.q07 for the RAP 1.4 Maintenance Branch project_rwt_cvshead.patch -- patch for org.eclipse.rap.rwt on cvshead boths are applicable to the state from 11.07.2011. The text-shadow has the same definition format as the box-shadow, but we use it in following form: ############### Examples ############### Button { background-color: transparent; color: #222222; padding: 4px 6px 4px 6px; font: bold 12px Helvetica, Arial, Tahoma, Verdana, sans-serif; } Button[PUSH], Button[TOGGLE], Button[FLAT] { background-color: transparent; border: 1px #bb905e; border-radius: 4px; background-image: gradient(linear, left top, left bottom, from(#ffffff), color-stop(30%, #f0f0f0), color-stop(60%, #e0e0e0), to(#f0f0f0)); text-shadow: 0 1px 0 #FFFFFF; } Shell-Titlebar { font: bold 12px Helvetica, Arial, Tahoma, Verdana, sans-serif; color: #f9f9f9; text-shadow: 0 1px 0 #222222; background-color: #545454; background-gradient-color: #e5fecb; background-image: none; padding: 10px 10px 10px 10px; spacing: 10px; height: 35px; border-radius: 6px 6px 0px 0px; } Shell-Titlebar:inactive { color: #353535; text-shadow: 0 1px 0 #c9c9c9; background-color: #777777; background-gradient-color: #e5fecb; } List-Item { text-shadow: none; } List-Item:selected, List-Item:hover { color: white; background-color: #dadada; text-shadow: 0 2px 1px #554400; background-image: gradient(linear, left top, left bottom, from(#a7a7a7), to(#686868)); } ############################## End examples ############################## I have testet it in different Browsers: Firefox (3.5+, Chrome 13+, IE6-8). In IE the shadow is simply not dispayed, in other browsers it works well. Do we have any chances to have text-shadows in RAP 1.4 in future support releases? Best regards, Nikolai
Hi Nikolai, thanks for the patch. Unfortunately, it's not possible to include these changes in 1.4 maintenance release, as this is a big new feature/enhancement, not a bugfix. To my knowledge, even IE9 (not only IE6-8) lacks of support for text-shadow CSS3 property.
I've tested it on Sfari 5 and Opera 11.5 on Windows... works fine. Firefox 3.0 does not support text-shadow property. IE9 and IE10 preview don't support it either. I've managed to enable text-shadow in the text field itself ( including Text single/multi/message, Combo, CCombo, Spinner ). Currently only Opera does not support text-shadow in HTML input/textarea elements.
Created attachment 199643 [details] Text-Shadows in IE Hi Ivan, it's possible to use MS proprietary filter "dropshadow" [1] to make text-shadows in IE. But... it's makes the entire theme broken and it makes the rap very slow in browser (only IE, tested in IE 8): ###################### Code HtmlUtil.js: ###################### setTextShadow: function( target, shadowObject ) { var property; if( org.eclipse.rwt.Client.isMshtml() ) { property = "filter"; } else { property = "textShadow"; } if( shadowObject ) { var string; if(property === "filter") { offX = shadowObject[ 1 ]; offY = shadowObject[ 2 ]; color = shadowObject[ 5 ]; string = "dropshadow(color=" + color + ",offX=" + offX + ",offY=" + offY + ");"; } else { // NOTE: older webkit dont accept spread, therefor only use parameters 1-3 string = shadowObject.slice( 1, 4 ).join( "px " ) + "px"; var rgba = qx.util.ColorUtil.stringToRgb( shadowObject[ 5 ] ); rgba.push( shadowObject[ 6 ] ); string += " rgba(" + rgba.join() + ")"; } this.setStyleProperty( target, property, string ); } else { this.removeStyleProperty( target, property ); } }, ###################### End Code HtmlUtil.js: ###################### [1]: http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx
(In reply to comment #3) Yes... I found this link too and my fear for slow IE in this case is confirmed by you. Here is an example of thin library that utilize the filter property for text-shadows in IE - http://fetchak.com/ie-css3/.
(In reply to comment #4) thanks for the link, Ivan!
Hi Nikolai, when I run the dark theme I have some CSSException in the console: org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-unselected.png org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-unselected-hover.png org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-selected.png org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-selected-hover.png org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-grayed.png org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-grayed-hover.png org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/sort-indicator-up.png org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/sort-indicator-down.png There is a segment "/fancy/" and maybe some image are missing. Could you fix it please. Thanks.
Hi Ivan, sorry, that was my fault (that's slipped through my fingers:): just remove all this backgrounds and run build_css.xml again in theme-bundle. The backgrounds from RAP-Fancy-Design are not used. --- less/phirea-theme.less.css (revision 1333) +++ less/phirea-theme.less.css (working copy) @@ -650,35 +650,6 @@ Table-Checkbox { width: 21px; - background-image: url( /theme1/fancy/icons/check-unselected.png ); -} - -Table-Checkbox:hover { - background-image: url( /theme1/fancy/icons/check-unselected-hover.png ); -} - -Table-Checkbox:checked { - background-image: url( /theme1/fancy/icons/check-selected.png ); -} - -Table-Checkbox:checked:hover { - background-image: url( /theme1/fancy/icons/check-selected-hover.png ); -} - -Table-Checkbox:checked:grayed { - background-image: url( /theme1/fancy/icons/check-grayed.png ); -} - -Table-Checkbox:checked:grayed:hover { - background-image: url( /theme1/fancy/icons/check-grayed-hover.png ); -} - -TableColumn-SortIndicator:up { - background-image: url( /theme1/fancy/icons/sort-indicator-up.png ); -} - -TableColumn-SortIndicator:down { - background-image: url( /theme1/fancy/icons/sort-indicator-down.png ); }
CSS3 text-shadow support has been added to all widgets that contain text. Support for Internet Explorer is *not* implemented due to bad performance when using filter property and lack of support for CSS3 text-shadow - see comment #3. Changes are in CVS.
