From f2fa6d6d28f2011a13f9034f5685b08301c291e4 Mon Sep 17 00:00:00 2001
From: laurawilsonri <laura_wilson@brown.edu>
Date: Tue, 19 Mar 2019 16:48:10 -0400
Subject: ui much better

---
 src/client/views/Main.tsx                          |   1 +
 .../views/collections/CollectionSchemaView.scss    |  87 ++++++-------
 .../views/collections/CollectionSchemaView.tsx     | 143 ++++++---------------
 3 files changed, 77 insertions(+), 154 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 26a07fdfe..a6b893eca 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -78,6 +78,7 @@ export class Main extends React.Component {
         library.add(faFilm);
         library.add(faMusic);
 
+
         this.initEventListeners();
         Documents.initProtos(() => {
             this.initAuthenticationRouters();
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index d16f0edf9..8c2f62d43 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,66 +1,57 @@
+@import "../global_variables";
+
 //options menu styling
 #schemaOptionsMenuBtn {
     position: absolute;
-    height: 15px;
-    width: 15px;
+    height: 20px;
+    width: 20px;
     border-radius: 50%;
     z-index: 21; 
-    right: 3px;
-    top: 3px; 
+    right: 4px;
+    top: 4px; 
     pointer-events: auto;
-    background-color:red;
-}
-
-.dd-item-containter:hover {
-  background-color: rgb(204, 204, 204);
+    background-color:black;
+    display:inline-block;
+    padding: 0px;
+    font-size: 100%;
 }
-
-.dd-item {
-    color: black;
-    padding-left: 6px;
-    padding-bottom: 0px;
-    padding-top: 4px;
-    font-size: 12px;
+#schema-options-header {
+    text-align: center;
+    padding: 0px;
     margin: 0px;
-    display: block;
-    width: 100%;
-    height: 25px;
-    z-index: 100;
 }
-.dd-item:hover {
-    color: black;
-    font-weight: 500;
+.schema-options-subHeader {
+    color: $intermediate-color;
+    margin-bottom: 5px;
+}
+#schemaOptionsMenuBtn:hover {
+    transform: scale(1.15);
 }
 
-.dropdown-menu {
-    height: 100px;
-    overflow-y: scroll;
-  }
-
-#dropdown-basic-button {
-    background-color: #fff;
-    border: .75px solid #bbbbbb;
-    border-radius: 0;
-    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    margin:10px;
-    margin-top: 8px;
-    color: black;
-    display: inline-block;
-    width: 160px;
-    height: 25px;
-    font-size: 15px;
-    padding: 0px;
-    border-radius: 3px;
-    font-size: 12px;
-  }
+#preview-schema-checkbox-div {
+    margin-left: 20px;
+    font-size: 11px;
+}
 
   #options-flyout-div {
-    text-align: center;
+    text-align: left;
     padding:0px;
+    z-index: 100;
+    font-family: $sans-serif;
+    padding-left: 5px;
+  }
+
+  #schema-col-checklist {
+    overflow: scroll;
+    text-align: left;
+    //background-color: $light-color-secondary;
+    line-height: 25px;
+    max-height: 175px;
+    font-family: $sans-serif;
+    font-size: 12px;
   }
   
