diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/DashboardView.tsx | 122 |
1 files changed, 64 insertions, 58 deletions
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index 5d7fc8835..4387c6e96 100644 --- a/src/client/views/DashboardView.tsx +++ b/src/client/views/DashboardView.tsx @@ -172,68 +172,74 @@ export class DashboardView extends React.Component { 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(this.selectedDashboardGroup).map(dashboard => { - const href = ImageCast(dashboard.thumb)?.url?.href; - const shared = Object.keys(dashboard[DocAcl]) - .filter(key => key !== `acl-${Doc.CurrentUserEmailNormalized}` && !['acl-Me', 'acl-Guest'].includes(key)) - .some(key => dashboard[DocAcl][key] !== AclPrivate); - return ( - <div - className="dashboard-container" - key={dashboard[Id]} - style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? '#6CB982' : shared ? variant : '' }} - 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"> - <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" - onPointerDown={e => { - this._downX = e.clientX; - this._downY = e.clientY; - }} - onClick={e => { - e.preventDefault(); - e.stopPropagation(); - this.onContextMenu(dashboard, e); - }}> - <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} icon="bars" />} /> - </div> - </div> - <div - className={`background`} - style={{ - background: StrCast(Doc.UserDoc().userColor), - filter: 'opacity(0.2)', - }} - /> - <div className={'dashboard-status' + (shared ? '-shared' : '')}>{shared ? 'shared' : ''}</div> - </div> - ); - })} - <div - className="dashboard-container-new" - onClick={() => { - this.setNewDashboardName(''); - }}> - + + {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && !this.getDashboards(this.selectedDashboardGroup).length + ? 'No one has shared a dashboard with you' + : this.getDashboards(this.selectedDashboardGroup).map(dashboard => { + const href = ImageCast(dashboard.thumb)?.url?.href; + const shared = Object.keys(dashboard[DocAcl]) + .filter(key => key !== `acl-${Doc.CurrentUserEmailNormalized}` && !['acl-Me', 'acl-Guest'].includes(key)) + .some(key => dashboard[DocAcl][key] !== AclPrivate); + return ( + <div + className="dashboard-container" + key={dashboard[Id]} + style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? '#6CB982' : shared ? variant : '' }} + 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"> + <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" + onPointerDown={e => { + this._downX = e.clientX; + this._downY = e.clientY; + }} + onClick={e => { + e.preventDefault(); + e.stopPropagation(); + this.onContextMenu(dashboard, e); + }}> + <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} icon="bars" />} /> + </div> + </div> + <div + className={`background`} + style={{ + background: StrCast(Doc.UserDoc().userColor), + filter: 'opacity(0.2)', + }} + /> + <div className={'dashboard-status' + (shared ? '-shared' : '')}>{shared ? 'shared' : ''}</div> + </div> + ); + })} + {this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? null : ( <div - className={`background`} - style={{ - background: StrCast(Doc.UserDoc().userColor), - filter: 'opacity(0.2)', - }} - /> - </div> + className="dashboard-container-new" + onClick={() => { + this.setNewDashboardName(''); + }}> + + + <div + className={`background`} + style={{ + background: StrCast(Doc.UserDoc().userColor), + filter: 'opacity(0.2)', + }} + /> + </div> + )} </div> </div> <MainViewModal |