From 8c731fc35c3348caa6e37bbf1f31894df9b0b662 Mon Sep 17 00:00:00 2001 From: BQX Date: Mon, 12 Feb 2024 16:34:11 +0800 Subject: [PATCH 1/2] feat(ui): sheet css --- packages/competition/src/App.tsx | 4 +- packages/ui/lib/Sheet/Sheet.module.scss | 53 ++++++++++++++----------- packages/ui/lib/Sheet/SheetWrapper.tsx | 4 +- packages/ui/lib/_variables.scss | 2 + 4 files changed, 36 insertions(+), 27 deletions(-) diff --git a/packages/competition/src/App.tsx b/packages/competition/src/App.tsx index 82d9c3e..bb3be1c 100644 --- a/packages/competition/src/App.tsx +++ b/packages/competition/src/App.tsx @@ -8,7 +8,7 @@ function App() { <>
-
+ {/*
*/}
@@ -16,7 +16,7 @@ function App() { setVisible(false)} - width={400} + width={500} > ); diff --git a/packages/ui/lib/Sheet/Sheet.module.scss b/packages/ui/lib/Sheet/Sheet.module.scss index c56a734..b98d71a 100644 --- a/packages/ui/lib/Sheet/Sheet.module.scss +++ b/packages/ui/lib/Sheet/Sheet.module.scss @@ -1,3 +1,14 @@ +@use '../variables' as *; +$animation-duration: $duration-400; +$padding-left-right-distance: 20px; + +@mixin animation($name) { + animation-name: $name; + animation-duration: $animation-duration; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; +} + .base { height: 100vh; width: 100vw; @@ -6,14 +17,12 @@ top: 0; z-index: 2; box-sizing: border-box; - background-color: rgb(0, 0, 0, 0.4); + background-color: $background-shadow-color; &.showAnimation { - animation: showShadow 0.4s; - animation-fill-mode: forwards; + @include animation(showShadow); } &.hideAnimation { - animation: hideShadow 0.4s; - animation-fill-mode: forwards; + @include animation(hideShadow); } .sheetContent { top: 0; @@ -24,15 +33,13 @@ box-sizing: border-box; opacity: 1; right: 0; - padding: 20px; + padding: $padding-left-right-distance; opacity: 1; &.showAnimation { - animation: slideSheet 0.4s; - animation-fill-mode: forwards; + @include animation(showSlideSheet); } &.hideAnimation { - animation: hideSlideSheet 0.4s; - animation-fill-mode: forwards; + @include animation(hideSlideSheet); } .sheetMainContent { padding: 10px 0; @@ -40,14 +47,14 @@ display: flex; position: relative; height: calc(100vh - 32px - 60px); - top: 31px; + top: 30px; } .sheetFooter { height: 50px; position: absolute; bottom: 20px; width: -webkit-fill-available; - padding-right: 20px; + padding-right: $padding-left-right-distance; text-align: end; background-color: var(--white-color); } @@ -76,7 +83,7 @@ align-items: center; justify-content: center; svg { - transition: all 0.4s ease-in-out; + transition: all $animation-duration ease-in-out; } &:hover { svg { @@ -90,13 +97,13 @@ } .wrapper { - transition: all 400ms ease-in-out; + transition: all $animation-duration ease-in-out; border-radius: 15px; & > div { - transition: all 0.4s ease-in-out; + transition: all $animation-duration ease-in-out; } &.show { - padding: 10px; + padding: 12px; & > div { border-radius: 15px; } @@ -105,25 +112,25 @@ @keyframes showShadow { from { - background-color: rgb(0, 0, 0, 0); + background-color: rgb(var(--black-color-rgb), 0); } to { - background-color: rgb(0, 0, 0, 0.4); + background-color: $background-shadow-color; } } @keyframes hideShadow { from { - background-color: rgb(0, 0, 0, 0.4); + background-color: $background-shadow-color; } to { - background-color: rgb(0, 0, 0, 0); + background-color: rgb(var(--black-color-rgb), 0); } } -@keyframes slideSheet { +@keyframes showSlideSheet { from { - right: -30vw; + right: -30%; } to { right: 0; @@ -135,6 +142,6 @@ right: 0; } to { - right: -30vw; + right: -30%; } } diff --git a/packages/ui/lib/Sheet/SheetWrapper.tsx b/packages/ui/lib/Sheet/SheetWrapper.tsx index 096a90b..138cf12 100644 --- a/packages/ui/lib/Sheet/SheetWrapper.tsx +++ b/packages/ui/lib/Sheet/SheetWrapper.tsx @@ -1,4 +1,4 @@ -import React, { Children, useEffect } from 'react'; +import React from 'react'; import { useWrapperVisibleStore } from './useWrapperVisibleStore'; import styles from './Sheet.module.scss'; @@ -19,7 +19,7 @@ export const SheetWrapper = React.forwardRef( return ( <> -
+
Date: Mon, 12 Feb 2024 17:46:19 +0800 Subject: [PATCH 2/2] fix(ui): show toast animation --- packages/ui/lib/Toast/Toast.module.scss | 96 ++++++++++--------------- packages/ui/lib/Toast/Toast.tsx | 13 +--- packages/ui/lib/Toast/showToast.tsx | 11 +-- 3 files changed, 45 insertions(+), 75 deletions(-) diff --git a/packages/ui/lib/Toast/Toast.module.scss b/packages/ui/lib/Toast/Toast.module.scss index 2cf8dde..8fcf16f 100644 --- a/packages/ui/lib/Toast/Toast.module.scss +++ b/packages/ui/lib/Toast/Toast.module.scss @@ -1,11 +1,27 @@ @use '../variables' as *; +$animation-duration: $duration-400; +$border-radius: $radius-5; +@mixin animation($name) { + animation-name: $name; + animation-duration: $animation-duration; + animation-timing-function: ease-in-out; +} +@mixin type($type-name) { + color: var(--#{$type-name}-color); + .closeButton { + .icon { + fill: var(--#{$type-name}-color); + } + } +} .base { - border-radius: 5px; + border-radius: $border-radius; gap: 10px; box-sizing: border-box; opacity: 0; + transform: translateY(100px); overflow: hidden; - transition: all 0.3s ease-in; + transition: all $animation-duration ease-in-out; padding: 12px 10px 16px 20px; display: flex !important; @include shadow; @@ -13,6 +29,7 @@ &.visible { opacity: 1; scale: 1; + transform: translateY(0); } .sider { position: absolute; @@ -50,7 +67,7 @@ display: flex; justify-content: center; align-items: center; - transition: all 0.4s ease-in-out; + transition: all $animation-duration ease-in-out; &:hover { scale: 1.05; } @@ -68,36 +85,16 @@ margin-top: 10px; } &.info { - color: var(--primary-color); - .closeButton { - .icon { - fill: var(--primary-color); - } - } + @include type(primary); } &.success { - color: var(--success-color); - .closeButton { - .icon { - fill: var(--success-color); - } - } + @include type(success); } &.warning { - color: var(--warning-color); - .closeButton { - .icon { - fill: var(--warning-color); - } - } + @include type(warning); } &.error { - color: var(--danger-color); - .closeButton { - .icon { - fill: var(--danger-color); - } - } + @include type(danger); } &.small { width: 300px; @@ -123,27 +120,22 @@ display: flex; flex-direction: column; gap: 10px; -} -.toastShow { - position: fixed; - right: 10px; - bottom: 10px; - animation-name: slideIn; - animation-duration: 0.4s; - transition: all 0.4s ease-in-out; -} - -.toastHide { - position: fixed; - right: 10px; - bottom: 10px; - animation-name: slideHide; - animation-duration: 0.8s; + .toastShow { + position: fixed; + right: 10px; + bottom: 10px; + @include animation(slideIn); + transition: all $animation-duration ease-in-out; + } + .toastHide { + bottom: -100px; + opacity: 0; + } } @keyframes slideIn { from { - opacity: 0; + opacity: 0.2; transform: translateY(100%); } to { @@ -151,19 +143,3 @@ transform: translateY(0); } } - -@keyframes slideHide { - 0% { - opacity: 1; - } - 50% { - opacity: 0; - } - 100% { - transform: translateY(100%); - } -} - -.dataExpand { - transform: translateY(-200px) !important; -} diff --git a/packages/ui/lib/Toast/Toast.tsx b/packages/ui/lib/Toast/Toast.tsx index e77af03..b854ac2 100644 --- a/packages/ui/lib/Toast/Toast.tsx +++ b/packages/ui/lib/Toast/Toast.tsx @@ -47,7 +47,6 @@ export const Toast = React.forwardRef( ref, ) => { const [visible, setVisble] = useState(true); - const [innerVisible, setInnerVisible] = useState(true); const toastClass = classNames( styles['base'], @@ -58,18 +57,12 @@ export const Toast = React.forwardRef( ); useEffect(() => { - if (!visible && close) { - // A delay is set here, in order to see the animation in its entirety - setTimeout(() => { - setInnerVisible(false); - close(); - }, 300); - } + if (!visible && close) close(); }, [visible, close]); return ( <> - {innerVisible && ( + {
(
- )} + } ); }, diff --git a/packages/ui/lib/Toast/showToast.tsx b/packages/ui/lib/Toast/showToast.tsx index c5c5ba8..d1f3be7 100644 --- a/packages/ui/lib/Toast/showToast.tsx +++ b/packages/ui/lib/Toast/showToast.tsx @@ -41,13 +41,12 @@ export const showToast = (props?: ToastProps) => { const moreTimeClose = (div: HTMLDivElement) => { setTimeout(() => { const ToasthideClass: string = classNames(styles['toastHide']); - div.className = ToasthideClass; - + div.classList.add(ToasthideClass); setTimeout(() => { toastContainer?.removeChild(div); toasts = toasts.filter((toast) => toast !== div); - }, 300); - }, 6000); + }, 400); + }, 5000); }; const moreThreeClose = () => { @@ -62,7 +61,9 @@ const moreThreeClose = () => { }; const closeToast = (div: HTMLDivElement) => { - div.remove(); + setTimeout(() => { + div.remove(); + }, 300); toasts = toasts.filter((toast) => toast !== div); addListener(div); expand(toasts);