From 428b90b9e2e902b82f3406a5062f8be6950f4862 Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Fri, 29 Oct 2021 12:05:28 -0400
Subject: style properties panel

---
 src/client/views/PropertiesView.scss               | 38 ++++++++++++++++++++
 src/client/views/PropertiesView.tsx                | 40 +++++++++++-----------
 .../CollectionFreeFormLinkView.tsx                 |  4 +--
 3 files changed, 59 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 554f137cb..b75e7182c 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -2,6 +2,7 @@
 
 .propertiesView {
     height: 100%;
+    width: 250;
     font-family: "Roboto";
     cursor: auto;
 
@@ -836,3 +837,40 @@
 .properties-flyout {
     grid-column: 2/4;
 }
+
+.propertiesView-linking {
+    padding: 5%;
+}
+
+.propertiesView-section {
+    padding: 10px 0;
+}
+
+.propertiesView-input {
+    padding: 4px 8px;
+
+    .text {
+        width: 100%;
+    }
+
+    &.first {
+        padding-top: 6px;
+    }
+
+    &.inline {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+
+.propertiesView-label {
+    font-weight: bold;
+    font-size: 12.5px;
+    padding: 4px;
+    display: flex;
+    color: white;
+    padding-left: 8px;
+    background-color: rgb(51, 51, 51);
+}
\ No newline at end of file
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 334a44b3b..b5bae6652 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1111,25 +1111,25 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div className="propertiesView-title">
                         Linking
                     </div>
-                    <div className="properties-grid col propertiesView-textInfo">
-                        Information
-                        <div className="row" id="propertiesView-label">
+                    <div className="propertiesView-section">
+                        <p className="propertiesView-label">Information</p>
+                        <div className="propertiesView-input first" id="propertiesView-label">
                             <p>Label</p>
-                            <input type="text" />
+                            <input className="text" type="text" />
                         </div>
-                        <div className="row" id="propertiesView-category">
-                            <p>Label</p>
-                            <input type="text" />
+                        <div className="propertiesView-input" id="propertiesView-category">
+                            <p>Category</p>
+                            <input className="text" type="text" />
                         </div>
-                        <div className="row" id="propertiesView-description">
+                        <div className="propertiesView-input" id="propertiesView-description">
                             <p>Description</p>
-                            <input type="text" />
+                            <input className="text" type="text" />
                         </div>
                     </div>
-                    <div className="propertiesView-behavior">
-                        Behavior
-                        <div id="propertiesView-follow">
-                            Follow
+                    <div className="propertiesView-section">
+                        <p className="propertiesView-label">Behavior</p>
+                        <div className="propertiesView-input inline first" id="propertiesView-follow">
+                            <p>Follow</p>
                             <select name="selectList" id="selectList">
                                 <option value="default">Default</option>
                                 <option value="newLeft">Open in new left pane</option>
@@ -1140,22 +1140,22 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 <option value="openTab">Open in new tab</option>
                             </select>
                         </div>
-                        <div id="propertiesView-anchor">
-                            Auto-move anchor
+                        <div className="propertiesView-input inline" id="propertiesView-anchor">
+                            <p>Auto-move anchor</p>
                             <button
-                                style={{ backgroundColor: this.selectedDoc.anchor ? 'blue' : 'white', width: 50, height: 50 }}
+                                style={{ backgroundColor: this.selectedDoc.anchor ? 'blue' : 'white', width: '2rem', height: '2rem' }}
                                 onClick={this.toggleAnchor}
                             />
                         </div>
-                        <div id="propertiesView-arrow">
-                            Auto-move arrow
+                        <div className="propertiesView-input inline" id="propertiesView-arrow">
+                            <p>Auto-move arrow</p>
                             <button
-                                style={{ backgroundColor: this.selectedDoc.arrow ? 'blue' : 'white', width: 50, height: 50 }}
+                                style={{ backgroundColor: this.selectedDoc.arrow ? 'blue' : 'white', width: '2rem', height: '2rem' }}
                                 onClick={this.toggleArrow}
                             />
                         </div>
                     </div>
-                </div>;
+                </div >;
             }
             if (this.selectedDoc && !this.isPres) {
                 return <div className="propertiesView" style={{
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index d4ef76221..5391061b1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -215,9 +215,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
             <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? "red" : stroke, strokeWidth }}
                 onClick={this.onClickLine}
-                onPointerOver={() => {
-                    console.log(this.props.LinkDocs[0].directed)
-                }} />
+                d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`} />
             {textX === undefined ? (null) : <text className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown} >
                 {Field.toString(this.props.LinkDocs[0].description as any as Field)}
             </text>}
-- 
cgit v1.2.3-70-g09d2