Fix: Layered Image (#110)

seam-xyz · Sep 16, 2024 · a89e3d9 · a89e3d9
1 parent 47d69d7
commit a89e3d9
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 42 deletions.
diff --git a/src/blocks/LayeredImageBlock.tsx b/src/blocks/LayeredImageBlock.tsx
@@ -156,7 +156,8 @@ const SliderCounter = (props: { images: string[], count: number, mode: boolean }
               draggable="false"
               style={{
                 width: `100%`,
-                position: modePosition(images.indexOf(image), ImgCount),//images.indexOf(image) === 0 ? "relative": "absolute",
+                borderRadius: "10px",
+                position: modePosition(images.indexOf(image), ImgCount),
                 opacity: modeOpacity(images.indexOf(image), currentImage, ImgCount),
                 zIndex: 0,
                 top: 0,
@@ -177,21 +178,23 @@ const SliderCounter = (props: { images: string[], count: number, mode: boolean }
           className='slider'
           style={{
             display: "flex",
-            alignItems: "center"
+            alignItems: "center",
+            justifyContent: "space-between"
           }}
         >
           <input
-            className={'LayeredImageBlock-slider'}
+            className={'LayeredImageBlock-slider touch-none select-none'}
             style={{ background: `linear-gradient(to right, #2050DF ${progress}%, #ccc ${progress}% )` }}
             type='range'
             min={0}
             max={sliderMax - 1}
             value={sliderValue}
             onChange={sliderChange}
             onMouseUp={snapValue}
+            onTouchEnd={snapValue}
 
           />
-          <p style={{ whiteSpace: 'nowrap', width: "7%", textAlign: "end" }}>{currentImage + 1} / {ImgCount}</p>
+          <p style={{ whiteSpace: 'nowrap', width: "60px", textAlign: "right"}}>{currentImage + 1} / {ImgCount}</p>
         </div>
       </div>
     </div>
@@ -307,22 +310,7 @@ export const LayeredImageComposerComponent = ({ model, done }: ComposerComponent
 
           <button
             onClick={() => { setIsSubtract(false); }}
-            style={{
-              flex: 1,
-              width: "100%",
-              height: "auto",
-              padding: "12px 16px 12px 16px",
-              margin: "4px 0px",
-              textAlign: "left",
-              overflowWrap: "break-word",
-              whiteSpace: "normal",
-              borderRadius: "8px",
-              backgroundColor: isSubtract ? "#ffffff" : "#2050DF",
-              color: isSubtract ? "#000000" : "#ffffff",
-              borderWidth: "1px",
-              borderStyle: "solid",
-              borderColor: "#2050DF"
-            }}
+            className={`mode-button box-border ${isSubtract ? "": "mode-button-highlight"}`}
           >
             <div style={{ display: "flex", flexDirection: "column", }}>
 
@@ -338,22 +326,7 @@ export const LayeredImageComposerComponent = ({ model, done }: ComposerComponent
 
           <button
             onClick={() => { setIsSubtract(true); }}
-            style={{
-              flex: 1,
-              width: "100%",
-              height: "auto",
-              padding: "12px 16px 12px 16px",
-              margin: "4px 0px",
-              textAlign: "left",
-              overflowWrap: "break-word",
-              whiteSpace: "normal",
-              borderRadius: "8px",
-              backgroundColor: isSubtract ? "#2050DF" : "#ffffff",
-              color: isSubtract ? "#ffffff" : "#000000",
-              borderWidth: "1px",
-              borderStyle: "solid",
-              borderColor: "#2050DF"
-            }}
+            className={`mode-button box-border ${isSubtract ? "mode-button-highlight": ""}`}
           >
             <div style={{ display: "flex", flexDirection: "column", }}>
 
@@ -384,7 +357,7 @@ export const LayeredImageComposerComponent = ({ model, done }: ComposerComponent
             {imgs.map((image: string, index: number) => (
               <div
                 key={index}
-                style={dragOverItemIndex === index ? { width: "100%", outline: "2px solid #2050DF", backgroundColor: "#e4e6eb", padding: "8px 16px", borderRadius: "8px", margin: "7px 0px 16px 0px", opacity: "0.999",userSelect:"none", touchAction:"none" } : { width: "100%", backgroundColor: "#e4e6eb", padding: "8px 16px", borderRadius: "8px", margin: "7px 0px 16px 0px", opacity: "0.999",userSelect:"none", touchAction:"none" }}
+                className={`img-card touch-none select-none box-border ${dragOverItemIndex === index ? "outline-card" : ""}`}
                 draggable="true"
                 onDragStart={() => handleDragStart(index)}
                 onDragOver={handleDragOver}

diff --git a/src/blocks/assets/LayeredImageBlock/LayeredImageStyles.css b/src/blocks/assets/LayeredImageBlock/LayeredImageStyles.css
@@ -7,11 +7,11 @@
     appearance: none;          
     padding: 0px;
     margin: 0px;
-    width: 100%;
+    width: 90%;
     height: 10px;
-    border-radius: 5px;
+    border-radius: 20px;
     margin-right: 12px;
-    flex-grow: inherit;
+    flex-grow: 0;
     Border: 2px solid #0051E8;
   }
 
@@ -42,19 +42,20 @@
   .LayeredImageBlock-slider::-ms-track {
     width: 100%;
     height: 10px;
+    border-radius: 20px;
     background: transparent;  
     border-color: transparent;
     color: transparent;
   }
 
   .LayeredImageBlock-slider::-ms-fill-lower {
     background: #0051E8;      
-    border-radius: 5px;
+    border-radius: 20px;
   }
 
   .LayeredImageBlock-slider::-ms-fill-upper {
     background: #0051E8;
-    border-radius: 5px;
+    border-radius: 20px;
   }
 
   .hideScroll::-webkit-scrollbar {
@@ -70,6 +71,42 @@
     display: inline-block;
   }
 
+  .img-card{
+  width: 100%;
+  background-color: #e4e6eb;
+  padding: 8px 16px;
+  border-radius: 8px;
+  margin: 7px 0px 16px 0px;
+  opacity: 0.999;  
+  }
+
+  .outline-card{
+    outline: 2px solid #2050DF;
+  }
+
+  .mode-button {
+    flex: 1;
+    width: 100%;
+    height: "auto";
+    padding: 12px 16px 12px 16px;
+    margin: 4px 0px;
+    text-align: left;
+    overflow-wrap: break-word;
+    white-space: normal;
+    border-radius: 8px;
+    background-color: white;
+    color: black;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #2050DF;
+  }
+
+  .mode-button-highlight {
+    background-color: #2050DF;
+    color: #ffffff;
+  }
+
+
   @media only screen and (max-width:375px) {
 
     .hideScreenSmall {