working timelinemenu

5 files changed, 185 insertions, 74 deletions

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index e2c0de8af..6c619fbe1 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -7,6 +7,7 @@
     box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
     flex-direction: column;
     background: whitesmoke;
+    padding-top: 10px; 
     padding-bottom: 10px;
     border-radius: 15px;
     border: solid #BBBBBBBB 1px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 270e9b183..3941c9c20 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -149,9 +149,9 @@ export class MainView extends React.Component {
         if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) {
             ContextMenu.Instance.closeMenu();
         }
-        if (targets && targets.length && targets[0].className.toString().indexOf("timeline-menu-container") === -1) {
-            TimelineMenu.Instance.closeMenu();
-        }   
+        // if (targets && targets.length && targets[0].className.toString().indexOf("timeline-menu-container") === -1) {
+        //     TimelineMenu.Instance.closeMenu();
+        // }   
     });
 
     globalPointerUp = () => this.isPointerDown = false;
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index b27cb6d98..d1975d847 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -386,7 +386,7 @@ export class Keyframe extends React.Component<IProps> {
                     <div className="keyframeCircle" onPointerDown={(e) => { this.moveKeyframe(e, kf as Doc); }} onContextMenu={(e: React.MouseEvent) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        TimelineMenu.Instance.openMenu("keyframe", e.clientX, e.clientY); 
+                        TimelineMenu.Instance.openMenu(e.clientX, e.clientY); 
                     }}></div>
                 </div>);
         }
