made face doc labels editable

2 files changed, 9 insertions, 1 deletions

diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss
index a72efc948..0a001d84c 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss
@@ -11,6 +11,12 @@
         color: white;
         font-size: 24px;
         text-align: center;
+        .face-document-name {
+            text-align: center;
+            background: transparent;
+            width: 80%;
+            border: transparent;
+        }
     }
 
     .face-collection-buttons {
diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
index 662436ddc..7e47292e5 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
@@ -149,7 +149,9 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     <IconButton tooltip="Delete Face From Collection" onPointerDown={this.deleteUniqueFace} icon={'x'} style={{ width: '4px' }} size={Size.XSMALL} />
                 </div>
                 <div className="face-document-top" ref={action((r: HTMLDivElement | null) => (this._headerRef = r))}>
-                    <h1 style={{ color: lightOrDark(StrCast(this.Document.backgroundColor)) }}>{FaceRecognitionHandler.UniqueFaceLabel(this.Document)}</h1>
+                    <h1 style={{ color: lightOrDark(StrCast(this.Document.backgroundColor)) }}>
+                        <input className="face-document-name" type="text" onChange={e => FaceRecognitionHandler.SetUniqueFaceLabel(this.Document, e.currentTarget.value)} value={FaceRecognitionHandler.UniqueFaceLabel(this.Document)} />
+                    </h1>
                 </div>
                 <div className="face-collection-toggle">
                     <IconButton