From f858a4fc74476c5720cc215c70f12733d757d085 Mon Sep 17 00:00:00 2001
From: Jude <julie_wang1@brown.edu>
Date: Sat, 9 Mar 2019 11:28:34 -0500
Subject: improved text node and reduced selection border thickness

---
 src/client/views/DocumentDecorations.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/client/views/DocumentDecorations.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 9fd73a33b..36395ed0d 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -149,10 +149,10 @@ export class DocumentDecorations extends React.Component {
         }
         return (
             <div id="documentDecorations-container" style={{
-                width: (bounds.r - bounds.x + 40) + "px",
-                height: (bounds.b - bounds.y + 40) + "px",
-                left: bounds.x - 20,
-                top: bounds.y - 20,
+                width: (bounds.r - bounds.x + 20) + "px",
+                height: (bounds.b - bounds.y + 20) + "px",
+                left: bounds.x - 10,
+                top: bounds.y - 10,
             }}>
                 <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-- 
cgit v1.2.3-70-g09d2


From c6a3faf616e68ede2d67580344e4337c3f0cfdc5 Mon Sep 17 00:00:00 2001
From: Jude <julie_wang1@brown.edu>
Date: Sat, 9 Mar 2019 17:14:42 -0500
Subject: added some flair to freeform views

---
 src/client/views/ContextMenu.scss                  |   6 +-
 src/client/views/DocumentDecorations.scss          |   6 +-
 src/client/views/DocumentDecorations.tsx           |   9 +-
 src/client/views/InkingControl.tsx                 |   2 +-
 src/client/views/Main.scss                         |  15 +-
 src/client/views/Main.tsx                          |   2 +
 src/client/views/_global_variables.scss            |   3 +-
 .../views/collections/CollectionFreeFormView.scss  |  13 +-
 .../views/collections/CollectionSchemaView.scss    | 357 ++++++++++-----------
 src/client/views/nodes/DocumentView.scss           |  42 +--
 src/client/views/nodes/FieldTextBox.scss           |  14 +-
 src/client/views/nodes/FormattedTextBox.scss       |   4 +-
 12 files changed, 248 insertions(+), 225 deletions(-)

(limited to 'src/client/views/DocumentDecorations.tsx')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index ecb3cc8c8..3565a929a 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -3,7 +3,7 @@
   position: absolute;
   display: flex;
   z-index: 1000;
-  box-shadow: #aaaaaa 0.2vw 0.2vw 0.4vw;
+  box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
   flex-direction: column;
 }
 
@@ -23,7 +23,7 @@
   transition: all 0.1s;
   border-width: 0.11px;
   border-style: none;
-  border-color: #aaaaaa;
+  border-color: $intermediate-color;
   border-bottom-style: solid;
   padding: 10px;
   white-space: nowrap;
