merge

3 files changed, 22 insertions, 8 deletions

diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
index 6d388bb40..290958cd0 100644
--- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
+++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
@@ -8,7 +8,11 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
 import { ContextMenu } from "../ContextMenu";
 import { action } from "mobx";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+library.add(faGripVertical);
 
 export interface MovableColumnProps {
     columnRenderer: TableCellRenderer;
@@ -198,11 +202,12 @@ export class MovableRow extends React.Component<MovableRowProps> {
         return (
             <div className={className} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
                 <div className="collectionSchema-row-wrapper" ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
-                    <div className="row-dragger" ref={reference} onPointerDown={onItemDown}>
-                        <ReactTableDefaults.TrComponent>
-                            {children}
-                        </ReactTableDefaults.TrComponent>
-                    </div>
+                    <ReactTableDefaults.TrComponent>
+                        <div className="row-dragger" ref={reference} onPointerDown={onItemDown}>
+                            <FontAwesomeIcon icon={"grip-vertical"} size="sm" />
+                        </div>
+                        {children}
+                    </ReactTableDefaults.TrComponent>
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 3bc1bc060..22d8a5cb6 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -70,6 +70,9 @@
     }
 
     .rt-thead {
+        width: calc(100% - 30px);
+        margin-left: 30px;
+
         &.-header {
             // background: $intermediate-color;
             // color: $light-color;
@@ -77,6 +80,8 @@
             height: 30px;
             // border: 1px solid $intermediate-color;
             box-shadow: none;
+            // width: calc(100% - 30px);
+            // margin-right: -30px;
         }
 
         .rt-resizable-header {
@@ -298,6 +303,10 @@ button.add-column {
 
     .row-dragger {
         // height: $MAX_ROW_HEIGHT;
+        width: 30px;
+        height: 100%;
+        padding: 10px;
+        color: gray;
     }
 
     .collectionSchema-row-wrapper {
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 52fee26bf..03676fe86 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -53,7 +53,7 @@ class CollectionViewBaseChrome extends React.Component<CollectionViewChromeProps
                     <option value="masonry" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Masonry}>Masonry View</option>
                 </select>
             </div>
-        )
+        );
     }
 }
 
@@ -147,6 +147,6 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
                     </div>
                 </div>
             </div>
-        )
+        );
     }
-}
\ No newline at end of file
+}