@messenger-box/platform-browser 0.0.1-alpha.42 → 0.0.1-alpha.420

package/src/components/InboxMessage/style.ts

@@ -0,0 +1,189 @@
+export const stylesheet = {
+    inboxStyles:{
+        display: 'flex',
+        width: '100%',
+        height: '75vh',
+        background: '#ffff',
+        '& .conversations': {
+            width: '100%',
+        },
+        '& .inbox-sidebar': {
+            borderRight: '1px solid #eaeaea',
+            width: '25%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            '& .add-conversations': {
+                padding: '20px',
+                width: '100%',
+                borderTop: '1px solid #eaeaea',
+                '& .conversation-btn': {
+                    width: '100%',
+                },
+            },
+        },
+        '& .inbox-sidebar-active': {
+            borderRight: '1px solid #eaeaea',
+            width: '20%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            '& .add-conversations': {
+                padding: '20px',
+                width: '100%',
+                borderTop: '1px solid #eaeaea',
+                '& .conversation-btn': {
+                    width: '100%',
+                },
+            },
+        },
+        '& .allmessage-header': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '10px',
+            '& h3': {
+                marginLeft: '15px',
+                marginTop: '15px',
+                color: 'black',
+                fontWeight: 'bold',
+                fontSize: '1em !important',
+            },
+            '& .ant-btn': {
+                padding: '4px',
+            },
+            '& .ant-btn:hover': {
+                background: '#eaeaea',
+            },
+        },
+        '& .header-section': {
+            marginBottom: '20px',
+            paddingBottom: '7px',
+            borderBottom: '1px solid #eaeaea',
+            height: '55px',
+        },
+        '& .ant-btn-circle': {
+            marginTop: '17px',
+            marginRight: '5px',
+            textAlign: 'center',
+            '& .ant-btn-circle:hover': {
+                backgroundColor: '#eaeaea',
+            },
+        },
+        '& .ant-popover-inner-content': {
+            padding: '0',
+        },
+        '& .border': {
+            height: '55px',
+            width: '115%',
+            borderBottom: '1px solid #eaeaea',
+        },
+        '& .msg-container': {
+            width: '80%',
+        },
+        '& .msg-container-active': {
+            width: '60%',
+            '& .border': {
+                width: '100%',
+            },
+        },
+        '& .inbox-details': {
+            width: '20%',
+            borderLeft: '1px solid #eaeaea',
+            transition: '500ms',
+        },
+        '&  .inbox-details-active': {
+            width: '0',
+            transition: '500ms',
+            opacity: '0',
+            border: 'none',
+            overflow: 'hidden',
+        },
+    },
+    modelStyle: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: 'calc(90vh - 120px)',
+        width: '100%',
+        overflowX: 'hidden',
+        padding: '10px 0 15px',
+        maxHeight: 'calc(90vh - 80px)',
+        overflow: 'auto',
+        '& .ant-comment-content-author-name': {
+            fontWeight: '600',
+            lineHeight: '18px',
+            color: '#3d3c40',
+            fontSize: '.9em',
+        },
+        '& .ant-comment-content-detail': {
+            fontWeight: '600',
+            lineHeight: '18px',
+            color: '#9a9a9c',
+            fontSize: '.9em',
+        },
+        '& .root_modal': {
+            display: 'flex',
+            flexDirection: 'column',
+            height: 'calc(90vh - 120px)',
+            width: '100%',
+            '& .root_first': {
+                margin: '5px 0 10px',
+                width: '100%',
+            },
+            '& .root_sec': {
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: '500',
+                height: '1px',
+                flex: '1 1 auto',
+                '& .nest_root_sec': {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '1px',
+                    flexGrow: '500',
+                    '& .nest_loop': {
+                        minHeight: '100%',
+                        overflow: 'auto',
+                    },
+                },
+            },
+        },
+        '& .search_box': {
+            display: 'flex',
+            '> input': {
+                borderRadius: '4px',
+                borderStyle: 'solid',
+                borderWidth: '1px',
+                width: '100%',
+                height: '36px',
+                borderColor: '#3d3c4033',
+                padding: '0px 15px',
+                fontSize: '14px',
+            },
+            '> button': {
+                maxWidth: '70px',
+                width: '100%',
+                marginLeft: '15px',
+                background: 'rgb(22, 109, 224)',
+                border: 'none',
+                color: 'white',
+            },
+            '& .temp': {
+                width: '100%',
+            },
+        },
+        '& .mid_line': {
+            '> p': {
+                display: 'flex',
+                justifyContent: 'space-between',
+                width: '100%',
+                padding: '10px 0px 0',
+                color: '#3d3c40',
+                opacity: '.6',
+                fontSize: '14px',
+            },
+        },
+    },
+}as any;

