diff options
Diffstat (limited to 'src/client/views/DashboardView.tsx')
| -rw-r--r-- | src/client/views/DashboardView.tsx | 98 |
1 files changed, 68 insertions, 30 deletions
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index 3bd6ac61c..dd1079d88 100644 --- a/src/client/views/DashboardView.tsx +++ b/src/client/views/DashboardView.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Button, ColorPicker, FontSize, IconButton, Size, Type } from 'browndash-components'; +import { Button, ColorPicker, EditableText, FontSize, IconButton, Size, Type } from 'browndash-components'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -24,7 +24,7 @@ import { ContextMenu } from './ContextMenu'; import './DashboardView.scss'; import { Colors } from './global/globalEnums'; import { MainViewModal } from './MainViewModal'; -import { ButtonType } from './nodes/button/FontIconBox'; +import { ButtonType } from './nodes/FontIconBox/FontIconBox'; import { FaPlus } from 'react-icons/fa'; enum DashboardGroup { @@ -43,13 +43,16 @@ export class DashboardView extends React.Component { @observable private selectedDashboardGroup = DashboardGroup.MyDashboards; @observable private newDashboardName: string | undefined = undefined; - @observable private newDashboardColor: string | undefined = undefined; + @observable private newDashboardColor: string | undefined = "#AFAFAF"; @action abortCreateNewDashboard = () => { this.newDashboardName = undefined; }; @action setNewDashboardName(name: string) { this.newDashboardName = name; } + @action setNewDashboardColor(color: string) { + this.newDashboardColor = color; + } @action selectDashboardGroup = (group: DashboardGroup) => { @@ -95,23 +98,33 @@ export class DashboardView extends React.Component { const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1; const placeholder = `Dashboard ${dashboardCount}`; return ( - <div className="new-dashboard"> + <div className="new-dashboard" + style={{ + background: StrCast(Doc.UserDoc().userBackgroundColor), + color: StrCast(Doc.UserDoc().userColor) + }} + > <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> + <EditableText + formLabel='Title' + placeholder={placeholder} + type={Type.SEC} + color={StrCast(Doc.UserDoc().userColor)} + setVal={val => this.setNewDashboardName(val as string)} + fillWidth + /> + <ColorPicker + formLabel='Background' + colorPickerType='github' + type={Type.TERT} + selectedColor={this.newDashboardColor} + setSelectedColor={color => { + this.setNewDashboardColor(color); + }} + /> <div className="button-bar"> - <Button text="Cancel" onClick={this.abortCreateNewDashboard} /> - <Button text="Create" onClick={() => this.createNewDashboard(this.newDashboardName!, this.newDashboardColor)} /> + <Button text="Cancel" color={StrCast(Doc.UserDoc().userColor)} onClick={this.abortCreateNewDashboard} /> + <Button type={Type.TERT} text="Create" color={StrCast(Doc.UserDoc().userVariantColor)} onClick={() => this.createNewDashboard(this.newDashboardName!, this.newDashboardColor)} /> </div> </div> ); @@ -150,32 +163,49 @@ export class DashboardView extends React.Component { }; render() { + const color = StrCast(Doc.UserDoc().userColor) + const variant = StrCast(Doc.UserDoc().userVariantColor) return ( <> <div className="dashboard-view"> <div className="left-menu"> - <div className="new-dashboard-button"> - <Button icon={<FaPlus />} size={Size.LARGE} text="New" type={Type.SEC} onClick={() => this.setNewDashboardName('')} /> - </div> - <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}> - My Dashboards - </div> - <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.SharedDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards)}> - Shared Dashboards - </div> + <Button + text={'My Dashboards'} + active={this.selectedDashboardGroup === DashboardGroup.MyDashboards} + color={color} + align={'flex-start'} + onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)} + fillWidth + /> + <Button + text={'Shared Dashboards'} + active={this.selectedDashboardGroup === DashboardGroup.SharedDashboards} + color={color} + align={'flex-start'} + onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards)} + fillWidth + /> + <Button icon={<FaPlus />} color={variant} iconPlacement="left" text="New Dashboard" type={Type.TERT} onClick={() => this.setNewDashboardName('')} /> </div> <div className="all-dashboards"> {this.getDashboards().map(dashboard => { const href = ImageCast(dashboard.thumb)?.url.href; return ( - <div className="dashboard-container" key={dashboard[Id]} onContextMenu={e => this.onContextMenu(dashboard, e)} onClick={e => this.clickDashboard(e, dashboard)}> + <div + className="dashboard-container" key={dashboard[Id]} + onContextMenu={e => this.onContextMenu(dashboard, e)} onClick={e => this.clickDashboard(e, dashboard)}> <img src={ href ?? 'https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU=' } /> <div className="info"> - <input style={{ border: 'unset' }} className="input" onClick={e => e.stopPropagation()} defaultValue={StrCast(dashboard.title)} onChange={e => (Doc.GetProto(dashboard).title = (e.target as any).value)} /> + <EditableText + type={Type.PRIM} + color={color} + val={StrCast(dashboard.title)} + setVal={val => (Doc.GetProto(dashboard).title = val)} + /> {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ? <div>unviewed</div> : <div></div>} <div className="more" @@ -188,9 +218,13 @@ export class DashboardView extends React.Component { e.stopPropagation(); this.onContextMenu(dashboard, e); }}> - <Button size={Size.SMALL} icon={<FontAwesomeIcon color="black" size="lg" icon="bars" />} /> + <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} size="lg" icon="bars" />} /> </div> </div> + <div className={`background`} style={{ + background: StrCast(Doc.UserDoc().userColor), + filter: 'opacity(0.2)' + }}/> </div> ); })} @@ -200,6 +234,10 @@ export class DashboardView extends React.Component { this.setNewDashboardName(''); }}> + + <div className={`background`} style={{ + background: StrCast(Doc.UserDoc().userColor), + filter: 'opacity(0.2)' + }}/> </div> </div> </div> |