fixed pivotView to provide a white background to docs with no background so that images will show up, and so text doesn't blend in to column. changed image labeling to show a pivot view and assigne metadata instead of creating collections.

1 files changed, 33 insertions, 32 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 6036a2ead..de46180e6 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -161,7 +161,7 @@ export class CollectionCardView extends CollectionSubView() {
     panelHeight = (layout: Doc) => () => (this.panelWidth() * NumCast(layout._height)) / NumCast(layout._width);
     onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
-    isChildContentActive = () => (this.isContentActive() ? true : false);
+    isChildContentActive = () => !!this.isContentActive();
 
     /**
      * Returns the degree to rotate a card dependind on the amount of cards in their row and their index in said row
@@ -173,10 +173,10 @@ export class CollectionCardView extends CollectionSubView() {
         const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
         const stepMag = Math.abs(-30 + (amCards / 2 - 1) * (30 / ((amCards - (amCards % 2)) / 2)));
 
-        if (amCards % 2 == 0 && possRotate == 0) {
+        if (amCards % 2 === 0 && possRotate === 0) {
             return possRotate + Math.abs(-30 + (index - 1) * (30 / (amCards / 2)));
         }
-        if (amCards % 2 == 0 && index > (amCards + 1) / 2) {
+        if (amCards % 2 === 0 && index > (amCards + 1) / 2) {
             return possRotate + stepMag;
         }
 
@@ -194,10 +194,10 @@ export class CollectionCardView extends CollectionSubView() {
         if (realIndex > this._maxRowCount - 1) {
             rowOffset = 400 * ((realIndex - (realIndex % this._maxRowCount)) / this._maxRowCount);
         }
-        if (evenOdd == 1 || index < apex - 1) {
+        if (evenOdd === 1 || index < apex - 1) {
             return Math.abs(stepMag * (apex - index)) - rowOffset;
         }
-        if (index == apex || index == apex - 1) {
+        if (index === apex || index === apex - 1) {
             return 0 - rowOffset;
         }
 
@@ -259,27 +259,26 @@ export class CollectionCardView extends CollectionSubView() {
         return docs;
     };
 
-    displayDoc = (doc: Doc, screenToLocalTransform: () => Transform) => {
-        return (
-            <DocumentView
-                {...this._props}
-                ref={action((r: DocumentView) => r?.ContentDiv && this._docRefs.set(doc, r))}
-                Document={doc}
-                NativeWidth={returnZero}
-                NativeHeight={returnZero}
-                fitWidth={returnFalse}
-                onDoubleClickScript={this.onChildDoubleClick}
-                renderDepth={this._props.renderDepth + 1}
-                LayoutTemplate={this._props.childLayoutTemplate}
-                LayoutTemplateString={this._props.childLayoutString}
-                ScreenToLocalTransform={screenToLocalTransform} //makes sure the box wrapper thing is in the right spot
-                isContentActive={this.isChildContentActive}
-                isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
-                PanelWidth={this.panelWidth}
-                PanelHeight={this.panelHeight(doc)}
-            />
-        );
-    };
+    displayDoc = (doc: Doc, screenToLocalTransform: () => Transform) => (
+        <DocumentView
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...this._props}
+            ref={action((r: DocumentView) => r?.ContentDiv && this._docRefs.set(doc, r))}
+            Document={doc}
+            NativeWidth={returnZero}
+            NativeHeight={returnZero}
+            fitWidth={returnFalse}
+            onDoubleClickScript={this.onChildDoubleClick}
+            renderDepth={this._props.renderDepth + 1}
+            LayoutTemplate={this._props.childLayoutTemplate}
+            LayoutTemplateString={this._props.childLayoutString}
+            ScreenToLocalTransform={screenToLocalTransform} // makes sure the box wrapper thing is in the right spot
+            isContentActive={this.isChildContentActive}
+            isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
+            PanelWidth={this.panelWidth}
+            PanelHeight={this.panelHeight(doc)}
+        />
+    );
 
     /**
      * Determines how many cards are in the row of a card at a specific index
@@ -296,7 +295,7 @@ export class CollectionCardView extends CollectionSubView() {
         if (index < totalCards - (totalCards % 10)) {
             return this._maxRowCount;
         }
-        //(3)
+        // (3)
         return totalCards % 10;
     };
     /**
@@ -335,7 +334,9 @@ export class CollectionCardView extends CollectionSubView() {
      * @param buttonID
      * @param doc
      */
-    toggleButton = undoable((buttonID: number, doc: Doc) => this.cardSort_customField && (doc[this.cardSort_customField] = buttonID), 'toggle custom button');
+    toggleButton = undoable((buttonID: number, doc: Doc) => {
+        this.cardSort_customField && (doc[this.cardSort_customField] = buttonID);
+    }, 'toggle custom button');
 
     /**
      * A list of the text content of all the child docs. RTF documents will have just their text and pdf documents will have the first 50 words.
@@ -346,8 +347,7 @@ export class CollectionCardView extends CollectionSubView() {
     childPairStringList = () => {
         const docToText = (doc: Doc) => {
             switch (doc.type) {
-                case DocumentType.PDF:  const words = StrCast(doc.text).split(/\s+/);
-                                        return words.slice(0, 50).join(' '); // first 50 words of pdf text
+                case DocumentType.PDF:  return StrCast(doc.text).split(/\s+/).slice(0, 50).join(' '); // first 50 words of pdf text
                 case DocumentType.IMG:  return this.getImageDesc(doc);
                 case DocumentType.RTF:  return StrCast(RTFCast(doc.text).Text);
                 default:                return StrCast(doc.title);
@@ -368,7 +368,7 @@ export class CollectionCardView extends CollectionSubView() {
      */
     getImageDesc = async (image: Doc) => {
         if (StrCast(image.description)) return StrCast(image.description); // Return existing description
-        const href = (image.data as URLField).url.href;
+        const { href } = (image.data as URLField).url;
         const hrefParts = href.split('.');
         const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
         try {
@@ -422,12 +422,13 @@ export class CollectionCardView extends CollectionSubView() {
      */
     renderButtons = (doc: Doc, cardSort: cardSortings) => {
         if (cardSort !== cardSortings.Custom) return '';
-        const amButtons = Math.max(4, this.childDocs?.reduce((set, doc) => this.cardSort_customField && set.add(NumCast(doc[this.cardSort_customField])), new Set<number>()).size ?? 0);
+        const amButtons = Math.max(4, this.childDocs?.reduce((set, d) => this.cardSort_customField && set.add(NumCast(d[this.cardSort_customField])), new Set<number>()).size ?? 0);
         const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc);
         const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6;
         return (
             <div className="card-button-container" style={{ width: `${totalWidth}px` }}>
                 {numberRange(amButtons).map(i => (
+                    // eslint-disable-next-line jsx-a11y/control-has-associated-label
                     <button
                         key={i}
                         type="button"