From 72ff8b2ba84d6da5a2d3aa6690d2a35e2f564d69 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sat, 8 May 2021 14:19:13 +0430 Subject: [PATCH] reza added Files view --- src/App.css | 4 + src/Router.js | 2 +- src/assets/icons/pencil.svg | 3 + src/assets/images/Clip.jpg | Bin 0 -> 14981 bytes src/views/ChatRoom/Body/Body.js | 8 +- src/views/ChatRoom/Body/Body.scss | 20 +---- src/views/ChatRoom/ChatInfo/ChatInfo.js | 30 +++++++ src/views/ChatRoom/ChatInfo/ChatInfo.scss | 79 ++++++++++++++++++ .../ChatRoom/ChatInfo/FileTabs/FileTabs.js | 75 +++++++++++++++++ .../ChatRoom/ChatInfo/FileTabs/FileTabs.scss | 30 +++++++ src/views/ChatRoom/ChatRoom.js | 32 ++++++- src/views/ChatRoom/ChatRoom.scss | 29 ++++++- src/views/ChatRoom/Header/Header.js | 3 +- src/views/ChatRoom/Header/Header.scss | 6 +- src/views/Home/Body/Body.scss | 2 +- src/views/Home/Body/ChatList/ChatList.js | 4 + src/views/Home/Body/ChatList/ChatList.scss | 18 +++- src/views/Home/Home.scss | 3 +- src/views/Home/TabBar/TabBar.scss | 2 +- 19 files changed, 313 insertions(+), 37 deletions(-) create mode 100644 src/assets/icons/pencil.svg create mode 100644 src/assets/images/Clip.jpg create mode 100644 src/views/ChatRoom/ChatInfo/ChatInfo.js create mode 100644 src/views/ChatRoom/ChatInfo/ChatInfo.scss create mode 100644 src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js create mode 100644 src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss diff --git a/src/App.css b/src/App.css index 56f3422..d813573 100644 --- a/src/App.css +++ b/src/App.css @@ -4,6 +4,10 @@ text-align: center; } +#root{ + +} + .App-logo { height: 40vmin; pointer-events: none; diff --git a/src/Router.js b/src/Router.js index f036593..71a1b96 100644 --- a/src/Router.js +++ b/src/Router.js @@ -11,7 +11,7 @@ import Auth from "./views/Auth/Auth"; export default class AppRouter extends Component { render() { let home; - if(localStorage.getItem("access_token")){ + if(!localStorage.getItem("access_token")){ home = diff --git a/src/assets/icons/pencil.svg b/src/assets/icons/pencil.svg new file mode 100644 index 0000000..6605772 --- /dev/null +++ b/src/assets/icons/pencil.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/Clip.jpg b/src/assets/images/Clip.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bdbefc50b39ab0075b666ad04c7a4fce264b44c3 GIT binary patch literal 14981 zcmeIuJqiLb5C+hRYq5xh0j&iuVj(Q(J-mlE@hDn&2!9%H60=q=mX^LRRR(4em}^+b8Zrrv%_KjgOwwY!`nx9xGfZ_+A8IW;+zODx{2#%CtAJfGFwhv}>R zw}$Df`MY|LX_M+JO^$V(4#OTd0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBly nK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfWZF -
-

محسن محمدی

-

2 دقیقه پیش آنلاین بوده

