improve screenshots

DerGoogler · Jun 7, 2024 · b4c7fca · b4c7fca
1 parent 607144c
commit b4c7fca
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 19 deletions.
diff --git a/Website/src/activitys/ModuleViewActivity/tabs/OverviewTab.tsx b/Website/src/activitys/ModuleViewActivity/tabs/OverviewTab.tsx
@@ -27,6 +27,8 @@ import { useCategories } from "@Hooks/useCategories";
 import { useFormatDate } from "@Hooks/useFormatDate";
 import { ModuleViewActivity } from "..";
 import { useRepos } from "@Hooks/useRepos";
+import { Carousel } from "@Components/onsenui/Carousel";
+import { CarouselItem } from "@Components/onsenui/CarouselItem";
 
 const OverviewTab = () => {
   const { strings } = useStrings();
@@ -223,24 +225,31 @@ const OverviewTab = () => {
             </CardContent>
 
             <ImageList
+              component={Carousel}
+              swipeable
+              autoScrollRatio={0}
+              overscrollable
               sx={{
                 pt: 0,
                 p: 1,
+                mt: 0,
                 overflow: "auto",
                 whiteSpace: "nowrap",
                 gridAutoFlow: "column",
-                gridTemplateColumns: "repeat(auto-fill,minmax(250px,1fr)) !important",
+                gridTemplateColumns: `repeat(${track.screenshots.length}, minmax(250px,1fr)) !important`,
                 gridAutoColumns: "minmax(250px, 1fr)",
               }}
             >
               {track.screenshots.map((image, i) => (
                 <ImageListItem
-                  sx={(theme) => ({
+                  component={CarouselItem}
+                  key={i}
+                  sx={{
                     ml: 1,
                     mr: 1,
-                  })}
+                  }}
                 >
-                  <Box component={Image} src={image} />
+                  <Box sx={{ width: "100%" }} component={Image} src={image} />
                 </ImageListItem>
               ))}
             </ImageList>

diff --git a/Website/src/components/dapi/Image.tsx b/Website/src/components/dapi/Image.tsx
@@ -1,4 +1,5 @@
 import PicturePreviewActivity from "@Activitys/PicturePreviewActivity";
+import { GestureDetector } from "@Components/onsenui/GestureDetector";
 import { useActivity } from "@Hooks/useActivity";
 import { ModFS, useModFS } from "@Hooks/useModFS";
 import { useTheme } from "@Hooks/useTheme";
@@ -36,19 +37,8 @@ function Image(props: Props) {
   }, [src]);
 
   return (
-    <Box
-      component={"img"}
-      sx={{
-        ":hover": {
-          cursor: !noOpen ? "pointer" : "unset",
-        },
-        borderRadius: theme.shape.borderRadius / theme.shape.borderRadius,
-        ...(!noOutline && { outlineOffset: -1, outline: `1px solid ${theme.palette.divider} !important` }),
-        boxShadow: theme.shadows[shadow || 0],
-        ...sx,
-      }}
-      src={newSrc}
-      onClick={() => {
+    <GestureDetector
+      onTap={() => {
         if (!noOpen) {
           context.pushPage({
             component: PicturePreviewActivity,
@@ -59,8 +49,22 @@ function Image(props: Props) {
           });
         }
       }}
-      {...rest}
-    />
+    >
+      <Box
+        component={"img"}
+        sx={{
+          ":hover": {
+            cursor: !noOpen ? "pointer" : "unset",
+          },
+          borderRadius: theme.shape.borderRadius / theme.shape.borderRadius,
+          ...(!noOutline && { outlineOffset: -1, outline: `1px solid ${theme.palette.divider} !important` }),
+          boxShadow: theme.shadows[shadow || 0],
+          ...sx,
+        }}
+        src={newSrc}
+        {...rest}
+      />
+    </GestureDetector>
   );
 }
 

diff --git a/Website/src/components/onsenui/Carousel.tsx b/Website/src/components/onsenui/Carousel.tsx
@@ -0,0 +1,51 @@
+import onsCustomElement from "@Util/onsCustomElement";
+import { SxProps } from "@mui/material";
+import React from "react";
+
+const deprecated = {
+  index: "activeIndex",
+};
+
+const Element = onsCustomElement<HTMLElement, HTMLCarousel>("ons-carousel", { deprecated })({});
+
+const Carousel = React.forwardRef<HTMLElement, HTMLCarousel>((props, ref) => {
+  const { itemWidth, itemHeight, ...rest } = props;
+
+  // string values for itemWidth and itemHeight are deprecated but handle them
+  // safely anyway to avoid breaking user code
+  const stringify = (x) => (typeof x === "number" ? `${x}px` : x);
+  const realItemWidth = stringify(itemWidth);
+  const realItemHeight = stringify(itemHeight);
+
+  return (
+    <Element itemWidth={realItemWidth} itemHeight={realItemHeight} ref={ref} {...rest}>
+      {props.children}
+    </Element>
+  );
+});
+
+interface HTMLCarousel extends React.PropsWithChildren {
+  sx?: SxProps;
+  direction?: "horizontal" | "vertical";
+  fullscreen?: boolean;
+  overscrollable?: boolean;
+  centered?: boolean;
+  itemWidth?: string;
+  itemHeight?: string;
+  autoScroll?: boolean;
+  autoScrollRatio?: number;
+  swipeable?: boolean;
+  disabled?: boolean;
+  activeIndex?: number;
+  index?: number;
+  autoRefresh?: boolean;
+  onPreChange?: Function;
+  onPostChange?: Function;
+  onRefresh?: Function;
+  onOverscroll?: Function;
+  animation?: string;
+  animationOptions?: object;
+  onSwipe?: Function;
+}
+
+export { Carousel };
diff --git a/Website/src/components/onsenui/CarouselItem.tsx b/Website/src/components/onsenui/CarouselItem.tsx
@@ -0,0 +1,11 @@
+import onsCustomElement from "@Util/onsCustomElement";
+import { SxProps } from "@mui/material";
+
+const CarouselItem = onsCustomElement<HTMLElement, HTMLCarouselItem>("ons-carousel-item")({});
+
+interface HTMLCarouselItem extends React.PropsWithChildren {
+  sx?: SxProps;
+  modifier?: string;
+}
+
+export { HTMLCarouselItem, CarouselItem };
diff --git a/Website/src/typings/global.d.ts b/Website/src/typings/global.d.ts
@@ -42,6 +42,8 @@ declare global {
       "ons-gesture-detector": HTMLAttributes<HTMLElement>;
       "ons-bottom-toolbar": HTMLAttributes<HTMLElement>;
       "ons-fab": HTMLAttributes<HTMLElement>;
+      "ons-carousel": HTMLAttributes<HTMLElement>;
+      "ons-carousel-item": HTMLAttributes<HTMLElement>;
     }
   }