diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/animationtimeline/Keyframe.tsx | 13 | ||||
| -rw-r--r-- | src/client/views/animationtimeline/Timeline.scss | 5 | ||||
| -rw-r--r-- | src/client/views/animationtimeline/Timeline.tsx | 10 |
3 files changed, 17 insertions, 11 deletions
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index 55a2b2075..424f4ed8d 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -572,11 +572,11 @@ export class Keyframe extends React.Component<IProps> { keyframeDivs.push( <div className="keyframe" style={{ left: `${KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement) - this.pixelPosition}px` }}> <div className="divider"></div> - <div className="keyframeCircle" onPointerDown={(e) => { this.moveKeyframe(e, kf); }} onContextMenu={(e: React.MouseEvent) => { + <div className="keyframeCircle" onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); this.moveKeyframe(e, kf); }} onContextMenu={(e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); this.makeKeyframeMenu(kf, e.nativeEvent); - }}></div> + }} onDoubleClick={(e) => {e.preventDefault(); e.stopPropagation(); }}></div> </div> ); } @@ -595,7 +595,8 @@ export class Keyframe extends React.Component<IProps> { drawKeyframeDividers = () => { let keyframeDividers:JSX.Element[] = []; DocListCast(this.regiondata.keyframes).forEach(kf => { - if(this.keyframes.indexOf(kf ) !== this.keyframes.length - 1) { + let index = this.keyframes.indexOf(kf); + if(index !== this.keyframes.length - 1 ) { let left = this.keyframes[this.keyframes.indexOf(kf) + 1]; let bodyRef = React.createRef<HTMLDivElement>(); let kfPos = KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); @@ -606,8 +607,10 @@ export class Keyframe extends React.Component<IProps> { onPointerOut={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOut(e, bodyRef); }} onContextMenu={(e) => { e.preventDefault(); - e.stopPropagation(); - this._mouseToggled = true; + e.stopPropagation(); + if (index !== 0 || index !== this.keyframes.length - 2){ + this._mouseToggled = true; + } this.makeRegionMenu(kf, e.nativeEvent); }}> </div> diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 6270eed41..88d602d76 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -11,7 +11,7 @@ flex-direction: row; justify-content: space-evenly; align-items: center; - top: 15px; + top: 20px; div{ padding: 0px; margin-left:10px; @@ -56,12 +56,13 @@ } .time-input{ height: 40px; - width: 100px; + width: 120px; white-space: nowrap; font-size: 16px; color: grey; letter-spacing: 2px; text-transform: uppercase; + padding-left: 5px; } .tick{ diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 94cd0629d..73e6c600f 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -315,12 +315,12 @@ export class Timeline extends React.Component<FieldViewProps> { } private timelineToolBox = (scale: number) => { - let size = 50 * scale; //50 is default + let size = 40 * scale; //50 is default return ( <div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}> - <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${size}px`, width: `${size}px` }} /> </div> - <div key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${size}px`, width: `${size}px` }} /> </div> - <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px` }} /> </div> + <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${size}px`, width: `${size}px`, color:"grey"}} /> </div> + <div key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${size}px`, width: `${size}px`, color:"grey"}} /> </div> + <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px`, color: "grey"}} /> </div> <div key="overview-text" className="animation-text">Timeline Overview</div> <TimelineOverview isAuthoring = {BoolCast(this.props.Document.isAnimating)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} /> <div key="animation-text" className="animation-text">Mode: {this.props.Document.isAnimating ? "Authoring" : "Play"}</div> @@ -358,12 +358,14 @@ export class Timeline extends React.Component<FieldViewProps> { roundToggle.style.transform = "translate(0px, 0px)"; roundToggle.style.animationName = "turnoff"; roundToggleContainer.style.animationName = "turnoff"; + roundToggleContainer.style.backgroundColor = "white"; timelineContainer.style.top = `${-this._containerHeight}px`; this.props.Document.isAnimating = false; } else { roundToggle.style.transform = "translate(45px, 0px)"; roundToggle.style.animationName = "turnon"; roundToggleContainer.style.animationName = "turnon"; + roundToggleContainer.style.backgroundColor = "green"; timelineContainer.style.top = "0px"; this.props.Document.isAnimating = true; } |