@@ -32,7 +32,7 @@
 
 .contextMenu-item:hover {
   transition: all 0.1s;
-  background: $alt-accent;
+  background: $lighter-alt-accent;
 }
 
 .contextMenu-description {
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index dc8c3a0cc..722980019 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -3,8 +3,8 @@
   position: absolute;
   display: grid;
   z-index: 1000;
-  grid-template-rows: 10px 1fr 10px;
-  grid-template-columns: 10px 1fr 10px;
+  grid-template-rows: 8px 1fr 8px;
+  grid-template-columns: 8px 1fr 8px;
   pointer-events: none;
   #documentDecorations-centerCont {
     background: none;
@@ -12,7 +12,7 @@
   .documentDecorations-resizer {
     pointer-events: auto;
     background: $alt-accent;
-    opacity: 0.4;
+    opacity: 0.8;
   }
   #documentDecorations-topLeftResizer,
   #documentDecorations-bottomRightResizer {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 36395ed0d..406d6a234 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -11,6 +11,7 @@ export class DocumentDecorations extends React.Component {
     static Instance: DocumentDecorations
     private _resizer = ""
     private _isPointerDown = false;
+    private _resizeBorderWidth = 16;
     @observable private _hidden = false;
 
     constructor(props: Readonly<{}>) {
@@ -149,10 +150,10 @@ export class DocumentDecorations extends React.Component {
         }
         return (
             <div id="documentDecorations-container" style={{
-                width: (bounds.r - bounds.x + 20) + "px",
-                height: (bounds.b - bounds.y + 20) + "px",
-                left: bounds.x - 10,
-                top: bounds.y - 10,
+                width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
+                height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px",
+                left: bounds.x - this._resizeBorderWidth / 2,
+                top: bounds.y - this._resizeBorderWidth / 2,
             }}>
                 <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 929fb42a1..fc6a266e4 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -49,7 +49,7 @@ export class InkingControl extends React.Component {
 
     selected = (tool: InkTool) => {
         if (this._selectedTool === tool) {
-            return { backgroundColor: "black", color: "white" }
+            return { backgroundColor: "#61aaa3", color: "white" }
         }
         return {}
     }
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 89a9e1bd1..3e2ab6ff7 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -10,6 +10,16 @@ body {
   margin: 0;
 }
 
+#dash-title {
+  position: absolute;
+  right: 46.5%;
+  letter-spacing: 3px;
+  top: 9px;
+  font-size: 12px;
+  color: $alt-accent;
+  z-index: 9999;
+}
+
 h1 {
   font-size: 50px;
   position: fixed;
@@ -65,7 +75,7 @@ button:hover {
 
 .clear-db-button {
   position: absolute;
-  left: 47%;
+  right: 45%;
   bottom: 1em;
   font-size: 50%;
 }
@@ -119,7 +129,7 @@ button:hover {
     height: 36px;
     margin-right: 10px;
     cursor: pointer;
-    transition: transform 0.5s;
+    transition: transform 0.2s;
   }
   label p {
     padding-left: 10.5px;
@@ -127,6 +137,7 @@ button:hover {
   }
   label:hover {
     background: $main-accent;
+    transform: scale(1.15);
   }
   input {
     display: none;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 38a3d4b69..1caaa1cba 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -100,6 +100,8 @@ Documents.initProtos(mainDocId, (res?: Document) => {
 
     ReactDOM.render((
         <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+            <div id="dash-title">— DASH —</div>
+
             <DocumentView Document={mainContainer}
                 AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
                 ContentScaling={() => 1}
diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss
index c91000bf0..333fb3122 100644
--- a/src/client/views/_global_variables.scss
+++ b/src/client/views/_global_variables.scss
@@ -4,7 +4,8 @@
 $light-color: #fcfbf7;
 $light-color-secondary: rgb(241, 239, 235);
 $main-accent: #61aaa3;
-$alt-accent: #afcbff;
+$alt-accent: #cdd5ec;
+$lighter-alt-accent: rgb(207, 220, 240);
 $intermediate-color: #9c9396;
 $dark-color: #121721;
 
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index 4d0619c54..90caa0d14 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -7,7 +7,15 @@
     width: 100%;
   }
 
-  border-style: solid;
+  //nested freeform views
+  .collectionfreeformview-container {
+    background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px),
+      linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px);
+    background-size: 30px 30px;
+  }
+
+  border: 0px solid $light-color-secondary;
+  border-radius: $border-radius;
   box-sizing: border-box;
   position: relative;
   top: 0;
@@ -15,6 +23,7 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
   .collectionfreeformview {
     position: absolute;
     top: 0;
@@ -32,7 +41,7 @@
     background: $light-color-secondary;
   }
 
-  border-style: solid;
+  border: 0px solid $intermediate-color;
   border-radius: $border-radius;
   box-sizing: border-box;
   position: absolute;
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index d40e6d314..2fd4a2df0 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,185 +1,140 @@
-
-
 .collectionSchemaView-container {
-    border-style: solid;
-    box-sizing: border-box;
+  border-style: solid;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  .collectionSchemaView-previewRegion {
+    position: relative;
+    background: black;
+    float: left;
+    height: 100%;
+  }
+  .collectionSchemaView-previewHandle {
     position: absolute;
+    height: 37px;
+    width: 20px;
+    z-index: 20;
+    right: 0;
+    top: 0;
+    background: Black;
+  }
+  .collectionSchemaView-dividerDragger {
+    position: relative;
+    background: black;
+    float: left;
+    height: 100%;
+  }
+  .collectionSchemaView-tableContainer {
+    position: relative;
+    float: left;
+    height: 100%;
+  }
+
+  .ReactTable {
+    position: absolute;
+    // display: inline-block;
+    // overflow: auto;
     width: 100%;
     height: 100%;
-    .collectionSchemaView-previewRegion {
-        position: relative; 
-        background: black; 
-        float: left; 
-        height: 100%;
-    }
-    .collectionSchemaView-previewHandle {
-        position: absolute;
-        height: 37px;
-        width: 20px; 
-        z-index: 20; 
-        right: 0; 
-        top: 0; 
-        background: Black ;
-    }
-    .collectionSchemaView-dividerDragger{
-        position: relative; 
-        background: black; 
-        float: left; 
-        height: 100%;
-    }
-    .collectionSchemaView-tableContainer {
-        position: relative;
-        float: left;
-        height: 100%; 
-    }
+    background: white;
+    box-sizing: border-box;
+    .rt-table {
+      overflow-y: auto;
+      overflow-x: auto;
+      height: 100%;
 
-    .ReactTable {
-        position: absolute;
-       // display: inline-block;
-       // overflow: auto;
-        width: 100%;
+      display: -webkit-inline-box;
+      direction: ltr;
+      // direction:rtl;
+      // display:block;
+    }
+    .rt-tbody {
+      //direction: ltr;
+      direction: rtl;
+    }
+    .rt-tr-group {
+      direction: ltr;
+      max-height: 44px;
+    }
+    .rt-td {
+      border-width: 1;
+      border-right-color: #aaa;
+      .imageBox-cont {
+        position: relative;
+        max-height: 100%;
+      }
+      .imageBox-cont img {
+        object-fit: contain;
+        max-width: 100%;
         height: 100%;
-        background: white;
-        box-sizing: border-box;
-        .rt-table {
-            overflow-y: auto;
-            overflow-x: auto;
-            height: 100%;
-
-            display: -webkit-inline-box;
-            direction: ltr;
-            // direction:rtl;
-            // display:block;
-        }
-        .rt-tbody {
-            //direction: ltr;
-            direction: rtl;
-        }
-        .rt-tr-group {
-            direction: ltr;
-            max-height: 44px;
-        }
-        .rt-td {
-            border-width: 1;
-            border-right-color: #aaa;
-            .imageBox-cont {
-                position:relative;
-                max-height:100%;
-            }
-            .imageBox-cont img {
-                object-fit: contain;
-                max-width: 100%;
-                height: 100%
-            }
-        }
-        .rt-tr-group {
-            border-width: 1;
-            border-bottom-color: #aaa
-        }
-    }
-    .ReactTable .rt-thead.-header {
-            background:grey;
-        }
-    .ReactTable .rt-th, .ReactTable .rt-td {
-        max-height: 44;
-        padding: 3px 7px;
-    }
-    .ReactTable .rt-tbody .rt-tr-group:last-child {
-        border-bottom: grey;
-        border-bottom-style: solid;
-        border-bottom-width: 1;
-    }
-    .documentView-node:first-child {
-        background: grey;
-        .imageBox-cont img {
-            object-fit: contain;
-        }
-    }
+      }
+    }
+    .rt-tr-group {
+      border-width: 1;
+      border-bottom-color: #aaa;
+    }
+  }
+  .ReactTable .rt-thead.-header {
+    background: grey;
+  }
+  .ReactTable .rt-th,
+  .ReactTable .rt-td {
+    max-height: 44;
+    padding: 3px 7px;
+  }
+  .ReactTable .rt-tbody .rt-tr-group:last-child {
+    border-bottom: grey;
+    border-bottom-style: solid;
+    border-bottom-width: 1;
+  }
+  .documentView-node:first-child {
+    background: grey;
+    .imageBox-cont img {
+      object-fit: contain;
+    }
+  }
 }
 
 .Resizer {
-    box-sizing: border-box;
-    background: #000;
-    opacity: 0.5;
-    z-index: 1;
-    background-clip: padding-box;
-    &.horizontal {
-        height: 11px;
-        margin: -5px 0;
-        border-top: 5px solid rgba(255, 255, 255, 0);
-        border-bottom: 5px solid rgba(255, 255, 255, 0);
-        cursor: row-resize;
-        width: 100%;
-        &:hover {
-            border-top: 5px solid rgba(0, 0, 0, 0.5);
-            border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-        }
-    }
-    &.vertical {
-        width: 11px;
-        margin: 0 -5px;
-        border-left: 5px solid rgba(255, 255, 255, 0);
-        border-right: 5px solid rgba(255, 255, 255, 0);
-        cursor: col-resize;
-        &:hover {
-            border-left: 5px solid rgba(0, 0, 0, 0.5);
-            border-right: 5px solid rgba(0, 0, 0, 0.5);
-        }
-    }
+  box-sizing: border-box;
+  background: #000;
+  opacity: 0.5;
+  z-index: 1;
+  background-clip: padding-box;
+  &.horizontal {
+    height: 11px;
+    margin: -5px 0;
+    border-top: 5px solid rgba(255, 255, 255, 0);
+    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    cursor: row-resize;
+    width: 100%;
     &:hover {
-        -webkit-transition: all 2s ease;
-        transition: all 2s ease;
-    }
+      border-top: 5px solid rgba(0, 0, 0, 0.5);
+      border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+    }
+  }
+  &.vertical {
+    width: 11px;
+    margin: 0 -5px;
+    border-left: 5px solid rgba(255, 255, 255, 0);
+    border-right: 5px solid rgba(255, 255, 255, 0);
+    cursor: col-resize;
+    &:hover {
+      border-left: 5px solid rgba(0, 0, 0, 0.5);
+      border-right: 5px solid rgba(0, 0, 0, 0.5);
+    }
+  }
+  &:hover {
+    -webkit-transition: all 2s ease;
+    transition: all 2s ease;
+  }
 }
 
 .vertical {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-    }
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
-    footer {
-        padding: 1rem;
-        background: #eee;
-    }
-}
-
-.horizontal {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-    }
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
-    footer {
-        padding: 1rem;
-        background: #eee;
-    }
-}
-
-.parent {
-    width: 100%;
-    height: 100%;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
+  section {
+    width: 100vh;
+    height: 100vh;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -189,19 +144,63 @@
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
+  }
+  header {
+    padding: 1rem;
+    background: #eee;
+  }
+  footer {
+    padding: 1rem;
+    background: #eee;
+  }
+}
+
+.horizontal {
+  section {
+    width: 100vh;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  header {
+    padding: 1rem;
+    background: #eee;
+  }
+  footer {
+    padding: 1rem;
+    background: #eee;
+  }
+}
+
+.parent {
+  width: 100%;
+  height: 100%;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .header {
-    background: #aaa;
-    height: 3rem;
-    line-height: 3rem;
+  background: #aaa;
+  height: 3rem;
+  line-height: 3rem;
 }
 
 .wrapper {
-    background: #ffa;
-    margin: 5rem;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-}
\ No newline at end of file
+  background: #ffa;
+  margin: 5rem;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 5797fde45..85a115f1c 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,23 +1,23 @@
 @import "../global_variables";
 .documentView-node {
-    position: absolute;
-    background: $light-color; //overflow: hidden;
-    &.minimized {
-        width: 30px;
-        height: 30px;
-    }
-    .top {
-        background: #232323;
-        height: 20px;
-        cursor: pointer;
-    }
-    .content {
-        padding: 20px 20px;
-        height: auto;
-        box-sizing: border-box;
-    }
-    .scroll-box {
-        overflow-y: scroll;
-        height: calc(100% - 20px);
-    }
-}
\ No newline at end of file
+  position: absolute;
+  background: $light-color; //overflow: hidden;
+  &.minimized {
+    width: 30px;
+    height: 30px;
+  }
+  .top {
+    background: #232323;
+    height: 20px;
+    cursor: pointer;
+  }
+  .content {
+    padding: 20px 20px;
+    height: auto;
+    box-sizing: border-box;
+  }
+  .scroll-box {
+    overflow-y: scroll;
+    height: calc(100% - 20px);
+  }
+}
diff --git a/src/client/views/nodes/FieldTextBox.scss b/src/client/views/nodes/FieldTextBox.scss
index b6ce2fabc..d2cd61b0d 100644
--- a/src/client/views/nodes/FieldTextBox.scss
+++ b/src/client/views/nodes/FieldTextBox.scss
@@ -1,14 +1,14 @@
 .ProseMirror {
-    margin-top: -1em;
-    width: 100%;
-    height: 100%;
+  margin-top: -1em;
+  width: 100%;
+  height: 100%;
 }
 
 .ProseMirror:focus {
-    outline: none !important
+  outline: none !important;
 }
 
 .fieldTextBox-cont {
-    background: white;
-    padding: 1vw;
-}
\ No newline at end of file
+  background: white;
+  padding: 1vw;
+}
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 1b10cfff7..32da2632e 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -12,8 +12,8 @@
 
 .formattedTextBox-cont {
   background: $light-color-secondary;
-  padding: 0.7em;
-  border-width: 1px;
+  padding: 0.9em;
+  border-width: 0px;
   border-radius: $border-radius;
   border-color: $intermediate-color;
   box-sizing: border-box;
-- 
cgit v1.2.3-70-g09d2


From 736e0bdc6fb2b98592889bc7ba0991abd56bda29 Mon Sep 17 00:00:00 2001
From: Hannah Chow <hannah_chow@brown.edu>
Date: Mon, 11 Mar 2019 17:35:54 -0400
Subject: linking kind of merged

---
 package-lock.json                         | 36 +++++++++++---
 src/client/views/DocumentDecorations.scss | 82 ++++++++++++++++---------------
 src/client/views/DocumentDecorations.tsx  |  4 +-
 src/client/views/InkingControl.tsx        |  6 +--
 src/client/views/Main.tsx                 | 12 +----
 src/client/views/nodes/DocumentView.tsx   |  6 ---
 6 files changed, 76 insertions(+), 70 deletions(-)

(limited to 'src/client/views/DocumentDecorations.tsx')

diff --git a/package-lock.json b/package-lock.json
index 75c02628e..4830b4ac1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3574,14 +3574,18 @@
       },
       "dependencies": {
         "readable-stream": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
-          "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
+          "version": "2.3.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
           }
         }
       }
@@ -11929,6 +11933,26 @@
       "requires": {
         "is-fullwidth-code-point": "^2.0.0",
         "strip-ansi": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
       }
     },
     "string_decoder": {
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index f39f31c3b..a29bf36fa 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,51 +1,18 @@
 @import "global_variables";
 #documentDecorations-container {
-<<<<<<< HEAD
-  position: absolute;
-  display: grid;
-  z-index: 1000;
-  grid-template-rows: 8px 1fr 8px;
-  grid-template-columns: 8px 1fr 8px;
-  pointer-events: none;
-  #documentDecorations-centerCont {
-    background: none;
-  }
-  .documentDecorations-resizer {
-    pointer-events: auto;
-    background: $alt-accent;
-    opacity: 0.8;
-  }
-  #documentDecorations-topLeftResizer,
-  #documentDecorations-bottomRightResizer {
-    cursor: nwse-resize;
-  }
-  #documentDecorations-topRightResizer,
-  #documentDecorations-bottomLeftResizer {
-    cursor: nesw-resize;
-  }
-  #documentDecorations-topResizer,
-  #documentDecorations-bottomResizer {
-    cursor: ns-resize;
-  }
-  #documentDecorations-leftResizer,
-  #documentDecorations-rightResizer {
-    cursor: ew-resize;
-  }
-}
-=======
     position: absolute;
     display: grid;
     z-index: 1000;
