moved all quiz code out of LabelBox and ImageBox and into StyleProviderQuiz. changed quizBoxes and quizMode to be stored as Doc metadata. Extended styles to cover contextMenuItems. remove this.setListening() from comparisonBox until contextMenu selectedVal is fixed.

1 files changed, 1 insertions, 51 deletions

diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 058932457..07c0a114a 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -1,12 +1,8 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@mui/material';
 import { Property } from 'csstype';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as textfit from 'textfit';
-import { returnFalse, setupMoveUpEvents } from '../../../ClientUtils';
-import { emptyFunction } from '../../../Utils';
 import { Field, FieldType } from '../../../fields/Doc';
 import { BoolCast, NumCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
@@ -49,48 +45,6 @@ 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);
     }
@@ -98,8 +52,6 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this._timeout && clearTimeout(this._timeout);
     }
 
-    specificContextMenu = (): void => {};
-
     drop = (/* e: Event, de: DragManager.DropEvent */) => {
         return false;
     };
@@ -152,7 +104,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const boxParams = this.fitTextToBox(undefined); // this causes mobx to trigger re-render when data changes
         const label = this.Title.startsWith('#') ? null : this.Title;
         return (
-            <div key={label?.length} className="labelBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu} style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) as string }}>
+            <div key={label?.length} className="labelBox-outerDiv" ref={this.createDropTarget} style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) as string }}>
                 <div
                     className="labelBox-mainButton"
                     style={{
@@ -203,8 +155,6 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         {label}
                     </div>
                 </div>
-                {this.Document.showQuiz ? this.answerIcon : null}
-                {this.Document.showQuiz ? this.editAnswer : null}
             </div>
         );
     }