+
- {tabs.map(tab => (
-
(this.activeTab = tab.title))}>
- {tab.title}
-
- ))}
+ {tabs.map(tab => {
+ const isActive = this.activeTab === tab.title
+ return (
+ (this.activeTab = tab.title))
+ }>
+ {tab.title}
+
+ )
+ })}
-
@@ -439,12 +502,13 @@ export class SettingsManager extends React.Component<{}> {
{Doc.CurrentUserEmail}
+ {Doc.CurrentUserEmail}
}
+ icon={
-
+
{tabs.map(tab => (
{tab.ele}
@@ -462,7 +526,7 @@ export class SettingsManager extends React.Component<{}> {
isDisplayed={this.isOpen}
interactive={true}
closeOnExternalClick={this.close}
- dialogueBoxStyle={{ width: 'fit-content', height: '300px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }}
+ dialogueBoxStyle={{ width: 'fit-content', height: '300px', background: Cast(Doc.UserDoc().userColor, 'string', null) }}
/>
);
}
diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index 8a0e5480e..b205a0f1e 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -5,11 +5,15 @@
position: absolute;
z-index: 10001;
height: $antimodemenu-height;
- background: $dark-gray;
- border-bottom: $standard-border;
+ width: fit-content;
+ border-radius: $standard-border-radius;
+ overflow: hidden;
// box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
// border-radius: 0px 6px 6px 6px;
display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 3px;
&.with-rows {
flex-direction: column
@@ -20,30 +24,6 @@
height: 35px;
}
- .antimodeMenu-button {
- background-color: transparent;
- width: 35px;
- height: 35px;
- padding: 5;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
-
- .svg {
- margin: 0;
- }
-
- &.active {
- background-color: #121212;
- }
- }
-
- .antimodeMenu-button:hover {
- background-color: rgba(0, 0, 0, 0.4);
- }
-
.antimodeMenu-dragger {
height: 100%;
transition: width .2s;
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index de1207ce4..c41ea7053 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -1,6 +1,8 @@
import React = require('react');
import { observable, action, runInAction } from 'mobx';
import './AntimodeMenu.scss';
+import { StrCast } from '../../fields/Types';
+import { Doc } from '../../fields/Doc';
export interface AntimodeMenuProps {}
/**
@@ -148,6 +150,7 @@ export abstract class AntimodeMenu extends React.Co
left: this._left,
top: this._top,
opacity: this._opacity,
+ background: StrCast(Doc.UserDoc().userBackgroundColor),
transitionProperty: this._transitionProperty,
transitionDuration: this._transitionDuration,
transitionDelay: this._transitionDelay,
@@ -173,6 +176,7 @@ export abstract class AntimodeMenu extends React.Co
height: 'inherit',
width: 200,
opacity: this._opacity,
+ background: StrCast(Doc.UserDoc().userBackgroundColor),
transitionProperty: this._transitionProperty,
transitionDuration: this._transitionDuration,
transitionDelay: this._transitionDelay,
@@ -195,6 +199,7 @@ export abstract class AntimodeMenu extends React.Co
left: this._left,
top: this._top,
opacity: this._opacity,
+ background: StrCast(Doc.UserDoc().userBackgroundColor),
transitionProperty: this._transitionProperty,
transitionDuration: this._transitionDuration,
transitionDelay: this._transitionDelay,
diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index b8a6f6c05..b95312ea0 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -14,6 +14,7 @@
flex-direction: column;
width: 250px;
min-width: 250px;
+ gap: 5px;
}
.all-dashboards {
@@ -56,15 +57,26 @@
display: flex;
justify-content: center;
align-items: center;
+ position: relative;
&:hover {
color: $light-blue;
border: solid 2px $light-blue;
}
+
+ .background {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ z-index: -1;
+ }
}
.dashboard-container {
border-radius: 10px;
+ position: relative;
cursor: pointer;
width: 250px;
height: 200px;
@@ -99,10 +111,20 @@
.more {
z-index: 100;
}
+
+ .background {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ z-index: -1;
+ }
}
.new-dashboard {
color: $dark-gray;
+ padding: 10px;
display: flex;
width: 100%;
height: 100%;
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 (
-
+
this.setNewDashboardName(val as string)}
+ fillWidth
+ />
+ {
+ this.setNewDashboardColor(color);
+ }}
+ />
);
@@ -150,32 +163,49 @@ export class DashboardView extends React.Component {
};
render() {
+ const color = StrCast(Doc.UserDoc().userColor)
+ const variant = StrCast(Doc.UserDoc().userVariantColor)
return (
<>
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 7043edcee..4deed5ed9 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -6,6 +6,7 @@ import { ObjectField } from '../../fields/ObjectField';
import './EditableView.scss';
import { DocumentIconContainer } from './nodes/DocumentIcon';
import { OverlayView } from './OverlayView';
+import { EditableText } from 'browndash-components';
export interface EditableProps {
/**
@@ -231,39 +232,49 @@ export class EditableView extends React.Component {
onChange: this.props.autosuggestProps.onChange,
}}
/>
- ) : this.props.oneLine !== false && this.props.GetValue()?.toString().indexOf('\n') === -1 ? (
- (this._inputref = r)}
- style={{ display: this.props.display, overflow: 'auto', fontSize: this.props.fontSize, minWidth: 20, background: this.props.background }}
- placeholder={this.props.placeholder}
- onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
- defaultValue={this.props.GetValue()}
- autoFocus={true}
- onChange={this.onChange}
- onKeyDown={this.onKeyDown}
- onKeyPress={this.stopPropagation}
- onPointerDown={this.stopPropagation}
- onClick={this.stopPropagation}
- onPointerUp={this.stopPropagation}
+ ) :
Create New Dashboard
-
- Title
- this.setNewDashboardName((e.target as any).value)} />
-
-
- Background
- {
- this.newDashboardColor = color;
- }}
- />
-
+
-
-
-
- } size={Size.LARGE} text="New" type={Type.SEC} onClick={() => this.setNewDashboardName('')} />
-
- this.selectDashboardGroup(DashboardGroup.MyDashboards)}>
- My Dashboards
-
- this.selectDashboardGroup(DashboardGroup.SharedDashboards)}>
- Shared Dashboards
-
+
{this.getDashboards().map(dashboard => {
const href = ImageCast(dashboard.thumb)?.url.href;
return (
-
this.onContextMenu(dashboard, e)} onClick={e => this.clickDashboard(e, dashboard)}>
+
this.onContextMenu(dashboard, e)} onClick={e => this.clickDashboard(e, dashboard)}>
);
})}
@@ -200,6 +234,10 @@ export class DashboardView extends React.Component {
this.setNewDashboardName('');
}}>
+
+
- e.stopPropagation()} defaultValue={StrCast(dashboard.title)} onChange={e => (Doc.GetProto(dashboard).title = (e.target as any).value)} />
+ (Doc.GetProto(dashboard).title = val)}
+ />
{this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ?
+
unviewed
: }
- } />
+ } />