aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.scss82
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx150
2 files changed, 125 insertions, 107 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index bfc1c1216..a9b4e2501 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -1,3 +1,10 @@
+.no-margin {
+ margin-top: 0px !important;
+ margin-bottom: 0px !important;
+ margin-left: 0px !important;
+ margin-right: 0px !important;
+}
+
.docCreatorMenu-cont {
position: absolute;
z-index: 100000;
@@ -269,25 +276,64 @@
}
- .docCreatorMenu-layout-preview-window {
- padding: 5px;
- flex: 0 0 auto;
- overflow: scroll;
- display: grid;
- width: 240;
- height: 240;
- border: 1px solid whitesmoke;
- border-radius: 5px;
- background-color: rgb(34, 34, 37);
- -ms-overflow-style: none;
- scrollbar-width: none;
-
- .docCreatorMenu-layout-preview-item {
- display: flex;
- justify-content: center;
- align-items: center;
+ .docCreatorMenu-layout-preview-window-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 85%;
+ height: auto;
+ position: relative;
+ padding: 0px;
+
+ &:hover .docCreatorMenu-zoom-button {
+ display: block;
+ }
+
+ .docCreatorMenu-layout-preview-window {
+ padding: 5px;
+ flex: 0 0 auto;
+ overflow: scroll;
+ display: grid;
+ width: auto;
+ height: auto;
+ max-width: 240;
+ max-height: 240;
+ border: 1px solid whitesmoke;
+ border-radius: 5px;
+ background-color: rgb(34, 34, 37);
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+
+ .docCreatorMenu-layout-preview-item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 3px;
+ border: solid 1px lightblue;
+ }
+ }
+
+ .docCreatorMenu-zoom-button{
+ display: none;
+ width: 15px;
+ height: 15px;
+ background: whitesmoke;
+ background-color: rgb(34, 34, 37);
border-radius: 3px;
- border: solid 1px lightblue;
+ border: 1px solid whitesmoke;
+ padding: 0px;
+ font-size: 10px;
+ position: absolute;
+ top: 0px;
+ z-index: 6;
+ margin-left: 0px;
+ margin-top: 0px;
+ margin-right: 225px;
+ margin-bottom: 0px;
+
+ &.zoom-in{
+ top: 15px;
+ }
}
}
}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 9da9f5aa8..bae2d2000 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -39,7 +39,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
@observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
@observable _selectedTemplate: Doc | undefined = undefined;
- @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns?: number} = {yMargin: 0, xMargin: 0};
+ @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns: number} = {yMargin: 0, xMargin: 0, columns: 1};
@observable _layoutPreview: boolean = false;
@observable _layoutPreviewScale: number = 1;
@@ -76,7 +76,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
case LayoutType.Column:
return this.docsToRender.length;
case LayoutType.Grid:
- return this._layout.rows ?? 0;
+ return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
default:
return 0;
}
@@ -95,6 +95,19 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
}
}
+ setUpButtonClick = (e: any, func: Function) => {
+ setupMoveUpEvents(
+ this,
+ e,
+ returnFalse,
+ emptyFunction,
+ undoable(clickEv => {
+ clickEv.stopPropagation();
+ func();
+ }, 'create docs')
+ )
+ }
+
@action
onPointerDown = (e: PointerEvent) => {
this._mouseX = e.clientX;
@@ -130,7 +143,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
this._shouldDisplay = false;
} else {
this._pageX = x;
- console.log(y);
this._pageY = y;
this._shouldDisplay = true;
}
@@ -174,15 +186,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '',
boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
}}
- onPointerDown={e =>
- setupMoveUpEvents(this, e, returnFalse, emptyFunction,
- undoable(clickEv => {
- clickEv.stopPropagation();
- this._selectedTemplate = info.doc;
- MakeTemplate(info.doc);
- }, 'open actions menu')
- )
- }>
+ onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {this._selectedTemplate = info.doc; MakeTemplate(info.doc);}))}>
<img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
</div>
)})}
@@ -195,9 +199,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
@action updateColumns = (input: string) => { this._layout.columns = Number(input) };
get layoutConfigOptions() {
- const optionInput = (title: string, func: Function, def?: number, key?: string) => {
+ const optionInput = (title: string, func: Function, def?: number, key?: string, noMargin?: boolean) => {
return (
- <div className='docCreatorMenu-option-container small' key={key}>
+ <div className='docCreatorMenu-option-container small' key={key} style={{marginTop: noMargin ? '0px' : ''}}
+ >
<div className='docCreatorMenu-option-title config layout-config'>
{title}
</div>
@@ -226,8 +231,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
{optionInput('Y Margin:', this.updateYMargin, this._layout.xMargin, '2')}
{optionInput('X Margin:', this.updateXMargin, this._layout.xMargin, '3')}
</div>
- <div className='docCreatorMenu-configuration-bar no-gap'>
- {optionInput('Columns:', this.updateColumns, this._layout.columns, '3')}
+ <div className='docCreatorMenu-configuration-bar'>
+ {optionInput('Columns:', this.updateColumns, this._layout.columns, '3', true)}
</div>
</>
);
@@ -248,49 +253,51 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
return (
- <div
- className='docCreatorMenu-layout-preview-window'
- style={{
- gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledDown(docWidth)}px`,
- gridTemplateRows: `${scaledDown(docHeight)}px`,
- gridAutoRows: `${scaledDown(docHeight)}px`,
- rowGap: `${scaledDown(this._layout.yMargin)}px`,
- columnGap: `${scaledDown(this._layout.xMargin)}px`
- }}>
- {/* <button>
-
- </button> */}
- {this.docsToRender.map(num =>
- <div
- className='docCreatorMenu-layout-preview-item'
- style={{
- width: scaledDown(docWidth),
- height: scaledDown(docHeight),
- fontSize: fontSize,
- }}
- >
- {num}
- </div>
- )}
+ <div className='docCreatorMenu-layout-preview-window-wrapper'>
+ <button
+ className='docCreatorMenu-zoom-button'
+ onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}>
+ <FontAwesomeIcon icon={'minus'}/>
+ </button>
+ <button
+ className='docCreatorMenu-zoom-button zoom-in'
+ onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}>
+ <FontAwesomeIcon icon={'plus'}/>
+ </button>
+ <div
+ className='docCreatorMenu-layout-preview-window'
+ style={{
+ gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledDown(docWidth)}px`,
+ gridTemplateRows: `${scaledDown(docHeight)}px`,
+ gridAutoRows: `${scaledDown(docHeight)}px`,
+ rowGap: `${scaledDown(this._layout.yMargin)}px`,
+ columnGap: `${scaledDown(this._layout.xMargin)}px`
+ }}>
+ {this.docsToRender.map(num =>
+ <div
+ className='docCreatorMenu-layout-preview-item'
+ style={{
+ width: scaledDown(docWidth),
+ height: scaledDown(docHeight),
+ fontSize: fontSize,
+ }}
+ >
+ {num}
+ </div>
+ )}
+ </div>
</div>
);
}
get optionsMenuContents(){
- const layoutOption = (option: LayoutType, optStyle?: {}) => {
+ const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => {
return (
<div
className="docCreatorMenu-dropdown-option"
style={optStyle}
- onPointerDown={e =>
- setupMoveUpEvents(this, e, returnFalse, emptyFunction,
- undoable(clickEv => {
- clickEv.stopPropagation();
- runInAction(() => this._layout.type = option);
- }, 'open actions menu')
- )
- }>
+ onPointerDown={e => this.setUpButtonClick(e, () => {specialFunc?.(); runInAction(() => this._layout.type = option)})}>
{option}
</div>
);
@@ -318,7 +325,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
<div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
<div className="docCreatorMenu-dropdown-content">
{layoutOption(LayoutType.Stacked)}
- {layoutOption(LayoutType.Grid)}
+ {layoutOption(LayoutType.Grid, undefined, () => {this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})}
{layoutOption(LayoutType.Row)}
{layoutOption(LayoutType.Column)}
{layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
@@ -326,14 +333,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
</div>
<button
className='docCreatorMenu-menu-button'
- onPointerDown={e =>
- setupMoveUpEvents(this, e, returnFalse, emptyFunction,
- undoable(clickEv => {
- clickEv.stopPropagation();
- runInAction(() => this._layoutPreview = !this._layoutPreview);
- }, 'open actions menu')
- )
- }>
+ onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreview = !this._layoutPreview))}>
<FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/>
</button>
</div>
@@ -384,29 +384,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
>
<button
className='docCreatorMenu-menu-button'
- onPointerDown={e =>
- setupMoveUpEvents(
- this,
- e,
- returnFalse,
- emptyFunction,
- undoable(clickEv => {
- clickEv.stopPropagation();
- runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates');
- }, 'create docs')
- )
- }
- >
+ onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates'))}>
<FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
</button>
<button
className='docCreatorMenu-menu-button right'
- onPointerDown={e =>
- setupMoveUpEvents(
- this,
- e,
- returnFalse,
- emptyFunction,
+ onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
undoable(clickEv => {
clickEv.stopPropagation();
if (!this._selectedTemplate) return;
@@ -419,18 +402,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
</button>
<button
className='docCreatorMenu-menu-button close-menu'
- onPointerDown={e =>
- setupMoveUpEvents(
- this,
- e,
- returnFalse,
- emptyFunction,
- undoable(clickEv => {
- clickEv.stopPropagation();
- this.closeMenu();
- }, 'close menu')
- )
- }>
+ onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
<FontAwesomeIcon icon={'minus'}/>
</button>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:03:41 +0000