Improve contacts
This commit is contained in:
CHIEFSOFT\ameye
@@ -95,7 +95,9 @@ export default function Contacts(){
|
|||||||
<div className="row justify-content-center">
|
<div className="row justify-content-center">
|
||||||
<div className="d-none col-12">
|
<div className="d-none col-12">
|
||||||
<div className="text-center mail-sidebar-title px-4">
|
<div className="text-center mail-sidebar-title px-4">
|
||||||
<a href="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
<a href="#"
|
||||||
|
className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i
|
||||||
|
className="fa fa-plus pl-2"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
@@ -103,36 +105,42 @@ export default function Contacts(){
|
|||||||
<ul className="pl-0">
|
<ul className="pl-0">
|
||||||
<li className="py-2">
|
<li className="py-2">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<span className="nav align-items-center">
|
<span
|
||||||
|
className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span>Inbox</span>
|
<span>Inbox</span>
|
||||||
</span>
|
</span>
|
||||||
<span className="nav-item ml-auto text-right">
|
<span
|
||||||
<span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
|
className="nav-item ml-auto text-right">
|
||||||
</span>
|
<span
|
||||||
</span>
|
className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="py-2">
|
|
||||||
<a href="#">
|
|
||||||
<span className="nav align-items-center">
|
|
||||||
<span>
|
|
||||||
<i className="fa fa-paper-plane-o pr-4"></i>
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
<span>Replied Mail</span>
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
{/*<li className="py-2">*/}
|
||||||
|
{/* <a href="#">*/}
|
||||||
|
{/* <span*/}
|
||||||
|
{/* className="nav align-items-center">*/}
|
||||||
|
{/* <span>*/}
|
||||||
|
{/* <i className="fa fa-paper-plane-o pr-4"></i>*/}
|
||||||
|
{/* </span>*/}
|
||||||
|
{/* <span>*/}
|
||||||
|
{/* <span>Replied Mail</span>*/}
|
||||||
|
{/* </span>*/}
|
||||||
|
{/* </span>*/}
|
||||||
|
{/* </a>*/}
|
||||||
|
{/*</li>*/}
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul className="pl-0 mt-5">
|
<ul className="pl-0 mt-5">
|
||||||
<li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
|
<li className="py-2"
|
||||||
|
onClick={() => changeActiveCategoryUID('0')}
|
||||||
|
style={{cursor: 'pointer'}}>
|
||||||
<div>
|
<div>
|
||||||
<span className="nav align-items-center">
|
<span className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
@@ -145,7 +153,9 @@ export default function Contacts(){
|
|||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{contactsCategory && contactsCategory.map(item => (
|
{contactsCategory && contactsCategory.map(item => (
|
||||||
<li key={item?.cid} className="py-2" onClick={()=>changeActiveCategoryUID(`${item?.cid}`)} style={{cursor: 'pointer'}}>
|
<li key={item?.cid} className="py-2"
|
||||||
|
onClick={() => changeActiveCategoryUID(`${item?.cid}`)}
|
||||||
|
style={{cursor: 'pointer'}}>
|
||||||
<div>
|
<div>
|
||||||
<span className="nav align-items-center">
|
<span className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
@@ -204,19 +214,25 @@ export default function Contacts(){
|
|||||||
{contactsData && filteredContactData?.map((contact, index) => {
|
{contactsData && filteredContactData?.map((contact, index) => {
|
||||||
const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0)
|
const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0)
|
||||||
return (
|
return (
|
||||||
<div key={contact?.uid} onClick={()=>changeActiveUID(contact?.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
|
<div key={contact?.uid}
|
||||||
|
onClick={() => changeActiveUID(contact?.uid)}
|
||||||
|
className={`mail-msg-item ${isActive && 'bg-light'}`}>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div className="media align-items-center">
|
<div className="media align-items-center">
|
||||||
<div className="mr-3">
|
<div className="mr-3">
|
||||||
<div className="bg-img">
|
<div className="bg-img">
|
||||||
<img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
|
<img src={getImage("avtar/01.jpg")}
|
||||||
|
className="img-fluid" alt="user"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-100">
|
<div className="w-100">
|
||||||
<div className="mail-msg-item-titel justify-content-between">
|
<div
|
||||||
<p>{contact?.sender}</p>
|
className="mail-msg-item-titel justify-content-between">
|
||||||
|
<p><span style={{fontSize: '14px' , color: '#148399', fontWeight:'bolder'}}>{contact?.sender}</span></p>
|
||||||
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
||||||
<p className="d-none d-xl-block"><span>{new Date(contact?.added).toDateString()}</span></p>
|
<p className="d-none d-xl-block">
|
||||||
|
<span style={{fontSize: '14px'}}>{new Date(contact?.added).toDateString()}</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<h5 className="mb-0 my-2">{contact?.title}</h5>
|
<h5 className="mb-0 my-2">{contact?.title}</h5>
|
||||||
<p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0, 101) + ' ...'}</p>
|
<p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0, 101) + ' ...'}</p>
|
||||||
@@ -240,10 +256,11 @@ export default function Contacts(){
|
|||||||
<div className="mail-chat py-5 px-5">
|
<div className="mail-chat py-5 px-5">
|
||||||
<div className="media align-items-center">
|
<div className="media align-items-center">
|
||||||
<div className="bg-img mr-3">
|
<div className="bg-img mr-3">
|
||||||
<img src={getImage("avtar/03.jpg")} className="img-fluid" alt="user" />
|
<img src={getImage("avtar/03.jpg")} className="img-fluid"
|
||||||
|
alt="user"/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 className="mb-0">{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4>
|
<h4 className="mb-0" style={{color: '#148399'}}>{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4>
|
||||||
<p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p>
|
<p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -269,34 +286,41 @@ export default function Contacts(){
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-light mail-f px-4 py-3">
|
{/*<div className="bg-light mail-f px-4 py-3">*/}
|
||||||
<div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
|
{/* <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">*/}
|
||||||
<p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
|
{/* <p>Click here to <a href="#editer" data-toggle="collapse"*/}
|
||||||
<a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
|
{/* className="text-primary px-1">Reply</a>or<a*/}
|
||||||
</div>
|
{/* href="#forward" data-toggle="collapse"*/}
|
||||||
<div className="collapse" id="editer">
|
{/* className="text-primary px-1">Forward</a></p>*/}
|
||||||
<div className="form-group">
|
{/* <a href="#" className="text-primary"><i*/}
|
||||||
<textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
|
{/* className="fa fa-microphone"></i></a>*/}
|
||||||
</div>
|
{/* </div>*/}
|
||||||
</div>
|
{/* <div className="collapse" id="editer">*/}
|
||||||
<div className="collapse" id="forward">
|
{/* <div className="form-group">*/}
|
||||||
<div className="form-group">
|
{/* <textarea className="form-control mt-3"*/}
|
||||||
<input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
|
{/* id="exampleFormControlTextarea1" rows="3"*/}
|
||||||
</div>
|
{/* placeholder="Type here..."></textarea>*/}
|
||||||
</div>
|
{/* </div>*/}
|
||||||
<div className="d-flex align-items-center justify-content-between py-2">
|
{/* </div>*/}
|
||||||
<div>
|
{/* <div className="collapse" id="forward">*/}
|
||||||
{/*<ul className="nav">*/}
|
{/* <div className="form-group">*/}
|
||||||
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
|
{/* <input className="form-control mt-3" id="exampleFormControl"*/}
|
||||||
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
|
{/* placeholder="Email Address"/>*/}
|
||||||
{/* <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
|
{/* </div>*/}
|
||||||
{/*</ul>*/}
|
{/* </div>*/}
|
||||||
</div>
|
{/* <div className="d-flex align-items-center justify-content-between py-2">*/}
|
||||||
<div>
|
{/* <div>*/}
|
||||||
{/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
|
{/* /!*<ul className="nav">*!/*/}
|
||||||
</div>
|
{/* /!* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*!/*/}
|
||||||
</div>
|
{/* /!* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*!/*/}
|
||||||
</div>
|
{/* /!* <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*!/*/}
|
||||||
|
{/* /!*</ul>*!/*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* <div>*/}
|
||||||
|
{/* /!*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*!/*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/* </div>*/}
|
||||||
|
{/*</div>*/}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -30,8 +30,8 @@ export default function UserMenu() {
|
|||||||
<ul id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-bs-parent="#sidebarNav">
|
<ul id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-bs-parent="#sidebarNav">
|
||||||
<li className={`${pathname == siteLinks.dash ? 'active' : ''}`}><Link to={siteLinks.dash}>Home</Link></li>
|
<li className={`${pathname == siteLinks.dash ? 'active' : ''}`}><Link to={siteLinks.dash}>Home</Link></li>
|
||||||
<li className={`${pathname == siteLinks.calendar ? 'active' : ''}`}><Link to={siteLinks.calendar}>Calendar</Link></li>
|
<li className={`${pathname == siteLinks.calendar ? 'active' : ''}`}><Link to={siteLinks.calendar}>Calendar</Link></li>
|
||||||
<li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Contacts</Link></li>
|
<li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Sites Contacts</Link></li>
|
||||||
<li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Comments</Link></li>
|
<li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Sites Comments</Link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li className={`${pathname == siteLinks.reports ? 'active' : ''}`}>
|
<li className={`${pathname == siteLinks.reports ? 'active' : ''}`}>
|
||||||
|
|||||||
Reference in New Issue
Block a user