diff options
Diffstat (limited to 'src/client/views/DashboardView.tsx')
| -rw-r--r-- | src/client/views/DashboardView.tsx | 93 |
1 files changed, 68 insertions, 25 deletions
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index f43500fc3..ce442801f 100644 --- a/src/client/views/DashboardView.tsx +++ b/src/client/views/DashboardView.tsx @@ -1,4 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Button, ColorPicker, FontSize, IconButton, Size } from 'browndash-components'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -20,8 +21,10 @@ import { CollectionDockingView } from './collections/CollectionDockingView'; import { CollectionView } from './collections/CollectionView'; import { ContextMenu } from './ContextMenu'; import './DashboardView.scss'; +import { Colors } from './global/globalEnums'; import { MainViewModal } from './MainViewModal'; import { ButtonType } from './nodes/button/FontIconBox'; +import { FaPlus } from 'react-icons/fa'; enum DashboardGroup { MyDashboards, @@ -39,6 +42,7 @@ export class DashboardView extends React.Component { @observable private selectedDashboardGroup = DashboardGroup.MyDashboards; @observable private newDashboardName: string | undefined = undefined; + @observable private newDashboardColor: string | undefined = undefined; @action abortCreateNewDashboard = () => { this.newDashboardName = undefined; }; @@ -52,11 +56,9 @@ export class DashboardView extends React.Component { }; clickDashboard = (e: React.MouseEvent, dashboard: Doc) => { - if (e.detail === 2) { - Doc.AddDocToList(Doc.MySharedDocs, 'viewed', dashboard); - Doc.ActiveDashboard = dashboard; - Doc.ActivePage = 'dashboard'; - } + Doc.AddDocToList(Doc.MySharedDocs, 'viewed', dashboard); + Doc.ActiveDashboard = dashboard; + Doc.ActivePage = 'dashboard'; }; getDashboards = () => { @@ -80,26 +82,46 @@ export class DashboardView extends React.Component { }; @undoBatch - createNewDashboard = async (name: string) => { - DashboardView.createNewDashboard(undefined, name); + createNewDashboard = async (name: string, background?: string) => { + DashboardView.createNewDashboard(undefined, name, background); this.abortCreateNewDashboard(); }; @computed get namingInterface() { + const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1; + const placeholder = `Dashboard ${dashboardCount}`; return ( - <div> - <input className="password-inputs" placeholder="Untitled Dashboard" onChange={e => this.setNewDashboardName((e.target as any).value)} /> - <button className="password-submit" onClick={this.abortCreateNewDashboard}> - Cancel - </button> - <button - className="password-submit" - onClick={() => { - this.createNewDashboard(this.newDashboardName!); - }}> - Create - </button> + <div className='new-dashboard'> + <div className='header'>Create New Dashboard</div> + <div className="title-input"> + Title + <input className="input" placeholder={placeholder} onChange={e => this.setNewDashboardName((e.target as any).value)} /> + </div> + <div className="color-picker"> + Background + <ColorPicker onChange={(color) => { + this.newDashboardColor = color; + }} /> + </div> + <div className="button-bar"> + <Button + text="Cancel" + borderRadius={10} + hoverStyle={'gray'} + fontSize={FontSize.SECONDARY} + onClick={this.abortCreateNewDashboard} + /> + <Button + text="Create" + borderRadius={10} + backgroundColor={Colors.LIGHT_BLUE} + hoverStyle={'darken'} + fontSize={FontSize.SECONDARY} + onClick={() => { + this.createNewDashboard(this.newDashboardName!, this.newDashboardColor); + }}/> + </div> </div> ); } @@ -142,11 +164,19 @@ export class DashboardView extends React.Component { <div className="dashboard-view"> <div className="left-menu"> <div - className="text-button" + className="new-dashboard-button"> + <Button + icon={<FaPlus/>} + hoverStyle="darken" + backgroundColor={Colors.LIGHT_BLUE} + size={Size.MEDIUM} + fontSize={FontSize.HEADER} + text="New" onClick={() => { this.setNewDashboardName(''); - }}> - New + }} + borderRadius={50} + /> </div> <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}> My Dashboards @@ -180,14 +210,26 @@ export class DashboardView extends React.Component { this._downY = e.clientY; }} onClick={e => { + e.preventDefault(); + e.stopPropagation(); this.onContextMenu(dashboard, e); }}> - <FontAwesomeIcon color="black" size="lg" icon="bars" /> + <IconButton + isCircle={true} + size={Size.SMALL} + hoverStyle="gray" + icon={<FontAwesomeIcon color="black" size="lg" icon="bars" />} + /> </div> </div> </div> ); })} + <div className="dashboard-container-new" onClick={() => { + this.setNewDashboardName(''); + }}> + + + </div> </div> </div> <MainViewModal @@ -195,7 +237,7 @@ export class DashboardView extends React.Component { isDisplayed={this.newDashboardName !== undefined} interactive={true} closeOnExternalClick={this.abortCreateNewDashboard} - dialogueBoxStyle={{ width: '500px', height: '300px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }} + dialogueBoxStyle={{ width: '400px', height: '180px', color: Colors.LIGHT_GRAY }} /> </> ); @@ -257,7 +299,7 @@ export class DashboardView extends React.Component { } }; - public static createNewDashboard = (id?: string, name?: string) => { + public static createNewDashboard = (id?: string, name?: string, background?: string) => { const dashboards = Doc.MyDashboards; const dashboardCount = DocListCast(dashboards.data).length + 1; const freeformOptions: DocumentOptions = { @@ -267,6 +309,7 @@ export class DashboardView extends React.Component { _height: 1000, _fitWidth: true, _backgroundGridShow: true, + backgroundColor: background, title: `Untitled Tab 1`, }; const title = name ? name : `Dashboard ${dashboardCount}`; |