From 9f8653ab3d7f82a5d82b925bf339bef8d6723f5c Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 11 Feb 2019 17:37:03 -0500
Subject: added framework for annotation overlays -- see ImageBox

---
 src/client/views/nodes/ImageBox.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/client/views/nodes/ImageBox.scss')

diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 136fda1d0..83392311b 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,6 +1,7 @@
 
 .imageBox-cont {
     padding: 0vw;
+    position: absolute
 }
 
 .imageBox-button {
-- 
cgit v1.2.3-70-g09d2


From 2541c2cd562251143050554f3c0117caed6d9345 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 10:48:03 -0500
Subject: still struggling with sizing issues.

---
 src/client/views/collections/CollectionDockingView.tsx  | 5 +++--
 src/client/views/collections/CollectionFreeFormView.tsx | 2 +-
 src/client/views/nodes/ImageBox.scss                    | 3 ++-
 src/client/views/nodes/ImageBox.tsx                     | 3 +--
 4 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.scss')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 15a586282..e3d50eb80 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -243,8 +243,9 @@ export class CollectionDockingView extends CollectionViewBase {
             setTimeout(function () {
                 var htmlElement = document.getElementById(containingDiv);
                 container.on('resize', (e: any) => {
-                    state.doc.SetNumber(KeyStore.Width, htmlElement!.clientWidth);
-                    state.doc.SetNumber(KeyStore.Height, htmlElement!.clientHeight);
+                    // state.doc.SetNumber(KeyStore.Width, htmlElement!.clientWidth);
+                    // if (htmlElement!.clientHeight > 0)
+                    //     state.doc.SetNumber(KeyStore.Height, htmlElement!.clientHeight);
                 })
                 ReactDOM.render((
                     <DocumentView key={state.doc.Id} Document={state.doc}
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 2007a111b..977a03f58 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -231,7 +231,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 }}
                 ref={this._containerRef}>
                 <div className="collectionfreeformview"
-                    style={{ transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }}
+                    style={{ width: "100%", transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }}
                     ref={this._canvasRef}>
 
                     {this.props.BackgroundView}
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 83392311b..2bd8b1d3c 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,7 +1,8 @@
 
 .imageBox-cont {
     padding: 0vw;
-    position: absolute
+    position: absolute;
+    width: 100%
 }
 
 .imageBox-button {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index b96e717ed..60be5f94d 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -85,11 +85,10 @@ export class ImageBox extends React.Component<FieldViewProps> {
         let field = this.props.doc.Get(this.props.fieldKey);
         let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
             field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
-        let width = this.props.doc.GetNumber(KeyStore.Width, 1);
 
         return (
             <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
-                <img src={path} width={width} alt="Image not found" />
+                <img src={path} width="100%" alt="Image not found" />
                 {this.lightbox(path)}
             </div>)
     }
-- 
cgit v1.2.3-70-g09d2


From 3033e4d5f26bbdb808c1a88d1ecabb57b2acade4 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 13 Feb 2019 03:33:56 -0500
Subject: messing with css, not very productively.

---
 src/client/views/EditableView.tsx                  |  7 +++---
 .../views/collections/CollectionSchemaView.scss    | 25 ++++++++++++++++++++++
 .../views/collections/CollectionSchemaView.tsx     |  2 +-
 src/client/views/nodes/ImageBox.scss               |  8 ++++++-
 4 files changed, 37 insertions(+), 5 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.scss')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 2e784d3f9..1176edce1 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -29,9 +29,10 @@ export class EditableView extends React.Component<EditableProps> {
                 style={{ width: "100%" }}></input>
         } else {
             return (
-                <div>
-                    {this.props.contents}
-                    <button onClick={action(() => this.editing = true)}>Edit</button>
+                <div style={{ alignItems: "center", display: "flex", height: "100%", maxHeight: "35px" }} >
+                    <button style={{ width: "100%" }} onClick={action(() => this.editing = true)}>
+                        {this.props.contents}
+                    </button>
                 </div>
             )
         }
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 707b44db6..70715c7a3 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,3 +1,28 @@
+
+.collectionSchemaView-container {
+    
+    .imageBox-cont {
+        position:relative;
+        max-height:100%;
+    }
+    .ReactTable .rt-th, .ReactTable .rt-td {
+        max-height: 75px;
+    }
+    .imageBox-cont img {
+        object-fit: contain;
+        height: 100%
+    }
+    .node {
+        width:100% !important;
+        height:100% !important;
+        .imageBox-cont img {
+            object-fit: contain;
+            max-width: 100%;
+            height: 100%
+        }
+    }
+}
+
 .Resizer {
     box-sizing: border-box;
     background: #000;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index eec3b275c..b6bdccaa9 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -116,7 +116,7 @@ export class CollectionSchemaView extends CollectionViewBase {
             content = <div />
         }
         return (
-            <div onPointerDown={this.onPointerDown} >
+            <div onPointerDown={this.onPointerDown} className="collectionSchemaView-container">
                 <SplitPane split={"vertical"} defaultSize="60%">
                     <ScrollBox>
                         <ReactTable
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 2bd8b1d3c..36f5e0fe0 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -2,7 +2,13 @@
 .imageBox-cont {
     padding: 0vw;
     position: absolute;
-    width: 100%
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%
+}
+.imageBox-cont img {
+    max-width: 100%;
+    max-height: 100%
 }
 
 .imageBox-button {
-- 
cgit v1.2.3-70-g09d2