card view cleanup. moved 'pile' into shiftclick on Perspective dropdown. fixed tags sorting.

5 files changed, 33 insertions, 33 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b41fd09dc..7c36a82f2 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -694,10 +694,8 @@ pie title Minerals in my tap water
             { title: "Type",      icon:"eye",            toolTip:"Sort by document type",                          btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Color",     icon:"palette",        toolTip:"Sort by document color",                         btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color",      funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Tags",      icon:"bolt",           toolTip:"Sort by document's tags",                        btnType: ButtonType.ToggleButton, expertMode: false, toolType:"tag",        funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Pile",      icon:"layer-group",    toolTip:"View the cards as a pile in the free form view", btnType: ButtonType.ClickButton,  expertMode: false, toolType:"pile",       funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Chat Popup",icon:"lightbulb",      toolTip:"Toggle the chat popup's visibility", width: 45,  btnType: ButtonType.ToggleButton, expertMode: false, toolType:"toggle-chat",funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'} },
             { title: "Show Tags", icon:"id-card",        toolTip:"Toggle tag annotation panel",         width: 45, btnType: ButtonType.ToggleButton, expertMode: false, toolType:"toggle-tags",funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'} },
-
             { title: "Sort",      icon: "sort" ,         toolTip: "Manage sort order / lock status",               btnType: ButtonType.MultiToggleButton,               toolType:"alignment", ignoreClick: true,
               subMenu: [
                 { title: "Ascending", toolTip: "Sort the cards in ascending order", btnType: ButtonType.ToggleButton, icon: "sort-up",  toolType:"up",  ignoreClick: true,  scripts: {onClick: '{ return showFreeform(this.toolType, _readOnly_);}'} },
@@ -814,7 +812,7 @@ pie title Minerals in my tap water
                     CollectionViewType.Masonry, CollectionViewType.Multicolumn, CollectionViewType.Multirow, CollectionViewType.Linear, 
                     CollectionViewType.Map, CollectionViewType.NoteTaking, CollectionViewType.Schema, CollectionViewType.Stacking, 
                     CollectionViewType.Calendar, CollectionViewType.Grid, CollectionViewType.Tree, CollectionViewType.Time, ]),
-              title: "Perspective",                    toolTip: "View",                 btnType: ButtonType.DropdownList,                                                                                                                                    ignoreClick: true, width: 100, scripts: { script:  '{ return setView(value, _readOnly_); }'}},
+              title: "Perspective",                    toolTip: "View",                 btnType: ButtonType.DropdownList,                                                                                                                                    ignoreClick: true, width: 100, scripts: { script:  '{ return setView(value, shiftKey, _readOnly_); }'}},
             { title: "Pin",     icon: "map-pin",       toolTip: "Pin View to Trail",    btnType: ButtonType.ClickButton,         expertMode: false,                                                                                                                             width: 30,  scripts: { onClick: 'pinWithView(altKey)'}, funcs: {hidden: "IsNoneSelected()"}},
             { title: "Header",  icon: "heading",       toolTip: "Doc Titlebar Color",   btnType: ButtonType.ColorButton,         expertMode: false,                                                                                                          ignoreClick: true,             scripts: { script:  'return setHeaderColor(value, _readOnly_)'} },
             { title: "Template",icon: "scroll",        toolTip: "Default Note Template",btnType: ButtonType.ToggleButton,        expertMode: false, toolType:DocumentType.RTF,                                                                                                              scripts: { onClick: '{ return setDefaultTemplate(_readOnly_); }'} },
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index d9ff21035..15683ebf2 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -16,6 +16,7 @@ import { RegionHelpers } from './Region';
 import './Timeline.scss';
 import { TimelineOverview } from './TimelineOverview';
 import { Track } from './Track';