@@ -418,29 +418,21 @@ export class Keyframe extends React.Component<IProps> {
     private _type: string = ""; 
 
     @action
-    onContainerDown = (e: React.MouseEvent, kf: Doc) => {
-        e.preventDefault();
-        e.stopPropagation();
+    onContainerDown = (kf: Doc, type: string) => {
         let listenerCreated = false;                 
-        let type = prompt("Type? (interpolate or path)"); 
-        if (type) {
-            if (type !== "interpolate" && type !=="path") {
-                alert("Wrong type. Try again."); 
-                return; 
+        this._type = type; 
+        this.props.collection.backgroundColor = "rgb(0,0,0)";
+        this._reac = reaction(() => {
+            return this.inks;
+        }, data => {
+            if (!listenerCreated) {
+                this._plotList = Array.from(data!)[data!.size - 1]!;
+                this._interpolationKeyframe = kf; 
+                document.addEventListener("pointerup", this.onReactionListen); 
+                listenerCreated = true; 
             }
-            this._type = type; 
-            this.props.collection.backgroundColor = "rgb(0,0,0)";
-            this._reac = reaction(() => {
-                return this.inks;
-            }, data => {
-                if (!listenerCreated) {
-                    this._plotList = Array.from(data!)[data!.size - 1]!;
-                    this._interpolationKeyframe = kf; 
-                    document.addEventListener("pointerup", this.onReactionListen); 
-                    listenerCreated = true; 
-                }
-            });
-        }
+        });
+        
         
     }
 
@@ -508,20 +500,26 @@ export class Keyframe extends React.Component<IProps> {
     }
 
 
+
+    /**
+     * 
+     * 
+     * TEMPORARY
+     * let items = [
+                                        TimelineMenu.Instance.addItem("button", "Show Data", () => {console.log(toJS(this.props.node));}), 
+                                        TimelineMenu.Instance.addItem("button", "Delete", () => {}), 
+                                        TimelineMenu.Instance.addItem("input", "Move", (val) => {console.log(val);})  
+                                    ]; 
+                                    TimelineMenu.Instance.addMenu("Keyframe", items); 
+                                    TimelineMenu.Instance.openMenu(e.clientX, e.clientY);
+     * 
+     */
     render() {
         return (
             <div>
                 <div className="bar" ref={this._bar} style={{ transform: `translate(${this.regiondata.position}px)`, width: `${this.regiondata.duration}px`, background: `linear-gradient(90deg, rgba(77, 153, 0, 0) 0%, rgba(77, 153, 0, 1) ${this.regiondata.fadeIn / this.regiondata.duration * 100}%, rgba(77, 153, 0, 1) ${(this.regiondata.duration - this.regiondata.fadeOut) / this.regiondata.duration * 100}%, rgba(77, 153, 0, 0) 100% )` }}
                     onPointerDown={this.onBarPointerDown}
-                    onDoubleClick={this.createKeyframe}
-                    onContextMenu={action((e: React.MouseEvent) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        console.log("has been clicked!"); 
-                        let offsetLeft = this._bar.current!.getBoundingClientRect().left - this._bar.current!.parentElement!.getBoundingClientRect().left;
-                        let offsetTop = this._bar.current!.getBoundingClientRect().top; //+ this._bar.current!.parentElement!.getBoundingClientRect().top; 
-                        this.props.setFlyout({ x: offsetLeft * this.props.transform.Scale, y: offsetTop * this.props.transform.Scale, display: "block", regiondata: this.regiondata, regions: this.regions });
-                    })}>
+                    onDoubleClick={this.createKeyframe}>
                     <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
                     <div className="rightResize" onPointerDown={this.onResizeRight}></div>
                     {this.regiondata.keyframes!.map(kf => {
@@ -536,7 +534,18 @@ export class Keyframe extends React.Component<IProps> {
                                 <div ref={bodyRef}className="body-container" style={{left: `${NumCast(kf.time) - this.regiondata.position}px`, width:`${NumCast(left!.time) - NumCast(kf.time)}px`}}
                                 onPointerOver={(e) => { this.onContainerOver(e, bodyRef); }}
                                 onPointerOut={(e) => { this.onContainerOut(e, bodyRef); }}
-                                onContextMenu={(e) => {TimelineMenu.Instance.openMenu("region", e.clientX, e.clientY);}}>
+                                onContextMenu={(e) => {
+                                    let items = [
+                                        TimelineMenu.Instance.addItem("button", "Add Ease", () => {this.onContainerDown(kf, "interpolate");}),
+                                        TimelineMenu.Instance.addItem("button", "Add Path", () => {this.onContainerDown(kf, "path");}), 
+                                        TimelineMenu.Instance.addItem("input", "fadeIn", (val) => {this.regiondata.fadeIn = parseInt(val, 10);}), 
+                                        TimelineMenu.Instance.addItem("input", "fadeOut", (val) => {this.regiondata.fadeOut = parseInt(val, 10);}),
+                                        TimelineMenu.Instance.addItem("input", "position", (val) => {this.regiondata.position = parseInt(val, 10);}),
+                                        TimelineMenu.Instance.addItem("input", "duration", (val) => {this.regiondata.duration = parseInt(val, 10);}),
+                                    ]; 
+                                    TimelineMenu.Instance.addMenu("Region", items); 
+                                    TimelineMenu.Instance.openMenu(e.clientX, e.clientY); 
+                                }}>
                                 </div>
                             ); 
                        }  
diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss
index ed047e52d..90cc53b4c 100644
--- a/src/client/views/animationtimeline/TimelineMenu.scss
+++ b/src/client/views/animationtimeline/TimelineMenu.scss
@@ -1,16 +1,94 @@
+@import "./../globalCssVariables.scss"; 
+
+
 .timeline-menu-container{
     position: absolute;
+    display: flex;
+    box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+    flex-direction: column;
+    background: whitesmoke;
     z-index: 10000;
     width: 150px; 
-    height: auto; 
-    background-color: black;
-    .timeline-menu-button{
-        width:100%; 
-        height: 30px; 
+    padding-bottom: 10px;
+    border-radius: 15px;
+
+    border: solid #BBBBBBBB 1px;
+ 
+
 
-    }
     .timeline-menu-input{
-        width:100%; 
-        height: 30px; 
+        font: $sans-serif; 
+        font-size: 13px; 
+        width:100%;
+        text-transform: uppercase; 
+        letter-spacing: 2px; 
+        margin-left: 10px; 
+        background-color: transparent; 
+        border-width: 0px; 
+        transition: border-width 500ms; 
+    }
+
+    .timeline-menu-input:hover{
+        border-width: 2px; 
+    }
+    
+    
+    
+
+    .timeline-menu-header{
+        border-top-left-radius: 15px; 
+        border-top-right-radius: 15px; 
+        text-transform: uppercase; 
+        background: $dark-color; 
+        letter-spacing: 2px; 
+
+        .timeline-menu-header-desc{
+            font:$sans-serif; 
+            font-size: 13px; 
+            text-align: center; 
+            color: whitesmoke; 
+        }
+    }
+
+
+    .timeline-menu-item {
+        // width: 11vw; //10vw
+        height: 30px; //2vh
+        background: whitesmoke;
+        display: flex; //comment out to allow search icon to be inline with search text
+        justify-content: left;
+        align-items: center;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        transition: all .1s;
+        border-style: none;
+        // padding: 10px 0px 10px 0px;
+        white-space: nowrap;
+        font-size: 13px;
+        color: grey;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        padding-right: 20px;
+        padding-left: 10px; 
+    }
+
+    .timeline-menu-item:hover {
+        border-width: .11px;
+        border-style: none;
+        border-color: $intermediate-color;
+        border-bottom-style: solid;
+        border-top-style: solid;
+        background: $darker-alt-accent; 
+    }
+
+    .timeline-menu-desc {
+        padding-left: 10px; 
+        font:$sans-serif; 
+        font-size: 13px; 
     }
+    
 }
\ No newline at end of file
diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx
index 52f6f6535..8b47448f2 100644
--- a/src/client/views/animationtimeline/TimelineMenu.tsx
+++ b/src/client/views/animationtimeline/TimelineMenu.tsx
@@ -3,6 +3,10 @@ import {observable, action, runInAction} from "mobx";
 import {observer} from "mobx-react"; 
 import "./TimelineMenu.scss"; 
 import { jSXAttribute } from "babel-types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChartLine, faRoad, faClipboard, faPen, faTrash, faTable } from "@fortawesome/free-solid-svg-icons";
+import { AddComparisonResult } from "../../northstar/model/idea/idea";
+
 
 /**
  * TimelineMenu: 
@@ -38,8 +42,7 @@ export class TimelineMenu extends React.Component {
     @observable private _x = 0; 
     @observable private _y = 0; 
     @observable private _type: "timeline" | "keyframe" | "region" | "" = ""; 
-
-
+    @observable private _currentMenu:JSX.Element[] = []; 
     constructor (props:Readonly<{}>){
         super(props); 
         TimelineMenu.Instance = this; 
@@ -67,8 +70,7 @@ export class TimelineMenu extends React.Component {
     }
     
     @action
-    openMenu = (type: "timeline" | "keyframe" | "region", x?:number, y?:number) => {
-        this._type = type;
+    openMenu = (x?:number, y?:number) => {
         this._opacity = 1; 
         x ? this._x = x : this._x = 0; 
         y ? this._y = y : this._y = 0; 
@@ -88,41 +90,62 @@ export class TimelineMenu extends React.Component {
 
     }
 
+    addItem = (type: "input" | "button", title: string, event: (e:any) => void) => {
+        if (type === "input"){
+            let ref = React.createRef<HTMLInputElement>(); 
+            let text = ""; 
+            return <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input" ref = {ref} placeholder={title} onChange={(e) => {text = e.target.value;}} onKeyDown={(e:React.KeyboardEvent) => {
+                if(e.keyCode === 13){
+                    event(text); 
+                }}}/></div>; 
+        } else if (type === "button") {
+            let ref = React.createRef<HTMLDivElement>(); 
+            return <div className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine}size="lg"/><p className="timeline-menu-desc" onClick={event}>{title}</p></div>; 
+        }
+        return <div></div>; 
+    }
 
+    @action 
+    addMenu = (title:string, items: JSX.Element[]) => {
+        items.unshift(<div className="timeline-menu-header"><p className="timeline-menu-header-desc">{title}</p></div>); 
+        this._currentMenu = items;  
+    }
 
     render() {
-        let menu: (JSX.Element[] | undefined);
-        switch(this._type){
-            case "keyframe": 
-                menu = [ 
-                    <button className="timeline-menu-button"> Show Schema</button>,  
-                    <button className="timeline-menu-button"> Delete Keyframe</button>,
-                    <input className="timeline-menu-input"placeholder="Move Keyframe"/> 
+        // let menu: (JSX.Element[] | undefined);
+        // switch(this._type){
+        //     case "keyframe": 
+        //         menu = [ 
+        //             <div className="timeline-menu-header"><p className="timeline-menu-header-desc">Keyframe</p></div>, 
+        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faTable} size="lg"/><p className="timeline-menu-desc">Show Data</p> </div>, 
+        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faTrash} size="lg"/><p className="timeline-menu-desc"> Delete</p></div>,
+        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="Move Keyframe"/></div> 
                    
-                ]; 
-                break; 
-            case "region" :
-                menu = [
-                    <button className="timeline-menu-button" onClick={this.addEase}>Add Ease</button>,
-                    <button className="timeline-menu-button"onClick={this.addPath}>Add Path</button>,
-                    <input className="timeline-menu-input"placeholder="fadeIn"/>,
-                    <input className="timeline-menu-input"placeholder="fadeOut"/>,
-                    <input className="timeline-menu-input"placeholder="position"/>,
-                    <input className="timeline-menu-input"placeholder="duration"/>,
-                ]; 
-                break; 
-            case "timeline":
-                menu = [
+        //         ]; 
+        //         break; 
+        //     case "region" :
+        //         menu = [
+        //             <div className="timeline-menu-header"><p className="timeline-menu-header-desc">Region</p></div>, 
+        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine}size="lg"/><p className="timeline-menu-desc" onClick={this.addEase}>Add Ease</p></div>,
+        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faPen} size="lg"/><p className="timeline-menu-desc"onClick={this.addPath}>Add Path</p></div>,
+        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="fadeIn"/> </div>,
+        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="fadeOut"/></div>,
+        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="position"/></div>,
+        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="duration"/></div>,
+        //         ]; 
+        //         break; 
+        //     case "timeline":
+        //         menu = [
 
-                ]; 
-                break; 
-            default: 
-                break; 
+        //         ]; 
+        //         break; 
+        //     default: 
+        //         break; 
             
-        }
+        // }
         return (
             <div className="timeline-menu-container" style={{opacity: this._opacity, left: this._x, top: this._y}} >
-                {menu}
+                {this._currentMenu}
             </div>
         );
     }