diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/views/StyleProvider.scss | 4 | ||||
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/collections/TreeView.scss | 5 | ||||
| -rw-r--r-- | src/client/views/collections/TreeView.tsx | 28 |
4 files changed, 28 insertions, 26 deletions
diff --git a/src/client/views/StyleProvider.scss b/src/client/views/StyleProvider.scss index 80c878386..c06bb287e 100644 --- a/src/client/views/StyleProvider.scss +++ b/src/client/views/StyleProvider.scss @@ -31,8 +31,8 @@ .styleProvider-treeView-icon, .styleProvider-treeView-icon-active { - margin-left: 0.25rem; - margin-right: 0.25rem; + margin-left: 0; + margin-right: 0; } .styleProvider-treeView-icon { diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index a030c7052..2d4fce899 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -1,7 +1,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@material-ui/core'; -import { Shadows } from 'browndash-components'; +import { IconButton, Shadows, Size } from 'browndash-components'; import { action, runInAction } from 'mobx'; import { extname } from 'path'; import { Doc, Opt, StrListCast } from '../../fields/Doc'; @@ -323,24 +323,27 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps } export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) { + const color = StrCast(Doc.UserDoc().userColor) + if (!doc[field]) return null return ( - <div - title={field} - className={`styleProvider-treeView-icon${doc[field] ? '-active' : ''}`} + <IconButton + size={Size.XSMALL} + color={color} + icon={<FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp}/>} onClick={undoBatch( action((e: React.MouseEvent) => { e.stopPropagation(); clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true); }) - )}> - <FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} size="sm" /> - </div> + )} + /> ); } /** * add lock and hide button decorations for the "Dashboards" flyout TreeView */ export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) { + if (doc && property.split(':')[0] === StyleProp.Decorations) { return doc._type_collection === CollectionViewType.Docking ? null diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 85f99b9c2..cfa658944 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -13,7 +13,7 @@ .treeView-container-active { .bullet-outline { position: relative; - width: $TREE_BULLET_WIDTH; + width: fit-content; color: $medium-gray; transform: scale(0.5); display: inline-flex; @@ -21,7 +21,6 @@ } .treeView-bulletIcons { - // width: $TREE_BULLET_WIDTH; width: 100%; height: 100%; position: relative; @@ -43,7 +42,7 @@ justify-content: center; align-items: center; position: relative; - width: $TREE_BULLET_WIDTH; + width: fit-content; min-height: 20px; color: $medium-gray; border: #80808030 1px solid; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index fa9f895fd..9158508fc 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -712,23 +712,23 @@ export class TreeView extends React.Component<TreeViewProps> { !(this.doc.text as RichTextField)?.Text ? null : ( <IconButton color={color} - icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />} + icon={<FontAwesomeIcon + icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />} size={Size.XSMALL} /> ) ) : ( <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}> - <IconButton + {this.onCheckedClick ? <IconButton color={color} icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />} size={Size.XSMALL} - /> - {this.onCheckedClick ? null : - <IconButton - color={color} - icon={<FontAwesomeIcon icon={iconType as IconProp} />} - size={Size.XSMALL} - /> + /> : + <IconButton + color={color} + icon={<FontAwesomeIcon icon={iconType as IconProp} />} + size={Size.XSMALL} + /> } </div> )} @@ -757,15 +757,15 @@ export class TreeView extends React.Component<TreeViewProps> { @observable headerEleWidth = 0; @computed get titleButtons() { const customHeaderButtons = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations); + const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color); return this.props.treeViewHideHeaderFields() || this.doc.treeViewHideHeaderFields ? null : ( <> {customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */} {this.doc._layout_hideContextMenu ? null : ( - <FontAwesomeIcon - title="context menu" - key="bars" - icon="bars" - size="sm" + <IconButton + color={color} + icon={<FontAwesomeIcon icon="bars" />} + size={Size.XSMALL} onClick={e => { this.showContextMenu(e); e.stopPropagation(); |