From 3b705c1384dae19bc59d0b091216fc92f3ca9f63 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sat, 19 Mar 2022 16:35:48 +0330 Subject: [PATCH] reza changed drawer icons --- src/components/Dialog/index.js | 24 +- src/components/Drawer/AR-dark.svg | 8 + src/components/Drawer/AR.svg | 8 + src/components/Drawer/activation-dark.svg | 6 + src/components/Drawer/activation.svg | 6 + src/components/Drawer/contact-dark.svg | 10 + src/components/Drawer/contact.svg | 10 + src/components/Drawer/faq-dark.svg | 7 + src/components/Drawer/faq.svg | 7 + src/components/Drawer/home-dark.svg | 7 + src/components/Drawer/home.svg | 7 + src/components/Drawer/index.js | 318 ++++++++++-------- src/components/Drawer/logout-dark.svg | 1 + .../Drawer/{mobile-logout.svg => logout.svg} | 0 src/components/Drawer/mobile-ar.svg | 1 - src/components/Drawer/mobile-basket-dark.svg | 1 + src/components/Drawer/mobile-blog.svg | 1 - src/components/Drawer/mobile-danger-dark.svg | 1 + src/components/Drawer/mobile-home.svg | 1 - src/components/Drawer/mobile-mail.svg | 1 - src/components/Drawer/mobile-profile.svg | 1 - src/components/Drawer/orders-dark.svg | 11 + src/components/Drawer/orders.svg | 11 + 23 files changed, 298 insertions(+), 150 deletions(-) create mode 100644 src/components/Drawer/AR-dark.svg create mode 100644 src/components/Drawer/AR.svg create mode 100644 src/components/Drawer/activation-dark.svg create mode 100644 src/components/Drawer/activation.svg create mode 100644 src/components/Drawer/contact-dark.svg create mode 100644 src/components/Drawer/contact.svg create mode 100644 src/components/Drawer/faq-dark.svg create mode 100644 src/components/Drawer/faq.svg create mode 100644 src/components/Drawer/home-dark.svg create mode 100644 src/components/Drawer/home.svg create mode 100644 src/components/Drawer/logout-dark.svg rename src/components/Drawer/{mobile-logout.svg => logout.svg} (100%) delete mode 100644 src/components/Drawer/mobile-ar.svg create mode 100644 src/components/Drawer/mobile-basket-dark.svg delete mode 100644 src/components/Drawer/mobile-blog.svg create mode 100644 src/components/Drawer/mobile-danger-dark.svg delete mode 100644 src/components/Drawer/mobile-home.svg delete mode 100644 src/components/Drawer/mobile-mail.svg delete mode 100644 src/components/Drawer/mobile-profile.svg create mode 100644 src/components/Drawer/orders-dark.svg create mode 100644 src/components/Drawer/orders.svg diff --git a/src/components/Dialog/index.js b/src/components/Dialog/index.js index aa3e99d..fde008a 100644 --- a/src/components/Dialog/index.js +++ b/src/components/Dialog/index.js @@ -3,26 +3,40 @@ import { connect } from "react-redux"; import { dialog } from "../../redux/actions"; export const Dialog = ({ dialog, setDialog }) => { + const [boxAnimation, setBoxAnimation] = React.useState(false); const { text, type, accept } = dialog; + + React.useEffect(() => { + setTimeout(() => { + setBoxAnimation(true); + }, 200); + + return () => { + setBoxAnimation(false); + }; + }, []); + const exit = (e) => { setDialog({ ...dialog, open: !dialog.open }); e.stopPropagation(); - } + }; const acceptFunc = () => { setDialog({ ...dialog, open: !dialog.open }); accept(); - } + }; return (
exit(e)} >
e.stopPropagation()} + onClick={(e) => e.stopPropagation()} > {/* {type === "confirm" && (
exit
diff --git a/src/components/Drawer/AR-dark.svg b/src/components/Drawer/AR-dark.svg new file mode 100644 index 0000000..7668878 --- /dev/null +++ b/src/components/Drawer/AR-dark.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Drawer/AR.svg b/src/components/Drawer/AR.svg new file mode 100644 index 0000000..ad01fdd --- /dev/null +++ b/src/components/Drawer/AR.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Drawer/activation-dark.svg b/src/components/Drawer/activation-dark.svg new file mode 100644 index 0000000..65cf9fa --- /dev/null +++ b/src/components/Drawer/activation-dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Drawer/activation.svg b/src/components/Drawer/activation.svg new file mode 100644 index 0000000..b411bf2 --- /dev/null +++ b/src/components/Drawer/activation.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Drawer/contact-dark.svg b/src/components/Drawer/contact-dark.svg new file mode 100644 index 0000000..030dd7c --- /dev/null +++ b/src/components/Drawer/contact-dark.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Drawer/contact.svg b/src/components/Drawer/contact.svg new file mode 100644 index 0000000..8a1aa33 --- /dev/null +++ b/src/components/Drawer/contact.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Drawer/faq-dark.svg b/src/components/Drawer/faq-dark.svg new file mode 100644 index 0000000..8d7e17d --- /dev/null +++ b/src/components/Drawer/faq-dark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Drawer/faq.svg b/src/components/Drawer/faq.svg new file mode 100644 index 0000000..e918e6e --- /dev/null +++ b/src/components/Drawer/faq.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Drawer/home-dark.svg b/src/components/Drawer/home-dark.svg new file mode 100644 index 0000000..993cb32 --- /dev/null +++ b/src/components/Drawer/home-dark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Drawer/home.svg b/src/components/Drawer/home.svg new file mode 100644 index 0000000..e671e48 --- /dev/null +++ b/src/components/Drawer/home.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Drawer/index.js b/src/components/Drawer/index.js index eb6d373..4bee42a 100644 --- a/src/components/Drawer/index.js +++ b/src/components/Drawer/index.js @@ -1,112 +1,47 @@ import React, { useState } from "react"; import { connect } from "react-redux"; -import { publicApi } from "../../redux/actions"; +import { publicApi, dialog, user } from "../../redux/actions"; import { Link } from "react-router-dom"; import Drawer from "react-modern-drawer"; -import homeIcon from "./mobile-home.svg"; -import logoutIcon from "./mobile-logout.svg"; -import blogIcon from "./mobile-blog.svg"; +//assets +import homeIcon from "./home.svg"; +import homeDarkIcon from "./home-dark.svg"; +import logoutIcon from "./logout.svg"; +import logoutDarkIcon from "./logout-dark.svg"; import dangerIcon from "./mobile-danger.svg"; +import dangerDarkIcon from "./mobile-danger-dark.svg"; +import activationIcon from "./activation.svg"; +import activationDarkIcon from "./activation-dark.svg"; +import contactIcon from "./contact.svg"; +import contactDarkIcon from "./contact-dark.svg"; +import ordersIcon from "./orders.svg"; +import ordersDarkIcon from "./orders-dark.svg"; +import arIcon from "./AR.svg"; +import arDarkIcon from "./AR-dark.svg"; import cartIcon from "./mobile-basket.svg"; -import profileIcon from "./mobile-profile.svg"; -import Avatar from "../../components/Avatar"; +import cartDarkIcon from "./mobile-basket-dark.svg" +import faqIcon from "./faq.svg"; +import faqDarkIcon from "./faq-dark.svg"; + import arrowLeftVideo from "../../assets/icons/dropdown-white.svg"; import sunIcon from "./sun.svg"; import moonIcon from "./moon.svg"; +//components +import Avatar from "../../components/Avatar"; + const MyDrawer = ({ setDrawerOpen, drawerOpen, - publicLink, - privateLink, isDark, user, changeDarkMode, + setDialog, + logout, }) => { const [addUserDropdown, setAddUserDropdown] = useState(false); - - return ( - setDrawerOpen(() => !drawerOpen)} - size={"80%"} - direction="right" - > -
e.stopPropagation()} - > -
-
- - changeDarkMode(!isDark)} - /> -
-
-
- - {user && user?.firstName + " " + user?.lastName} - - - {user?.cellphone} - -
- setAddUserDropdown(() => !addUserDropdown)} - /> -
-
-
    -
      - {(!user ? publicLink : privateLink).map((item, key) => ( - setDrawerOpen(false)}> -
      - {item.icon} -
      - {item.name} -
      - {item.message &&
      {item.message}
      } -
      - - ))} -
    -
    -     - ); -}; - -const mapStateToProps = (state) => ({ - isDark: state.publicApi.isDark, - user: state.user.status, -}); - -const mapDispatchToProps = { - changeDarkMode: publicApi.setIsDark, -}; - -export default connect(mapStateToProps, mapDispatchToProps)(MyDrawer); - -MyDrawer.defaultProps = { - publicLink: [ + const publicLink = [ { name: "صفحه اصلی", link: "/", @@ -133,28 +68,6 @@ MyDrawer.defaultProps = { toast: "", message: "", }, - { - name: "فروشگاه", - link: "/products", - icon: ( - کتاب‌های من - ), - toast: "", - message: "", - }, - { - name: "بلاگ", - link: "/blogs", - icon: ( - بلاگ - ), - toast: "", - message: "", - }, { name: "پشتیبانی", link: "/contact-us", @@ -168,94 +81,219 @@ MyDrawer.defaultProps = { toast: "", message: "", }, - ], - privateLink: [ + ]; + const privateLink = [ { name: "صفحه اصلی", link: "/", icon: ( صفحه اصلی ), toast: "", message: "", + onClick: () => { + setDrawerOpen(false); + }, }, { - name: "پروفایل", - link: "/profile", + name: "سبد خرید", + link: "/cart", icon: ( پروفایل ), toast: "", message: "", + onClick: () => { + setDrawerOpen(false); + }, }, { - name: "فروشگاه", - link: "/products", + name: "فعال سازی کتاب", + link: "/activation", + icon: ( + فعال سازی کتاب + ), + toast: "", + message: "", + onClick: () => { + setDrawerOpen(false); + }, + }, + { + name: "واقعیت افزوده", + link: "/ar", icon: ( کتاب‌های من ), toast: "", message: "", + onClick: () => { + setDrawerOpen(false); + }, }, { - name: "سبد خرید", - link: "/cart", + name: "سفارشات", + link: "/orders", icon: ( سبد خرید ), toast: "", message: "", + onClick: () => { + setDrawerOpen(false); + }, }, { - name: "بلاگ", - link: "/blogs", + name: "سوالات متداول", + link: "/faq", icon: ( - بلاگ + سوالات متداول ), toast: "", message: "", + onClick: () => { + setDrawerOpen(false); + }, }, { name: "پشتیبانی", - link: "/support", + link: "/contact", icon: ( پشتیبانی ), toast: "", message: "", + onClick: () => { + setDrawerOpen(false); + }, }, { name: "خروج از حساب کاربری", link: "/", icon: ( خروج از حساب کاربری ), toast: "", message: "", + onClick: () => { + setDialog({ + open: true, + type: "confirm", + accept: () => { + logout(); + }, + text: "قصد خروج از حساب کاربری رو داری؟", + }); + setDrawerOpen(false); + }, }, - ], + ]; + + return ( + setDrawerOpen(() => !drawerOpen)} + size={"80%"} + direction="right" + > +
    e.stopPropagation()} + > +
    +
    + + changeDarkMode(!isDark)} + /> +
    +
    +
    + + {user && user?.firstName + " " + user?.lastName} + + + {user?.cellphone} + +
    + setAddUserDropdown(() => !addUserDropdown)} + /> +
    +
    +
      +
        + {(!user ? publicLink : privateLink).map((item, key) => ( + item.onClick()}> +
        + {item.icon} +
        + {item.name} +
        + {item.message &&
        {item.message}
        } +
        + + ))} +
      +
      +       + ); +}; + +const mapStateToProps = (state) => ({ + isDark: state.publicApi.isDark, + user: state.user.status, +}); + +const mapDispatchToProps = { + changeDarkMode: publicApi.setIsDark, + setDialog: dialog.set, + logout: user.logout, }; + +export default connect(mapStateToProps, mapDispatchToProps)(MyDrawer); diff --git a/src/components/Drawer/logout-dark.svg b/src/components/Drawer/logout-dark.svg new file mode 100644 index 0000000..a7e0758 --- /dev/null +++ b/src/components/Drawer/logout-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Drawer/mobile-logout.svg b/src/components/Drawer/logout.svg similarity index 100% rename from src/components/Drawer/mobile-logout.svg rename to src/components/Drawer/logout.svg diff --git a/src/components/Drawer/mobile-ar.svg b/src/components/Drawer/mobile-ar.svg deleted file mode 100644 index 84c5a51..0000000 --- a/src/components/Drawer/mobile-ar.svg +++ /dev/null @@ -1 +0,0 @@ -AR \ No newline at end of file diff --git a/src/components/Drawer/mobile-basket-dark.svg b/src/components/Drawer/mobile-basket-dark.svg new file mode 100644 index 0000000..1968e06 --- /dev/null +++ b/src/components/Drawer/mobile-basket-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Drawer/mobile-blog.svg b/src/components/Drawer/mobile-blog.svg deleted file mode 100644 index ac1ec9f..0000000 --- a/src/components/Drawer/mobile-blog.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Drawer/mobile-danger-dark.svg b/src/components/Drawer/mobile-danger-dark.svg new file mode 100644 index 0000000..e60b26e --- /dev/null +++ b/src/components/Drawer/mobile-danger-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Drawer/mobile-home.svg b/src/components/Drawer/mobile-home.svg deleted file mode 100644 index ded13a2..0000000 --- a/src/components/Drawer/mobile-home.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Drawer/mobile-mail.svg b/src/components/Drawer/mobile-mail.svg deleted file mode 100644 index 2554836..0000000 --- a/src/components/Drawer/mobile-mail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Drawer/mobile-profile.svg b/src/components/Drawer/mobile-profile.svg deleted file mode 100644 index 2fddb7a..0000000 --- a/src/components/Drawer/mobile-profile.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Drawer/orders-dark.svg b/src/components/Drawer/orders-dark.svg new file mode 100644 index 0000000..f2b0817 --- /dev/null +++ b/src/components/Drawer/orders-dark.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Drawer/orders.svg b/src/components/Drawer/orders.svg new file mode 100644 index 0000000..35c2643 --- /dev/null +++ b/src/components/Drawer/orders.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +