From 3b366a85d3544a87174d92657ad684ac46cb6117 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Wed, 13 May 2020 21:50:52 -0700
Subject: bucket ui

---
 .../views/collections/CollectionStackingView.tsx   |  5 ++++-
 src/client/views/search/SearchBox.tsx              |  3 +++
 src/client/views/search/SearchItem.scss            | 23 ++++++++++++++++++++++
 src/client/views/search/SearchItem.tsx             | 13 ++++++++++--
 4 files changed, 41 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 821a6d476..376e7c087 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -47,6 +47,8 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
     @computed get xMargin() { return NumCast(this.props.Document._xMargin, 2 * Math.min(this.gridGap, .05 * this.props.PanelWidth())); }
     @computed get yMargin() { return Math.max(this.props.Document._showTitle && !this.props.Document._showTitleHover ? 30 : 0, NumCast(this.props.Document._yMargin, 0)); } // 2 * this.gridGap)); }
     @computed get gridGap() { return NumCast(this.props.Document._gridGap, 10); }
+    @computed get searchDoc() { return BoolCast(this.props.Document._searchDoc, false); }
+
     @computed get isStackingView() { return BoolCast(this.props.Document.singleColumn, true); }
     @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; }
     @computed get showAddAGroup() { return (this.pivotField && (this.props.Document._chromeStatus !== 'view-mode' && this.props.Document._chromeStatus !== 'disabled')); }
@@ -75,7 +77,8 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
             const dxf = () => this.getDocTransform(d, dref.current!);
             this._docXfs.push({ dxf, width, height });
             const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
-            const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
+            
+            const style = this.isStackingView ? { width: width(), marginTop: i || this.searchDoc? this.gridGap : 0, marginBottom: this.searchDoc? 10:0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
             return <div className={`collectionStackingView-${this.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} ref={dref} style={style} >
                 {this.getDisplayDoc(d, (!d.isTemplateDoc && !d.isTemplateForField && !d.PARAMS) ? undefined : this.props.DataDoc, dxf, width)}
             </div>;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 016ff254b..103e9a298 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -554,6 +554,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         bucket.targetDoc = bucket;
      
         bucket._viewType === CollectionViewType.Stacking;
+        bucket.bucketfield = "Default";
 
         bucket.isBucket=true;
 
@@ -948,6 +949,8 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
     //Make id layour document
     render() {
+        this.props.Document._gridGap=20;
+        this.props.Document._searchDoc=true;
 
         return (
             <div style={{pointerEvents:"all"}}className="searchBox-container">
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 469f062b2..9996e0a50 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -160,4 +160,27 @@
 
 .collection-item {
     width: 35px;
+}
+
+.bucket-title{
+    width:auto;
+    padding: 5px;
+    height: auto;
+    top: -18;
+    z-index: 55;
+    position: absolute;
+}
+
+.bucket-expand{
+    bottom: 0;
+    position: absolute;
+    width: 100%;
+    height: 15;
+    transform:none;
+    .bucket-expand:hover{
+        transform:none;
+    }
+    button:hover{
+        transform:none;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index 564df4232..5cef3b627 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -346,9 +346,15 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
         // const doc2 = Cast(this.targetDoc!.anchor2, Doc);
         if (this.targetDoc.isBucket === true){
             this.props.Document._viewType=CollectionViewType.Stacking;  
-            this.props.Document._height=160;
+            this.props.Document._chromeStatus='disabled';
 
-            return <CollectionView {...this.props}
+            this.props.Document._height=185;
+
+            return <div>
+            <div className="bucket-title">
+                {StrCast(this.rootDoc.bucketfield)}
+            </div>
+            <CollectionView {...this.props}
             Document={this.props.Document}
             PanelHeight={this.panelHeight}
             moveDocument={returnFalse}
@@ -357,6 +363,9 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
             removeDocument={returnFalse}
             focus={this.selectElement}
             ScreenToLocalTransform={this.getTransform} />
+            <button className="bucket-expand">
+            </button>
+            </div>
         }
         else {
         return <div className="searchItem-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}>
-- 
cgit v1.2.3-70-g09d2