fix toasts behavior and style

edrlab · Oct 3, 2023 · 39909e1 · 39909e1
1 parent 94a0df8
commit 39909e1
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 90 deletions.
diff --git a/src/renderer/assets/styles/components/toasts.css b/src/renderer/assets/styles/components/toasts.css
@@ -13,19 +13,21 @@
   overflow: hidden;
   margin-bottom: 1rem;
   position: relative;
-  padding: 1rem;
+  /* padding: 1rem; */
   border: 1px grey solid;
-  border-left: none;
-  border-top-right-radius: 0.5em;
-  border-bottom-right-radius: 0.5em;
+  border-radius: 0.5em;
+  /* border-bottom-right-radius: 0.5em; */
   width: 20rem;
-  height: 4.125rem;
+  height: 6.125rem;
   background: white;
   display: flex;
-  align-items: center;
-  animation-name: start;
-  animation-duration: 0.5s;
-  box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px, rgba(14, 18, 22, 0.2) 0px 10px 20px -15px;;
+  /* align-items: center; */
+  /* animation-name: start;
+  animation-duration: 0.5s; */
+  /* box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px, rgba(14, 18, 22, 0.2) 0px 10px 20px -15px; */
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  padding: 15px;
+  flex-direction: column;
 
   &:focus-within {
     border-width: 4px;
@@ -84,32 +86,81 @@
 
 @keyframes start {
   from {
-    transform: translateX(-100%);
+    transform: translateX(-100%), translateY(20%);
   }
 
   to {
-    transform: translateX(0);
+    transform: translateX(0), translateY(0);
   }
 }
 
 .___DEBUG___COMPONENTS_TOASTS_CSS {
   display: none;
 }
 
-.ToastRoot {
-  background-color: white;
-  border-radius: 6px;
-  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
-  padding: 15px;
-  display: grid;
-  grid-template-areas: 'title action' 'description action';
-  grid-template-columns: auto max-content;
-  column-gap: 15px;
+.toast[data-state='open'] {
+  animation: slideIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.toast[data-state='closed'] {
+  animation: hide 150ms ease-in;
+}
+
+.toastViewport {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 25px;
+  gap: 10px;
+  width: 390px;
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: 2147483647;
+  outline: none;
+}
+
+.toastTitle {
+  font-weight: bold;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+.infoButton {
+  display: flex;
   align-items: center;
+  justify-content: end;
+  transition: 300ms;
+  width: 100%;
+  padding-right: 1em;
+  & svg {
+    height: 1.3rem;
+    width: 1.3rem;
+    padding: 0;
+    margin: 3px;
+  }
+  &:hover {
+    text-decoration: underline;
+  }
 }
-.ToastRoot[data-state='open'] {
-  animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+@keyframes hide {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(-100% + 25px));
+  }
 }
-.ToastRoot[data-state='closed'] {
-  animation: hide 100ms ease-in;
+
+@keyframes slideIn {
+  from {
+    transform: translateX(calc(-100% + 25px));
+  }
+  to {
+    transform: translateX(0);
+  }
 }
diff --git a/src/renderer/assets/styles/components/toasts.css.d.ts b/src/renderer/assets/styles/components/toasts.css.d.ts
@@ -9,6 +9,10 @@ declare const styles: {
   readonly "leave": string;
   readonly "toRemove": string;
   readonly "___DEBUG___COMPONENTS_TOASTS_CSS": string;
+  readonly "toastViewport": string;
+  readonly "toastDescription": string;
+  readonly "toastTitle": string;
+  readonly "infoButton": string;
 };
 export = styles;
 
diff --git a/src/renderer/common/components/toast/Toast.tsx b/src/renderer/common/components/toast/Toast.tsx
@@ -11,6 +11,7 @@ import * as React from "react";
 import { ToastType } from "readium-desktop/common/models/toast";
 import { _APP_NAME } from "readium-desktop/preprocessor-directives";
 import * as QuitIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg";
+import * as Info from "readium-desktop/renderer/assets/icons/info.svg";
 import * as stylesToasts from "readium-desktop/renderer/assets/styles/components/toasts.css";
 import SVG from "readium-desktop/renderer/common/components/SVG";
 import * as Toasts from '@radix-ui/react-toast';
@@ -21,7 +22,7 @@ const capitalizedAppName = _APP_NAME.charAt(0).toUpperCase() + _APP_NAME.substri
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface IBaseProps extends TranslatorProps {
-    close: (id: string) => void;
+    // close: (id: string) => void;
     className?: string;
     id?: string;
     // icon?: ISVGProps;
@@ -37,6 +38,7 @@ interface IBaseProps extends TranslatorProps {
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface IProps extends IBaseProps {
     open: any;
+    onOpenChange: (open: boolean) => void;
 }
 
 interface IState {
@@ -199,7 +201,7 @@ export class Toast extends React.Component<IProps, IState> {
 
     private handleTransitionEnd() {
         if (this.state.toRemove) {
-            this.props.close(this.props.id);
+            // this.props.close(this.props.id);
         } else if (this.state.willLeave) {
             this.setState({toRemove: true});
         }
@@ -211,15 +213,21 @@ export default withTranslator(Toast);
 
 export const Toast2: React.FC<IProps> = (props) => {
     const timerRef = React.useRef(0);
-    const { type, open, id } = props;
+    const { type, open, onOpenChange, message } = props;
 
+    let toastTitle: string;
+    // let toastDescription: string;
     let typeClassName: string;
     switch (type) {
         case ToastType.Error:
             typeClassName = stylesToasts.error;
+            toastTitle = "Something went wrong";
+            // toastDescription = "The importation of the book has failed";
             break;
         case ToastType.Success:
             typeClassName = stylesToasts.success;
+            toastTitle = "You have a new book!";
+            // toastDescription = "Enjoy your reading!";
             break;
         default:
     }
@@ -230,27 +238,36 @@ export const Toast2: React.FC<IProps> = (props) => {
     }, []);
 
     return (
-        <Toasts.Root className={classNames(
-            stylesToasts.toast,
-            typeClassName,
-        )}
-        open={open}
-        onOpenChange={open}
-        key={id}>
-            <Toasts.Title>Something went wrong</Toasts.Title>
-            <Toasts.Description asChild>
-            <p
-                aria-live="assertive"
-                aria-relevant="all"
-                role="alert"
-                tabIndex={0}
-                >The importation of the book has failed
-            </p>
-            <button>More info</button>
-            </Toasts.Description>
-            <Toasts.Close className={stylesToasts.closeButton} aria-label="close">
-                <SVG ariaHidden={true} svg={QuitIcon}/>
-            </Toasts.Close>
-        </Toasts.Root>
+        <>
+            <Toasts.Root className={classNames(
+                stylesToasts.toast,
+                typeClassName
+                )}
+                open={open}
+                onOpenChange={onOpenChange}
+                duration={5000}
+                >
+                <Toasts.Title className={stylesToasts.toastTitle}>{toastTitle}</Toasts.Title>
+                <Toasts.Description className={stylesToasts.toastDescription}>
+                <p
+                    aria-live="assertive"
+                    aria-relevant="all"
+                    role="alert"
+                    tabIndex={0}
+                    >{message}
+                </p>
+                {type == ToastType.Error &&
+                    <button className={stylesToasts.infoButton} >
+                        More Infos
+                        <SVG ariaHidden={true} svg={Info}/>
+                    </button>
+                }
+                </Toasts.Description>
+                <Toasts.Close className={stylesToasts.closeButton} aria-label="close">
+                    <SVG ariaHidden={true} svg={QuitIcon}/>
+                </Toasts.Close>
+            </Toasts.Root>
+            <Toasts.Viewport className={stylesToasts.toastViewport} />
+        </>
     )
 };
diff --git a/src/renderer/common/components/toast/ToastManager.tsx b/src/renderer/common/components/toast/ToastManager.tsx
@@ -9,13 +9,14 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { IRendererCommonRootState } from "readium-desktop/common/redux/states/rendererCommonRootState";
 import { ToastState } from "readium-desktop/common/redux/states/toast";
-import * as stylesToasts from "readium-desktop/renderer/assets/styles/components/toasts.css";
+// import * as stylesToasts from "readium-desktop/renderer/assets/styles/components/toasts.css";
 
 import { TranslatorProps, withTranslator } from "../hoc/translator";
 import * as Toasts from "@radix-ui/react-toast";
-import classNames from "classnames";
-import SVG from "readium-desktop/renderer/common/components/SVG";
-import * as QuitIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg";
+// import classNames from "classnames";
+// import SVG from "readium-desktop/renderer/common/components/SVG";
+// import * as QuitIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg";
+import { Toast2 } from "./Toast";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface IBaseProps extends TranslatorProps {
@@ -44,7 +45,7 @@ export class ToastManager extends React.Component<IProps, IState> {
 
         this.state = {
             toastList: {},
-            open: false
+            open: false,
         };
 
         this.close = this.close.bind(this);
@@ -95,42 +96,11 @@ export class ToastManager extends React.Component<IProps, IState> {
         }
         return (
             <Toasts.Provider>
-                <Toasts.Root className={classNames(
-                    stylesToasts.toast  
-                    )}
-                    open={this.state.open}
-                    onOpenChange={(open) => this.setState({open})}
-                    duration={10000}
-                    >
-                    <Toasts.Title>Something went wrong</Toasts.Title>
-                    <Toasts.Description>
-                    <p
-                        aria-live="assertive"
-                        aria-relevant="all"
-                        role="alert"
-                        tabIndex={0}
-                        >The importation of the book has failed
-                    </p>
-                    <button>More info</button>
-                    </Toasts.Description>
-                    <Toasts.Close className={stylesToasts.closeButton} aria-label="close">
-                        <SVG ariaHidden={true} svg={QuitIcon}/>
-                    </Toasts.Close>
-                </Toasts.Root>
-                <Toasts.Viewport style={{
-                            position: "fixed",
-                            bottom: "0",
-                            left: "0",
-                            display: "flex",
-                            flexDirection: "column",
-                            padding: "25px",
-                            gap: "10px",
-                            width: "390px",
-                            maxWidth: "100vw",
-                            margin: "0",
-                            listStyle: "none",
-                            zIndex: "2147483647",
-                            outline: "none"}} />
+                <Toast2 
+                open={this.state.open}
+                onOpenChange={(open: boolean) => this.setState({open})}
+                type={this.props.toast.type}
+                message={this.props.toast.data} />
             </Toasts.Provider>
         );
     }