Merge pull request #175 from HerrZatacke/develop

Version 1.41.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gb-printer-web",
-  "version": "1.41.0",
+  "version": "1.41.1",
   "description": "gb-printer-web",
   "scripts": {
     "start": "webpack serve --config ./scripts/webpack.dev.js",

src/javascript/app/components/GalleryImage/index.scss

@@ -77,6 +77,7 @@
   &__created-meta {
     display: flex;
     justify-content: space-between;
+    z-index: $z-index-meta-pre;
   }
 
   &__meta {
@@ -109,7 +110,6 @@
     white-space: pre;
     font-family: monospace;
     overflow: auto;
-    z-index: $z-index-content;
     font-size: 11px;
     line-height: 14px;
   }

src/javascript/app/store/middlewares.ts

@@ -12,6 +12,7 @@ import importMessage from './middlewares/importMessage';
 import lightbox from './middlewares/lightbox';
 import pluginsMiddleware from './middlewares/plugins';
 import saveEditPalette from './middlewares/saveEditPalette';
+import saveRGBNImage from './middlewares/saveRGBNImage';
 import settings from './middlewares/settings';
 import share from './middlewares/share';
 import startDownload from './middlewares/startDownload';
@@ -30,6 +31,7 @@ export default applyMiddleware(
   lightbox,
   pluginsMiddleware,
   saveEditPalette,
+  saveRGBNImage,
   settings,
   share,
   startDownload,

src/javascript/app/store/middlewares/saveRGBNImage.ts

@@ -0,0 +1,44 @@
+import dayjs from 'dayjs';
+import { dateFormat, defaultRGBNPalette } from '../../defaults';
+import { Actions } from '../actions';
+import type { MiddlewareWithState } from '../../../../types/MiddlewareWithState';
+import type { AddImagesAction } from '../../../../types/actions/ImageActions';
+import type { RGBNHashes, RGBNImage } from '../../../../types/Image';
+import type { ImageSelectionSetAction } from '../../../../types/actions/ImageSelectionActions';
+
+const saveRGBNImage: MiddlewareWithState = (store) => (next) => async (action) => {
+  if (action.type === Actions.SAVE_NEW_RGB_IMAGES) {
+    const hashes: RGBNHashes[] = action.payload;
+
+    const { default: hash } = await import(/* webpackChunkName: "obh" */ 'object-hash');
+
+    const now = dayjs();
+
+    const images = hashes.map((rgbnHashes: RGBNHashes, index: number): RGBNImage => {
+      const image: RGBNImage = {
+        palette: defaultRGBNPalette,
+        hashes: rgbnHashes,
+        hash: hash(rgbnHashes),
+        created: now.add(index, 'milliseconds').format(dateFormat),
+        title: '',
+        tags: [],
+      };
+
+      return image;
+    });
+
+    store.dispatch<AddImagesAction>({
+      type: Actions.ADD_IMAGES,
+      payload: images,
+    });
+
+    store.dispatch<ImageSelectionSetAction>({
+      type: Actions.IMAGE_SELECTION_SET,
+      payload: images.map((i) => i.hash),
+    });
+  }
+
+  next(action);
+};
+
+export default saveRGBNImage;

src/scss/auto-imports/_basic/variables.scss

@@ -8,9 +8,10 @@ $z-index-live-image: 1;
 $z-index-navigation: 2;
 $z-index-overlay-buttons: 2;
 $z-index-gallery-image-buttons: 2;
-$z-index-gallery-header-sticky: 3;
 $z-index-overlay: 3;
+$z-index-meta-pre: 4;
 $z-index-overlay-box: 4;
+$z-index-gallery-header-sticky: 5;
 
 $default-border-radius: 5px;
 $default-border-radius-small: 2px;