diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.scss | 86 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 43 |
2 files changed, 93 insertions, 36 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss index 452d9b354..ba20c9179 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss @@ -85,7 +85,9 @@ .docCreatorMenu-options-container { display: flex; - justify-content: center; + flex-direction: column; + justify-content: flex-start; + align-items: center; overflow-y: scroll; margin: 5px; width: calc(100% - 10px); @@ -93,40 +95,72 @@ border: 1px solid whitesmoke; border-radius: 5px; - .docCreatorMenu-dropdown-button{ - display: flex; + .docCreatorMenu-dropdown-hoverable { width: 140px; height: 25px; - background: whitesmoke; - background-color: rgb(34, 34, 37); - border-radius: 5px; - border: 1px solid whitesmoke; - padding: 0px; - font-size: 12px; - margin: 10px; - align-items: center; - justify-content: center; - text-transform: uppercase; - cursor: pointer; + margin-bottom: 17px; + z-index: 5; - &:hover .docCreatorMenu-dropdown-content{ + &:hover .docCreatorMenu-dropdown-content { display: block; } - } - - .docCreatorMenu-dropdown-content { - display: none; - position: absolute; - min-width: 100px; - z-index: 1; - .docCreatorMenu-dropdown-option{ - display: block; + &:hover .docCreatorMenu-dropdown-title { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } + .docCreatorMenu-dropdown-title{ + display: flex; + width: 140px; + height: 25px; + background: whitesmoke; + background-color: rgb(34, 34, 37); + border-radius: 5px; + border: 1px solid whitesmoke; + padding: 0px; + font-size: 12px; + margin-top: 10px; + align-items: center; + justify-content: center; + text-transform: uppercase; + cursor: pointer; + } + + .docCreatorMenu-dropdown-content { + display: none; + min-width: 100px; + height: 75px; + overflow-y: scroll; + -ms-overflow-style: none; + scrollbar-width: none; + + .docCreatorMenu-dropdown-option{ + display: flex; + background-color: rgb(42, 42, 46); + border-left: 1px solid whitesmoke; + border-right: 1px solid whitesmoke; + border-bottom: 1px solid whitesmoke; + width: 140px; + height: 25px; + justify-content: center; + justify-items: center; + padding-top: 3px; + + &:hover { + background-color: rgb(68, 68, 74); + cursor: pointer; + } + } + } } - - + .docCreatorMenu-layout-preview-window { + width: 85%; + height: 100px; + border: 1px solid whitesmoke; + border-radius: 5px; + background-color: rgb(34, 34, 37); + } } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 7859ec60a..356172b6a 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -27,6 +27,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>; @observable _selectedTemplateID?: Doc; + @observable _selectedLayout?: 'stacked' | 'grid' | 'row' | 'column' | 'custom'; + @observable _pageX: number = 0; @observable _pageY: number = 0; @observable _display: boolean = false; @@ -131,11 +133,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { boxShadow: this._selectedTemplateID === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '' }} onPointerDown={e => - setupMoveUpEvents( - this, - e, - returnFalse, - emptyFunction, + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoable(clickEv => { clickEv.stopPropagation(); this._selectedTemplateID = info.doc; @@ -151,13 +149,38 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { } get optionsMenuContents(){ + + const layoutOption = (option: 'stacked' | 'grid' | 'row' | 'column' | 'custom') => { + return ( + <div + className="docCreatorMenu-dropdown-option" + onPointerDown={e => + setupMoveUpEvents(this, e, returnFalse, emptyFunction, + undoable(clickEv => { + clickEv.stopPropagation(); + runInAction(() => this._selectedLayout = option); + }, 'open actions menu') + ) + }> + {option} + </div> + ); + } + return ( <div className='docCreatorMenu-options-container'> - <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> - <div className="docCreatorMenu-dropdown-option">Link 1</div> + <div className='docCreatorMenu-dropdown-hoverable'> + <div className="docCreatorMenu-dropdown-title">Choose Layout</div> + <div className="docCreatorMenu-dropdown-content"> + {layoutOption('stacked')} + {layoutOption('grid')} + {layoutOption('row')} + {layoutOption('column')} + {layoutOption('custom')} + </div> + </div> + <div className='docCreatorMenu-layout-preview-window'> + </div> </div> ); |