feat: added list view

Tormak9970 · Oct 22, 2023 · a8ef14e · a8ef14e
1 parent fd5a389
commit a8ef14e
Show file tree

Hide file tree

Showing 9 changed files with 207 additions and 79 deletions.
diff --git a/src/components/core/games/Games.svelte b/src/components/core/games/Games.svelte
@@ -151,14 +151,11 @@
       <div style="display: flex; align-items: center;">
         <IconToggle onChange={onViewTypeChange} leftTooltip="Grid View" rightTooltip="List View" bind:value={$renderGamesInList}>
           <span slot="left">
-            <!-- <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 448">
-              <path d="M128 40 c0-22.1-17.9-40-40-40 H40 c-22.1 0-40 17.9-40 40 v48 c0 22.1 17.9 40 40 40 h48 c22.1 0 40-17.9 40-40 z M288 40 c0-22.1-17.9-40-40-40 H200 c-22.1 0-40 17.9-40 40 v48 c0 22.1 17.9 40 40 40 h48 c22.1 0 40-17.9 40-40 z M448 40 c0-22.1-17.9-40-40-40 H360 c-22.1 0-40 17.9-40 40 v48 c0 22.1 17.9 40 40 40 h48 c22.1 0 40-17.9 40-40 z" />
-              <path d="M128 200 c0-22.1-17.9-40-40-40 H40 c-22.1 0-40 17.9-40 40 v48 c0 22.1 17.9 40 40 40 h48 c22.1 0 40-17.9 40-40 z M288 200 c0-22.1-17.9-40-40-40 H200 c-22.1 0-40 17.9-40 40 v48 c0 22.1 17.9 40 40 40 h48 c22.1 0 40-17.9 40-40 z M448 200 c0-22.1-17.9-40-40-40 H360 c-22.1 0-40 17.9-40 40 v48 c0 22.1 17.9 40 40 40 h48 c22.1 0 40-17.9 40-40 z" />
-              <path d="M128 360 c0-22.1-17.9-40-40-40 H40 c-22.1 0-40 17.9-40 40 v48 c0 22.1 17.9 40 40 40 h48 c22.1 0 40-17.9 40-40 z M288 360 c0-22.1-17.9-40-40-40 H200 c-22.1 0-40 17.9-40 40 v48 c0 22.1 17.9 40 40 40 h48 c22.1 0 40-17.9 40-40 z M448 360 c0-22.1-17.9-40-40-40 H360 c-22.1 0-40 17.9-40 40 v48 c0 22.1 17.9 40 40 40 h48 c22.1 0 40-17.9 40-40 z" />
-            </svg> -->
             <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
-              <rect x="0" y="10" width="220" height="492" rx="50" ry="50" />
-              <rect x="290" y="10" width="220" height="492" rx="50" ry="50" />
+              <rect x="0" y="10" width="220" height="220" rx="50" ry="50" />
+              <rect x="290" y="10" width="220" height="220" rx="50" ry="50" />
+              <rect x="0" y="290" width="220" height="220" rx="50" ry="50" />
+              <rect x="290" y="290" width="220" height="220" rx="50" ry="50" />
             </svg>
           </span>
           <span slot="right">

diff --git a/src/components/core/games/list-view/EntryLoadingSkeleton.svelte b/src/components/core/games/list-view/EntryLoadingSkeleton.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+
+</script>
+
+<div class="list-entry-skeleton">
+  <div class="shine" />
+  <div class="entry-info-skeleton">
+    <div class="icon-container-skeleton" />
+    <div class="name-skeleton" />
+  </div>
+</div>
+
+<style>
+  .list-entry-skeleton {
+    background-color: var(--foreground);
+    padding: 6px 10px;
+    border-radius: 4px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    position: relative;
+
+    transition: background-color 0.2s ease-in-out;
+
+    margin-bottom: 7px;
+    margin-right: 7px;
+    
+    position: relative;
+
+    z-index: 1;
+
+    overflow: hidden;
+  }
+
+  .entry-info-skeleton {
+    display: flex;
+    align-items: center;
+  }
+
+  .icon-container-skeleton {
+    margin-right: 7px;
+    border-radius: 4px;
+
+    height: 32px;
+    width: 32px;
+
+    overflow: hidden;
+
+    background-color: var(--foreground-light);
+  }
+
+  .name-skeleton {
+    height: 23px;
+    line-height: 23px;
+
+    width: 200px;
+    border-radius: 4px;
+
+    overflow: hidden;
+
+    background-color: var(--foreground-light);
+  }
+
+  .shine {
+    position: absolute;
+
+    height: 100%;
+    width: 100%;
+
+    left: -100%;
+
+    background-image: linear-gradient(to left, rgba(var(--foreground-light_rgb), 0.05), rgba(var(--foreground-light_rgb), .2), rgba(var(--foreground-light_rgb), .5), rgba(var(--foreground-light_rgb), .2), rgba(var(--foreground-light_rgb), 0.05));
+    animation: loading 1.2s infinite;
+
+    z-index: 45;
+  }
+
+  @keyframes loading {
+    0%{
+      left: -100%;
+    }
+    100%{
+      left: 100%;
+    }
+  }
+</style>
diff --git a/src/components/core/games/list-view/GamesList.svelte b/src/components/core/games/list-view/GamesList.svelte
@@ -1,31 +1,28 @@
 <script lang="ts">
   import VirtualList from "./VirtualList.svelte";
   import GameEntry from "../GameEntry.svelte";
