re-added FontIconBadge for SharingManager icon

3 files changed, 18 insertions, 3 deletions

diff --git a/src/client/views/nodes/button/FontIconBadge.scss b/src/client/views/nodes/button/FontIconBadge.scss
new file mode 100644
index 000000000..62b43ca92
--- /dev/null
+++ b/src/client/views/nodes/button/FontIconBadge.scss
@@ -0,0 +1,11 @@
+.fontIconBadge-container {
+    background: red;
+    width: 15px;
+    height: 15px;
+    top: 8px;
+    display: block;
+    position: absolute;
+    right: 5;
+    border-radius: 50%;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/FontIconBadge.tsx b/src/client/views/nodes/button/FontIconBadge.tsx
index 3e451eea6..cf86b5e07 100644
--- a/src/client/views/nodes/button/FontIconBadge.tsx
+++ b/src/client/views/nodes/button/FontIconBadge.tsx
@@ -1,9 +1,10 @@
 import { observer } from "mobx-react";
-import React from "react";
+import * as React from "react";
 import { AclPrivate, Doc, DocListCast } from "../../../../fields/Doc";
 import { GetEffectiveAcl } from "../../../../fields/util";
 import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../../Utils";
 import { DragManager } from "../../../util/DragManager";
+import "./FontIconBadge.scss";
 
 interface FontIconBadgeProps {
     collection: Doc | undefined;
@@ -26,7 +27,7 @@ export class FontIconBadge extends React.Component<FontIconBadgeProps> {
     render() {
         if (!(this.props.collection instanceof Doc)) return (null);
         const length = DocListCast(this.props.collection.data).filter(d => GetEffectiveAcl(d) !== AclPrivate).length; //  Object.keys(d).length).length; // filter out any documents that we can't read
-        return <div className="fontIconBadge-container" style={{ width: 15, height: 15, top: 12 }} ref={this._notifsRef}>
+        return <div className="fontIconBadge-container" ref={this._notifsRef}>
             <div className="fontIconBadge" style={length > 0 ? { "display": "initial" } : { "display": "none" }}
                 onPointerDown={this.onPointerDown} >
                 {length}
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index a6887cbba..37c34cf19 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -25,8 +25,9 @@ import { Colors } from '../../global/globalEnums';
 import { SetActiveInkColor } from '../../InkingStroke';
 import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '.././FieldView';
-import './FontIconBox.scss';
 import { RichTextMenu } from '../formattedText/RichTextMenu';
+import { FontIconBadge } from './FontIconBadge';
+import './FontIconBox.scss';
 const FontIconSchema = createSchema({
     icon: "string",
 });
@@ -176,6 +177,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                     <div className={`button`} onClick={action((e) => setValue(checkResult + 1))}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} />
                     </div>
+
                     {this.rootDoc.dropDownOpen ?
                         <div>
                             <div className="menuButton-dropdownList"
@@ -532,6 +534,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                     <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {menuLabel}
+                        <FontIconBadge collection={Cast(this.rootDoc.watchedDocuments, Doc, null)} />
                     </div >
                 );
                 break;