Index: runtime/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/TooltipSkin.fx =================================================================== --- runtime/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/TooltipSkin.fx (revision 5722:b04757ac657f) +++ runtime/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/TooltipSkin.fx (revision 5722+:b04757ac657f+) @@ -17,7 +17,6 @@ import com.sun.javafx.scene.CSSFlags; import javafx.scene.control.Tooltip; import com.sun.javafx.scene.control.behavior.TooltipBehavior; - import com.sun.javafx.scene.layout.Region; @@ -33,9 +32,7 @@ var currentTooltip:Tooltip; /** Popup used to show the tooltip */ -var tipWindow:Popup = Popup { -// id: "tipWindow" -} +var tipWindow:Popup = Popup {} /** * Timer durations @@ -124,18 +121,10 @@ /** */ public class TooltipSkin extends PopupControlSkin { - var tipLabel:Label; - override var behavior = TooltipBehavior { } override var popup = tipWindow; override var showing = bind tooltip.showing; - override var popupContent = SkinBase { - control: bind control - content: tipLabel = LabeledImpl { - opacity: bind tipOpacity - labeled: bind control as Tooltip - } - } + override var popupContent = TooltipContent { control: bind control }; var tooltip = bind control as Tooltip; @@ -221,4 +210,28 @@ tooltipNode.onMousePressed = null; } } -} \ No newline at end of file +} + +class TooltipContent extends SkinBase { + var tipLabel:Label; + var pageCorner:Region; + /** liked to controls effect here as control is just a placeholder for popup controls, so need to apply effect here */ + override var effect = bind control.effect; + + override var content = [ + tipLabel = LabeledImpl { + opacity: bind tipOpacity + labeled: bind control as Tooltip + } + pageCorner = Region { + styleClass: "page-corner" + } + ]; + + override function doLayout() { + layoutNode(tipLabel,padding.left, padding.top, width-padding.left-padding.right, height-padding.top-padding.bottom); + var pw = pageCorner.getPrefWidth(-1); + var ph = pageCorner.getPrefHeight(-1); + layoutNode(pageCorner, width-pw, height-ph, pw, ph); + } +} \ No newline at end of file Index: runtime/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/caspian/caspian.css =================================================================== --- runtime/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/caspian/caspian.css (revision 5722:b04757ac657f) +++ runtime/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/caspian/caspian.css (revision 5722+:b04757ac657f+) @@ -32,7 +32,7 @@ pressed-base: derive(base,-20%); /* These are the basic palette of colors used in control skins */ - box-border: ladder base stops (0.2,black) (0.3,derive(color,-30%)); + box-border: ladder color stops (0.2,black) (0.3,derive(color,-30%)); /* These are the basic palette of colors used in control skins */ text-box-border: ladder background stops (0.1,black) (0.3,derive(background,-15%)); @@ -192,7 +192,7 @@ .radio-button *.radio { /* background terms are: shadow-highlight, border, inner-border, body */ - padding: 4.5 4 4.5 4; + padding: 4; background-color: shadow-highlight-color, outer-border, inner-border, body-color; background-radius: 14, 14, 12, 10; background-insets: 0 0 -1 0, 0, 1, 2; @@ -215,13 +215,15 @@ background-radius: 10; background-color: transparent; background-insets: 0; - padding: 3 3 3 3; + background-radius: 3; + padding: 3; } .radio-button:selected *.dot { background-radius: 10, 8; background-color: mark-highlight-color, mark-color; background-insets: 0 0 -1 0, 0; + background-radius: 3, 3; } /******************************************************************************* @@ -341,6 +343,7 @@ derive(color,-40%), derive(color,100%), linear (0%,0%) to (0%,100%) stops (0%,derive(color,100%)) (12%,derive(color,50%)) (88%,derive(color,65%)) (100%,derive(color,23%)); + effect: dropshadow( two-pass-box , rgba(0,0,0,0.4) , 15, 0.0 , 0 , 6 ); } .menu-item { @@ -358,12 +361,14 @@ padding: 8 5 0 5; background-color: derive(color,-2%); shape: "M0 1 L1 1 L.5 0 Z"; + effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 ); } .menu-down-arrow { padding: 8 5 0 5; background-color: derive(color,-2%); shape: "M0 0 L1 0 L.5 1 Z"; + effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 ); } .menu-item-check { @@ -542,22 +547,22 @@ .scroll-bar:horizontal { background-color: box-border, - linear (0%,0%) to (0%,100%) stops (5%, derive(base,30%)) (100%, derive(base,-17%)); + linear (0%,0%) to (0%,100%) stops (5%, derive(color,30%)) (100%, derive(color,-17%)); background-insets: 0, 1; } .scroll-bar:vertical { background-color: box-border, - linear (0%,0%) to (100%,0%) stops (5%, derive(base,30%)) (100%, derive(base,-17%)); + linear (0%,0%) to (100%,0%) stops (5%, derive(color,30%)) (100%, derive(color,-17%)); background-insets: 0, 1; } .scroll-bar:horizontal *.thumb { background-color: box-border, - linear (0%,0%) to (0%,100%) stops (0%, derive(base,95%)) (100%, derive(base,10%)), - linear (0%,0%) to (0%,100%) stops (0%, derive(base,38%)) (100%, derive(base,-16%)); + linear (0%,0%) to (0%,100%) stops (0%, derive(color,95%)) (100%, derive(color,10%)), + linear (0%,0%) to (0%,100%) stops (0%, derive(color,38%)) (100%, derive(color,-16%)); background-radius: 6, 5, 4; background-insets: 0, 1, 2; } @@ -565,15 +570,15 @@ .scroll-bar:vertical *.thumb { background-color: box-border, - linear (0%,0%) to (100%,0%) stops (0%, derive(base,95%)) (100%, derive(base,10%)), - linear (0%,0%) to (100%,0%) stops (0%, derive(base,38%)) (100%, derive(base,-16%)); + linear (0%,0%) to (100%,0%) stops (0%, derive(color,95%)) (100%, derive(color,10%)), + linear (0%,0%) to (100%,0%) stops (0%, derive(color,38%)) (100%, derive(color,-16%)); background-radius: 6, 5, 4; background-insets: 0, 1, 2; } .scroll-bar:horizontal *.track { background-color: box-border, - linear (0%,0%) to (0%,100%) stops (0%, derive(base,-15%)) (20%, derive(base,2.2%)) (100%, derive(base,60%)); + linear (0%,0%) to (0%,100%) stops (0%, derive(color,-15%)) (20%, derive(color,2.2%)) (100%, derive(color,60%)); background-radius: 6, 5; background-insets: 0, 1; } @@ -581,7 +586,7 @@ .scroll-bar:vertical *.track { background-color: box-border, - linear (0%,0%) to (100%,0%) stops (0%, derive(base,-15%)) (20%, derive(base,2.2%)) (100%, derive(base,60%)); + linear (0%,0%) to (100%,0%) stops (0%, derive(color,-15%)) (20%, derive(color,2.2%)) (100%, derive(color,60%)); background-radius: 6, 5; background-insets: 0, 1; } @@ -742,23 +747,30 @@ background-insets: -0.4, 1, 2; } -.text-box:multiline { - background-color: box-border, control-inner-background; - background-insets: 0, 1; - background-radius: 0, 0; -} - -.text-box:multiline:focused { - background-color: focus-color, box-border, control-inner-background; - background-insets: -1.4, 0, 1; - background-radius: 0, 0, 0; -} - +/* OPTION 1 Look like single line TextBox with special scrollbar */ .text-box *.scroll-bar{ background-insets: 0, 0 0 0 1; - padding: -1 -1 -1 0; + padding: 0 -1 0 0; + box-border: derive(base, -10%); + background-radius: 0 2 0 0, 0 2 0 0; } +/* OPTION 2 - look like ScrollView and ListView - 3 styles below */ +/*.text-box:multiline {*/ + /*background-color: box-border, control-inner-background;*/ + /*background-insets: 0, 1;*/ + /*background-radius: 0, 0;*/ +/*}*/ +/*.text-box:multiline:focused {*/ + /*background-color: focus-color, box-border, control-inner-background;*/ + /*background-insets: -1.4, 0, 1;*/ + /*background-radius: 0, 0, 0;*/ +/*}*/ +/*.text-box *.scroll-bar{*/ + /*background-insets: 0, 0 0 0 1;*/ + /*padding: -1 -1 -1 0;*/ +/*}*/ + /******************************************************************************* * * * CSS Styles for the PasswordBox control * @@ -1041,17 +1053,22 @@ .tooltip { background-color: - linear (0%,0%) to (100%,100%) stops (48%, #000000) (48%, #000000), linear (0%,0%) to (0%,100%) stops (0%, #cec340) (100%, #a59c31), - linear (0%,0%) to (0%,100%) stops (0%, white) (100%, #f0e88d), - linear (0%,0%) to (0%,100%) stops (0%, #fef694) (100%, #e5d848); - background-radius: 0 0 0 0; - background-insets: 0 0 -1 0, 0 0 0 0, 1 1 1 1, 2 2 2 2; + linear (0%,0%) to (0%,100%) stops (0%, #fefefc) (100%, #e6dd71), + linear (0%,0%) to (0%,100%) stops (0%, #fef592) (100%, #e5d848); + background-insets: 0,1,2; + background-radius: 0 0 13 0; padding: 4 8 4 8; - /* font:"Amble-Condensed" 12pt; */ - text-fill: #3F3F3F; + effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 ); } +.page-corner { + padding: 4.5; + background-color: linear (0%,0%) to (50%,50%) stops (0%, #fcf7b6) (100%, #a59c31); + shape: "M0,0H9L0,9Z"; + effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 4 , 0.0 , 0 , 0 ); +} + /******************************************************************************* * * * CSS Styles for the Toolbar control *