document buttons change on hover and click

5 files changed, 71 insertions, 36 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2b5727254..db423fc84 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -157,9 +157,11 @@ export interface DocumentOptions {
     selectedIndex?: number;
     syntaxColor?: string; // can be applied to text for syntax highlighting all matches in the text
     searchText?: string, //for searchbox
-    searchQuery?: string, // for queryBox
+    searchQuery?: string, // for quersyBox
     filterQuery?: filterData,
     linearViewIsExpanded?: boolean; // is linear view expanded
+    border?: string; //for searchbox
+    hovercolor?:string;
 }
 
 class EmptyBox {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c0d530160..40a29b6b9 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1153,7 +1153,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 pointerEvents: this.ignorePointerEvents ? "none" : "all",
                 color: StrCast(this.layoutDoc.color, "inherit"),
                 outline: highlighting && !borderRounding ? `${highlightColors[fullDegree]} ${highlightStyles[fullDegree]} ${localScale}px` : "solid 0px",
-                border: highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined,
+                border: this.layoutDoc.border ? StrCast(this.layoutDoc.border) : highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined,
                 boxShadow: this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : undefined,
                 background: finalColor,
                 opacity: this.Document.opacity
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 391e359cc..fca38763e 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -1,6 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faEdit } from '@fortawesome/free-regular-svg-icons';
-import { action } from 'mobx';
+import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast } from '../../../new_fields/Doc';
@@ -61,17 +61,26 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps, LabelDocument
             e.stopPropagation();
         }
     }
