fixed tooltips on color/dropdown buttons. removed fill color button from ink tools - use the main fill button now (when in an ink mode)

2 files changed, 20 insertions, 7 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ca23e8f53..d43419933 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -661,9 +661,8 @@ export class CurrentUserUtils {
             { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square",     toolType:GestureUtils.Gestures.Rectangle,   scripts: {onClick:`{ return setActiveTool(self.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(self.toolType, true, _readOnly_);}`} },
             { title: "Line",   toolTip: "Line (double tap to lock mode)",   btnType: ButtonType.ToggleButton, icon: "minus",      toolType:GestureUtils.Gestures.Line,        scripts: {onClick:`{ return setActiveTool(self.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(self.toolType, true, _readOnly_);}`} },
             { title: "Mask",   toolTip: "Mask",                             btnType: ButtonType.ToggleButton, icon: "user-circle",toolType: "inkMask",                        scripts: {onClick:'{ return setInkProperty(self.toolType, value, _readOnly_);}'} },
-            { title: "Fill",   toolTip: "Fill color",                       btnType: ButtonType.ColorButton,  icon: "fill-drip",  toolType: "fillColor",   ignoreClick: true, scripts: {script: '{ return setInkProperty(self.toolType, value, _readOnly_);}'} },
             { title: "Width",  toolTip: "Stroke width",                     btnType: ButtonType.NumberButton,                     toolType: "strokeWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(self.toolType, value, _readOnly_);}'}, numBtnType: NumButtonType.Slider, numBtnMin: 1},
-            { title: "Color",  toolTip: "Stroke color",                     btnType: ButtonType.ColorButton,  icon: "pen",        toolType: "strokeColor", ignoreClick: true, scripts: {script: '{ return setInkProperty(self.toolType, value, _readOnly_);}'} },
+            { title: "Ink",    toolTip: "Stroke color",                     btnType: ButtonType.ColorButton,  icon: "pen",        toolType: "strokeColor", ignoreClick: true, scripts: {script: '{ return setInkProperty(self.toolType, value, _readOnly_);}'} },
         ];
     }
 
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 4f570b5fc..f04678d8b 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -62,6 +62,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(FontIconBox, fieldKey);
     }
+    @observable noTooltip = false;
     showTemplate = (): void => {
         const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null);
         dragFactory && this.props.addDocTab(dragFactory, OpenWhere.addRight);
@@ -166,6 +167,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                     onPointerDown={e => e.stopPropagation()}
                     onClick={action(() => {
                         this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
+                        this.noTooltip = this.rootDoc.dropDownOpen;
                         Doc.UnBrushAllDocs();
                     })}>
                     {checkResult}
@@ -206,6 +208,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                         }}
                         onClick={action(() => {
                             this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
+                            this.noTooltip = this.rootDoc.dropDownOpen;
                             Doc.UnBrushAllDocs();
                         })}>
                         <input style={{ width: 30 }} className="button-input" type="number" value={checkResult} onChange={undoBatch(action(e => setValue(Number(e.target.value))))} />
@@ -224,6 +227,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                                 onClick={e => {
                                     e.stopPropagation();
                                     this.rootDoc.dropDownOpen = false;
+                                    this.noTooltip = false;
                                     Doc.UnBrushAllDocs();
                                 }}
                             />
@@ -249,6 +253,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                 onClick={action(() => {
                     this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
+                    this.noTooltip = this.rootDoc.dropDownOpen;
                     Doc.UnBrushAllDocs();
                 })}>
                 {this.Icon(color)}
@@ -333,6 +338,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                     dropdown
                         ? () => {
                               this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
+                              this.noTooltip = this.rootDoc.dropDownOpen;
                               Doc.UnBrushAllDocs();
                           }
                         : undefined
@@ -355,6 +361,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                             onClick={e => {
                                 e.stopPropagation();
                                 this.rootDoc.dropDownOpen = false;
+                                this.noTooltip = false;
                                 Doc.UnBrushAllDocs();
                             }}
                         />
@@ -400,6 +407,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                 onClick={action(e => {
                     this.colorPickerClosed = !this.colorPickerClosed;
+                    this.noTooltip = !this.colorPickerClosed;
                     setTimeout(() => Doc.UnBrushAllDocs());
                     e.stopPropagation();
                 })}
@@ -419,6 +427,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                                 e.preventDefault();
                                 e.stopPropagation();
                                 this.colorPickerClosed = true;
+                                this.noTooltip = false;
                                 Doc.UnBrushAllDocs();
                             })}
                         />
@@ -516,10 +525,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
 
         // prettier-ignore
         switch (this.type) {
-            case ButtonType.DropdownList: return this.dropdownListButton;
-            case ButtonType.ColorButton: return this.colorButton; 
-            case ButtonType.NumberButton: return this.numberButton; 
             case ButtonType.EditableText: return this.editableText;
+            case ButtonType.DropdownList: button = this.dropdownListButton; break;
+            case ButtonType.ColorButton: button = this.colorButton; break;
+            case ButtonType.NumberButton: button = this.numberButton; break;
             case ButtonType.DropdownButton: button = this.dropdownButton; break;
             case ButtonType.ToggleButton: button = this.toggleButton; break;
             case ButtonType.TextButton: 
@@ -552,7 +561,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 break;
         }
 
-        return !this.layoutDoc.toolTip ? button : <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>{button}</Tooltip>;
+        return !this.layoutDoc.toolTip || this.noTooltip ? button : <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>{button}</Tooltip>;
     }
 }
 
@@ -565,7 +574,12 @@ ScriptingGlobals.add(function setView(view: string) {
 // toggle: Set overlay status of selected document
 ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: boolean) {
     const selectedViews = SelectionManager.Views();
-    if (selectedViews.length) {
+    if (Doc.ActiveTool !== InkTool.None) {
+        if (checkResult) {
+            return ActiveFillColor();
+        }
+        SetActiveFillColor(color ?? 'transparent');
+    } else if (selectedViews.length) {
         if (checkResult) {
             const selView = selectedViews.lastElement();
             const layoutFrameNumber = Cast(selView.props.docViewPath().lastElement()?.rootDoc?._currentFrame, 'number'); // frame number that container is at which determines layout frame values