diff options
Diffstat (limited to 'src/client/views')
4 files changed, 46 insertions, 14 deletions
diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx index a9dfbe8f0..cdc389efe 100644 --- a/src/client/views/UndoStack.tsx +++ b/src/client/views/UndoStack.tsx @@ -24,7 +24,7 @@ export class UndoStack extends React.Component<UndoStackProps> { return this.props.inline && UndoStack.HideInline ? null : ( <div className="undoStack-outerContainer"> <Popup - text={'Undo/Redo Stack'} + text="stack" color={color} background={background} placement={`top-start`} diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 52ebb7763..9f8ef763a 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -9,12 +9,32 @@ .schema-table { background-color: $white; cursor: grab; + width: 100%; .schema-table-content { overflow: overlay; scroll-behavior: smooth; } + .schema-add { + position: relative; + height: 30; + display: flex; + align-items: center; + width: 100%; + text-align: right; + background: lightgray; + .editableView-container-editing { + width: 100%; + } + .editableView-input { + width: 100%; + float: right; + text-align: right; + background: yellow; + } + } + .schema-column-menu, .schema-filter-menu { background: $light-gray; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index babe5c810..513bbc3fe 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -63,7 +63,7 @@ export class CollectionSchemaView extends CollectionSubView() { public static _minColWidth: number = 25; public static _rowMenuWidth: number = 60; public static _previewDividerWidth: number = 4; - public static _newNodeInputHeight: number = 30; + public static _newNodeInputHeight: number = 20; public fieldInfos = new ObservableMap<string, FInfo>(); @observable _menuKeys: string[] = []; @@ -869,14 +869,16 @@ export class CollectionSchemaView extends CollectionSubView() { {this._columnMenuIndex !== undefined && this.renderColumnMenu} {this._filterColumnIndex !== undefined && this.renderFilterMenu} <CollectionSchemaViewDocs schema={this} childDocs={this.sortedDocsFunc} rowHeight={this.rowHeightFunc} setRef={(ref: HTMLDivElement | null) => (this._tableContentRef = ref)} /> - <EditableView - GetValue={returnEmptyString} - SetValue={undoable(value => (value ? this.addRow(Docs.Create.TextDocument(value, { title: value, _layout_autoHeight: true })) : false), 'add text doc')} - placeholder={"Type ':' for commands"} - contents={'+ New Node'} - menuCallback={this.menuCallback} - height={CollectionSchemaView._newNodeInputHeight} - /> + <div className="schema-add"> + <EditableView + GetValue={returnEmptyString} + SetValue={undoable(value => (value ? this.addRow(Docs.Create.TextDocument(value, { title: value, _layout_autoHeight: true })) : false), 'add text doc')} + placeholder={"Type text to create note or ':' to create specific type"} + contents={'+ New Node'} + menuCallback={this.menuCallback} + height={CollectionSchemaView._newNodeInputHeight} + /> + </div> </div> {this.previewWidth > 0 && <div className="schema-preview-divider" style={{ width: CollectionSchemaView._previewDividerWidth }} onPointerDown={this.onDividerDown}></div>} {this.previewWidth > 0 && ( diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 68446d4e7..5b097e639 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Button, IconButton, isDark, Size, Type } from 'browndash-components'; +import { Button, IconButton, isDark, Size, Toggle, Type } from 'browndash-components'; import { action, computed, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -37,10 +37,10 @@ export class TopBar extends React.Component { }; @computed get color() { - return StrCast(Doc.UserDoc().userColor, Colors.LIGHT_GRAY); + return SettingsManager.userColor; } @computed get variantColor() { - return StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE); + return SettingsManager.userVariantColor; } @computed get backgroundColor() { return PingManager.Instance.IsBeating ? SettingsManager.userBackgroundColor : Colors.MEDIUM_GRAY; @@ -76,7 +76,17 @@ export class TopBar extends React.Component { <span style={{ color: isDark(this.backgroundColor) ? Colors.LIGHT_BLUE : Colors.MEDIUM_BLUE, fontWeight: 500 }}>dash</span> </div> )} - {Doc.ActiveDashboard && <Button text="Explore" tooltip="Browsing mode for directly navigating to documents" size={Size.SMALL} color={this.color} onClick={action(() => (DocumentView.ExploreMode = !DocumentView.ExploreMode))} />} + {Doc.ActiveDashboard && ( + <Button + text="Explore" + type={Type.TERT} + tooltip="Browsing mode for directly navigating to documents" + size={Size.SMALL} + color={DocumentView.ExploreMode ? this.variantColor : this.color} + background={DocumentView.ExploreMode ? this.color : 'transparent'} + onClick={action(() => (DocumentView.ExploreMode = !DocumentView.ExploreMode))} + /> + )} </div> ); } |