-    grid-template-rows: 20px 1fr 20px 0px;
-    grid-template-columns: 20px 1fr 20px;
+    grid-template-rows: 8px 1fr 8px 30px;
+    grid-template-columns: 8px 1fr 8px;
     pointer-events: none;
     #documentDecorations-centerCont {
         background: none;
     }
     .documentDecorations-resizer {
         pointer-events: auto;
-        background: lightblue;
-        opacity: 0.4;
+        background: $alt-accent;
+        opacity: 0.8;
     }
     #documentDecorations-topLeftResizer,
     #documentDecorations-bottomRightResizer {
@@ -63,8 +30,43 @@
     #documentDecorations-rightResizer {
         cursor: ew-resize;
     }
-    
 }
+
+//     position: absolute;
+//     display: grid;
+//     z-index: 1000;
+//     grid-template-rows: 20px 1fr 20px 0px;
+//     grid-template-columns: 20px 1fr 20px;
+//     pointer-events: none;
+//     #documentDecorations-centerCont {
+//         background: none;
+//     }
+//     .documentDecorations-resizer {
+//         pointer-events: auto;
+//         background: lightblue;
+//         opacity: 0.4;
+//     }
+//     #documentDecorations-topLeftResizer,
+//     #documentDecorations-bottomRightResizer {
+//         cursor: nwse-resize;
+//     }
+//     #documentDecorations-topRightResizer,
+//     #documentDecorations-bottomLeftResizer {
+//         cursor: nesw-resize;
+//     }
+//     #documentDecorations-topResizer,
+//     #documentDecorations-bottomResizer {
+//         cursor: ns-resize;
+//     }
+//     #documentDecorations-leftResizer,
+//     #documentDecorations-rightResizer {
+//         cursor: ew-resize;
+//     }
+// }
+.linkFlyout {
+    grid-column: 1/4
+}
+
 .linkButton-empty {
     height: 20px;
     width: 20px;
@@ -74,6 +76,7 @@
     pointer-events: auto;
     background-color: #2B6091;
 }