+  import EntryLoadingSkeleton from "./EntryLoadingSkeleton.svelte";
   
   import { currentPlatform } from "../../../../stores/AppState";
 
   export let isLoading: boolean;
   export let games: GameStruct[];
 
-  const itemHeight = 48;
-  let start: number;
-	let end: number;
+  const itemHeight = 47;
 </script>
 
 <div class="games-list">
   {#if isLoading}
-    <!-- <div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;">
+    <div class="loading-container">
       {#each new Array(100) as _}
-        <GridLoadingSkeleton />
+        <EntryLoadingSkeleton />
       {/each}
-    </div> -->
-    <!-- TODO: show loading skeletons for list entries here -->
+    </div>
   {:else}
     {#if games.length > 0}
-      <VirtualList itemHeight={itemHeight} items={games} bind:start bind:end let:item>
+      <VirtualList itemHeight={itemHeight} items={games} let:item>
         <GameEntry game={item} />
       </VirtualList>
-      <!-- <p>showing items {start}-{end}</p> -->
     {:else}
       <div class="message">
         No {$currentPlatform} games found.
@@ -37,6 +34,14 @@
 <style>
   .games-list {
     height: 100%;
+    overflow: hidden;
+  }
+
+  .loading-container {
+    height: 100%;
+    width: 100%;
+
+    overflow: hidden;
   }
   
   .message {

diff --git a/src/components/core/games/list-view/ListEntry.svelte b/src/components/core/games/list-view/ListEntry.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { selectedGameAppId } from "../../../../stores/AppState";
   import { AppController } from "../../../../lib/controllers/AppController";
+  import { heights, widths } from "../../imageDimensions";
+  import Lazy from "svelte-lazy";
 
   export let game: GameStruct;
   export let iconPath: string;
   export let showIcon: boolean;
 
-  console.log(iconPath, showIcon)
-
   export let isHidden: boolean;
   export let hasCustomName: boolean;
   export let hasCustomArt: boolean;
@@ -18,10 +18,16 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="game" class:selected={$selectedGameAppId === game.appid} on:click={selectGame}>
-  <div class="game-info">
+<div class="list-entry" class:selected={$selectedGameAppId === game.appid} on:click={selectGame}>
+  <div class="entry-info">
     <div class="icon-container">
-      <!-- <GridImage imagePath={imagePath} altText="{game.name}'s {$gridType} image" showImage={showImage} missingMessage="No {$gridType} image for game" /> -->
+      {#if showIcon}
+        <Lazy height="{heights.Icon}px" fadeOption={{ delay: 500, duration: 1000 }}>
+          <img src="{iconPath}" alt="{game.name}'s icon image" style="max-width: {widths.Icon}px; max-height: {heights.Icon}px; width: auto; height: auto;" draggable="false" />
+        </Lazy>
+      {:else}
+        <div style="text-align: center;">No icon image for game</div>
+      {/if}
     </div>
     <div class="name" use:AppController.tippy={{ content: game.name, placement: "right", onShow: AppController.onTippyShow }}>{game.name}</div>
   </div>
@@ -65,10 +71,9 @@
 </div>
 
 <style>
-  .game {
+  .list-entry {
     background-color: var(--foreground);
-    padding: 10px;
-    padding-bottom: 5px;
+    padding: 6px 10px;
     border-radius: 4px;
 
     font-size: 14px;
@@ -89,11 +94,26 @@
     margin-bottom: 7px;
     margin-right: 7px;
   }
-  .game:hover { background-color: var(--foreground-hover); }
+  .list-entry:hover { background-color: var(--foreground-hover); }
 
   .selected { background-color: var(--foreground-light); }
   .selected:hover { background-color: var(--foreground-light-hover); }
 
+  .entry-info {
+    display: flex;
+    align-items: center;
+  }
+
+  .icon-container {
+    margin-right: 7px;
+    border-radius: 4px;
+
+    height: 32px;
+    width: 32px;
+
+    overflow: hidden;
+  }
+
   .name {
     height: 23px;
     line-height: 23px;
@@ -138,5 +158,5 @@
     opacity: 1;
   }
 
-  .game:hover .image-control { display: flex; }
+  .list-entry:hover .image-control { display: flex; }
 </style>