aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/LabelBox.tsx
diff options
context:
space:
mode:
authorAndy Rickert <andrew_rickert@brown.edu>2020-08-04 22:08:49 -0400
committerAndy Rickert <andrew_rickert@brown.edu>2020-08-04 22:08:49 -0400
commit02f3d218aa084f00211ffa9e632ea0cdc4d2a531 (patch)
treeec0d4456e49fb55dfb5756eac71eee07d92ee610 /src/client/views/nodes/LabelBox.tsx
parente83fd812ed3798a7e7c22ad132a2f9e8dccaa76c (diff)
parent7d296bf47dd373c5cb74eecda149ba1aa608acbc (diff)
pull
Diffstat (limited to 'src/client/views/nodes/LabelBox.tsx')
-rw-r--r--src/client/views/nodes/LabelBox.tsx18
1 files changed, 9 insertions, 9 deletions
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 10a164158..826ccd340 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -1,5 +1,3 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faEdit } from '@fortawesome/free-regular-svg-icons';
import { action, computed, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
@@ -59,9 +57,8 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps, LabelDocument
}
}
-
-
- @observable backColor = "unset";
+ @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(" ") + ")")
@@ -70,14 +67,17 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps, LabelDocument
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" onClick={() => runInAction(() => { this.clicked = !this.clicked; this.clicked ? this.backColor = StrCast(this.layoutDoc.hovercolor) : this.backColor = "unset"; })} onMouseLeave={() => runInAction(() => { !this.clicked ? this.backColor = "unset" : null; })}
- onMouseOver={() => runInAction(() => { this.backColor = StrCast(this.layoutDoc.hovercolor); })} 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),
- color: StrCast(this.layoutDoc.color),
backgroundColor: this.backColor,
- fontSize: NumCast(this.layoutDoc.fontSize) || "inherit",
+ color: StrCast(this.layoutDoc.color, "inherit"),
+ fontSize: StrCast(this.layoutDoc._fontSize) || "inherit",
fontFamily: StrCast(this.layoutDoc._fontFamily) || "inherit",
letterSpacing: StrCast(this.layoutDoc.letterSpacing),
textTransform: StrCast(this.layoutDoc.textTransform) as any,