aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts4
-rw-r--r--src/client/views/nodes/DocumentView.tsx2
-rw-r--r--src/client/views/nodes/LabelBox.tsx15
-rw-r--r--src/client/views/search/SearchBox.scss40
-rw-r--r--src/client/views/search/SearchBox.tsx46
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={{
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 20:59:38 +0000