aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.scss33
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx53
2 files changed, 63 insertions, 23 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 43d4ed7e5..452d9b354 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -49,6 +49,8 @@
.docCreatorMenu-preview-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: 140px;
+ grid-auto-rows: 141px;
overflow-y: scroll;
margin: 5px;
width: calc(100% - 10px);
@@ -57,17 +59,33 @@
border-radius: 5px;
.docCreatorMenu-preview-window {
+ display: flex;
+ justify-content: center;
+ align-items: center;
width: 125px;
height: 125px;
margin-top: 10px;
margin-left: 10px;
border: 1px solid whitesmoke;
border-radius: 5px;
+ box-shadow: 5px 5px rgb(34, 34, 37);
+
+ &:hover{
+ background-color: rgb(72, 72, 73);
+ }
+
+ .docCreatorMenu-preview-image{
+ width: 105px;
+ height: 105px;
+ border-radius: 5px;
+ }
+
}
}
.docCreatorMenu-options-container {
display: flex;
+ justify-content: center;
overflow-y: scroll;
margin: 5px;
width: calc(100% - 10px);
@@ -77,22 +95,23 @@
.docCreatorMenu-dropdown-button{
display: flex;
- width: 120px;
- height: 30px;
+ width: 140px;
+ height: 25px;
background: whitesmoke;
background-color: rgb(34, 34, 37);
border-radius: 5px;
border: 1px solid whitesmoke;
padding: 0px;
- font-size: 13px;
+ font-size: 12px;
margin: 10px;
- align-content: center;
+ align-items: center;
justify-content: center;
text-transform: uppercase;
+ cursor: pointer;
- // &:hover .docCreatorMenu-dropdown-content{
- // display: block;
- // }
+ &:hover .docCreatorMenu-dropdown-content{
+ display: block;
+ }
}
.docCreatorMenu-dropdown-content {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 1976ecad2..7859ec60a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1,5 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IReactionDisposer, action, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
@@ -13,6 +13,8 @@ import { ObservableReactComponent } from '../../ObservableReactComponent';
import { DocumentView } from '../DocumentView';
import { DataVizBox } from './DataVizBox';
import './DocCreatorMenu.scss';
+import { Id } from '../../../../fields/FieldSymbols';
+import { Colors } from 'browndash-components';
@observer
export class DocCreatorMenu extends ObservableReactComponent<{}> {
@@ -22,7 +24,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
private _ref: HTMLDivElement | null = null;
@observable _templateDocs: Doc[] = [];
- @observable _icons : (ImageField|undefined)[] = [];
+ @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
+ @observable _selectedTemplateID?: Doc;
@observable _pageX: number = 0;
@observable _pageY: number = 0;
@@ -64,13 +67,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
}
};
- _disposer: IReactionDisposer|undefined;
+ _disposer: IReactionDisposer | undefined;
componentDidMount() {
document.addEventListener('pointerdown', this.onPointerDown, true);
document.addEventListener('pointerup', this.onPointerUp);
- this._disposer = reaction(() => this._templateDocs.slice(),
- async(docs) => this._icons = (await Promise.all(docs.map(doc => this.getIcon(doc))))
- , {fireImmediately: true});
+ this._disposer = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
}
componentWillUnmount() {
@@ -117,13 +118,34 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
}
get templatesPreviewContents(){
+ const renderedTemplates: Doc[] = [];
return (
<div className='docCreatorMenu-preview-container'>
- {this._icons.filter(url => url).map(url =>
- <div className='docCreatorMenu-preview-window'>
- <img src={url!.url.href.replace(".png", "_s.png")} />
- </div>)
- }
+ {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
+ if (renderedTemplates.includes(info.doc)) return undefined;
+ renderedTemplates.push(info.doc);
+ return (<div
+ className='docCreatorMenu-preview-window'
+ style={{
+ background: this._selectedTemplateID === info.doc ? Colors.MEDIUM_BLUE : '',
+ boxShadow: this._selectedTemplateID === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+ }}
+ onPointerDown={e =>
+ setupMoveUpEvents(
+ this,
+ e,
+ returnFalse,
+ emptyFunction,
+ undoable(clickEv => {
+ clickEv.stopPropagation();
+ this._selectedTemplateID = info.doc;
+ this.forceUpdate();
+ }, 'open actions menu')
+ )
+ }>
+ <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
+ </div>
+ )})}
</div>
);
}
@@ -131,7 +153,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
get optionsMenuContents(){
return (
<div className='docCreatorMenu-options-container'>
- <div className="docCreatorMenu-dropdown-button">Dropdown</div>
+ <div className="docCreatorMenu-dropdown-button">Choose Layout</div>
<div className="docCreatorMenu-dropdown-content">
<div className="docCreatorMenu-dropdown-option">Link 1</div>
<div className="docCreatorMenu-dropdown-option">Link 1</div>
@@ -173,9 +195,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
emptyFunction,
undoable(clickEv => {
clickEv.stopPropagation();
- }, 'open actions menu')
+ }, 'drag menu')
)
-
}
onPointerMove={e => this.onPointerMove(e)}
onPointerUp={() => this._dragging = false}
@@ -191,7 +212,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
undoable(clickEv => {
clickEv.stopPropagation();
runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates');
- }, 'open actions menu')
+ }, 'create docs')
)
}
>
@@ -211,7 +232,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
undoable(clickEv => {
clickEv.stopPropagation();
this.closeMenu();
- }, 'open actions menu')
+ }, 'close menu')
)
}
>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 22:23:34 +0000