@internetarchive/collection-browser 4.4.1 → 4.5.1-alpha-webdev8221.0

package/src/tiles/list/tile-list-compact-header.ts

@@ -1,5 +1,6 @@
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { msg } from '@lit/localize';
 import { BaseTileComponent } from '../base-tile-component';
 
@@ -8,6 +9,7 @@ export class TileListCompactHeader extends BaseTileComponent {
   /*
    * Reactive properties inherited from BaseTileComponent:
    *  - model?: TileModel;
+   *  - tileActions: TileAction[] = [];
    *  - currentWidth?: number;
    *  - currentHeight?: number;
    *  - baseNavigationUrl?: string;
@@ -21,9 +23,17 @@ export class TileListCompactHeader extends BaseTileComponent {
    */
 
   render() {
+    const hasActions = this.tileActions.length > 0;
+    const headerClasses = classMap({
+      mobile: this.classSize === 'mobile',
+      desktop: this.classSize === 'desktop',
+      'has-actions': hasActions,
+    });
+
     return html`
-      <div id="list-line-header" class="${this.classSize}">
+      <div id="list-line-header" class=${headerClasses}>
         <div id="thumb"></div>
+        ${hasActions ? html`<div id="actions-header"></div>` : nothing}
         <div id="title">${msg('Title')}</div>
         <div id="creator">${msg('Creator')}</div>
         <div id="date">
@@ -81,6 +91,22 @@ export class TileListCompactHeader extends BaseTileComponent {
       #list-line-header.desktop {
         grid-template-columns: 51px 3fr 2fr 95px 30px 115px;
       }
+
+      /*
+       * When tile actions are present in the rows below, reserve a matching
+       * column here so the columns stay aligned with each row.
+       */
+      #list-line-header.mobile.has-actions {
+        grid-template-columns:
+          36px var(--tileActionColumnWidth, 90px) 3fr 2fr
+          68px 35px;
+      }
+
+      #list-line-header.desktop.has-actions {
+        grid-template-columns:
+          51px var(--tileActionColumnWidth, 100px) 3fr 2fr
+          95px 30px 115px;
+      }
     `;
   }
 }

package/src/tiles/list/tile-list-compact.ts

@@ -1,5 +1,6 @@
 import { css, html, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import DOMPurify from 'dompurify';
 import type { SortParam } from '@internetarchive/search-service';
 import { BaseTileComponent } from '../base-tile-component';
@@ -7,6 +8,7 @@ import { BaseTileComponent } from '../base-tile-component';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import type { DateFormat } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
+import { tileActionStyles } from '../../styles/tile-action-styles';
 
 import '../image-block';
 import '../tile-mediatype-icon';
@@ -16,6 +18,7 @@ export class TileListCompact extends BaseTileComponent {
   /*
    * Reactive properties inherited from BaseTileComponent:
    *  - model?: TileModel;
+   *  - tileActions: TileAction[] = [];
    *  - currentWidth?: number;
    *  - currentHeight?: number;
    *  - baseNavigationUrl?: string;
@@ -31,8 +34,15 @@ export class TileListCompact extends BaseTileComponent {
    */
 
   render() {
+    const hasActions = this.tileActions.length > 0;
+    const lineClasses = classMap({
+      mobile: this.classSize === 'mobile',
+      desktop: this.classSize === 'desktop',
+      'has-actions': hasActions,
+    });
+
     return html`
-      <div id="list-line" class="${this.classSize}">
+      <div id="list-line" class=${lineClasses}>
         <image-block
           .model=${this.model}
           .baseImageUrl=${this.baseImageUrl}
@@ -43,6 +53,11 @@ export class TileListCompact extends BaseTileComponent {
           .suppressBlurring=${this.suppressBlurring}
         >
         </image-block>
+        ${hasActions
+          ? html`<div id="actions">
+              ${this.renderTileActions('list-compact')}
+            </div>`
+          : nothing}
         <a href=${this.href} id="title"
           >${DOMPurify.sanitize(this.model?.title ?? '')}</a
         >
@@ -161,79 +176,103 @@ export class TileListCompact extends BaseTileComponent {
   }
 
   static get styles() {
-    return css`
-      html {
-        font-size: unset;
-      }
-
-      div {
-        font-size: 14px;
-      }
-
-      #list-line {
-        display: grid;
-        column-gap: 10px;
-        border-top: 1px solid #ddd;
-        align-items: center;
-        line-height: 20px;
-        padding-top: 5px;
-        margin-bottom: -5px;
-      }
-
-      #list-line.mobile {
-        grid-template-columns: 36px 3fr 2fr 68px 35px;
-      }
-
-      #list-line.desktop {
-        grid-template-columns: 51px 3fr 2fr 95px 30px 115px;
-      }
-
-      #list-line:hover #title {
-        text-decoration: underline;
-      }
-
-      #title {
-        text-decoration: none;
-      }
-
-      #title:link {
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-
-      #title,
-      #creator {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      #icon {
-        margin-left: 2px;
-      }
-
-      #views {
-        text-align: right;
-        padding-right: 8px;
-      }
-
-      .mobile #views {
-        display: none;
-      }
-
-      .mobile tile-mediatype-icon {
-        --iconHeight: 14px;
-        --iconWidth: 14px;
-      }
-
-      .desktop #icon {
-        --iconHeight: 20px;
-        --iconWidth: 20px;
-      }
-
-      item-image {
-        --imgHeight: 100%;
-        --imgWidth: 100%;
-      }
-    `;
+    return [
+      tileActionStyles,
+      css`
+        html {
+          font-size: unset;
+        }
+
+        div {
+          font-size: 14px;
+        }
+
+        #list-line {
+          display: grid;
+          column-gap: 10px;
+          border-top: 1px solid #ddd;
+          align-items: center;
+          line-height: 20px;
+          padding-top: 5px;
+          margin-bottom: -5px;
+        }
+
+        #list-line.mobile {
+          grid-template-columns: 36px 3fr 2fr 68px 35px;
+        }
+
+        #list-line.desktop {
+          grid-template-columns: 51px 3fr 2fr 95px 30px 115px;
+        }
+
+        /*
+         * When tile actions are present, insert an extra column for them
+         * between the thumbnail and the title.
+         */
+        #list-line.mobile.has-actions {
+          grid-template-columns:
+            36px var(--tileActionColumnWidth, 90px)
+            3fr 2fr 68px 35px;
+        }
+
+        #list-line.desktop.has-actions {
+          grid-template-columns:
+            51px var(--tileActionColumnWidth, 100px)
+            3fr 2fr 95px 30px 115px;
+        }
+
+        #actions {
+          /* The flex container inside is what holds the action buttons */
+          display: flex;
+        }
+
+        #list-line:hover #title {
+          text-decoration: underline;
+        }
+
+        #title {
+          text-decoration: none;
+        }
+
+        #title:link {
+          color: var(--ia-theme-link-color, #4b64ff);
+        }
+
+        #title,
+        #creator {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        #icon {
+          margin-left: 2px;
+        }
+
+        #views {
+          text-align: right;
+          padding-right: 8px;
+        }
+
+        .mobile #views {
+          display: none;
+        }
+
+        .mobile tile-mediatype-icon {
+          --iconHeight: 14px;
+          --iconWidth: 14px;
+        }
+
+        .desktop #icon {
+          --iconHeight: 20px;
+          --iconWidth: 20px;
+        }
+
+        item-image {
+          --imgHeight: 100%;
+          --imgWidth: 100%;
+        }
+      `,
+    ];
   }
 }