aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/MainView.tsx1
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.scss108
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx62
3 files changed, 145 insertions, 26 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index d337aae68..eb4f4761e 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -279,6 +279,7 @@ export class MainView extends ObservableReactComponent<{}> {
library.add(
...[
+ fa.faFloppyDisk,
fa.faRepeat,
fa.faArrowsUpDown,
fa.faArrowsLeftRight,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 328cbbaf1..bc10600ca 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -17,6 +17,8 @@
.docCreatorMenu-menu {
display: flex;
flex-direction: row;
+ height: 25px;
+ align-items: flex-end;
}
.docCreatorMenu-menu-button {
@@ -41,6 +43,9 @@
&.close-menu {
font-size: 12px;
+ width: 15px;
+ height: 15px;
+ font-size: 12px;
margin-left: auto;
}
@@ -51,6 +56,88 @@
&:hover {
background-color: rgb(60, 60, 65);
}
+
+ &.top-bar {
+ border-bottom: 25px solid #555;
+ border-left: 12px solid transparent;
+ border-right: 12px solid transparent;
+ // border-top-left-radius: 5px;
+ // border-top-right-radius: 5px;
+ border-radius: 0px;
+ height: 0;
+ width: 50px;
+ }
+}
+
+.docCreatorMenu-top-buttons-container {
+ position: relative;
+ margin-top: 5px;
+ margin-left: 7px;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ width: 150px;
+ height: auto;
+}
+
+.top-button-container {
+ position: relative;
+ width: 52px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &.left {
+ z-index: 3;
+ }
+
+ &.middle {
+ position: absolute;
+ left: 40px;
+ z-index: 2;
+ }
+
+ &.right {
+ position: absolute;
+ left: 80px;
+ z-index: 1;
+ }
+
+ &:hover::before{
+ border-bottom: 20px solid rgb(82, 82, 82);
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ border-bottom: 20px solid rgb(50, 50, 50);
+ border-left: 12px solid transparent;
+ border-right: 12px solid transparent;
+ height: 0;
+ width: 50px;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ border-bottom: 22px solid rgb(180, 180, 180);
+ border-left: 12px solid transparent;
+ border-right: 12px solid transparent;
+ height: 0;
+ width: 52px;
+ z-index: -1;
+ }
+}
+
+.top-button-content {
+ position: relative;
+ z-index: 1;
+ color: white;
}
.docCreatorMenu-menu-hr{
@@ -59,7 +146,6 @@
color: rgb(180, 180, 180);
}
-
.docCreatorMenu-placement-indicator {
position: absolute;
z-index: 100000;
@@ -69,6 +155,22 @@
height: 25px;
}
+.docCreatorMenu-create-docs-button {
+ width: 80px;
+ height: 40px;
+ background-color: rgb(176, 229, 149);
+ border-radius: 5px;
+ border: 2px solid rgb(126, 219, 80);
+ padding: 0px;
+ font-size: 16px;
+ color: black;
+
+ &:hover {
+ background-color: rgb(129, 223, 83);
+ border: 2px solid rgb(80, 185, 28);
+ }
+}
+
//------------------------------------------------------------------------------------------------------------------------------------------
//DocCreatorMenu templates preview CSS
//--------------------------------------------------------------------------------------------------------------------------------------------
@@ -83,7 +185,7 @@
margin: 5px;
margin-top: 0px;
width: calc(100% - 10px);
- height: calc(100% - 45px);
+ height: calc(100% - 30px);
border: 1px solid rgb(180, 180, 180);
border-radius: 5px;
@@ -243,7 +345,7 @@
margin: 5px;
margin-top: 0px;
width: calc(100% - 10px);
- height: calc(100% - 45px);
+ height: calc(100% - 30px);
border: 1px solid rgb(180, 180, 180);
border-radius: 5px;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 48b87fae7..27c5b17ef 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -54,7 +54,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
@observable _startPos?: {x: number, y: number};
@observable _shouldDisplay: boolean = false;
- @observable _menuContent: 'templates' | 'options' = 'templates';
+ @observable _menuContent: 'templates' | 'options' | 'saved' = 'templates';
@observable _dragging: boolean = false;
@observable _draggingIndicator: boolean = false;
@observable _dataViz?: DataVizBox;
@@ -368,11 +368,44 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
{this._layout.type ? this.layoutConfigOptions: null}
{this._layoutPreview ? this.layoutPreviewContents : null}
{selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._layout.repeat = num}>{`${num}x`}</option>))}
+ <button
+ className='docCreatorMenu-create-docs-button'
+ onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
+ undoable(clickEv => {
+ clickEv.stopPropagation();
+ if (!this._selectedTemplate) return;
+ const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
+ this._dataViz?.createDocsFromTemplate(templateInfo);
+ }, 'make docs')
+ )
+ }>
+ Create
+ </button>
</div>
);
}
render() {
+ const topButton = (icon: string, func: Function, tag: string) => {
+ return (
+ <div className={`top-button-container ${tag}`}>
+ <div
+ className="top-button-content"
+ onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {func()}))}>
+ <FontAwesomeIcon icon={icon as any}/>
+ </div>
+ </div>
+ );
+ }
+
+ const onPreviewSelected = () => {this._menuContent = 'templates'}
+ const onSavedSelected = () => {this._menuContent = 'saved'}
+ const onOptionsSelected = () => {
+ this._menuContent = 'options';
+ if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+ }
+
+
return (
<div className='docCreatorMenu'>
{!this._shouldDisplay ? undefined :
@@ -435,28 +468,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
onPointerMove={e => this.onPointerMove(e)}
onPointerUp={() => this._dragging = false}
>
- <button
- className='docCreatorMenu-menu-button'
- onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {
- this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates';
- if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
- }))}>
- <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
- </button>
- <button
- className='docCreatorMenu-menu-button right'
- onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
- undoable(clickEv => {
- clickEv.stopPropagation();
- if (!this._selectedTemplate) return;
- const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
-
- this._dataViz?.createDocsFromTemplate(templateInfo);
- }, 'make docs')
- )
- }>
- <FontAwesomeIcon icon={'plus'}/>
- </button>
+ <div className='docCreatorMenu-top-buttons-container'>
+ {topButton('table-cells', onPreviewSelected, 'left')}
+ {topButton('bars', onOptionsSelected, 'middle')}
+ {topButton('floppy-disk', onSavedSelected, 'right')}
+ </div>
<button
className='docCreatorMenu-menu-button close-menu'
onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:16:02 +0000