changed showing animation for skin load modal

some small changes in slider
PPLBandage · Dec 30, 2024 · 6ad3077 · 6ad3077
1 parent 231ebc6
commit 6ad3077
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 61 deletions.
diff --git a/src/app/modules/components/MinecraftConnect.tsx b/src/app/modules/components/MinecraftConnect.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { CSSTransition } from "react-transition-group"
+import { CSSTransition } from "react-transition-group";
 import style from '@/app/styles/minecraftConnect.module.css';
 import { IconBrandMinecraft, IconCheck, IconX } from "@tabler/icons-react";
 

diff --git a/src/app/modules/components/Slider.tsx b/src/app/modules/components/Slider.tsx
@@ -50,7 +50,13 @@ const Slider = ({ initial, range, onChange }: { initial: number, range: number,
         <>
             {isDragging &&
                 <div
-                    style={{ position: 'fixed', inset: 0, touchAction: 'none', cursor: 'pointer' }}
+                    style={{
+                        position: 'fixed',
+                        inset: 0,
+                        touchAction: 'none',
+                        cursor: 'grabbing',
+                        zIndex: 10
+                    }}
                     onMouseMove={mouseMove}
                     onMouseUp={mouseUp}
                     onTouchMove={mouseMove}

diff --git a/src/app/styles/editor/page.module.css b/src/app/styles/editor/page.module.css
@@ -139,16 +139,14 @@
 
 .skin_load_base {
     position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 10;
+    inset: 0;
+    z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
+
 @keyframes skinLoad {
     0% {
         transform: translateY(100px) scale(.8);

diff --git a/src/app/styles/slider.module.css b/src/app/styles/slider.module.css
@@ -18,7 +18,12 @@
     width: 24px;
     height: 16px;
     position: relative;
+    z-index: 11;
     border-radius: 3px;
-    cursor: pointer;
-    transition: top 150ms;
+    transition: top 50ms;
+    cursor: grab;
+}
+
+.thumb:active {
+    cursor: grabbing;
 }
diff --git a/src/app/workshop/[id]/client.tsx b/src/app/workshop/[id]/client.tsx
@@ -14,9 +14,8 @@ import debounce from 'lodash.debounce';
 import NavigatorEl from '@/app/modules/components/Navigator';
 import { anims } from '@/app/workshop/poses';
 import asyncImage from '@/app/modules/utils/asyncImage';
-import { CSSTransition } from 'react-transition-group';
 
-import { IconDownload, IconPlus } from '@tabler/icons-react';
+import { IconCaretDown, IconCaretUp, IconDownload, IconPlus } from '@tabler/icons-react';
 import Slider from '@/app/modules/components/Slider';
 import SlideButton from '@/app/modules/components/SlideButton';
 import SkinLoad from './components/skinLoad';
@@ -199,21 +198,13 @@ export default function Home({ data, referrer }: { data: Interfaces.Bandage, ref
 
     return (
         <>
-            <CSSTransition
-                in={loadExpanded}
-                timeout={230}
-                classNames={{
-                    enter: style['menu-enter'],
-                    enterActive: style['menu-enter-active'],
-                    exit: style['menu-exit'],
-                    exitActive: style['menu-exit-active'],
-                }}
-                unmountOnExit>
-                <SkinLoad onChange={evt => {
+            <SkinLoad
+                onChange={evt => {
                     evt && client.current?.changeSkin(evt.data, evt.slim, evt.cape ? 'data:image/png;base64,' + evt.cape : '');
                     setLoadExpanded(false);
-                }} />
-            </CSSTransition>
+                }}
+                expanded={loadExpanded}
+            />
 
             <main
                 className={style.main}

diff --git a/src/app/workshop/[id]/components/skinLoad.tsx b/src/app/workshop/[id]/components/skinLoad.tsx
@@ -6,11 +6,13 @@ import style_base from '@/app/styles/minecraftConnect.module.css';
 import AsyncImage from "@/app/modules/utils/asyncImage";
 import Searcher from "@/app/modules/components/NickSearch";
 import ApiManager from "@/app/modules/utils/apiManager";
+import { CSSTransition } from "react-transition-group";
 
 const b64Prefix = "data:image/png;base64,";
 
 interface SkinLoadProps {
-    onChange(data: { data: string; slim: boolean; cape?: string } | null): void
+    onChange(data: { data: string; slim: boolean; cape?: string } | null): void,
+    expanded: boolean
 }
 
 interface SkinResponse {
@@ -23,7 +25,7 @@ interface SkinResponse {
     }
 }
 
-const SkinLoad = ({ onChange }: SkinLoadProps) => {
+const SkinLoad = ({ expanded, onChange }: SkinLoadProps) => {
     const [data, setData] = useState<{ data: string; slim: boolean; cape?: string }>(null);
     const [loaded, setLoaded] = useState<boolean>(false);
 
@@ -131,43 +133,68 @@ const SkinLoad = ({ onChange }: SkinLoadProps) => {
     }
 
     return (
-        <div className={style.skin_load_base}>
-            <div className={style.skin_load_container}>
-                <div className={style_base.header}>
-                    <h3 style={{ margin: 0, display: 'flex', gap: '.5rem', alignItems: 'center' }}><IconShirt />Загрузить скин</h3>
-                    <IconX className={style_base.close} onClick={() => onChange(null)} />
-                </div>
-                <Searcher onChange={loadSkin} />
-                <label className={style.skin_drop}
-                    id="drop_container"
-                    onDragOver={ondragover}
-                    onDragLeave={ondragleave}
-                    onDrop={ondrop}>
-                    <div className={style.hidable}>
-                        <input type="file"
-                            name="imageInput"
-                            id="imageInput"
-                            accept="image/png"
-                            onChange={onChangeInput} />
-                        <span id="select_file">Выберите файл<br />или<br />скиньте его сюда</span>
-                    </div>
-                </label>
-
-                <span id="error"></span>
-
-                {data &&
-                    <div style={{ display: 'flex', justifyContent: 'center' }}>
-                        <NextImage src={data.data} width={64} height={64} alt='' />
+        <>
+            <CSSTransition
+                in={expanded}
+                timeout={150}
+                classNames={{
+                    enter: style_base['background-enter'],
+                    enterActive: style_base['background-enter-active'],
+                    exit: style_base['background-exit'],
+                    exitActive: style_base['background-exit-active'],
+                }}
+                unmountOnExit>
+                <div className={style_base.background} />
+            </CSSTransition>
+
+            <CSSTransition
+                in={expanded}
+                timeout={150}
+                classNames={{
+                    enter: style_base['menu-enter'],
+                    enterActive: style_base['menu-enter-active'],
+                    exit: style_base['menu-exit'],
+                    exitActive: style_base['menu-exit-active'],
+                }}
+                unmountOnExit>
+                <div className={style.skin_load_base}>
+                    <div className={style.skin_load_container}>
+                        <div className={style_base.header}>
+                            <h3 style={{ margin: 0, display: 'flex', gap: '.5rem', alignItems: 'center' }}><IconShirt />Загрузить скин</h3>
+                            <IconX className={style_base.close} onClick={() => onChange(null)} />
+                        </div>
+                        <Searcher onChange={loadSkin} />
+                        <label className={style.skin_drop}
+                            id="drop_container"
+                            onDragOver={ondragover}
+                            onDragLeave={ondragleave}
+                            onDrop={ondrop}>
+                            <div className={style.hidable}>
+                                <input type="file"
+                                    name="imageInput"
+                                    id="imageInput"
+                                    accept="image/png"
+                                    onChange={onChangeInput} />
+                                <span id="select_file">Выберите файл<br />или<br />скиньте его сюда</span>
+                            </div>
+                        </label>
+
+                        <span id="error" />
+                        {data &&
+                            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                                <NextImage src={data.data} width={64} height={64} alt='' />
+                            </div>
+                        }
+
+                        <div style={{ display: 'flex', width: '100%', gap: '.5rem' }}>
+                            <button className={`${style.skin_load} ${!loaded && style.disabled_load}`} onClick={() => { loaded && onChange(data) }} style={{ width: '100%' }}>
+                                <IconCheck width={24} height={24} style={{ marginRight: '.2rem' }} />Готово
+                            </button>
+                        </div>
                     </div>
-                }
-
-                <div style={{ display: 'flex', width: '100%', gap: '.5rem' }}>
-                    <button className={`${style.skin_load} ${!loaded && style.disabled_load}`} onClick={() => { loaded && onChange(data) }} style={{ width: '100%' }}>
-                        <IconCheck width={24} height={24} style={{ marginRight: '.2rem' }} />Готово
-                    </button>
                 </div>
-            </div>
-        </div>
+            </CSSTransition >
+        </>
     );
 }