+
+
+
+    @observable backColor= "unset";
+
+    @observable clicked = false;
     // (!missingParams || !missingParams.length ? "" : "(" + missingParams.map(m => m + ":").join(" ") + ")")
     render() {
         const params = Cast(this.paramsDoc["onClick-paramFieldKeys"], listSpec("string"), []);
         const missingParams = params?.filter(p => !this.paramsDoc[p]);
         params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... 
+        console.log(this.backColor);
         return (
-            <div className="labelBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu}
+            <div className="labelBox-outerDiv" onClick={()=>runInAction(()=>{this.clicked=!this.clicked; this.clicked? this.backColor=StrCast(this.layoutDoc.hovercolor) : this.backColor ="unset"})} onMouseLeave={()=>runInAction(()=>{ !this.clicked ?this.backColor="unset" : null})} 
+            onMouseOver={()=>runInAction(()=>{this.backColor=StrCast(this.layoutDoc.hovercolor);})}ref={this.createDropTarget} onContextMenu={this.specificContextMenu}
                 style={{ boxShadow: this.layoutDoc.opacity ? StrCast(this.layoutDoc.boxShadow) : "" }}>
                 <div className="labelBox-mainButton" style={{
                     background: StrCast(this.layoutDoc.backgroundColor),
-                    color: StrCast(this.layoutDoc.color, "inherit"),
+                    color: StrCast(this.layoutDoc.color),
+                    backgroundColor:this.backColor,
                     fontSize: NumCast(this.layoutDoc.fontSize) || "inherit",
                     letterSpacing: StrCast(this.layoutDoc.letterSpacing),
                     textTransform: StrCast(this.layoutDoc.textTransform) as any
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index c13873b1a..e3b3de898 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -131,8 +131,7 @@
         color: grey;
         transform-origin: top;
         border-top: 0px;
-        margin-left: 10px;
-        margin-right: 10px;
+
         overflow:hidden;
         transition:height 0.3s ease-out;
         height:0px;
@@ -144,29 +143,28 @@
         color: grey;
         transform-origin: top;
         border-top: 0px;
-        margin-left: 10px;
-        margin-right: 10px;
         overflow:hidden;
         transition:height 0.3s ease-out;
         height:0px;
-        .filter-keybar {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-evenly;
-            height: auto;
-            width: 100%;
-            flex-direction: row-reverse;
-            margin-top:5px;
-            
-            .filter-item {
-                position: relative;
-                border:1px solid grey;
-                border-radius: 16px;
-    
-            }
-        }
-
 
+        .labelBox-mainButton:hover{
+            color:"White";
+        }
+        // .filter-keybar {
+        //     display: flex;
+        //     flex-wrap: wrap;
+        //     justify-content: space-evenly;
+        //     height: auto;
+        //     width: 100%;
+        //     flex-direction: row-reverse;
+        //     margin-top:5px;
+            
+        //     .filter-item {
+        //         position: relative;
+        //         border:1px solid grey;
+        //         border-radius: 16px;
+        //     }
+        // }
     }
 }
 
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 36dff4438..f5be4f5aa 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -98,7 +98,8 @@ export class SearchBox extends React.Component<SearchProps> {
         if (this.setupButtons==false){
         console.log("Yuh");
             this.setupDocTypeButtons();
-            this.setupKeyButtons()
+            this.setupKeyButtons();
+            this.setupDefaultButtons();
         runInAction(()=>this.setupButtons==true);
     }
         if (this.inputRef.current) {
@@ -563,6 +564,7 @@ export class SearchBox extends React.Component<SearchProps> {
 
     @action.bound
     handleNodeChange = () => {
+        console.log("oi!");
         this._nodeStatus = !this._nodeStatus;
         if (this._nodeStatus) {
             this.expandSection(`node${this.props.id}`);
@@ -718,7 +720,6 @@ export class SearchBox extends React.Component<SearchProps> {
         return (null);
     }
 
-
     @computed get keyButtons() {
         const nodeBtns = this.props.Document.keyButtons;
         let width = () => NumCast(this.props.Document.width);
@@ -726,7 +727,7 @@ export class SearchBox extends React.Component<SearchProps> {
             width = MainView.Instance.flyoutWidthFunc;
         }
         if (nodeBtns instanceof Doc) {
-            return <div id="hi" style={{height:"100px",}}>
+            return <div id="hi" style={{height:"35px",}}>
                 <DocumentView
                 Document={nodeBtns}
                 DataDoc={undefined}
@@ -759,7 +760,10 @@ export class SearchBox extends React.Component<SearchProps> {
 
     setupDocTypeButtons() {
         let doc = this.props.Document;
-        const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts,  backgroundColor: "#121721", dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc;
+        const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts,  
+        dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100,
+         _height: 100 })) as any as Doc;
+        //backgroundColor: "#121721",       
         doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" });
         doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" });
         doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" });
@@ -784,16 +788,39 @@ export class SearchBox extends React.Component<SearchProps> {
     setupKeyButtons() {
         let doc = this.props.Document;
         const button = (opts: DocumentOptions) => new PrefetchProxy( Docs.Create.ButtonDocument({...opts,
-            _width: 35, _height: 25, fontSize: 10,  
-            letterSpacing: "0px", textTransform: "unset", borderRounding: "16px",
+            _width: 35, _height: 30,
+            borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px",
+            fontSize: 7,
         }))as any as Doc;
         doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("this.updateTitleStatus")});
+        doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript(`this.handleNodeChange()`)});
+        doc.author = button({ title: "Author", onClick:ScriptField.MakeScript("this.updateTitleStatus")});
 
-        let buttons = [doc.title as Doc];
+        let buttons = [doc.title as Doc, doc.deleted as Doc, doc.author as Doc];
 
         const dragCreators = Docs.Create.MasonryDocument(buttons, {
-            _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons",
-            //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _yMargin: 5
+            _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 50, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons",_yMargin: 5
+            //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), 
+        });
+        doc.keyButtons= dragCreators;
+    }
+
+    setupDefaultButtons() {
+        let doc = this.props.Document;
+        const button = (opts: DocumentOptions) => new PrefetchProxy( Docs.Create.ButtonDocument({...opts,
+            _width: 35, _height: 30,
+            borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px",
+            fontSize: 7,
+        }))as any as Doc;
+        doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("this.updateTitleStatus")});
+        doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript(`this.handleNodeChange`)});
+        doc.nodes = button({ title: "Nodes", onClick:ScriptField.MakeScript("this.updateTitleStatus")});
+
+        let buttons = [doc.title as Doc, doc.deleted as Doc, doc.author as Doc];
+
+        const dragCreators = Docs.Create.MasonryDocument(buttons, {
+            _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 50, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons",_yMargin: 5
+            //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), 
         });
         doc.keyButtons= dragCreators;
     }
@@ -827,7 +854,6 @@ export class SearchBox extends React.Component<SearchProps> {
                             <button className="filter-item" style={this._deletedDocsStatus ? { background: "#aaaaa3", } : {}} onClick={this.updateDataStatus}>Deleted Docs</button>
                             <button className="filter-item" style={this._authorFieldStatus ? { background: "#aaaaa3", } : {}} onClick={this.updateAuthorStatus}>Author</button> */}
                             {this.keyButtons}
-                        {/* </div> */}
                     </div>
                 </div>
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{