feat: ui changes

1 files changed, 49 insertions, 11 deletions

diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
index 1c0035f0d..83ae69cfb 100644
--- a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
@@ -12,6 +12,11 @@ import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
 import './ImageLabelBox.scss';
 import { MainView } from '../../MainView';
 import { MarqueeView } from './MarqueeView';
+import 'ldrs/ring';
+import { ring } from 'ldrs';
+import { SnappingManager } from '../../../util/SnappingManager';
+import { ImageCast } from '../../../../fields/Types';
+import { DocData } from '../../../../fields/DocSymbols';
 
 @observer
 export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -24,12 +29,14 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable _loading: boolean = true;
     @observable _currentLabel: string = '';
     @observable _labelGroups: string[] = [];
+    @observable _selectedImages: Doc[] = [];
+    @observable _displayImageInformation: boolean = false;
 
     constructor(props: any) {
         super(props);
         makeObservable(this);
         ImageLabelBox.Instance = this;
-
+        ring.register();
         console.log('Image Box Has Been Initialized');
     }
 
@@ -77,14 +84,32 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this._loading = false;
     };
 
+    @action
+    setSelectedImages = (selected: Doc[]) => {
+        this._selectedImages = selected;
+    };
+
     render() {
         if (this._loading) {
-            return <div className="searchBox-container">Loading...</div>;
+            return (
+                <div className="image-box-container" style={{ pointerEvents: 'all', color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}>
+                    <l-ring size="60" color="white" />
+                </div>
+            );
         }
 
         return (
-            <div className="searchBox-container">
-                <div className="searchBox-bar">
+            <div className="searchBox-container" style={{ pointerEvents: 'all', color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}>
+                <div className="searchBox-bar" style={{ pointerEvents: 'all', color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}>
+                    <IconButton
+                        tooltip={'See image information'}
+                        onPointerDown={() => {
+                            this._displayImageInformation = !this._displayImageInformation;
+                        }}
+                        icon={this._displayImageInformation ? <FontAwesomeIcon icon="caret-up" /> : <FontAwesomeIcon icon="caret-down" />}
+                        color={MarqueeOptionsMenu.Instance.userColor}
+                        style={{ width: '19px' }}
+                    />
                     <input
                         defaultValue=""
                         autoComplete="off"
@@ -93,7 +118,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         //     e.stopPropagation();
                         // }}
                         type="text"
-                        placeholder="Input a group to put images into..."
+                        placeholder="Input labels for image groupings..."
                         aria-label="label-input"
                         id="new-label"
                         className="searchBox-input"
@@ -101,7 +126,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         ref={this._inputRef}
                     />
                     <IconButton
-                        tooltip={'Add group'}
+                        tooltip={'Add a label'}
                         onPointerDown={() => {
                             const input = document.getElementById('new-label') as HTMLInputElement;
                             const newLabel = input.value;
@@ -113,11 +138,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         color={MarqueeOptionsMenu.Instance.userColor}
                         style={{ width: '19px' }}
                     />
-                    {this._labelGroups.length > 0 ? (
-                        <IconButton tooltip={'Group Images'} onPointerDown={this.groupImages} icon={<FontAwesomeIcon icon="object-group" />} color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} />
-                    ) : (
-                        <div></div>
-                    )}
+                    {this._labelGroups.length > 0 ? <IconButton tooltip={'Group Images'} onPointerDown={this.groupImages} icon={<FontAwesomeIcon icon="object-group" />} color={Colors.MEDIUM_BLUE} style={{ width: '19px' }} /> : <div></div>}
                 </div>
                 <div>
                     <div className="image-label-list">
@@ -139,6 +160,23 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         })}
                     </div>
                 </div>
+                {this._displayImageInformation ? (
+                    <div className="image-information">
+                        {this._selectedImages.map(doc => {
+                            const [name, type] = ImageCast(doc[Doc.LayoutFieldKey(doc)]).url.href.split('.');
+                            return (
+                                <div>
+                                    <img src={`${name}_o.${type}`}></img>
+                                    {(doc[DocData].data_labels as string).split('\n').map(label => {
+                                        return <div className="image-label">{label}</div>;
+                                    })}
+                                </div>
+                            );
+                        })}
+                    </div>
+                ) : (
+                    <div></div>
+                )}
             </div>
         );
     }