enabled different title colors per doc, not just per user. added support for screen space doc titles, and for proper title clipping when borderRadius is set. added dropdown for setting title field to display and tweaked editableView to enable ellipsis for overfow

1 files changed, 50 insertions, 60 deletions

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 0df88f970..cb5c9b085 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -7,7 +7,7 @@ import { CiCircleRemove } from 'react-icons/ci';
 import Select from 'react-select';
 import { Doc, DocListCast, Field, LinkedTo, StrListCast } from '../../fields/Doc';
 import { RichTextField } from '../../fields/RichTextField';
-import { DocumentOptions, FInfo } from '../documents/Documents';
+import { DocOptions, DocumentOptions, FInfo } from '../documents/Documents';
 import { DocumentManager } from '../util/DocumentManager';
 import { UserOptions } from '../util/GroupManager';
 import { SearchUtil } from '../util/SearchUtil';
@@ -18,6 +18,7 @@ import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
 import { SettingsManager } from '../util/SettingsManager';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
+import { emptyFunction } from '../../Utils';
 
 interface filterProps {
     rootDoc: Doc;
@@ -25,8 +26,6 @@ interface filterProps {
 
 @observer
 export class FilterPanel extends React.Component<filterProps> {
-    private _documentOptions: DocumentOptions = new DocumentOptions();
-
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(FilterPanel, fieldKey);
     }
@@ -51,12 +50,10 @@ export class FilterPanel extends React.Component<filterProps> {
         if (targetDoc) {
             SearchUtil.foreachRecursiveDoc([this.targetDoc], (depth, doc) => allDocs.add(doc));
         }
-        console.log('this is all Docs' + Array.from(allDocs));
         return Array.from(allDocs);
     }
 
     @computed get _allFacets() {
-        // trace();
         const noviceReqFields = ['author', 'tags', 'text', 'type', LinkedTo];
         const noviceLayoutFields: string[] = []; //["_layout_curPage"];
         const noviceFields = [...noviceReqFields, ...noviceLayoutFields];
@@ -68,11 +65,8 @@ export class FilterPanel extends React.Component<filterProps> {
             .filter(key => key.indexOf('modificationDate') !== -1 || (key[0] === key[0].toUpperCase() && !key.startsWith('_')) || noviceFields.includes(key) || !Doc.noviceMode)
             .sort();
 
-        // console.log('THIS IS HERE ' + Doc.UserDoc().color + 'space ' + Doc.UserDoc().color);
         noviceFields.forEach(key => sortedKeys.splice(sortedKeys.indexOf(key), 1));
 
-        console.log('this is novice fields ' + noviceFields + 'and this is sorted Keys ' + sortedKeys);
-
         return [...noviceFields, ...sortedKeys];
     }
 
@@ -206,13 +200,7 @@ export class FilterPanel extends React.Component<filterProps> {
      */
 
     @action
-    facetClick = (facetHeader: string) => {
-        // just when someone chooses a facet
-
-        this._selectedFacetHeaders.add(facetHeader);
-
-        return;
-    };
+    facetClick = (facetHeader: string) => this._selectedFacetHeaders.add(facetHeader);
 
     @action
     sortingCurrentFacetValues = (facetHeader: string) => {
@@ -260,57 +248,59 @@ export class FilterPanel extends React.Component<filterProps> {
         return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2));
     };
 
-    render() {
-        let filteredOptions: string[] = ['author', 'tags', 'text', 'acl-Guest', ...this._allFacets.filter(facet => facet[0] === facet.charAt(0).toUpperCase())];
+    @computed get fieldsDropdown() {
+        const filteredOptions = ['author', 'tags', 'text', 'acl-Guest', ...this._allFacets.filter(facet => facet[0] === facet.charAt(0).toUpperCase())];
 
-        Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => {
-            if (pair[1].filterable) {
-                filteredOptions.push(pair[0]);
-            }
-        });
+        Object.entries(DocOptions)
+            .filter(opts => opts[1].filterable)
+            .forEach((pair: [string, FInfo]) => filteredOptions.push(pair[0]));
+        const options = filteredOptions.map(facet => ({ value: facet, label: facet }));
 
-        let options = filteredOptions.map(facet => ({ value: facet, label: facet }));
+        return (
+            <Select
+                styles={{
+                    control: (baseStyles, state) => ({
+                        ...baseStyles,
+                        color: SettingsManager.userColor,
+                        background: SettingsManager.userBackgroundColor,
+                    }),
+                    placeholder: (baseStyles, state) => ({
+                        ...baseStyles,
+                        color: SettingsManager.userColor,
+                        background: SettingsManager.userBackgroundColor,
+                    }),
+                    input: (baseStyles, state) => ({
+                        ...baseStyles,
+                        color: SettingsManager.userColor,
+                        background: SettingsManager.userBackgroundColor,
+                    }),
+                    option: (baseStyles, state) => ({
+                        ...baseStyles,
+                        color: SettingsManager.userColor,
+                        background: !state.isFocused ? SettingsManager.userBackgroundColor : SettingsManager.userVariantColor,
+                    }),
+                    menuList: (baseStyles, state) => ({
+                        ...baseStyles,
+                        backgroundColor: SettingsManager.userBackgroundColor,
+                    }),
+                }}
+                placeholder={'add a filter'}
+                options={options}
+                isMulti={false}
+                onChange={val => this.facetClick((val as UserOptions).value)}
+                onKeyDown={e => e.stopPropagation()}
+                //onMenuClose={onClose}
+                value={null}
+                closeMenuOnSelect={true}
+            />
+        );
+    }
 
+    render() {
         return (
             <div className="filterBox-treeView">
                 <div className="filterBox-select">
-                    <div style={{ width: '100%' }}>
-                        <Select
-                            styles={{
-                                control: (baseStyles, state) => ({
-                                    ...baseStyles,
-                                    color: SettingsManager.userColor,
-                                    background: SettingsManager.userBackgroundColor,
-                                }),
-                                placeholder: (baseStyles, state) => ({
-                                    ...baseStyles,
-                                    color: SettingsManager.userColor,
-                                    background: SettingsManager.userBackgroundColor,
-                                }),
-                                input: (baseStyles, state) => ({
-                                    ...baseStyles,
-                                    color: SettingsManager.userColor,
-                                    background: SettingsManager.userBackgroundColor,
-                                }),
-                                option: (baseStyles, state) => ({
-                                    ...baseStyles,
-                                    color: SettingsManager.userColor,
-                                    background: !state.isFocused ? SettingsManager.userBackgroundColor : SettingsManager.userVariantColor,
-                                }),
-                                menuList: (baseStyles, state) => ({
-                                    ...baseStyles,
-                                    backgroundColor: SettingsManager.userBackgroundColor,
-                                }),
-                            }}
-                            placeholder="Add a filter..."
-                            options={options}
-                            isMulti={false}
-                            onChange={val => this.facetClick((val as UserOptions).value)}
-                            onKeyDown={e => e.stopPropagation()}
-                            value={null}
-                            closeMenuOnSelect={true}
-                        />
-                    </div>
+                    <div style={{ width: '100%' }}>{this.fieldsDropdown}</div>
                     {/* THE FOLLOWING CODE SHOULD BE DEVELOPER FOR BOOLEAN EXPRESSION (AND / OR) */}
                     {/* <div className="filterBox-select-bool"> 
                         <select className="filterBox-selection" onChange={action(e => this.targetDoc && (this.targetDoc._childFilters_boolean = (e.target as any).value))} defaultValue={StrCast(this.targetDoc?.childFilters_boolean)}>