-@import "../global_variables";
+
 .collectionSchemaView-container {
     border: 1px solid $intermediate-color;
     border-radius: $border-radius;
@@ -68,7 +59,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    
     .collectionSchemaView-content {
         position: absolute;
         height: 100%;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index da38d54c4..07b4d150a 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -19,10 +19,12 @@ import { CollectionViewBase } from "./CollectionViewBase";
 import { setupDrag } from "../../util/DragManager";
 import '../DocumentDecorations.scss';
 import { Flyout, anchorPoints } from "../DocumentDecorations";
-import { DropdownButton, Dropdown } from 'react-bootstrap';
 import { ListField } from "../../../fields/ListField";
 import { Key } from "../../../fields/Key";
 import { Server } from "../../Server";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCog } from '@fortawesome/free-solid-svg-icons';
 
 
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
@@ -44,7 +46,7 @@ class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggl
     render() {
         if (this.key) {
             return (<div key={this.key.Id}>
-                <input type="checkbox" checked={this.props.checked} onChange={() => this.key && this.props.toggle(this.key)} />{this.key.Name}
+                <input type="checkbox" checked={this.props.checked} onChange={() => this.key && this.props.toggle(this.key)} />  {this.key.Name}
             </div>)
         } else {
             return <div></div>
@@ -66,6 +68,7 @@ export class CollectionSchemaView extends CollectionViewBase {
     @observable _columnsPercentage = 0;
     @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0); }
 
+
     renderCell = (rowProps: CellInfo) => {
         let props: FieldViewProps = {
             doc: rowProps.value[0],
@@ -156,6 +159,15 @@ export class CollectionSchemaView extends CollectionViewBase {
             })
     }
 
+    //toggles preview side-panel of schema
+    @action
+    toggleExpander = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this._startSplitPercent = this.splitPercentage;
+        if (this._startSplitPercent == this.splitPercentage) {
+            this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0);
+        }
+    }
+
     @observable keys: Key[] = [];
 
     findAllDocumentKeys = (): { [id: string]: boolean } => {
@@ -220,37 +232,6 @@ export class CollectionSchemaView extends CollectionViewBase {
         e.stopPropagation();
         e.preventDefault();
     }
-    @action
-    onExpanderUp = (e: PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        document.removeEventListener("pointermove", this.onExpanderMove);
-        document.removeEventListener('pointerup', this.onExpanderUp);
-        if (this._startSplitPercent == this.splitPercentage) {
-            this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0);
-        }
-    }
-    onExpanderDown = (e: React.PointerEvent) => {
-        this._startSplitPercent = this.splitPercentage;
-        e.stopPropagation();
-        e.preventDefault();
-        document.addEventListener("pointermove", this.onExpanderMove);
-        document.addEventListener('pointerup', this.onExpanderUp);
-    }
-
-    onPointerDown = (e: React.PointerEvent) => {
-        // if (e.button === 2 && this.active) {
-        //     e.stopPropagation();
-        //     e.preventDefault();
-        // } else 
-        {
-            // if (e.buttons === 1) {
-            //     if (this.props.isSelected()) {
-            //         e.stopPropagation();
-            //     }
-            // }
-        }
-    }
 
     @action
     onColumnsMove = (e: PointerEvent): void => {
@@ -291,23 +272,16 @@ export class CollectionSchemaView extends CollectionViewBase {
 
     focusDocument = (doc: Document) => { }
 
-    keyDropDownOnSelect = (keyId: string) => {
-        const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]);
-        const listOfFields = this.props.Document.GetList<Document>(this.props.fieldKey, [])[1].fields;
-        if (listOfFields.has(keyId)) {
-            let index = columns.push(listOfFields!.get(keyId)!.key);
-            this.props.Document.SetData(KeyStore.ColumnsKey, columns, ListField);
-        }
-    }
-
-    dropdownItemOnPointerDown = (e: React.PointerEvent): void => {
-        //(e.currentTarget.children[0] as Dropdown.Item ).onSelect();
+    onPointerDown = (e: React.PointerEvent): void => {
+        //
     }
 
     render() {
+        library.add(faCog);
         const columns = this.columns;
         const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
         const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
+        //all the keys/columns that will be displayed in the schema
         const allKeys = this.findAllDocumentKeys();
         let content = this._selectedIndex == -1 || !selected ? (null) : (
             <Measure onResize={this.setScaling}>
@@ -328,53 +302,28 @@ export class CollectionSchemaView extends CollectionViewBase {
                 }
             </Measure>
         )
-        let previewHandle = !this.props.active() ? (null) : (
-            <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
-        let columnsHandle = !this.props.active() ? (null) : (
-            <div className="collectionSchemaView-columnsHandle" onPointerDown={this.onColumnsDown} />);
         let dividerDragger = this.splitPercentage == 0 ? (null) :
             <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
 
-        //get the union of all childrens' keys
-        let addFields: { id: string, name: string }[] = [];
-        let removeFields: { id: string, name: string }[] = [];
-        let optionsMenu = null;
-        if (this.props.active()) {
-            let protos = this.props.Document.GetAllPrototypes();
-            for (const proto of protos) {
-                proto._proxies.forEach((val, key) => {
-                    if (!(key in addFields.keys)) {
-                        let this_name: string = proto.fields!.get(key)!.key.Name;
-                        addFields.push({ id: key, name: this_name });
-                    }
-                })
-            }
-            /*<DropdownButton id="dropdown-basic-button" className="colDropDown" title="Add Column">
-                        {addFields.map(({ id, name }) => (
-                            <div className="dd-item-containter"><Dropdown.Item className="dd-item" eventKey={id} onSelect={this.keyDropDownOnSelect}>{name} </Dropdown.Item></div>))}
-                    </DropdownButton>
-                    <DropdownButton id="dropdown-basic-button" className="colDropDown" title="Remove Column">
-                        {addFields.map(({ id, name }) => (
-                            <div className="dd-item-containter"><Dropdown.Item className="dd-item" eventKey={id} onSelect={this.keyDropDownOnSelect}>{name} </Dropdown.Item></div>))}
-                    </DropdownButton>*/
-            optionsMenu = !this.props.active() ? (null) : (<Flyout
-                anchorPoint={anchorPoints.LEFT_TOP}
-                content={<div id="options-flyout-div"> <h5>Options</h5>
-                    <div className="addColumn-options">
-                        <ul style={{ overflow: "scroll" }}>
-                            {Array.from(Object.keys(allKeys)).map(item => {
-                                return (<KeyToggle checked={allKeys[item]} key={item} keyId={item} toggle={this.toggleKey} />)
-                            })}
-                        </ul>
-                    </div>
+        //options button and menu
+        let optionsMenu = !this.props.active() ? (null) : (<Flyout
+            anchorPoint={anchorPoints.LEFT_TOP}
+            content={<div>
+                <div id="schema-options-header"><h5><b>Options</b></h5></div>
+                <div id="options-flyout-div">
+                    <h6 className="schema-options-subHeader">Preview Window</h6>
+                    <div id="preview-schema-checkbox-div"><input type="checkbox" key={"Show Preview"} checked={this.splitPercentage != 0} onChange={this.toggleExpander} />  Show Preview </div>
+                    <h6 className="schema-options-subHeader" >Displayed Columns</h6>
+                    <ul id="schema-col-checklist" >
+                        {Array.from(Object.keys(allKeys)).map(item => {
+                            return (<KeyToggle checked={allKeys[item]} key={item} keyId={item} toggle={this.toggleKey} />)
+                        })}
+                    </ul>
                 </div>
-                }>
-                <div id="schemaOptionsMenuBtn" />
-            </Flyout>);
-        }
-
-        let colDividerDragger = this._columnsPercentage == 0 ? (null) :
-            <div className="collectionSchemaView-colDividerDragger" onPointerDown={this.onColDividerDown} style={{ height: `${this.DIVIDER_WIDTH}px` }} />
+            </div>
+            }>
+            <button id="schemaOptionsMenuBtn"><FontAwesomeIcon style={{ color: "white" }} icon="cog" size="sm" /></button>
+        </Flyout>);
 
         return (
             <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
@@ -412,27 +361,9 @@ export class CollectionSchemaView extends CollectionViewBase {
                     <div className="collectionSchemaView-previewRegion" style={{ width: `calc(${this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0)}% - ${this.DIVIDER_WIDTH}px)` }}>
                         {content}
                     </div>
-                    {previewHandle}
-
-                    {columnsHandle}
                     {optionsMenu}
                 </div>
             </div >
         )
     }
-}
-/*
-{colDividerDragger}
-                                <div className="collectionSchemaView-addColumn" style={{ height: `${this._columnsPercentage}%` }} >
-                                    {/* <input type="checkbox" id="addColumn-toggle" />
-                                    <label htmlFor="addColumn-toggle" title="Add Column"><p>+</p></label> }
-
-                                    <div className="addColumn-options">
-                                        <ul style={{ overflow: "scroll" }}>
-                                            {Array.from(Object.keys(allKeys)).map(item => {
-                                                return (<KeyToggle checked={allKeys[item]} key={item} keyId={item} toggle={this.toggleKey} />)
-                                            })}
-                                        </ul>
-                                    </div>
-                                </div>
-                                */
\ No newline at end of file
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2