package/src/components/channel_view/DirectChannelView.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {PostViewPage} from "../post";
+import {IntlProvider} from "react-intl";
+import {useHistory} from "react-router-dom";
+import Messenger from "../../containers/Messenger";
+
+const DirectChannelView = () => {
+    const his: any = useHistory()
+    console.log('-=-=-=-=-=', his)
+    return (
+        <div className="main_wraper">
+            <IntlProvider locale="en">
+                {/*<h1>Direct Chall Working</h1>*/}
+                <div className='chat_head_mid'>
+                    <PostViewPage channel={his.location.state.channel}
+                                  currentUsrId={his.location.state.currentUser.id}/>
+                </div>
+                <Messenger channel={his.location.state.channel}
+                           currentUsrId={his.location.state.currentUser.id}/>
+            </IntlProvider>
+        </div>
+    )
+}
+
+export default DirectChannelView

package/src/components/channel_view/PublicChannelView.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {PostViewPage} from "../post";
+import {IntlProvider} from "react-intl";
+import {useHistory} from "react-router-dom";
+import Messenger from "../../containers/Messenger";
+
+const PublicChannelView = () => {
+    const his: any = useHistory()
+    return (
+        <div className="main_wraper">
+            <IntlProvider locale="en">
+                {/*<h1>Public Channel Working</h1>*/}
+                <div className='chat_head_mid'>
+                    <PostViewPage channel={his.location.state.channel}
+                                  currentUsrId={his.location.state.currentUser.id}/>
+                </div>
+                <Messenger channel={his.location.state.channel}
+                           currentUsrId={his.location.state.currentUser.id}/>
+            </IntlProvider>
+        </div>
+    )
+}
+
+export default PublicChannelView

package/src/components/dashboard/menu_header.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { styleSheet } from "../../style";
+import { css } from "@emotion/css"
+import { FiSearch } from "react-icons/fi";
+import { VscMenu } from "react-icons/vsc";
+
+export const MenuHeader = ({ clickedChannel, handleClass }) => {
+    return (
+        <div className={css(styleSheet.customStyle as any)}>
+            <div className="navbar_header">
+                <button type="button" className="navbar_toggle" onClick={handleClass}>
+                    <span className="sr-only"><span>Toggle sidebar</span></span>
+                    <span className="style--none icon icon__menu icon--sidebarHeaderTextColor">
+                        <VscMenu />
+                    </span>
+                </button>
+                <div className="navbar_brand">
+                    <div className="menu_wrapper ">
+                        {clickedChannel.id ?
+                            <a>
+                                <span className="heading">
+                                    <span className="status "></span>
+                                    <span>
+                                        {clickedChannel.type === 'DIRECT' ?
+                                            clickedChannel.displayName :
+                                            clickedChannel.title
+                                        }
+                                    </span>
+                                </span>
+                                <span className="fa fa-angle-down header-dropdown__icon"
+                                    title="Dropdown Icon"></span>
+                            </a> : ''
+                        }
+                    </div>
+                </div>
+                <button type="button" className="navbar-toggle navbar-right__icon navbar-search pull-right"
+                    aria-label="Search">
+                    <span className="icon icon__search" aria-hidden="true">
+                        <FiSearch />
+                    </span>
+                </button>
+                <button type="button" className="navbar-toggle navbar-right__icon menu-toggle pull-right"
+                    data-toggle="collapse" data-target="#sidebar-nav">
+                    <span><VscMenu /></span>
+                </button>
+            </div>
+        </div>
+    )
+}

package/src/components/dashboard/modals/direct_modal.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Modal } from "react-bootstrap";
+import { VscChromeClose } from "react-icons/vsc";
+import Select from "react-select";
+import { css } from "@emotion/css"
+import { styleSheet } from "../../../style";
+
+export const DirectModal = ({ showDirectChl, handleClose, selectedValues, handleSelect, options, handleGo }) => {
+
+    return (
+        <div className={css(styleSheet.customStyle as any)}>
+            <Modal show={showDirectChl} onHide={() => handleClose('directChannel')}>
+                <Modal.Header
+                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}>
+                    <Modal.Title>Direct Messages</Modal.Title>
+                    <VscChromeClose onClick={() => handleClose('directChannel')} fontSize='16px'
+                        style={{ marginLeft: 'auto', cursor: 'pointer' }} />
+                </Modal.Header>
+                <Modal.Body>
+                    <div className={css(styleSheet.modelStyle as any)}>
+                        <div className="root_modal">
+                            <div className="root_first">
+                                <div className="search_box">
+                                    <Select
+                                        className="temp"
+                                        value={selectedValues.value}
+                                        onChange={handleSelect}
+                                        components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
+                                        autoFocus={true}
+                                        options={options}
+                                        isMulti={true}
+                                        menuIsOpen={true}
+                                    />
+                                    <button onClick={handleGo}>Go</button>
+                                </div>
+                                <div className="mid_line">
+                                    <p>Use ↑↓ to browse, ↵ to select.<span> </span></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Modal.Body>
+            </Modal>
+        </div>
+    )
+}

