diff options
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.tsx | 46 |
1 files changed, 45 insertions, 1 deletions
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index bdf92038f..eaf7419fc 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -8,12 +8,14 @@ import { DocCast, NumCast, StrCast } from '../../../fields/Types'; import { DocUtils, Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { undoBatch } from '../../util/UndoManager'; +import { SnappingManager } from '../../util/SnappingManager'; import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent'; import { StyleProp } from '../StyleProvider'; import './ComparisonBox.scss'; import { DocumentView } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; import { PinProps, PresBox } from './trails'; +import { IntegerType } from 'mongodb'; @observer export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface { @@ -157,6 +159,41 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() remDoc1 = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((res, doc) => res && this.remDoc(doc, this.fieldKey + '_1'), true); remDoc2 = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((res, doc) => res && this.remDoc(doc, this.fieldKey + '_2'), true); _closeRef = React.createRef<HTMLDivElement>(); + + cycleAlternateText = () => { + const usePath = this.layoutDoc[`_${this._props.fieldKey}_usePath`]; + this.layoutDoc[`_${this._props.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : undefined; + //: usePath === 'alternate' ? 'alternate:hover' : undefined; + //usePath === undefined ? 'alternate' : + //undefined; + //: usePath === 'alternate' ? 'alternate:hover' : undefined; + // console.log('CYCLE' + this.layoutDoc[`_${this._props.fieldKey}_usePath`]); + }; + + @computed get overlayAlternateIcon() { + const usepath = this.layoutDoc[`_${this._props.fieldKey}_usePath`]; + return ( + <div + className="formattedTextBox-alternateButton" + onPointerDown={e => + setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => { + //side = side === 1 ? 0 : 1; + this.cycleAlternateText(); + console.log('HEREEEEE'); + }) + } + style={{ + //display: this._props.isContentActive() && !SnappingManager.IsDragging ? 'flex' : 'none', + background: usepath === 'alternate' ? 'white' : 'black', + //usePath === undefined ? 'white' : usePath === 'alternate' ? 'black' : 'gray', + color: usepath === 'alternate' ? 'black' : 'white', + //usePath === undefined ? 'black' : 'white', + }}> + <FontAwesomeIcon icon="turn-up" size="sm" /> + </div> + ); + } + render() { const clearButton = (which: string) => { return ( @@ -207,7 +244,14 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() }; if (this.Document._layout_isFlashcard) { - return <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>{displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)}</div>; + const side = this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 1 : 0; + console.log('SIDEEEE' + side); + return ( + <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}> + {displayBox(`${this.fieldKey}_${side}`, side, this._props.PanelWidth() - 3)} + {this.overlayAlternateIcon} + </div> + ); } else { return ( <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}> |