Make help tooltips more obvious
authorRichard Fairhurst <richard@systemeD.net>
Wed, 22 Aug 2012 13:24:22 +0000 (14:24 +0100)
committerRichard Fairhurst <richard@systemeD.net>
Wed, 22 Aug 2012 13:24:22 +0000 (14:24 +0100)
net/systemeD/potlatch2/mapfeatures/editors/CheckboxEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/ChoiceEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/FreeTextEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/NumberEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/SingleTagEditor.as
net/systemeD/potlatch2/mapfeatures/editors/SliderEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/SpeedEditor.mxml
net/systemeD/potlatch2/skins/CustomFormItemSkin.mxml
styles/Application.css

index 03cbe19e2a552fe6790242a9a8d2fc6caeafc193..6ff06d7ab889c32132aec2ddb6c5e26054603868 100644 (file)
@@ -6,7 +6,7 @@
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        xmlns:flexlib="flexlib.controls.*"
        width="100%"
-       toolTip="{fieldDescription}"
+       helpContent="{fieldDescription ? help : null}" 
        label="{fieldName}:">
 
     <mx:CheckBox id="inputBox" creationComplete="initCheckbox()"
index 4bfe220bdae420312986f7f071d2ea98e7336133..d9b3bddbf14b30709c8d188419f266e039800431 100644 (file)
@@ -4,7 +4,7 @@
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
-       toolTip="{fieldDescription}"
+       helpContent="{fieldDescription ? help : null}" 
        label="{fieldName}:"
     styleName="titledEditor">
 
index 74ae6959a59ef3912dfa65e662377248f9151096..375acd868ed2f989a5ebde4687a9f7e0c3ecfec2 100644 (file)
@@ -7,12 +7,13 @@
        xmlns:flexlib="flexlib.controls.*"
        xmlns:controls="net.systemeD.controls.*"
        width="100%"
-       toolTip="{fieldDescription}"
+       helpContent="{fieldDescription ? help : null}" 
     styleName="titledEditor" label="{fieldName}:">
 
     <controls:PromptingTextInputWarning id="inputBox" prompt="{prompt}" text="{value}" width="100%"
       focusOut="value = inputBox.text" enter="value = inputBox.text; focusManager.getNextFocusManagerComponent().setFocus();"
       restrict="&#x0020;-&#x10FFFF;" />
+
   <fx:Script><![CDATA[
       [Bindable(event="factory_set")]
       protected function get prompt():String {
index 7d8261493b26ce71f6e1555528a13224982200da..31f87c981fb2dab95b08dbb15d08762b58e5ed9d 100644 (file)
@@ -6,7 +6,7 @@
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        xmlns:flexlib="flexlib.controls.*"
        width="100%"
-       toolTip="{fieldDescription}"
+       helpContent="{fieldDescription ? help : null}" 
        label="{fieldName}:"
     styleName="titledEditor">
 
index 60df3b8ec1acd6e56f7516eb6adcdf0982dae4a0..63b11a716eee9aaad9a268d837f68ef28219844d 100644 (file)
@@ -51,6 +51,34 @@ package net.systemeD.potlatch2.mapfeatures.editors {
           dispatchEvent(new Event("tag_changed"));
       }
 
+               [Embed(source="../../../../../embedded/help.png")] private var infoIcon:Class;
+
+               import spark.components.*;
+               import mx.managers.ToolTipManager;
+               import mx.controls.ToolTip;
+               import mx.core.IUIComponent;
+               import flash.geom.Point;
+               private var _tip:ToolTip;
+
+               [Bindable(event="factory_set")]
+               protected function get help():Image {
+                       var image:Image = new Image();
+                       image.source = infoIcon;
+                       image.width = 16;
+                       image.height = 16;
+                       image.addEventListener("mouseOver",showHelpBalloon,false,0,true);
+                       image.addEventListener("mouseOut" ,hideHelpBalloon,false,0,true);
+                       return image;
+               }
+
+               private function showHelpBalloon(e:Event):void {
+                       var point:Point=e.target.contentToGlobal(new Point(-8,16));
+                       _tip=ToolTipManager.createToolTip(fieldDescription,point.x,point.y,"errorTipBelow",IUIComponent(e.target)) as ToolTip;
+               }
+               private function hideHelpBalloon(e:Event):void {
+                       ToolTipManager.destroyToolTip(_tip);
+               }
+
     }
 
 }
index ba17e6a8ab1fd8f7ef6d2d1428beefde81045568..85419446ebf4c559e5c497d31ea656cbace64a71 100644 (file)
@@ -6,7 +6,7 @@
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        xmlns:flexlib="flexlib.controls.*"
        width="100%"
-       toolTip="{fieldDescription}"
+       helpContent="{fieldDescription ? help : null}" 
        label="{fieldName}:"
        styleName="titledEditor">
 
index 39450d6ae6711e845bfcaa0bb3f86ae8579508ce..ae4b84acfb161f2527f8f18f337daaca035d3ec5 100644 (file)
@@ -3,7 +3,7 @@
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
-       toolTip="{fieldDescription}"
+       helpContent="{fieldDescription ? help : null}" 
        label="{fieldName}:"
     styleName="titledEditor">
 
index f03923e84c1108465e3816a468306a32954c32fc..951a902240c2ac05ee83318c0aa78c8136b96903 100644 (file)
@@ -126,7 +126,7 @@ Move the indicator tooltip string to a resource bundle
              bottom="row1:0" baseline="row1:0"/>
     <!--- @copy spark.components.FormItem#labelDisplay -->
     <s:Label id="labelDisplay"
-             fontWeight="bold"
+             maxWidth="75"
              left="labelCol:0" right="labelCol:5" 
              bottom="row1:0" baseline="row1:0"/>  
     <!--- @copy spark.components.SkinnableContainer#contentGroup -->
index f5a6a7e86c4a1f8d545ce7be9511fad3f7656338..4a37a8457a5e9b6892cc66e7fb24f3487a839186 100644 (file)
@@ -282,6 +282,12 @@ s|FormItem {
        closedIcon: Embed(source="../embedded/CollapsiblePanelAssets.swf", symbol="CollapseButtonOver");
 }
 
+/* Tag tooltips */
+
+.errorTip {
+    borderColor: #2929CE;
+}
+
 /* Toolbox */
 
 .theToolBox {