WEBDEV-8134 Add minimal layout type to item & collection tiles (#547)

* Expose 'minimal' layout type for collection tiles

* Handle 'minimal' layout type correctly in item tiles too

* Apply minimal class to item-tile as needed

* Add demo app toggle for minimal tiles

* Improve naming of layout type property & options

* Fix obsolete name in app-root

Author: latonv

src/app-root.ts

@@ -16,6 +16,8 @@ import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manag
 import type { CollectionBrowser } from '../src/collection-browser';
 
 import '../src/collection-browser';
+import { InfiniteScroller } from '@internetarchive/infinite-scroller';
+import { TileDispatcher } from './tiles/tile-dispatcher';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
@@ -396,6 +398,14 @@ export class AppRoot extends LitElement {
               />
               <label for="show-outline-check">Show cell outlines</label>
             </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="minimal-tiles-check"
+                @click=${this.minimalTilesChanged}
+              />
+              <label for="minimal-tiles-check">Minimal tile layouts</label>
+            </div>
           </fieldset>
 
           <fieldset class="user-profile-controls">
@@ -587,6 +597,22 @@ export class AppRoot extends LitElement {
     }
   }
 
+  private minimalTilesChanged(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const scroller = this.collectionBrowser?.shadowRoot!.querySelector(
+      'infinite-scroller',
+    ) as InfiniteScroller;
+    const tileDispatchers = [
+      ...scroller.shadowRoot!.querySelectorAll('tile-dispatcher'),
+    ] as TileDispatcher[];
+
+    if (target.checked) {
+      tileDispatchers?.forEach(tile => (tile.layoutType = 'minimal'));
+    } else {
+      tileDispatchers?.forEach(tile => (tile.layoutType = 'default'));
+    }
+  }
+
   private toggleDevTools() {
     const pageUrl = new URL(window.location.href);
     const { searchParams } = pageUrl;

src/tiles/grid/collection-tile.ts

@@ -1,10 +1,12 @@
 import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { msg } from '@lit/localize';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
 import { formatUnitSize } from '../../utils/format-unit-size';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
 import { BaseTileComponent } from '../base-tile-component';
+import { LayoutType } from '../models';
 import '../image-block';
 
 @customElement('collection-tile')
@@ -27,9 +29,16 @@ export class CollectionTile extends BaseTileComponent {
 
   @property({ type: Boolean }) showInfoButton = false;
 
+  @property({ type: String }) layoutType: LayoutType = 'default';
+
   render() {
+    const containerClasses = classMap({
+      container: true,
+      minimal: this.layoutType === 'minimal',
+    });
+
     return html`
-      <div class="container">
+      <div class=${containerClasses}>
         ${this.infoButtonTemplate}
         <div class="tile-details">
           <div class="item-info">
@@ -157,6 +166,18 @@ export class CollectionTile extends BaseTileComponent {
           flex-direction: column;
           margin-left: 10px;
         }
+
+        .minimal #item-stats {
+          display: none;
+        }
+
+        .minimal .truncated {
+          -webkit-line-clamp: initial;
+        }
+
+        .minimal .item-info {
+          padding-bottom: 5px;
+        }
       `,
     ];
   }

src/tiles/grid/item-tile.ts

@@ -10,7 +10,7 @@ import type { DateFormat } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 import { BaseTileComponent } from '../base-tile-component';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import { SimpleLayoutType } from '../models';
+import { LayoutType } from '../models';
 
 import '../image-block';
 import '../review-block';
@@ -42,15 +42,16 @@ export class ItemTile extends BaseTileComponent {
 
   @property({ type: Boolean }) showTvClips = false;
 
-  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';
+  @property({ type: String }) layoutType: LayoutType = 'default';
 
   render() {
     const itemTitle = this.model?.title;
     const containerClasses = classMap({
       container: true,
-      simple: this.simpleLayoutType !== 'none',
-      'stats-only': this.simpleLayoutType === 'stats-only',
-      'snippets-only': this.simpleLayoutType === 'snippets-only',
+      simple: this.layoutType !== 'default',
+      'stats-only': this.layoutType === 'stats-only',
+      'snippets-only': this.layoutType === 'snippets-only',
+      minimal: this.layoutType === 'minimal',
     });
 
     return html`
@@ -175,8 +176,10 @@ export class ItemTile extends BaseTileComponent {
   }
 
   private get textSnippetsTemplate(): TemplateResult | typeof nothing {
-    if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')
+    if (!this.hasSnippets) return nothing;
+    if (['stats-only', 'minimal'].includes(this.layoutType)) {
       return nothing;
+    }
 
     return html`
       <text-snippet-block viewsize="grid" .snippets=${this.model?.snippets}>
@@ -221,7 +224,9 @@ export class ItemTile extends BaseTileComponent {
    * Template for the stats row along the bottom of the tile.
    */
   private get tileStatsTemplate(): TemplateResult | typeof nothing {
-    if (this.simpleLayoutType === 'snippets-only') return nothing;
+    if (['snippets-only', 'minimal'].includes(this.layoutType)) {
+      return nothing;
+    }
 
     const effectiveSort = this.sortParam ?? this.defaultSortParam;
     const [viewCount, viewLabel] =
@@ -301,7 +306,8 @@ export class ItemTile extends BaseTileComponent {
           -webkit-line-clamp: 1;
         }
 
-        .simple.snippets-only .item-info {
+        .simple.snippets-only .item-info,
+        .simple.minimal .item-info {
           padding-bottom: 5px;
         }
 

src/tiles/models.ts

@@ -1 +1,8 @@
-export type SimpleLayoutType = 'none' | 'stats-only' | 'snippets-only';
+/**
+ * What type of simplified tile layout to use.
+ *  - `default`: Do not apply any layout simplifications.
+ *  - `stats-only`: Only show the tile stats row, but not text snippets.
+ *  - `snippets-only`: Only show the text snippets row (if snippets exist), but not tile stats.
+ *  - `minimal`: Show neither tile stats nor the text snippets.
+ */
+export type LayoutType = 'default' | 'stats-only' | 'snippets-only' | 'minimal';

src/tiles/tile-dispatcher.ts

@@ -18,7 +18,7 @@ import './list/tile-list-compact';
 import './list/tile-list-compact-header';
 import type { TileHoverPane } from './hover/tile-hover-pane';
 import { BaseTileComponent } from './base-tile-component';
-import { SimpleLayoutType } from './models';
+import { LayoutType } from './models';
 import {
   HoverPaneController,
   HoverPaneControllerInterface,
@@ -62,8 +62,8 @@ export class TileDispatcher
 
   @property({ type: Boolean }) showTvClips = false;
 
-  /** What type of simple layout to use in grid mode, if any */
-  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';
+  /** What type of simplified layout to use in grid mode, if any */
+  @property({ type: String }) layoutType: LayoutType = 'default';
 
   /** Whether this tile should include a hover pane at all (for applicable tile modes) */
   @property({ type: Boolean }) enableHoverPane = false;
@@ -325,6 +325,7 @@ export class TileDispatcher
               .creatorFilter=${creatorFilter}
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
+              .layoutType=${this.layoutType}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
@@ -370,7 +371,7 @@ export class TileDispatcher
               .loggedIn=${this.loggedIn}
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
-              .simpleLayoutType=${this.simpleLayoutType}
+              .layoutType=${this.layoutType}
               ?showTvClips=${this.showTvClips}
               ?showInfoButton=${!this.isHoverEnabled}
               ?useLocalTime=${this.useLocalTime}