+import { Id } from '../../../fields/FieldSymbols';
 
 /**
  * Timeline class controls most of timeline functions besides individual region and track mechanism. Main functions are 
@@ -56,7 +57,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
     private DEFAULT_CONTAINER_HEIGHT: number = 330;
     private MIN_CONTAINER_HEIGHT: number = 205;
 
-    constructor(props: any) {
+    constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
     }
@@ -89,7 +90,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
      */
     @computed
     private get children(): Doc[] {
-        const annotatedDoc = [DocumentType.IMG, DocumentType.VID, DocumentType.PDF, DocumentType.MAP].includes(StrCast(this._props.Document.type) as any);
+        const annotatedDoc = [DocumentType.IMG, DocumentType.VID, DocumentType.PDF, DocumentType.MAP].includes(StrCast(this._props.Document.type) as unknown as DocumentType);
         if (annotatedDoc) {
             return DocListCast(this._props.Document[Doc.LayoutFieldKey(this._props.Document) + '_annotations']);
         }
@@ -272,9 +273,9 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
      * for displaying time to standard min:sec
      */
     @action
-    toReadTime = (time: number): string => {
-        time = time / 1000;
-        const inSeconds = Math.round(time * 100) / 100;
+    toReadTime = (timeIn: number): string => {
+        const timeSecs = timeIn / 1000;
+        const inSeconds = Math.round(timeSecs * 100) / 100;
 
         const min = Math.floor(inSeconds / 60);
         const sec = Math.round((inSeconds % 60) * 100) / 100;
@@ -552,6 +553,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
                             <div key="timeline_trackbox" className="trackbox" ref={this._trackbox} style={{ width: `${this._totalLength}px` }}>
                                 {[...this.children, this._props.Document].map(doc => (
                                     <Track
+                                        key={doc[Id]}
                                         ref={ref => this.mapOfTracks.push(ref)}
                                         timeline={this}
                                         animatedDoc={doc}
@@ -570,7 +572,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
                         <div className="currentTime">Current: {this.getCurrentTime()}</div>
                         <div key="timeline_title" className="title-container" ref={this._titleContainer}>
                             {[...this.children, this._props.Document].map(doc => (
-                                <div style={{ height: `${this._titleHeight}px` }} className="datapane" onPointerOver={() => Doc.BrushDoc(doc)} onPointerOut={() => Doc.UnBrushDoc(doc)}>
+                                <div key={doc[Id]} style={{ height: `${this._titleHeight}px` }} className="datapane" onPointerOver={() => Doc.BrushDoc(doc)} onPointerOut={() => Doc.UnBrushDoc(doc)}>
                                     <p>{StrCast(doc.title)}</p>
                                 </div>
                             ))}
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 800eb4914..1bca68846 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import * as CSS from 'csstype';
 import { ClientUtils, DashColor, imageUrlToBase64, returnFalse, returnNever, returnZero, setupMoveUpEvents } from '../../../ClientUtils';
 import { emptyFunction } from '../../../Utils';
-import { Doc, DocListCast, Opt } from '../../../fields/Doc';
+import { Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc';
 import { Animation, DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
@@ -314,6 +314,7 @@ export class CollectionCardView extends CollectionSubView() {
                         case cardSortings.Chat: return [NumCast(docA.chatIndex, 9999),                        NumCast(docB.chatIndex,9999)];
                         case cardSortings.Time: return [DateCast(docA.author_date)?.date ?? Date.now(),       DateCast(docB.author_date)?.date ?? Date.now()];
                         case cardSortings.Color:return [DashColor(StrCast(docA.backgroundColor)).hsv().hue(), DashColor(StrCast(docB.backgroundColor)).hsv().hue()];
+                        case cardSortings.Tag:  return [StrListCast(docA.tags).join(""),                      StrListCast(docB.tags).join("")];
                     }
                 })(); //prettier-ignore
                 return (typeA < typeB ? -1 : typeA > typeB ? 1 : 0) * (isDesc ? 1 : -1);
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 1738802b7..542417531 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -48,10 +48,20 @@ ScriptingGlobals.add(function IsNoneSelected() {
 
 // toggle: Set overlay status of selected document
 // eslint-disable-next-line prefer-arrow-callback
-ScriptingGlobals.add(function setView(view: string, getSelected: boolean) {
-    if (getSelected) return DocumentView.SelectedDocs();
-    const selected = DocumentView.SelectedDocs().lastElement();
-    selected ? (selected._type_collection = view) : console.log('[FontIconBox.tsx] changeView failed');
+ScriptingGlobals.add(function setView(view: string, shiftKey: boolean, checkResult?: boolean) {
+    if (checkResult) return DocumentView.SelectedDocs();
+    const selected = DocumentView.Selected().lastElement();
+    if (selected) {
+        if (shiftKey) {
+            const newCol = Doc.MakeEmbedding(selected.Document);
+            newCol._type_collection = view;
+            selected._props.addDocTab?.(newCol, OpenWhere.addRight);
+        } else {
+            selected.Document._type_collection = view;
+        }
+    } else {
+        console.log('[FontIconBox.tsx] changeView failed');
+    }
     return undefined;
 });
 
@@ -141,7 +151,7 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
 
 // eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function showFreeform(
-    attr: 'flashcards' | 'hcenter' | 'vcenter' | 'grid' | 'snaplines' | 'clusters' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'chat' | 'up' | 'down' | 'pile' | 'toggle-chat' | 'toggle-tags' | 'tag',
+    attr: 'flashcards' | 'hcenter' | 'vcenter' | 'grid' | 'snaplines' | 'clusters' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'chat' | 'up' | 'down' | 'toggle-chat' | 'toggle-tags' | 'tag',
     checkResult?: boolean,
     persist?: boolean
 ) {
@@ -152,7 +162,7 @@ ScriptingGlobals.add(function showFreeform(
     }
 
     // prettier-ignore
-    const map: Map<'flashcards' | 'hcenter' | 'vcenter' | 'grid' | 'snaplines' | 'clusters' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'chat' | 'up' | 'down' | 'pile' | 'toggle-chat' | 'toggle-tags' | 'tag', 
+    const map: Map<'flashcards' | 'hcenter' | 'vcenter' | 'grid' | 'snaplines' | 'clusters' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'chat' | 'up' | 'down'| 'toggle-chat' | 'toggle-tags' | 'tag', 
     { 
         waitForRender?: boolean; 
         checkResult: (doc: Doc) => boolean; 
@@ -242,20 +252,6 @@ ScriptingGlobals.add(function showFreeform(
                 doc.showChildTags = !doc.showChildTags;
             },
         }],
-        ['pile', {
-            checkResult: (doc: Doc) => doc._type_collection == CollectionViewType.Freeform,
-            setDoc: (doc: Doc, dv: DocumentView) => {
-                const newCol = Docs.Create.CarouselDocument(DocListCast(doc[Doc.LayoutFieldKey(doc)]), {
-                    title: doc.title + "_carousel",
-                    _width: 250,
-                    _height: 200,
-                    _layout_fitWidth: false,
-                    _layout_autoHeight: true,
-                    childFilters: new List<string>(StrListCast(doc.childFilters))
-                });
-                dv._props.addDocTab?.(newCol, OpenWhere.addRight);
-            },
-        }],
     ]);
 
     if (checkResult) {
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 60b2a7519..f58862028 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -160,6 +160,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
             buttonList,
             jsx: undefined,
             selectedVal: script(),
+            toolTip: 'Set text font',
             getStyle: (val: string) => ({ fontFamily: val }),
         };
     };
@@ -174,6 +175,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
                   buttonList: buttonList.filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value as CollectionViewType)),
                   getStyle: undefined,
                   selectedVal: StrCast(selected[0]._type_collection),
+                  toolTip: 'change view type (press Shift to add as a new view)',
               }
             : {
                   jsx: selected.length ? (
@@ -205,11 +207,11 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
     @computed get dropdownListButton() {
         const script = ScriptCast(this.Document.script);
         const selectedFunc = () => script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result as string;
-        const { buttonList, selectedVal, getStyle, jsx } = (() => {
+        const { buttonList, selectedVal, getStyle, jsx, toolTip } = (() => {
             switch (this.Document.title) {
                 case 'Font':         return this.handleFontDropdown(selectedFunc, this.buttonList);
                 case 'Perspective':  return this.handleViewDropdown(script, this.buttonList);
-                default:             return { buttonList: this.buttonList, selectedVal: selectedFunc(), jsx: undefined, getStyle: undefined };
+                default:             return { buttonList: this.buttonList, selectedVal: selectedFunc(), toolTip: undefined, jsx: undefined, getStyle: undefined };
             } // prettier-ignore
         })();
         if (jsx) return jsx;
@@ -225,9 +227,10 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
         return (
             <Dropdown
                 selectedVal={selectedVal}
-                setSelectedVal={undoable(value => script.script.run({ this: this.Document, value }), `dropdown select ${this.label}`)}
+                setSelectedVal={undoable((value, e) => script.script.run({ this: this.Document, value, shiftKey: e.shiftKey }), `dropdown select ${this.label}`)}
                 color={SnappingManager.userColor}
                 background={SnappingManager.userVariantColor}
+                toolTip={toolTip}
                 type={Type.TERT}
                 closeOnSelect={false}
                 dropdownType={DropdownType.SELECT}