aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/animationtimeline/Timeline.scss30
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx18
-rw-r--r--src/client/views/animationtimeline/TimelineOverview.scss138
3 files changed, 97 insertions, 89 deletions
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 76c8475d1..83988e324 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -1,6 +1,6 @@
@import "./../globalCssVariables.scss";
-
+$timelineColor: #9acedf;
.timeline-toolbox {
position: absolute;
@@ -13,6 +13,10 @@
align-items: center;
top: 20px;
+ .timeline-icon {
+ color: $timelineColor;
+ }
+
div {
padding: 0px;
margin-left: 10px;
@@ -24,7 +28,7 @@
width: auto;
white-space: nowrap;
font-size: 16px;
- color: grey;
+ color: black;
letter-spacing: 2px;
text-transform: uppercase;
}
@@ -33,7 +37,7 @@
height: 40px;
width: 80px;
background-color: white;
- border: 2px solid grey;
+ border: 2px solid black;
border-radius: 20px;
animation-fill-mode: forwards;
animation-duration: 500ms;
@@ -50,7 +54,7 @@
height: 35px;
width: 35px;
background-color: white;
- border: 1px solid grey;
+ border: 1px solid black;
border-radius: 20px;
transition: transform 500ms ease-in-out;
margin-left: 0px;
@@ -65,7 +69,7 @@
width: 120px;
white-space: nowrap;
font-size: 16px;
- color: grey;
+ color: black;
letter-spacing: 2px;
text-transform: uppercase;
padding-left: 5px;
@@ -112,13 +116,13 @@
pointer-events: none;
.scrubberhead {
- top: -30px;
- height: 30px;
- width: 30px;
- background-color: transparent;
+ top: -20px;
+ height: 20px;
+ width: 20px;
+ background-color: white;
border-radius: 50%;
- border: 5px solid black;
- left: -15px;
+ border: 3px solid black;
+ left: -9px;
position: absolute;
pointer-events: all;
}
@@ -132,7 +136,7 @@
overflow: hidden;
background-color: white;
position: absolute;
- box-shadow: -10px 0px 10px 10px grey;
+ // box-shadow: -10px 0px 10px 10px red;
}
}
@@ -156,7 +160,7 @@
float: left;
border-style: solid;
overflow-y: scroll;
- overflow-x: hidden;
+ overflow-x: hidden;
}
}
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index fedffe8c1..589470111 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -8,7 +8,7 @@ import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types";
import { List } from "../../../new_fields/List";
import { Doc, DocListCast } from "../../../new_fields/Doc";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlayCircle, faBackward, faForward, faGripLines,faPauseCircle, faEyeSlash,faEye,faCheckCircle, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+import { faPlayCircle, faBackward, faForward, faGripLines, faPauseCircle, faEyeSlash, faEye, faCheckCircle, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
import { ContextMenu } from "../ContextMenu";
import { TimelineOverview } from "./TimelineOverview";
import { FieldViewProps } from "../nodes/FieldView";
@@ -43,14 +43,14 @@ export class Timeline extends React.Component<FieldViewProps> {
//readonly constants
private readonly DEFAULT_TICK_SPACING: number = 50;
- private readonly MAX_TITLE_HEIGHT = 75;
+ private readonly MAX_TITLE_HEIGHT = 75;
private readonly MAX_CONTAINER_HEIGHT: number = 800;
private readonly DEFAULT_TICK_INCREMENT: number = 1000;
//height variables
private DEFAULT_CONTAINER_HEIGHT: number = 330;
private MIN_CONTAINER_HEIGHT: number = 205;
-
+
//react refs
@observable private _trackbox = React.createRef<HTMLDivElement>();
@observable private _titleContainer = React.createRef<HTMLDivElement>();
@@ -224,7 +224,7 @@ export class Timeline extends React.Component<FieldViewProps> {
e.stopPropagation();
let scrubberbox = this._infoContainer.current!;
let left = scrubberbox.getBoundingClientRect().left;
- let offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale;
+ let offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale;
this.changeCurrentBarX(offsetX + this._visibleStart); //changes scrubber to clicked scrubber position
}
@@ -403,9 +403,9 @@ export class Timeline extends React.Component<FieldViewProps> {
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`, 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 className="timeline-icon" key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
+ <div className="timeline-icon" key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
+ <div className="timeline-icon" key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
<div key="overview-text" className="animation-text">Timeline Overview</div>
<TimelineOverview isAuthoring={BoolCast(this.props.Document.isATOn)} 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.isATOn ? "Authoring" : "Play"}</div>
@@ -460,7 +460,7 @@ export class Timeline extends React.Component<FieldViewProps> {
roundToggle.style.transform = "translate(45px, 0px)";
roundToggle.style.animationName = "turnon";
roundToggleContainer.style.animationName = "turnon";
- roundToggleContainer.style.backgroundColor = "green";
+ roundToggleContainer.style.backgroundColor = "#9acedf";
timelineContainer.style.top = "0px";
this.props.Document.isATOn = true;
}
@@ -499,7 +499,7 @@ export class Timeline extends React.Component<FieldViewProps> {
render() {
return (
<div>
- <div style={{ visibility: this._timelineVisible ? "visible" : "hidden" }}>
+ <div style={{ visibility: this._timelineVisible ? "visible" : "hidden" }}>
<div key="timeline_wrapper" style={{ visibility: BoolCast(this.props.Document.isATOn && this._timelineVisible) ? "visible" : "hidden", left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)" }}>
<div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, top: `0px` }}>
<div key="timeline_info" className="info-container" ref={this._infoContainer} onWheel={this.onWheelZoom}>
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index c7f9bd059..c643b978b 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -1,85 +1,89 @@
-@import "./../globalCssVariables.scss";
+@import "./../globalCssVariables.scss";
+$timelineColor: #9acedf;
-.timeline-overview-container{
- padding: 0px;
- margin: 0px;
- width: 300px;
+.timeline-overview-container {
+ padding: 0px;
+ margin: 0px;
+ width: 300px;
height: 40px;
- background: white;
- position: relative;
- border: 2px solid black;
-
- .timeline-overview-visible{
- position: absolute;
- height: 100%;
- background: green;
+ background: white;
+ position: relative;
+ border: 2px solid black;
+
+ .timeline-overview-visible {
+ position: absolute;
+ height: 98%;
+ background: $timelineColor;
display: inline-block;
- margin: 0px;
- padding: 0px;
+ margin: 0px;
+ padding: 0px;
}
- .timeline-overview-scrubber-container{
- margin: 0px;
- padding: 0px;
- position: absolute;
+
+ .timeline-overview-scrubber-container {
+ margin: 0px;
+ padding: 0px;
+ position: absolute;
height: 100%;
- width: 2px;
- top: 0px;
- left: 0px;
+ width: 2px;
+ top: 0px;
+ left: 0px;
z-index: 1001;
- background-color:black;
- display: inline-block;
+ background-color: black;
+ display: inline-block;
- .timeline-overview-scrubber-head{
- padding: 0px;
- margin: 0px;
- position:absolute;
- height: 30px;
- width: 30px;
- background-color:transparent;
- border-radius: 50%;
- border: 5px solid black;
- left: -15px;
- top: -30px;
+ .timeline-overview-scrubber-head {
+ padding: 0px;
+ margin: 0px;
+ position: absolute;
+ height: 10px;
+ width: 10px;
+ // background-color: black;
+ border-radius: 50%;
+ // border: 3px solid black;
+ left: -4px;
+ // top: -30px;
+ top: -10px;
}
}
}
-.timeline-play-bar{
- position: relative;
- padding: 0px;
- margin: 0px;
- width: 300px;
- height: 4px;
- background-color: grey;
+.timeline-play-bar {
+ position: relative;
+ padding: 0px;
+ margin: 0px;
+ width: 300px;
+ height: 4px;
+ background-color: $timelineColor;
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;
+ cursor: pointer;
+
+ .timeline-play-head {
+ position: absolute;
+ padding: 0px;
+ margin: 0px;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: white;
+ border: 3px $timelineColor;
+ 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;
+}
+
+.timeline-play-tail {
+ position: absolute;
+ padding: 0px;
+ margin: 0px;
+ height: 4px;
+ width: 0px;
+ z-index: 1000;
+ background-color: $timelineColor;
border-radius: 20px;
- margin-top: -4px;
- cursor: pointer;
+ margin-top: -4px;
+ cursor: pointer;
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-13 00:57:46 +0000