+
 .linkButton-nonempty {
     height: 20px;
     width: 20px;
@@ -82,5 +85,4 @@
     opacity: 0.6;
     pointer-events: auto;
     background-color: rgb(35, 165, 42);
-}
->>>>>>> 618e66a5a070f1aac9224bd3f44b76a5ac314bfa
+}
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index a644e4dbe..b75644ecd 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -220,7 +220,7 @@ export class DocumentDecorations extends React.Component {
         return (
             <div id="documentDecorations-container" style={{
                 width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
-                height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px",
+                height: (bounds.b - bounds.y + this._resizeBorderWidth + 30) + "px",
                 left: bounds.x - this._resizeBorderWidth / 2,
                 top: bounds.y - this._resizeBorderWidth / 2,
             }}>
@@ -234,7 +234,7 @@ export class DocumentDecorations extends React.Component {
                 <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
 
-                {linkButton}
+                <div className="linkFlyout">{linkButton}</div>
 
             </div >
         )
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 96bf4d091..bf633b034 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -1,14 +1,10 @@
 import { observable, action, computed } from "mobx";
-<<<<<<< HEAD
+
 import { CirclePicker, ColorResult } from 'react-color'
-=======
-import { CirclePicker, ColorResult } from 'react-color';
 import React = require("react");
 import "./InkingCanvas.scss"
->>>>>>> 618e66a5a070f1aac9224bd3f44b76a5ac314bfa
 import { InkTool } from "../../fields/InkField";
 import { observer } from "mobx-react";
-import React = require("react");
 import "./InkingCanvas.scss"
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 1c0b9684e..687c765ec 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -82,7 +82,6 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     let audiourl = "http://techslides.com/demos/samples/sample.mp3";
     let videourl = "http://techslides.com/demos/sample-videos/small.mp4";
     let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
-<<<<<<< HEAD
     let addTextNode = action(() => Documents.TextDocument({ width: 230, height: 130, title: "a text note" }))
     let addColNode = action(() => Documents.FreeformDocument([], { width: 300, height: 300, title: "a freeform collection" }));
     let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 450, height: 200, title: "a schema collection" }));
