diff options
Diffstat (limited to 'src')
5 files changed, 109 insertions, 40 deletions
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index 35d7afc7a..55a2b2075 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -138,7 +138,6 @@ export class Keyframe extends React.Component<IProps> { @observable private _gain = 20; //default @observable private _mouseToggled = false; @observable private _doubleClickEnabled = false; - @observable private _index:number = 0; @computed private get regiondata() { return RegionData(this.regions[this.regions.indexOf(this.props.RegionData)] as Doc);} @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>;} diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 0f98ed7c4..6270eed41 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -4,25 +4,33 @@ .timeline-toolbox{ position:absolute; + margin: 0px; + padding: 0px; display:flex; align-items: flex-start; - flex-direction: row; - justify-content: space-evenly; - align-items: baseline; - top: 10px; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + top: 15px; div{ + padding: 0px; margin-left:10px; } .animation-text{ font-size: 20px; height: auto; width: auto; + white-space: nowrap; + font-size: 16px; + color: grey; + letter-spacing: 2px; + text-transform: uppercase; } .round-toggle { height: 40px; width: 80px; background-color: white; - border: 2px solid purple; + border: 2px solid grey; border-radius: 20px; animation-fill-mode: forwards; animation-duration: 500ms; @@ -44,13 +52,18 @@ margin-top: 0.5px; } } - .time-input{ - height: 40px; - width: 100px; - - } + +} +.time-input{ + height: 40px; + width: 100px; + white-space: nowrap; + font-size: 16px; + color: grey; + letter-spacing: 2px; + text-transform: uppercase; + } - .tick{ height:100%; width: 1px; diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 6028656dc..94cd0629d 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -321,14 +321,14 @@ export class Timeline extends React.Component<FieldViewProps> { <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="overview-text" className="animation-text"><p>Timeline Overview</p></div> - <TimelineOverview scale={scale} 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"><p>Mode: {this.props.Document.isAnimating ? "Authoring" : "Play"}</p></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> <div key="round-toggle" ref={this._roundToggleContainerRef} className="round-toggle"> <div key="round-toggle-slider" ref={this._roundToggleRef} className="round-toggle-slider" onPointerDown={this.toggleChecked}> </div> </div> - <div key="time-text" className="animation-text"><p>Length: </p></div> - <input placeholder={String(this._time) + "ms"} ref = {this._timeInputRef} onKeyDown={this.onTimeInput}/> + <div key="time-text" className="animation-text" style ={{visibility: this.props.Document.isAnimating ? "visible" : "hidden"}}>Length: </div> + <input className="time-input" style={{visibility: this.props.Document.isAnimating ? "visible" : "hidden"}} placeholder={String(this._time) + "ms"} ref = {this._timeInputRef} onKeyDown={this.onTimeInput}/> </div> ); } diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index 9e69c2adf..c7f9bd059 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -1,38 +1,85 @@ @import "./../globalCssVariables.scss"; -.timeline-overview-container{ + +.timeline-overview-container{ + padding: 0px; + margin: 0px; width: 300px; height: 40px; - margin-top: 10px; - margin-left: 20px; background: white; + position: relative; border: 2px solid black; - padding: 0px; - display:inline-block; + .timeline-overview-visible{ + position: absolute; height: 100%; background: green; + display: inline-block; margin: 0px; + padding: 0px; } - .timeline-overview-scrubber-container{ + .timeline-overview-scrubber-container{ + margin: 0px; + padding: 0px; + position: absolute; height: 100%; - margin-top: -40px; - margin-left: 0px; width: 2px; + top: 0px; + left: 0px; z-index: 1001; background-color:black; display: inline-block; - .timeline-overview-scrubber-head{ + + .timeline-overview-scrubber-head{ + padding: 0px; + margin: 0px; position:absolute; height: 30px; width: 30px; background-color:transparent; border-radius: 50%; border: 5px solid black; - margin-left: -15px; - top: -15px; - + left: -15px; + top: -30px; } - } +} + + + +.timeline-play-bar{ + position: relative; + padding: 0px; + margin: 0px; + width: 300px; + height: 4px; + background-color: grey; + border-radius: 20px; + cursor: pointer; + + .timeline-play-head{ + position: absolute; + padding: 0px; + margin: 0px; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: white; + border: 3px grey solid; + left: 0px; + top: -10px; + cursor: pointer; + } +} +.timeline-play-tail{ + position: absolute; + padding: 0px; + margin: 0px; + height: 4px; + width: 0px; + z-index: 1000; + background-color: green; + border-radius: 20px; + margin-top: -4px; + cursor: pointer; }
\ No newline at end of file diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx index 38b823cbc..4741969dc 100644 --- a/src/client/views/animationtimeline/TimelineOverview.tsx +++ b/src/client/views/animationtimeline/TimelineOverview.tsx @@ -6,11 +6,11 @@ import "./TimelineOverview.scss"; interface TimelineOverviewProps{ - scale: number; totalLength: number; visibleLength:number; visibleStart:number; - currentBarX:number; + currentBarX:number; + isAuthoring: boolean; changeCurrentBarX: (pixel:number) => void; movePanX: (pixel:number) => any; } @@ -37,8 +37,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ onPanX = (e: PointerEvent) => { e.stopPropagation(); e.preventDefault(); - let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH * this.props.scale) + e.movementX; - this.props.movePanX((movX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength); + let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH) + e.movementX; + this.props.movePanX((movX / (this.DEFAULT_WIDTH )) * this.props.totalLength); } @action @@ -66,7 +66,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ let scrubberRef = this._scrubberRef.current!; let left = scrubberRef.getBoundingClientRect().left; let offsetX = Math.round(e.clientX - left); - this.props.changeCurrentBarX(((offsetX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength) + this.props.currentBarX); + this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX); } @action @@ -78,12 +78,22 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{ } render(){ + let timeline = this.props.isAuthoring ? [ + <div key="timeline-overview-container" className="timeline-overview-container"> + <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{left:`${(Math.round(this.props.visibleStart) / Math.round(this.props.totalLength)) * 296}px`, width:`${(Math.round(this.props.visibleLength) / Math.round(this.props.totalLength)) * 296}px`}} onPointerDown={this.onPointerDown}></div>, + <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{left:`${(this.props.currentBarX / this.props.totalLength) * 294}px`}} onPointerDown={this.onScrubberDown}> + <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div> + </div> + </div> + ] : [ + <div className="timeline-play-bar"> + <div ref={this._scrubberRef} className="timeline-play-head" style={{left:`${(this.props.currentBarX / this.props.totalLength) * 294}px`}} onPointerDown={this.onScrubberDown}></div> + </div>, + <div className="timeline-play-tail" style={{width: `${(this.props.currentBarX / this.props.totalLength) * 294}px`}}></div> + ]; return( - <div key="timeline-overview-container" className="timeline-overview-container" style={{height: `${this.DEFAULT_HEIGHT * this.props.scale * 0.8}px` ,width:`${this.DEFAULT_WIDTH * this.props.scale}`}}> - <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{marginLeft:`${(this.props.visibleStart / this.props.totalLength)* this.DEFAULT_WIDTH * this.props.scale}px`, width:`${(this.props.visibleLength / this.props.totalLength) * this.DEFAULT_WIDTH * this.props.scale}px`}} onPointerDown={this.onPointerDown}></div> - <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{marginLeft:`${(this.props.currentBarX / this.props.totalLength) * this.DEFAULT_WIDTH * this.props.scale}px`, marginTop: `${-this.DEFAULT_HEIGHT * this.props.scale * 0.8}px`}} onPointerDown={this.onScrubberDown}> - <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head" style={{}}></div> - </div> + <div> + {timeline} </div> ); } |