diff options
author | Melissa Zhang <mzhang19096@gmail.com> | 2020-08-07 09:40:06 -0700 |
---|---|---|
committer | Melissa Zhang <mzhang19096@gmail.com> | 2020-08-07 09:40:06 -0700 |
commit | 9886ed681ff18a33f7acab8f83b475ca9ea60bf7 (patch) | |
tree | 0b69d4b0fbfc52eac07c2e38fdbb34f161a2dc98 /src/client/views/nodes/LabelBox.tsx | |
parent | c94a61aa594f77db4c9b08a5f91c1a7e57d5ff9d (diff) | |
parent | b02cfed890d9d95a8f45bbc93d688bd3311dd387 (diff) |
merge with master
Diffstat (limited to 'src/client/views/nodes/LabelBox.tsx')
-rw-r--r-- | src/client/views/nodes/LabelBox.tsx | 14 |
1 files changed, 12 insertions, 2 deletions
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index 05ba6628c..826ccd340 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -1,4 +1,4 @@ -import { action } from 'mobx'; +import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast } from '../../../fields/Doc'; @@ -56,16 +56,26 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps, LabelDocument e.stopPropagation(); } } + + @observable _mouseOver = false; + @computed get backColor() { return this.clicked || this._mouseOver ? StrCast(this.layoutDoc.hovercolor) : "unset"; } + + @observable clicked = false; // (!missingParams || !missingParams.length ? "" : "(" + missingParams.map(m => m + ":").join(" ") + ")") render() { const params = Cast(this.paramsDoc["onClick-paramFieldKeys"], listSpec("string"), []); const missingParams = params?.filter(p => !this.paramsDoc[p]); params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... return ( - <div className="labelBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu} + <div className="labelBox-outerDiv" + onClick={action(() => this.clicked = !this.clicked)} + onMouseLeave={action(() => this._mouseOver = false)} + onMouseOver={action(() => this._mouseOver = true)} + ref={this.createDropTarget} onContextMenu={this.specificContextMenu} style={{ boxShadow: this.layoutDoc.opacity ? StrCast(this.layoutDoc.boxShadow) : "" }}> <div className="labelBox-mainButton" style={{ background: StrCast(this.layoutDoc.backgroundColor), + backgroundColor: this.backColor, color: StrCast(this.layoutDoc.color, "inherit"), fontSize: StrCast(this.layoutDoc._fontSize) || "inherit", fontFamily: StrCast(this.layoutDoc._fontFamily) || "inherit", |