From 91dc17b6397a04cca8a23e0c885b8399772add78 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sun, 27 Jun 2021 14:14:19 +0430 Subject: [PATCH] reza added new navbar for mobile --- src/assets/icons/mobileAr.svg | 1 + src/assets/icons/mobileBasket.svg | 1 + src/assets/icons/mobileBlog.svg | 1 + src/assets/icons/mobileDanger.svg | 1 + src/assets/icons/mobileHome.svg | 1 + src/assets/icons/mobileLogout.svg | 1 + src/assets/icons/mobileMail.svg | 1 + src/assets/icons/mobileProfile.svg | 1 + src/assets/icons/qr-code.svg | 1 + src/assets/icons/tick.svg | 1 + .../Mobile/NavbarDrawer/NavbarDrawer.js | 210 +++++++++++++----- .../Mobile/NavbarDrawer/NavbarDrawer.scss | 31 ++- src/views/QRScan/Scanner/index.js | 11 +- src/views/QRScan/index.js | 80 ++++--- src/views/QRScan/index.scss | 30 +-- 15 files changed, 255 insertions(+), 117 deletions(-) create mode 100644 src/assets/icons/mobileAr.svg create mode 100644 src/assets/icons/mobileBasket.svg create mode 100644 src/assets/icons/mobileBlog.svg create mode 100644 src/assets/icons/mobileDanger.svg create mode 100644 src/assets/icons/mobileHome.svg create mode 100644 src/assets/icons/mobileLogout.svg create mode 100644 src/assets/icons/mobileMail.svg create mode 100644 src/assets/icons/mobileProfile.svg create mode 100644 src/assets/icons/qr-code.svg create mode 100644 src/assets/icons/tick.svg diff --git a/src/assets/icons/mobileAr.svg b/src/assets/icons/mobileAr.svg new file mode 100644 index 0000000..84c5a51 --- /dev/null +++ b/src/assets/icons/mobileAr.svg @@ -0,0 +1 @@ +AR \ No newline at end of file diff --git a/src/assets/icons/mobileBasket.svg b/src/assets/icons/mobileBasket.svg new file mode 100644 index 0000000..eafad9f --- /dev/null +++ b/src/assets/icons/mobileBasket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileBlog.svg b/src/assets/icons/mobileBlog.svg new file mode 100644 index 0000000..ac1ec9f --- /dev/null +++ b/src/assets/icons/mobileBlog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileDanger.svg b/src/assets/icons/mobileDanger.svg new file mode 100644 index 0000000..9cc5e0e --- /dev/null +++ b/src/assets/icons/mobileDanger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileHome.svg b/src/assets/icons/mobileHome.svg new file mode 100644 index 0000000..ded13a2 --- /dev/null +++ b/src/assets/icons/mobileHome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileLogout.svg b/src/assets/icons/mobileLogout.svg new file mode 100644 index 0000000..04d6d86 --- /dev/null +++ b/src/assets/icons/mobileLogout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileMail.svg b/src/assets/icons/mobileMail.svg new file mode 100644 index 0000000..2554836 --- /dev/null +++ b/src/assets/icons/mobileMail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileProfile.svg b/src/assets/icons/mobileProfile.svg new file mode 100644 index 0000000..2fddb7a --- /dev/null +++ b/src/assets/icons/mobileProfile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/qr-code.svg b/src/assets/icons/qr-code.svg new file mode 100644 index 0000000..b12c6c4 --- /dev/null +++ b/src/assets/icons/qr-code.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/tick.svg b/src/assets/icons/tick.svg new file mode 100644 index 0000000..57dd83c --- /dev/null +++ b/src/assets/icons/tick.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js index 111a49e..df9bcae 100644 --- a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js +++ b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js @@ -1,58 +1,83 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; -import { toast } from 'react-toastify'; -import Avatar from '@material-ui/core/Avatar'; +import React, { Component } from "react"; +import { Link } from "react-router-dom"; +import { toast } from "react-toastify"; +import Avatar from "@material-ui/core/Avatar"; +import CheckIcon from '@material-ui/icons/Check'; import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"; import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; -import HomeIcon from '@material-ui/icons/Home'; -import ExitToAppIcon from '@material-ui/icons/ExitToApp'; -import SettingsIcon from '@material-ui/icons/Settings'; -import UpdateIcon from '@material-ui/icons/Update'; -import ReportIcon from '@material-ui/icons/Report'; -import ShareIcon from '@material-ui/icons/Share'; // import { logout } from '../../../../Redux/actions/user'; // import { connect } from 'react-redux'; -import user1 from '../../../../../assets/images/user1.png'; -import user2 from '../../../../../assets/images/user2.png'; +import user1 from "../../../../../assets/images/user1.png"; +import user2 from "../../../../../assets/images/user2.png"; +import mobileHome from "../../../../../assets/icons/mobileHome.svg"; +import mobileAr from "../../../../../assets/icons/mobileAr.svg"; +import qrcode from "../../../../../assets/icons/qr-code.svg"; +import mobileBasket from "../../../../../assets/icons/mobileBasket.svg"; +import mobileBlog from "../../../../../assets/icons/mobileBlog.svg"; +import mobileMail from "../../../../../assets/icons/mobileMail.svg"; +import mobileProfile from "../../../../../assets/icons/mobileProfile.svg"; +import mobileDanger from "../../../../../assets/icons/mobileDanger.svg"; +import mobileLogout from "../../../../../assets/icons/mobileLogout.svg"; -import './NavbarDrawer.scss'; +import "./NavbarDrawer.scss"; class NavbarDrawer extends Component { - state = { dropdown: false, - } - - + }; + render() { return (
- { - this.props.users.map((item, i) => item.status === 1 ? ( + {this.props.users.map((item, i) => + item.status === 1 ? ( - +
-

{item.firstName + ' ' + item.lastName}

+

{item.firstName + " " + item.lastName}

{item.title}
 - ) : null) - } - { - this.state.dropdown ? - : - - - } + ) : null + )} + {this.state.dropdown ? ( +
this.setState({ dropdown: false })} + > + +
+ ) : ( +
this.setState({ dropdown: true })} + > + +
+ )}
-
+ {this.state.dropdown ? ( +
+ {this.props.users.map((item, i) => ( + + ))} +
+ ) : null} +
{this.props.links.map((item, key) => ( (item.link === '' ? toast.error(item.toast) : null))} + onClick={ + item.onClick || + (() => (item.link === "" ? toast.error(item.toast) : null)) + } >
{item.icon} @@ -74,49 +99,116 @@ class NavbarDrawer extends Component { export default NavbarDrawer; // export default connect((state) => ({ isLogin: state.user.isLogin }), { logout })(NavbarDrawer); - NavbarDrawer.defaultProps = { users: [ - { id: 0, firstName: 'محمدرضا', lastName: 'خراسانی', title: 'استاد علوم تجربی',image:user1 , status: 0}, - { id: 0, firstName: 'اکبر', lastName: 'خراسانی', title: 'استاد علوم تجربی',image:user2, status: 1}, + { + id: 0, + firstName: "محمدرضا", + lastName: "خراسانی", + title: "استاد علوم تجربی", + image: user1, + status: 0, + }, + { + id: 0, + firstName: "اکبر", + lastName: "خراسانی", + title: "استاد علوم تجربی", + image: user2, + status: 1, + }, ], links: [ { - name: 'صفحه اصلی', - link: '/', - icon: , - toast: '', + name: "صفحه اصلی", + link: "/", + icon: صفحه اصلی, + toast: "", }, { - name: 'تنظیمات', - link: '/', - icon: , - toast: '', + name: "واقعیت افزوده", + link: "/", + icon: واقعیت افزوده, + toast: "", }, { - name: 'به روز رسانی', - link: '/', - icon: , - toast: '', + name: "بارکد خوان", + link: "/", + icon: بارکد خوان, + toast: "", }, { - name: 'همرسانی', - link: '/', - icon: , - toast: '', + name: "فروشگاه", + link: "/", + icon: فروشگاه, + toast: "", }, { - name: 'گزارش ایراد', - link: '/', - icon: , - toast: '', + name: "بلاگ", + link: "/", + icon: بلاگ, + toast: "", }, { - name: 'خروج', - link: '/', - icon: , - toast: '', + name: "پیام رسان", + link: "/", + icon: بلاگ, + toast: "", + }, + { + name: "ویرایش مشخصات", + link: "/", + icon: ویرایش مشخصات, + toast: "", + }, + { + name: "گزارش ایراد", + link: "/", + icon: گزارش ایراد, + toast: "", + // onClick: this.props.logout, + }, + { + name: "خروج", + link: "/", + icon: خروج, + toast: "", // onClick: this.props.logout, }, ], -} \ No newline at end of file +}; + +const User = (props) => { + return ( +
+ +
+

+ {props.data.firstName + " " + props.data.lastName} +

+
+ {props.data.title} +
+
+ { + props.data.status === 1 ? +
: null + } +
+ ); +}; diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss index 575ddd1..aa3f20f 100644 --- a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss +++ b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss @@ -17,6 +17,7 @@ width: 100%; align-items: center; padding: 0px 8px; + position: relative; &--right { margin-right: 10px; & h1 { @@ -31,6 +32,11 @@ letter-spacing: -1px; } } + &--dropdown{ + position: absolute; + left: 10px; + top: 10px; + } & img { width: 100%; height: 100%; @@ -38,9 +44,32 @@ // bottom: 35px; } } + &__dropdown{ + width: calc(100vw * 0.8); + margin: 10px auto; + .navbar-drawer-user{ + padding: 10px 10px; + width : 100%; + position: relative; + &__right{ + margin-right: 10px; + & h1 { + margin-bottom: 0px; + font-size: calc(100vw / 22); + color: #4D4D4F; + letter-spacing: -1px; + } + & div { + color: #4D4D4F; + font-size: calc(100vw / 34); + letter-spacing: -1px; + } + } + } + } &__bottom { width: 100%; - margin-top: 50px !important; + margin-top: 10px !important; &--link { width: 100%; align-items: center; diff --git a/src/views/QRScan/Scanner/index.js b/src/views/QRScan/Scanner/index.js index 989d7bb..af938bb 100644 --- a/src/views/QRScan/Scanner/index.js +++ b/src/views/QRScan/Scanner/index.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import QrReader from 'react-qr-scanner' -export default class Scanner extends Component { +export default class Scanner extends Component { constructor(props){ super(props) this.state = { @@ -22,19 +22,20 @@ export default class Scanner extends Component { } render(){ const previewStyle = { - height: 300, - width: 300, + width: 320, + borderRadius: '10px' } return( -
+ <> -
+ ) } } \ No newline at end of file diff --git a/src/views/QRScan/index.js b/src/views/QRScan/index.js index 34ba0f7..1cf71d9 100644 --- a/src/views/QRScan/index.js +++ b/src/views/QRScan/index.js @@ -1,17 +1,18 @@ import React, { Component } from "react"; import Navbar from "../Home/Navbar/index"; import Footer from "../Home/Footer/index"; -import {Link} from 'react-router-dom'; -import Scanner from './Scanner/index'; -import LastQr from './LastQr/index'; +import { Link } from "react-router-dom"; +import Scanner from "./Scanner/index"; +import LastQr from "./LastQr/index"; +import ReplayIcon from "@material-ui/icons/Replay"; -import book1 from '../../assets/images/book1.png'; +import book1 from "../../assets/images/book1.png"; -import './index.scss'; +import "./index.scss"; export default class QRScan extends Component { - state= { + state = { value: null, - } + }; render() { const { data } = this.props; return ( @@ -32,35 +33,40 @@ export default class QRScan extends Component { بازگشت
-

اسکن بارکد

-

لطفا دوربین گوشی خود را روی کدی که در اختیار شما قرار گرفته قرار دهید تا اسکن دوربین انجام شود

+

اسکن بارکد

+

+ لطفا دوربین گوشی خود را روی کدی که در اختیار شما قرار گرفته + قرار دهید تا اسکن دوربین انجام شود +

-
- -
-
- -
-
- -
-
- -
-
- -
- +
+
+
+
+
+ {this.state.value !== null ? ( +
this.setState({ value: null })}> + +
+ ) : ( + + )}
-

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای

+ {this.state.value === null ? null : ( +

{this.state.value.text}

+ )} +

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با + استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله + در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد + نیاز و کاربردهای +

آخرین مشاهدات

- { - data.map((item, i) => ( - - )) - } + {data.map((item, i) => ( + + ))}
@@ -73,10 +79,10 @@ export default class QRScan extends Component { QRScan.defaultProps = { data: [ { - title : 'ریاضیات گسسته خیلی پیشرفته', - subTitle: 'پایه هفتم ابتدایی', + title: "ریاضیات گسسته خیلی پیشرفته", + subTitle: "پایه هفتم ابتدایی", page: 13, - image : book1 - } - ] -} \ No newline at end of file + image: book1, + }, + ], +}; diff --git a/src/views/QRScan/index.scss b/src/views/QRScan/index.scss index 9a556d9..1704b4b 100644 --- a/src/views/QRScan/index.scss +++ b/src/views/QRScan/index.scss @@ -39,29 +39,29 @@ } &__camera{ margin-top: 20px; - width: 300px; - height: 300px; + width: 320px; + height: 245px; border-radius: 10px; margin: 30px auto; position: relative; &--shape{ position: absolute; - background-color: rgba(80, 80, 80, 0.541); + background-color: rgba(0, 0, 0, 0.8); } &--shapeTop{ - width: calc(100% - 100px); - height: 50px; - left: 50px; + width: calc(100% - 60px); + height: 30px; + left: 30px; top: 0px; } &--shapeBottom{ - width: calc(100% - 100px); - height: 50px; - left: 50px; + width: calc(100% - 60px); + height: 30px; + left: 30px; bottom: 0px; } &--shapeLeft{ - width: 50px; + width: 30px; height: 100%; left: 0px; bottom: 0px; @@ -69,7 +69,7 @@ border-bottom-left-radius: 10px; } &--shapeRight{ - width: 50px; + width: 30px; height: 100%; right: 0px; bottom: 0px; @@ -78,10 +78,10 @@ } &--shapeCenter{ position: absolute; - width: calc(100% - 100px); - height: calc(100% - 100px); - right: 50px; - bottom: 50px; + width: calc(100% - 60px); + height: calc(100% - 60px); + right: 30px; + bottom: 30px; border: 3px solid red; } }