Merge pull request #174 from HerrZatacke/develop

Version 1.41.0
HerrZatacke · Jul 22, 2024 · 4376e0d · 4376e0d
2 parents ad892dd + b65a960
commit 4376e0d
Show file tree

Hide file tree

Showing 48 changed files with 627 additions and 936 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gb-printer-web",
-  "version": "1.40.3",
+  "version": "1.41.0",
   "description": "gb-printer-web",
   "scripts": {
     "start": "webpack serve --config ./scripts/webpack.dev.js",
@@ -119,6 +119,7 @@
     "typescript": "<5.2.0",
     "ufo": "^1.5.4",
     "use-debounce": "^5.2.1",
+    "use-long-press": "^3.2.0",
     "walkdir": "^0.4.1",
     "webpack": "^5.80.0",
     "webpack-bundle-analyzer": "^4.5.0",

diff --git a/src/assets/icons/small.svg b/src/assets/icons/small.svg
diff --git a/src/javascript/app/components/BatchButtons/index.scss b/src/javascript/app/components/BatchButtons/index.scss
@@ -1,4 +1,8 @@
 .batch-buttons {
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: center;
+
   &__bubble {
     position: absolute;
     bottom: -3px;
@@ -12,5 +16,3 @@
     @include theme-color($color-white, $color-grey-70);
   }
 }
-
-
diff --git a/src/javascript/app/components/BatchButtons/index.tsx b/src/javascript/app/components/BatchButtons/index.tsx
@@ -17,6 +17,24 @@ const BATCH_ACTIONS_MONOCHROME: BatchActionType[] = [
   BatchActionType.RGB,
 ];
 
+const batchActionTitle = (id: BatchActionType) => {
+  switch (id) {
+    case BatchActionType.DELETE:
+      return 'Delete';
+    case BatchActionType.ANIMATE:
+      return 'Animate';
+    case BatchActionType.DOWNLOAD:
+      return 'Download';
+    case BatchActionType.EDIT:
+      return 'Edit';
+    case BatchActionType.RGB:
+      return 'Create RGB Images';
+    default:
+      return '';
+  }
+};
+
+
 interface Props {
   page: number,
 }
@@ -45,6 +63,7 @@ function BatchButtons({ page }: Props) {
         <button
           type="button"
           onClick={showSortOptions}
+          title="Sort"
         >
           <SVG name="sort" />
         </button>
@@ -55,6 +74,7 @@ function BatchButtons({ page }: Props) {
         <button
           type="button"
           onClick={filter}
+          title="Manage Filters"
         >
           <SVG name="filter" />
           {activeFilters === 0 ? null : (
@@ -72,6 +92,7 @@ function BatchButtons({ page }: Props) {
         <button
           type="button"
           onClick={() => batchTask(hasSelected ? BatchActionType.UNCHECKALL : BatchActionType.CHECKALL)}
+          title={hasSelected ? 'Uncheck All' : 'Check All'}
         >
           <SVG name="checkmark" />
           {selectedImages === 0 ? null : (
@@ -94,6 +115,7 @@ function BatchButtons({ page }: Props) {
               disabled={!batchEnabled}
               type="button"
               onClick={() => batchTask(action)}
+              title={batchActionTitle(action)}
             >
               <SVG name={action} />
             </button>
@@ -115,6 +137,7 @@ function BatchButtons({ page }: Props) {
               disabled={!monochromeBatchEnabled}
               type="button"
               onClick={() => batchTask(action)}
+              title={batchActionTitle(action)}
             >
               <SVG name={action} />
             </button>
@@ -137,6 +160,7 @@ function BatchButtons({ page }: Props) {
             <button
               type="button"
               onClick={() => setPluginsActive(true)}
+              title="Use Plugin"
             >
               <SVG name="plug" />
             </button>

diff --git a/src/javascript/app/components/Gallery/index.scss b/src/javascript/app/components/Gallery/index.scss
@@ -1,29 +1,41 @@
 .gallery {
+  display: grid;
+  margin: 0 auto 20px;
+  gap: var(--gap);
+  --col-size: calc((2 * var(--tile-padding)) + var(--image-size));
+  grid-template-columns: repeat(var(--columns), var(--col-size));
+  width: calc((var(--col-size) * var(--columns)) + (var(--gap) * (var(--columns) - 1)));
 
-  &--1x,
-  &--2x,
-  &--3x,
-  &--4x {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: 0 -5px 20px;
+  // All values are being set via JS
+  // &--small {
+  //   --tile-padding: 10px;
+  //   --image-size: calc(160px / var(--ddpx));
+  //   --gap: calc(var(--small-gap) / var(--ddpx));
+  //   --columns
+  // }
 
-    @media (max-width: $breakpoint-mobile) {
-      margin: 0 -20px 20px;
-    }
+  &--1x {
+    --tile-padding: 10px;
+    --image-size: 160px;
+    --columns: var(--1x-columns);
+    --gap: var(--1x-gap);
   }
 
+  &--2x {
+    --tile-padding: 20px;
+    --image-size: 320px;
+    --columns: var(--2x-columns);
+    --gap: var(--2x-gap);
+  }
 
-  &--list {
-    margin: 0 0 20px;
-    width: 100%;
+  &--max {
+    --tile-padding: 20px;
+    --columns: var(--max-columns);
+    --gap: var(--max-gap);
+  }
 
-    @media (max-width: $breakpoint-mobile) {
-      margin-left: -40px;
-      margin-right: -40px;
-      width: calc(100% + 80px);
-    }
+  @media (max-width: $breakpoint-mobile) {
+    margin-bottom: 20px;
   }
 }
 

diff --git a/src/javascript/app/components/Gallery/index.tsx b/src/javascript/app/components/Gallery/index.tsx
@@ -1,13 +1,34 @@
 import React from 'react';
+import type { CSSPropertiesVars } from 'react';
 import { Navigate } from 'react-router-dom';
 import classnames from 'classnames';
 import GalleryImage from '../GalleryImage';
 import GalleryHeader from '../GalleryHeader';
 import GalleryIntro from '../GalleryIntro';
 import { useGallery } from './useGallery';
+import { GalleryViews } from '../../../consts/GalleryViews';
+import { useScreenDimensions } from '../../../hooks/useScreenDimensions';
+import type { ScreenDimensions } from '../../../hooks/useScreenDimensions';
 
 import './index.scss';
-import { GalleryViews } from '../../../consts/GalleryViews';
+import Pagination from '../Pagination';
+
+const getSmallStyleVars = (screenDimensions: ScreenDimensions): CSSPropertiesVars => {
+  const smallTilePadding = 10;
+  const smallGap = 10 / screenDimensions.ddpx; // keep "10" aligned with '--1x-gap' in 'Layout/index.scss'
+  const smallImageSize = 160 / screenDimensions.ddpx;
+  const colSize = (2 * smallTilePadding) + smallImageSize;
+  const columns = Math.floor((screenDimensions.layoutWidth + smallGap) / (colSize + smallGap));
+
+  return {
+    '--tile-padding': `${smallTilePadding}px`,
+    '--image-size': `${smallImageSize}px`,
+    '--gap': `${smallGap}px`,
+    '--columns': columns.toString(10),
+    '--col-size': `${colSize}px`,
+    '--layout-width': `${screenDimensions.layoutWidth}px`,
+  };
+};
 
 function Gallery() {
   const {
@@ -20,29 +41,12 @@ function Gallery() {
     currentView,
   } = useGallery();
 
+  const screenDimensions = useScreenDimensions();
+
   if (!valid) {
     return <Navigate to={`/gallery/page/${page + 1}`} replace />;
   }
 
-  const content = images.map((image) => (
-    <GalleryImage
-      type={currentView === GalleryViews.GALLERY_VIEW_LIST ? 'list' : 'default'}
-      key={image.hash}
-      hash={image.hash}
-      page={page}
-    />
-  ));
-
-  if (currentView !== 'list') {
-    content.push(
-      <li className="gallery-image gallery-image--dummy" key="dummy1" />,
-      <li className="gallery-image gallery-image--dummy" key="dummy2" />,
-      <li className="gallery-image gallery-image--dummy" key="dummy3" />,
-      <li className="gallery-image gallery-image--dummy" key="dummy4" />,
-      <li className="gallery-image gallery-image--dummy" key="dummy5" />,
-    );
-  }
-
   return (
     <>
       <GalleryIntro
@@ -51,26 +55,29 @@ function Gallery() {
         filteredCount={filteredCount}
       />
       <GalleryHeader page={page} isSticky />
-      {
-        (currentView === 'list') ? (
-          <ul className="gallery gallery--list">
-            {content}
-          </ul>
-        ) : (
-          <ul
-            className={
-              classnames('gallery', {
-                [`gallery--${currentView}`]: true,
-              })
-            }
-          >
-            {content}
-          </ul>
-        )
-      }
+      <Pagination page={page} />
+      <ul
+        className={
+          classnames('gallery', {
+            [`gallery--${currentView}`]: true,
+          })
+        }
+        style={currentView === GalleryViews.GALLERY_VIEW_SMALL ? getSmallStyleVars(screenDimensions) : undefined}
+      >
+        { images.map((image) => (
+          <GalleryImage
+            key={image.hash}
+            hash={image.hash}
+            page={page}
+          />
+        )) }
+      </ul>
       {
         images.length < 3 ? null : (
-          <GalleryHeader page={page} isBottom />
+          <>
+            <Pagination page={page} />
+            <GalleryHeader page={page} isBottom />
+          </>
         )
       }
     </>

diff --git a/src/javascript/app/components/GalleryHeader/index.scss b/src/javascript/app/components/GalleryHeader/index.scss
@@ -1,6 +1,7 @@
 .gallery-header {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 
   &--sticky {
     position: sticky;
@@ -9,11 +10,6 @@
     @include theme-background-color($color-page-background, $color-page-background-dark);
     padding-top: 15px;
     padding-bottom: 0;
-
-    @media (max-width: 640px) {
-      margin-left: -10vw;
-      width: 100vw;
-    }
   }
 
   &--bottom {
@@ -22,50 +18,7 @@
     }
   }
 
-  .gallery-view-select,
-  .pagination,
-  .batch-buttons {
-    flex: 33% 1 0;
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .gallery-view-select {
-    justify-content: flex-start;
-
-  }
-
-  .pagination {
-    justify-content: center;
-  }
-
-  .batch-buttons {
-    justify-content: flex-end;
-  }
-
-  @media (max-width: 1200px) {
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    .gallery-view-select,
-    .batch-buttons {
-      flex: auto 1 1;
-    }
-
-    .pagination {
-      flex-basis: 100%;
-      order: 3;
-    }
-  }
-
-  @media (max-width: 640px) {
-    flex-wrap: wrap;
-
-    .gallery-view-select,
-    .pagination,
-    .batch-buttons {
-      flex: 100% 0 0;
-      justify-content: center;
-    }
+  @media (max-width: $breakpoint-3-cols) {
+    flex-direction: column;
   }
 }