package/src/components/dashboard/modals.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Button, Modal } from "react-bootstrap";
+import { VscChromeClose } from "react-icons/vsc";
+import Select from "react-select";
+import { css } from "@emotion/css";
+import { styleSheet } from "../../style";
+
+export const Modals = ({ directMoreModal, publicChlModal, handleClose, handleChange, handleCreate }) => {
+    return (
+        <div className={css(styleSheet.customStyle as any)}>
+            <Modal show={directMoreModal.showDirectMore} onHide={() => handleClose('publicMore')}>
+                <Modal.Header
+                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}>
+                    <Modal.Title>Direct Messages</Modal.Title>
+                    <div className={css(styleSheet.directMoreStyle as any)}>
+                        <button onClick={() => directMoreModal.handleShow('publicChannel', 'Public Channel')}>Create Channel
+                        </button>
+                        <VscChromeClose onClick={() => handleClose('publicMore')} fontSize='16px'
+                            style={{ marginLeft: 'auto', cursor: 'pointer' }} />
+                    </div>
+                </Modal.Header>
+                <Modal.Body className={css(styleSheet.directMoreStyle as any)}>
+                    <div className='public_more_body'>
+                        <input placeholder='Search Channels' />
+                        {directMoreModal.modalPublicChannels.length > 0 ?
+                            <div className='loop_style'>
+                                {directMoreModal.modalPublicChannels.map((chl, index) => {
+                                    return (
+                                        <div className='loop_div'>
+                                            <h5 onClick={() => directMoreModal.handleJoin(chl.id)}>{chl.title}</h5>
+                                            <button onClick={() => directMoreModal.handleJoin(chl.id)}>join</button>
+                                        </div>
+                                    )
+                                })}
+                            </div>
+                            :
+                            <div className="no_channel_message">
+                                <p className="primary_message">
+                                    <span>No more channels to join</span>
+                                </p>
+                                <p className="secondary_message">
+                                    <span>Click 'Create New Channel' to make a new one</span>
+                                </p>
+                            </div>
+                        }
+                    </div>
+                </Modal.Body>
+            </Modal>
+            <Modal show={publicChlModal.show} onHide={() => handleClose("publicChannel")}>
+                <Modal.Header
+                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}>
+                    <Modal.Title>Create Public Channel</Modal.Title>
+                    <VscChromeClose onClick={() => handleClose('publicChannel')} fontSize='16px'
+                        style={{ marginLeft: 'auto', cursor: 'pointer' }} />
+                </Modal.Header>
+                <Modal.Body>
+                    <div className="modal_div" style={{ textAlign: 'center' }}>
+                        <label style={{
+                            width: '20%',
+                            fontSize: '15px',
+                            fontWeight: 500,
+                            marginRight: '5px'
+                        }}>Channel Name</label>
+                        <input type="text" name='name' style={{
+                            width: '62%',
+                            height: '35px',
+                            border: '1px solid gray'
+                        }} onChange={e => handleChange(e)} />
+                        <label style={{
+                            width: '20%',
+                            fontSize: '15px',
+                            fontWeight: 500,
+                            marginRight: '5px'
+                        }}>Channel Description</label>
+                        <input type="text" name='description' style={{
+                            width: '62%',
+                            height: '35px',
+                            border: '1px solid gray'
+                        }} onChange={e => handleChange(e)} />
+                    </div>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button onClick={() => handleClose("publicChannel")}>
+                        Close
+                    </Button>
+                    <Button onClick={handleCreate} style={{ backgroundColor: '#2b5ebf', color: 'white' }}>
+                        Create Channel
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        </div>
+    )
+}

package/src/components/messenger/avatar/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-
-import { useFela } from 'react-fela';
+import { css } from '@emotion/css';
 import { styleSheet } from './style';
 
 type IAvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
@@ -15,12 +14,11 @@ type IProps = {
 };
 
 export const Avatar = ({ url, size = 'md', text, username, time }: IProps) => {
-    const { css } = useFela();
     const classes = classNames(`Avatar Avatar-${size}`);
 
     if (text) {
         return (
-            <div className={css(styleSheet.avatarStyles as any)}>
+            <div className={css(styleSheet.avatarStyles)}>
                 <div className={classes + ` Avatar-plain`} data-content={text} />
             </div>
         );

package/src/components/messenger/avatar/style.ts

@@ -1,6 +1,6 @@
 export const styleSheet = {
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    avatarStyles: () => ({
+    avatarStyles: {
         display: 'flex',
         alignItems: 'center',
         '& .Avatar': {
@@ -82,5 +82,5 @@ export const styleSheet = {
             marginTop: '8px',
             marginLeft: '10px',
         },
-    }),
-};
+    },
+} as any;