5 files changed, 45 insertions, 15 deletions
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 767ecf314..ec868bb7b 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -51,7 +51,7 @@ import '../northstar/utils/Extensions'
 import { HistogramOperation } from '../northstar/operations/HistogramOperation';
 import { AttributeTransformationModel } from '../northstar/core/attribute/AttributeTransformationModel';
 import { ColumnAttributeModel } from '../northstar/core/attribute/AttributeModel';
-import {Timeline} from './nodes/Timeline'
+import { Timeline } from './nodes/Timeline'
 @observer
 export class Main extends React.Component {
     // dummy initializations keep the compiler happy
@@ -304,11 +304,6 @@ export class Main extends React.Component {
     }
 
 
-    @computed
-    get timeline(){
-        return <Timeline/>
-    }
-
     render() {
         let workspaceMenu: any = null;
         let workspaces = this.userDocument.GetT<ListField<Document>>(KeyStore.Workspaces, ListField);
@@ -333,7 +328,6 @@ export class Main extends React.Component {
                 {this.nodesMenu}
                 {this.miscButtons}
                 {workspaceMenu}
-                {this.timeline}
                 <InkingControl />
             </div>
         );
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index c5178f69d..2ebdb5de6 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -20,6 +20,7 @@ import React = require("react");
 import v5 = require("uuid/v5");
 import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCursors";
 import { PreviewCursor } from "./PreviewCursor";
+import { Timeline } from "../../nodes/Timeline"
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
@@ -305,7 +306,9 @@ export class CollectionFreeFormView extends CollectionViewBase {
                         </div>
                         {this.overlayView}
                     </PreviewCursor>
+                    <Timeline />
                 </MarqueeView>
+
             </div>
         );
     }
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 28a1f9757..4682753d7 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -151,6 +151,7 @@ export class PDFBox extends React.Component<FieldViewProps> {
      */
     makeEditableAndHighlight = (colour: string) => {
         var range, sel = window.getSelection();
+        if (sel) {
         if (sel.rangeCount && sel.getRangeAt) {
             range = sel.getRangeAt(0);
         }
@@ -189,7 +190,7 @@ export class PDFBox extends React.Component<FieldViewProps> {
             }
             this._pageInfo.divs.push(obj);
 
-        }
+        }}
         document.designMode = "off";
     }
 
diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss
index e69de29bb..b58828c0f 100644
--- a/src/client/views/nodes/Timeline.scss
+++ b/src/client/views/nodes/Timeline.scss
@@ -0,0 +1,23 @@
+.timeline-container{
+    top: 10px;
+    left: 400px;
+    height: 100px; 
+    width: 500px; 
+    background-color: yellow; 
+    position: absolute;
+
+    .timeline{
+        height: 50px; 
+        width: 500px;
+        bottom: 0px; 
+        background-color: grey;
+        position: absolute; 
+        
+    }
+    button{
+        height: 30px; 
+        width: 100px; 
+        font-size: 1em; 
+        position:relative; 
+    }
+}
+\ No newline at end of file
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index c3546c802..3bd549ccc 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -1,18 +1,27 @@
 import * as React from "react"
 import * as ReactDOM from "react-dom"
-import {observer} from "mobx-react"
-import {observable} from "mobx"
+import { observer } from "mobx-react"
+import { observable } from "mobx"
 import { TimelineField } from "../../../fields/TimelineField";
+import "./Timeline.scss"
 
 
 
 @observer
 export class Timeline extends React.Component<TimelineField>{
 
-    render(){
-        return(
-        <div>
-            <h1 style={{left: `${window.pageXOffset} - 0px`, top: "100px", position:"absolute"}}> hi</h1>
-        </div>)
+    render() {
+        return (
+            <div>
+                <div className="timeline-container"> 
+                    <div className="timeline">
+                       
+
+                    </div> 
+                    <button>Record</button>
+                    <button> Stop </button>
+                </div>
+            </div>
+        )
     }
 }
 \ No newline at end of file