diff options
Diffstat (limited to 'src/client/views/nodes/formattedText')
| -rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBox.scss | 10 | ||||
| -rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBox.tsx | 32 |
2 files changed, 39 insertions, 3 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 227cd4312..71706084f 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -100,6 +100,16 @@ audiotag:hover { cursor: pointer; border-radius: 50%; } + + .edit-icon { + position: absolute; + right: 35; + bottom: 10; + display: inline-block; + font-size: 20px; + cursor: pointer; + border-radius: 50%; + } } .answer-tooltip { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 1aeb90286..2a843c83b 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -114,6 +114,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB private _rules: RichTextRules | undefined; private _forceUncollapse = true; // if the cursor doesn't move between clicks, then the selection will disappear for some reason. This flags the 2nd click as happening on a selection which allows bullet points to toggle private _break = true; + @observable private _editLabel = false; public ProseRef?: HTMLDivElement; public get EditorView() { return this._editorView; @@ -1405,8 +1406,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB ); this.tryUpdateScrollHeight(); - console.log('S' + this.Document.image); - console.log('S' + DocCast(this.Document).image); if (this.Document.image) { // const node = schema.nodes.dashDoc.create({ // width: 200, @@ -2097,7 +2096,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB return ( <Tooltip title={ - <div className="answer-tooltip" style={{ minWidth: '200px' }}> + <div className="answer-tooltip" style={{ minWidth: '150px' }}> {StrCast(this.Document.quiz)} </div> }> @@ -2109,6 +2108,32 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB ); } + @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.text = StrCast(this.Document.quiz); + } else { + this.Document.quiz = RTFCast(this.dataDoc.text).Text; + this.dataDoc.text = ''; + } + this._editLabel = !this._editLabel; + }; + get fieldKey() { return this._fieldKey; } @@ -2228,6 +2253,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB {this.audioHandle} {this.layoutDoc._layout_enableAltContentUI && !this.layoutDoc._chromeHidden ? this.overlayAlternateIcon : null} {this.Document.showQuiz ? this.answerIcon : null} + {this.Document.showQuiz ? this.editAnswer : null} </div> </div> ); |