@@ -91,16 +90,7 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     let addWebNode = action(() => Documents.WebDocument(weburl, { width: 300, height: 400, title: "a sample web page" }));
     let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 300, height: 250, title: "video node" }));
     let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 250, height: 100, title: "audio node" }));
-=======
-    let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
-    let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
-    let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" }));
-    let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, height: 200, title: "video node" }));
-    let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" }));
-    let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" }));
-    let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" }));
-    let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" }))
->>>>>>> 618e66a5a070f1aac9224bd3f44b76a5ac314bfa
+
     let addClick = (creator: () => Document) => action(() =>
         mainfreeform.GetList<Document>(KeyStore.Data, []).push(creator())
     );
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1db16aca6..dc793c16d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -100,17 +100,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
-<<<<<<< HEAD
-
-        if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
-=======
         if (e.shiftKey && e.buttons === 2) {
             if (this.props.isTopMost) {
                 this.startDragging(e.pageX, e.pageY);
             }
             else CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
->>>>>>> 618e66a5a070f1aac9224bd3f44b76a5ac314bfa
             e.stopPropagation();
         } else {
             if (this.active && !e.isDefaultPrevented()) {
-- 
cgit v1.2.3-70-g09d2


From 31c9722ed5e587d3ae294db83c134b8e6ad050f8 Mon Sep 17 00:00:00 2001
From: Hannah Chow <hannah_chow@brown.edu>
Date: Mon, 11 Mar 2019 18:32:28 -0400
Subject: added tooltips

---
 src/client/views/DocumentDecorations.scss | 12 ++++++------
 src/client/views/DocumentDecorations.tsx  |  2 +-
 src/client/views/nodes/LinkBox.scss       | 22 +++++++++++++++++-----
 src/client/views/nodes/LinkBox.tsx        |  6 +++---
 src/client/views/nodes/LinkMenu.tsx       |  4 ++--
 5 files changed, 29 insertions(+), 17 deletions(-)

(limited to 'src/client/views/DocumentDecorations.tsx')

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index a9621efa5..9e3034829 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -80,11 +80,11 @@
 }
 
 .linkButton-empty {
-    height: 20px;
-    width: 20px;
+    height: 16px;
+    width: 16px;
     margin-top: 10px;
     border-radius: 50%;
-    opacity: 0.6;
+    opacity: 0.9;
     pointer-events: auto;
     background-color: $dark-color;
     color: $light-color;
@@ -95,11 +95,11 @@
 }
 
 .linkButton-nonempty {
-    height: 20px;
-    width: 20px;
+    height: 16px;
+    width: 16px;
     margin-top: 10px;
     border-radius: 50%;
-    opacity: 0.6;
+    opacity: 0.9;
     pointer-events: auto;
     background-color: $dark-color;
     color: $light-color;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b75644ecd..313b35ca8 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -234,7 +234,7 @@ export class DocumentDecorations extends React.Component {
                 <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
 
-                <div className="linkFlyout">{linkButton}</div>
+                <div title="View Links" className="linkFlyout">{linkButton}</div>
 
             </div >
         )
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
index 00e5ebb3d..bdedbc103 100644
--- a/src/client/views/nodes/LinkBox.scss
+++ b/src/client/views/nodes/LinkBox.scss
@@ -1,3 +1,4 @@
+@import "../global_variables";
 .link-container {
     width: 100%;
     height: 30px;
@@ -29,11 +30,22 @@
 }
 
 .button {
-    height: 15px;
-    width: 15px;
-    margin: 8px 5px;
+    height: 16px;
+    width: 16px;
+    margin: 8px 4px;
     border-radius: 50%;
-    opacity: 0.6;
+    opacity: 0.9;
     pointer-events: auto;
-    background-color: #2B6091;
+    background-color: $dark-color;
+    color: $light-color;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 75%;
+    transition: transform 0.2s;
+}
+
+.button:hover {
+    background: $main-accent;
+    transform: scale(1.05);
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 69df676ff..44b3dccb7 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -79,9 +79,9 @@ export class LinkBox extends React.Component<Props> {
                 </div>
 
                 <div className="button-container">
-                    <div className="button" onPointerDown={this.onViewButtonPressed}></div>
-                    <div className="button" onPointerDown={this.onEditButtonPressed}></div>
-                    <div className="button" onPointerDown={this.onDeleteButtonPressed}></div>
+                    <div title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}></div>
+                    <div title="Edit Link" className="button" onPointerDown={this.onEditButtonPressed}></div>
+                    <div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}></div>
                 </div>
             </div>
         )
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 5c6b06d00..5eeb40772 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -39,8 +39,8 @@ export class LinkMenu extends React.Component<Props> {
                 <div id="linkMenu-container">
                     <input id="linkMenu-searchBar" type="text" placeholder="Search..."></input>
                     <div id="linkMenu-list">
-                        {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Source: ")}
-                        {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Destination: ")}
+                        {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Destination: ")}
+                        {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Source: ")}
                     </div>
                 </div>
             )
-- 
cgit v1.2.3-70-g09d2


From d3c5e42de48f59695952af85e1af84251d7d6988 Mon Sep 17 00:00:00 2001
From: Hannah Chow <hannah_chow@brown.edu>
Date: Mon, 11 Mar 2019 19:41:20 -0400
Subject: got buttons to be responsive to number of links

---
 src/client/views/DocumentDecorations.scss | 13 +++++++++++--
 src/client/views/DocumentDecorations.tsx  |  5 ++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

(limited to 'src/client/views/DocumentDecorations.tsx')

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 5912d5901..e77e22c5d 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -80,8 +80,8 @@
 }
 
 .linkButton-empty {
-    height: 16px;
-    width: 16px;
+    height: 20px;
+    width: 20px;
     margin-top: 10px;
     border-radius: 50%;
     opacity: 0.9;
@@ -92,6 +92,11 @@
     letter-spacing: 2px;
     font-size: 75%;
     transition: transform 0.2s;
+    text-align: center;
+    display: flex;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
 }
 
 .linkButton-nonempty {
@@ -107,4 +112,8 @@
     letter-spacing: 2px;
     font-size: 75%;
     transition: transform 0.2s;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 313b35ca8..3bdb7d5b3 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -208,13 +208,16 @@ export class DocumentDecorations extends React.Component {
         let linkButton = null;
         if (SelectionManager.SelectedDocuments().length > 0) {
             let selFirst = SelectionManager.SelectedDocuments()[0];
+            let linkToSize = selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length;
+            let linkFromSize = selFirst.props.Document.GetData(KeyStore.LinkedFromDocs, ListField, []).length;
+            let linkCount = linkToSize + linkFromSize;
             linkButton = (<Flyout
                 anchorPoint={anchorPoints.RIGHT_TOP}
                 content={
                     <LinkMenu docView={selFirst} changeFlyout={this.changeFlyoutContent}>
                     </LinkMenu>
                 }>
-                <div className={"linkButton-" + (selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} ref={this._linkButton} />
+                <div className={"linkButton-" + (selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} ref={this._linkButton}>{linkCount}</div>
             </Flyout>);
         }
         return (
-- 
cgit v1.2.3-70-g09d2