-
-
+
+
{ this.state.data.messages.map(item => this.state.file === null ? ( diff --git a/src/views/ChatRoom/Body/Body.scss b/src/views/ChatRoom/Body/Body.scss index 3402d86..a2a8426 100644 --- a/src/views/ChatRoom/Body/Body.scss +++ b/src/views/ChatRoom/Body/Body.scss @@ -3,23 +3,9 @@ background-color: rgb(210, 196, 214); justify-content:flex-start; flex : 1; - max-height: calc(100vh - 82px); - &__header{ - align-items: center; - height: 50px; - h1{ - font-size: 24px; - margin: 0; - letter-spacing:-1px; - font-family: IRANSansNumeralBold; - } - - p{ - font-size: 16px; - color: rgb(101, 2, 182); - letter-spacing:-1px; - } - } + max-height: calc(100vh - 160px); + border-top-left-radius: 40px; + border-top-right-radius: 40px; &__content{ padding : 0px 20px 40px; height : calc(100vh - 268px); diff --git a/src/views/ChatRoom/ChatInfo/ChatInfo.js b/src/views/ChatRoom/ChatInfo/ChatInfo.js new file mode 100644 index 0000000..6435def --- /dev/null +++ b/src/views/ChatRoom/ChatInfo/ChatInfo.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react'; +import ChatIcon from '@material-ui/icons/Chat'; + +import FileTabs from './FileTabs/FileTabs'; + +import './ChatInfo.scss'; +export default class ChatInfo extends Component { + render(){ + return ( +
+
+ {/* */} +
+ +
+
+
+
+

محسن محمدی

+

2 دقیقه پیش آنلاین بوده

+
+
+

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

+
+ +
+
+ ); + } +} diff --git a/src/views/ChatRoom/ChatInfo/ChatInfo.scss b/src/views/ChatRoom/ChatInfo/ChatInfo.scss new file mode 100644 index 0000000..4552dd8 --- /dev/null +++ b/src/views/ChatRoom/ChatInfo/ChatInfo.scss @@ -0,0 +1,79 @@ +@media screen and (max-width: 450px){ + .chat-info{ + width: 100%; + min-height: 100vh; + position: relative; + direction : rtl; + &__image{ + width: 100%; + background-color: rgb(82, 82, 82); + justify-content: center; + align-items: center; + height: 290px; + position: relative; + &--float{ + position: absolute; + width:65px; + height : 65px; + bottom: +8px; + right : 40px; + background-color: rgb(139, 73, 186); + background: linear-gradient(180deg, rgb(186, 73, 182) 0%, rgb(76, 74, 189) 92%); + padding : 5px; + border-radius: 100px; + z-index: 200; + justify-content:center; + align-items:center; + box-shadow: 0px 0px 50px rgba(36, 0, 72, 0.8); + } + } + &__box{ + width: 100%; + z-index: 100; + height : calc(100% - 250px); + background-color: rgb(200, 183, 232); + border-top-left-radius: 40px; + border-top-right-radius: 40px; + direction: rtl; + padding : 20px 0px 0px 0px; + position: sticky; + transform: translateY(-40px); + top : -150px; + overflow-y: scroll; + &::-webkit-scrollbar{ + display: none; + } + &--status{ + width: 100%; + align-items: flex-end; + padding : 0px 30px; + h1{ + font-size: 19px; + margin: 0; + letter-spacing:-1px; + font-family: IRANSansNumeralLight; + color: black; + font-weight: 100; + } + p{ + font-size: 14px; + color: rgb(104, 42, 135); + margin : 0px; + } + } + &--description{ + width: 100%; + justify-content:center; + align-items: center; + margin-top: 20px; + & p{ + width: 100%; + max-width: 310px; + text-align: justify; + font-size: 12px; + } + } + + } + } +} \ No newline at end of file diff --git a/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js b/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js new file mode 100644 index 0000000..feee43a --- /dev/null +++ b/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js @@ -0,0 +1,75 @@ +import React, { Component } from 'react'; + +import './FileTabs.scss'; +export default class FileTabs extends Component { + constructor(props) { + super(props); + this.state = { + type : 'media', + + } + } + + setType = (val) => { + this.setState({ + type : val, + }) + } + render(){ + return( +
+
+
  • this.setType('media')}>Media
    • +
  • this.setType('file')}>Files
    • +
  • this.setType('link')}>Links
    • +
  • this.setType('music')}>Music
    • +
  • this.setType('voice')}>Voice
    • +
    + { + this.state.type === 'media' ? +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    : null + } +
    + ); + } +} \ No newline at end of file diff --git a/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss b/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss new file mode 100644 index 0000000..ba91f90 --- /dev/null +++ b/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss @@ -0,0 +1,30 @@ +@media screen and (max-width: 450px){ + .file-tabs{ + width: 100%; + position: relative; + direction : rtl; + &__types{ + width: 100%; + justify-content: space-between; + align-items:center; + padding : 3px calc((100vw - 310px)/2) 3px calc((100vw - 310px)/2); + direction : ltr; + border-top : 8px solid rgb(13, 84, 150); + & li{ + font-size: 16px; + list-style : none; + font-weight: 600; + } + } + &__media{ + width: 100%; + &--item{ + width : calc(100% / 3); + height: 150px; + border : 2px solid rgb(200, 183, 232); + background-color : red; + } + } + + } +} \ No newline at end of file diff --git a/src/views/ChatRoom/ChatRoom.js b/src/views/ChatRoom/ChatRoom.js index 04cebb3..6b3d3e1 100644 --- a/src/views/ChatRoom/ChatRoom.js +++ b/src/views/ChatRoom/ChatRoom.js @@ -2,14 +2,40 @@ import React, { Component } from 'react'; import Header from './Header/Header'; import Body from './Body/Body'; +import ChatInfo from './ChatInfo/ChatInfo'; import './ChatRoom.scss'; export default class ChatRoom extends Component { + constructor(props) { + super(props); + this.state = { + page: 'chatroom', + } + } + + setPage = (val) => { + this.setState({ + page : val, + }) + } render(){ return ( -
    -
    - +
    +
    + { + this.state.page === 'chatroom' ? + <> +
    this.setPage('info')}> +

    محسن محمدی

    +

    2 دقیقه پیش آنلاین بوده

    +
    + + : + <> + + + } +
    ); } diff --git a/src/views/ChatRoom/ChatRoom.scss b/src/views/ChatRoom/ChatRoom.scss index 677d803..65824d3 100644 --- a/src/views/ChatRoom/ChatRoom.scss +++ b/src/views/ChatRoom/ChatRoom.scss @@ -1,9 +1,34 @@ @media screen and (max-width: 450px){ .chat-room{ flex : 1; - background-color: rgb(15, 93, 209); + background: rgb(139, 73, 186); + background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%); border-radius: 40px; - max-height: 100vh; + height: 100vh; overflow-y: hidden; + width: 100vw; + box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8); + &__status{ + border-top-left-radius: 40px; + border-top-right-radius: 40px; + height: 70px; + background : rgb(106, 103, 250); + position: relative; + align-items: center; + justify-content:center; + h1{ + font-size: 21px; + margin: 0; + letter-spacing:-1px; + font-family: IRANSansNumeralLight; + color: white; + font-weight: 100; + } + p{ + font-size: 14px; + color: white; + margin : 0px; + } + } } } \ No newline at end of file diff --git a/src/views/ChatRoom/Header/Header.js b/src/views/ChatRoom/Header/Header.js index 5f68498..b058e6e 100644 --- a/src/views/ChatRoom/Header/Header.js +++ b/src/views/ChatRoom/Header/Header.js @@ -8,9 +8,10 @@ export default class Header extends Component { window.history.back(); } render(){ + const {page, setPage} = this.props; return (
    -
    this.back()}> +
    page === 'chatroom' ? this.back() : setPage('chatroom')}>
    diff --git a/src/views/ChatRoom/Header/Header.scss b/src/views/ChatRoom/Header/Header.scss index 1a05070..61bda8a 100644 --- a/src/views/ChatRoom/Header/Header.scss +++ b/src/views/ChatRoom/Header/Header.scss @@ -2,10 +2,10 @@ .header{ border-top-right-radius: 40px; border-top-left-radius: 40px; - height: 70px; + height: 90px; width: 100%; justify-content : space-between; - align-items: flex-end; - padding : 0px 15px; + align-items: flex-start; + padding : 30px 22px 0px; } } \ No newline at end of file diff --git a/src/views/Home/Body/Body.scss b/src/views/Home/Body/Body.scss index a170587..b9f79e2 100644 --- a/src/views/Home/Body/Body.scss +++ b/src/views/Home/Body/Body.scss @@ -1,6 +1,6 @@ @media screen and (max-width: 450px){ .body{ - background-color: rgb(240, 240, 240); + background-color: rgb(255, 255, 255); flex : 1; border-radius: 40px; z-index: 10; diff --git a/src/views/Home/Body/ChatList/ChatList.js b/src/views/Home/Body/ChatList/ChatList.js index ce2c4ac..9cd5927 100644 --- a/src/views/Home/Body/ChatList/ChatList.js +++ b/src/views/Home/Body/ChatList/ChatList.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import Chat from './Chat/Chat'; import photo from '../../../../assets/images/reza.png'; +import pencil from '../../../../assets/icons/pencil.svg'; import './ChatList.scss'; export default class ChatList extends Component { @@ -80,6 +81,9 @@ export default class ChatList extends Component { )) } +
    + +
    ); } diff --git a/src/views/Home/Body/ChatList/ChatList.scss b/src/views/Home/Body/ChatList/ChatList.scss index de3f0f4..081ceef 100644 --- a/src/views/Home/Body/ChatList/ChatList.scss +++ b/src/views/Home/Body/ChatList/ChatList.scss @@ -4,6 +4,22 @@ border-radius: 40px; padding: 40px 14px; position: relative; - + &__float{ + position: fixed; + height: 70px; + width: 70px; + bottom: 20px; + left: 20px; + justify-content: center; + align-items: center; + background-color: rgb(77, 21, 220); + border-radius: 100px; + border :2px solid white; + box-shadow: 0px 0px 20px rgba(0,0,0,0.8); + & img{ + width: 40px; + height : 40px; + } + } } } \ No newline at end of file diff --git a/src/views/Home/Home.scss b/src/views/Home/Home.scss index 4def151..eef6ef7 100644 --- a/src/views/Home/Home.scss +++ b/src/views/Home/Home.scss @@ -1,7 +1,8 @@ @media screen and (max-width: 450px){ .home{ flex : 1; - background-color: rgb(15, 93, 209); + background: rgb(139, 73, 186); + background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%); border-radius: 40px; height: 100vh; } diff --git a/src/views/Home/TabBar/TabBar.scss b/src/views/Home/TabBar/TabBar.scss index dadd698..882d4c6 100644 --- a/src/views/Home/TabBar/TabBar.scss +++ b/src/views/Home/TabBar/TabBar.scss @@ -16,7 +16,7 @@ top : 58px; left: 0px; z-index: 0px; - background-color: rgb(240, 240, 240) + background-color: rgb(255, 255, 255) } } }