aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/animationtimeline
diff options
context:
space:
mode:
authorAubrey Li <Aubrey-Li>2022-03-17 16:46:15 -0400
committerAubrey Li <Aubrey-Li>2022-03-17 16:46:15 -0400
commit4e826c06bf3141f4561692f8565476db287f6135 (patch)
tree2bd0da7a72f11058f03bb1d4b911ef531ad3d32b /src/client/views/animationtimeline
parent33cb4ee1c5a6ff07f2c1096d94259c0e2999f1c1 (diff)
parent73ba1a0395167ab5949f71d0c82fa7188d37ab5c (diff)
Merge remote-tracking branch 'origin/speedups2' into presentation_upgrade
Diffstat (limited to 'src/client/views/animationtimeline')
-rw-r--r--src/client/views/animationtimeline/Keyframe.tsx21
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx9
-rw-r--r--src/client/views/animationtimeline/TimelineMenu.tsx5
3 files changed, 18 insertions, 17 deletions
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 82b0218bf..92d3e2bed 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -1,18 +1,17 @@
-import * as React from "react";
-import "./Keyframe.scss";
-import "./Timeline.scss";
-import "../global/globalCssVariables.scss";
+import { action, computed, observable, runInAction } from "mobx";
import { observer } from "mobx-react";
-import { observable, reaction, action, IReactionDisposer, observe, computed, runInAction, trace } from "mobx";
-import { Doc, DocListCast, DocListCastAsync, Opt } from "../../../fields/Doc";
-import { Cast, NumCast } from "../../../fields/Types";
+import * as React from "react";
+import { Doc, DocListCast, Opt } from "../../../fields/Doc";
import { List } from "../../../fields/List";
-import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../fields/Schema";
-import { Transform } from "../../util/Transform";
-import { TimelineMenu } from "./TimelineMenu";
+import { createSchema, defaultSpec, listSpec, makeInterface } from "../../../fields/Schema";
+import { Cast, NumCast } from "../../../fields/Types";
import { Docs } from "../../documents/Documents";
+import { Transform } from "../../util/Transform";
import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { emptyPath } from "../../../Utils";
+import "../global/globalCssVariables.scss";
+import "./Keyframe.scss";
+import "./Timeline.scss";
+import { TimelineMenu } from "./TimelineMenu";
/**
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index c7e62c15d..e80ba6f36 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -13,6 +13,7 @@ import { TimelineOverview } from "./TimelineOverview";
import { Track } from "./Track";
import clamp from "../../util/clamp";
import { DocumentType } from "../../documents/DocumentTypes";
+import { IconLookup } from "@fortawesome/fontawesome-svg-core";
/**
* Timeline class controls most of timeline functions besides individual keyframe and track mechanism. Main functions are
@@ -346,9 +347,9 @@ export class Timeline extends React.Component<FieldViewProps> {
return (
<div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
<div className="playbackControls">
- <div className="timeline-icon" key="timeline_windBack" onClick={this.windBackward} title="Slow Down Animation"> <FontAwesomeIcon icon={faBackward} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
- <div className="timeline-icon" key=" timeline_play" onClick={this.onPlay} title="Play/Pause"> <FontAwesomeIcon icon={this._playButton} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
- <div className="timeline-icon" key="timeline_windForward" onClick={this.windForward} title="Speed Up Animation"> <FontAwesomeIcon icon={faForward} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
+ <div className="timeline-icon" key="timeline_windBack" onClick={this.windBackward} title="Slow Down Animation"> <FontAwesomeIcon icon={faBackward as IconLookup} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
+ <div className="timeline-icon" key=" timeline_play" onClick={this.onPlay} title="Play/Pause"> <FontAwesomeIcon icon={this._playButton as IconLookup} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
+ <div className="timeline-icon" key="timeline_windForward" onClick={this.windForward} title="Speed Up Animation"> <FontAwesomeIcon icon={faForward as IconLookup} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
</div>
<div className="grid-box overview-tool">
<div className="overview-box">
@@ -506,7 +507,7 @@ export class Timeline extends React.Component<FieldViewProps> {
{this.children.map(doc => <div style={{ height: `${(this._titleHeight)}px` }} className="datapane" onPointerOver={() => { Doc.BrushDoc(doc); }} onPointerOut={() => { Doc.UnBrushDoc(doc); }}><p>{doc.title}</p></div>)}
</div>
<div key="timeline_resize" onPointerDown={this.onResizeDown}>
- <FontAwesomeIcon className="resize" icon={faGripLines} />
+ <FontAwesomeIcon className="resize" icon={faGripLines as IconLookup} />
</div>
</div>
</div>
diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx
index 53ca9acad..aa422c092 100644
--- a/src/client/views/animationtimeline/TimelineMenu.tsx
+++ b/src/client/views/animationtimeline/TimelineMenu.tsx
@@ -5,6 +5,7 @@ import "./TimelineMenu.scss";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChartLine, faRoad, faClipboard, faPen, faTrash, faTable } from "@fortawesome/free-solid-svg-icons";
import { Utils } from "../../../Utils";
+import { IconLookup } from "@fortawesome/fontawesome-svg-core";
@observer
@@ -41,7 +42,7 @@ export class TimelineMenu extends React.Component {
if (type === "input") {
const inputRef = React.createRef<HTMLInputElement>();
let text = "";
- this._currentMenu.push(<div key={Utils.GenerateGuid()} className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg" /><input className="timeline-menu-input" ref={inputRef} placeholder={title} onChange={(e) => {
+ this._currentMenu.push(<div key={Utils.GenerateGuid()} className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard as IconLookup} size="lg" /><input className="timeline-menu-input" ref={inputRef} placeholder={title} onChange={(e) => {
e.stopPropagation();
text = e.target.value;
}} onKeyDown={(e) => {
@@ -52,7 +53,7 @@ export class TimelineMenu extends React.Component {
}
}} /></div>);
} else if (type === "button") {
- this._currentMenu.push(<div key={Utils.GenerateGuid()} className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine} size="lg" /><p className="timeline-menu-desc" onClick={(e) => {
+ this._currentMenu.push(<div key={Utils.GenerateGuid()} className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine as IconLookup} size="lg" /><p className="timeline-menu-desc" onClick={(e) => {
e.preventDefault();
e.stopPropagation();
event(e);