clean up comparison box

1 files changed, 60 insertions, 7 deletions

diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index d33d12603..daf8e3300 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -1,10 +1,10 @@
 import { Property } from 'csstype';
-import { action, computed, makeObservable, trace } from 'mobx';
+import { action, computed, makeObservable, observable, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as textfit from 'textfit';
 import { Field, FieldType } from '../../../fields/Doc';
-import { BoolCast, NumCast, StrCast } from '../../../fields/Types';
+import { BoolCast, NumCast, StrCast, RTFCast } from '../../../fields/Types';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
@@ -12,6 +12,10 @@ import { ViewBoxBaseComponent } from '../DocComponent';
 import { PinDocView, PinProps } from '../PinFuncs';
 import { StyleProp } from '../StyleProp';
 import { FieldView, FieldViewProps } from './FieldView';
+import { Tooltip } from '@mui/material';
+import { emptyFunction } from '../../../Utils';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { returnFalse, setupMoveUpEvents } from '../../../ClientUtils';
 import './LabelBox.scss';
 
 @observer
@@ -21,6 +25,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     private dropDisposer?: DragManager.DragDropDisposer;
     private _timeout: NodeJS.Timeout | undefined;
+    @observable private _editLabel = false;
     _divRef: HTMLDivElement | null = null;
 
     constructor(props: FieldViewProps) {
@@ -43,6 +48,48 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) as string;
     }
 
+    @computed get answerIcon() {
+        return (
+            <Tooltip
+                title={
+                    <div className="answer-tooltip" style={{ minWidth: '150px' }}>
+                        {StrCast(this.Document.quiz)}
+                    </div>
+                }>
+                <div className="answer-tool-tip">
+                    <FontAwesomeIcon className="q-icon" icon="circle" color="white" />
+                    <FontAwesomeIcon className="answer-icon" icon="question" />
+                </div>
+            </Tooltip>
+        );
+    }
+
+    @computed get editAnswer() {
+        return (
+            <Tooltip
+                title={
+                    <div className="answer-tooltip" style={{ minWidth: '150px' }}>
+                        {this._editLabel ? 'save' : 'edit correct answer'}
+                    </div>
+                }>
+                <div className="answer-tool-tip" onPointerDown={e => setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, () => this.editLabelAnswer())}>
+                    <FontAwesomeIcon className="edit-icon" color={this._editLabel ? 'white' : 'black'} icon="pencil" size="sm" />
+                </div>
+            </Tooltip>
+        );
+    }
+
+    editLabelAnswer = () => {
+        // when click the pencil, set the text to the quiz content. when click off, set the quiz text to that and set textbox to nothing.
+        if (!this._editLabel) {
+            this.dataDoc.title = StrCast(this.Document.quiz);
+        } else {
+            this.Document.quiz = this.Title;
+            this.dataDoc.title = '';
+        }
+        this._editLabel = !this._editLabel;
+    };
+
     componentDidMount() {
         this._props.setContentViewBox?.(this);
     }
@@ -121,7 +168,11 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         width: this._props.PanelWidth(),
                         height: this._props.PanelHeight(),
                         whiteSpace: 'multiLine' in boxParams && boxParams.multiLine ? 'pre-wrap' : 'pre',
-                    }}>
+                    }}
+                    // onMouseLeave={() => {
+                    //     this.hoverFlip(undefined);
+                    // }}
+                >
                     <div
                         style={{
                             width: this._props.PanelWidth() - 2 * NumCast(this.layoutDoc._xPadding),
@@ -133,10 +184,10 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         })}
                         onKeyUp={action(e => {
                             e.stopPropagation();
-                            if (e.key === 'Enter') {
-                                this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? '';
-                                setTimeout(() => this._props.select(false));
-                            }
+                            // if (e.key === 'Enter') {
+                            this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? '';
+                            setTimeout(() => this._props.select(false));
+                            // }
                         })}
                         onBlur={() => {
                             this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? '';
@@ -157,6 +208,8 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         {label}
                     </div>
                 </div>
+                {this.Document.showQuiz ? this.answerIcon : null}
+                {this.Document.showQuiz ? this.editAnswer : null}
             </div>
         );
     }