mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
update: messaging system
This commit is contained in:
srgooglo
parent
5afe18754f
commit
331c66eb38
@ -3,7 +3,7 @@
|
||||
"UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
|
||||
"title": "Comty™",
|
||||
"DevBuild": true,
|
||||
"version": "0.4.02",
|
||||
"version": "0.4.03",
|
||||
"stage": "dev-pre",
|
||||
"description": "",
|
||||
"author": "RageStudio",
|
||||
|
||||
@ -14,7 +14,8 @@ import {
|
||||
__trendings,
|
||||
__pro,
|
||||
__footer,
|
||||
__chats
|
||||
__chats,
|
||||
__searchBar
|
||||
} from './renders.js'
|
||||
|
||||
export const SwapMode = {
|
||||
@ -215,7 +216,8 @@ export default class Secondary extends React.PureComponent {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.secondary_main}>
|
||||
{ycore.IsThisUser.pro() ? <__pro /> : <__pro />}
|
||||
<__searchBar />
|
||||
{/* {ycore.IsThisUser.pro() ? <__pro /> : <__pro />} */}
|
||||
<__trendings data={trending_data} />
|
||||
<__chats />
|
||||
{__footer()}
|
||||
|
||||
@ -336,3 +336,40 @@ export const __footer = () =>{
|
||||
v{ycore.AppInfo.version} | About | Legal | Help
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
export class __searchBar extends React.Component{
|
||||
state = {
|
||||
value: '',
|
||||
}
|
||||
openSearcher = () => {
|
||||
const { value } = this.state
|
||||
if (value.length < 1) return false
|
||||
if (value == /\s/) return false
|
||||
ycore.SwapMode.openSearch(value);
|
||||
}
|
||||
onChange = e => {
|
||||
const { value } = e.target
|
||||
this.setState({ value: value })
|
||||
if (ycore.AppSettings.auto_search_ontype == 'true') {
|
||||
this.autosend()
|
||||
}
|
||||
}
|
||||
handleKey = (e) =>{
|
||||
if (e.key == 'Enter') {
|
||||
this.openSearcher()
|
||||
}
|
||||
}
|
||||
render(){
|
||||
return(
|
||||
<div className={styles.search_bar}>
|
||||
<input
|
||||
placeholder="Search on Comty..."
|
||||
onChange={this.onChange}
|
||||
onPressEnter={this.openSearcher}
|
||||
onKeyPress={this.handleKey}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -369,3 +369,30 @@
|
||||
letter-spacing: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.search_bar {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: @body-color;
|
||||
padding: 0 54px;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px;
|
||||
background-position: 25px 48%;
|
||||
font-family: @body-font;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
&::placeholder {
|
||||
color: @input-chat-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@ import styles from './styles.less'
|
||||
import * as ycore from 'ycore'
|
||||
import * as antd from 'antd'
|
||||
import { CustomIcons, MainFeed, PostCreator } from 'components'
|
||||
import { SetHeaderSearchType } from 'components/HeaderSearch'
|
||||
import * as Icons from '@ant-design/icons'
|
||||
import Icon from '@ant-design/icons'
|
||||
import Follow_btn from './components/Follow_btn.js'
|
||||
@ -57,7 +56,7 @@ class UserProfile extends React.PureComponent {
|
||||
|
||||
componentDidMount() {
|
||||
this.initUser(this.props.regx)
|
||||
SetHeaderSearchType.disable()
|
||||
|
||||
}
|
||||
|
||||
initUser = e => {
|
||||
|
||||
@ -106,7 +106,6 @@ class PrimaryLayout extends React.Component {
|
||||
id="primaryContent"
|
||||
className={styles.primary_layout_content}
|
||||
>
|
||||
<HeaderSearch />
|
||||
{children}
|
||||
</Content>
|
||||
</PageTransition>
|
||||
|
||||
@ -1,10 +1,15 @@
|
||||
import React, { Component } from 'react';
|
||||
import SideBar from './SideBar'
|
||||
import { MESSAGE_SENT, MESSAGE_RECIEVED, TYPING, PRIVATE_MESSAGE } from '../Events'
|
||||
import ChatHeading from './ChatHeading'
|
||||
|
||||
import Messages from '../messages/Messages'
|
||||
import MessageInput from '../messages/MessageInput'
|
||||
|
||||
import * as ycore from 'ycore'
|
||||
import * as antd from 'antd'
|
||||
import * as Icons from '@ant-design/icons'
|
||||
import styles from '../styles.less'
|
||||
import classnames from 'classnames'
|
||||
|
||||
const userData = ycore.userData();
|
||||
|
||||
@ -134,10 +139,10 @@ export default class ChatContainer extends Component {
|
||||
this.setState({activeChat})
|
||||
}
|
||||
render() {
|
||||
const { user, logout } = this.props
|
||||
const { user } = this.props
|
||||
const { chats, activeChat } = this.state
|
||||
return (
|
||||
<div className="container">
|
||||
<div className={styles.chats_wrapper}>
|
||||
<SideBar
|
||||
chats={chats}
|
||||
user={user}
|
||||
@ -145,39 +150,48 @@ export default class ChatContainer extends Component {
|
||||
setActiveChat={this.setActiveChat}
|
||||
onSendPrivateMessage={this.sendOpenPrivateMessage}
|
||||
/>
|
||||
<div className="chat-room-container">
|
||||
{
|
||||
activeChat !== null ? (
|
||||
<div className={styles.app}>
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.hat_area}>
|
||||
<div className={styles.chat_area_main}>
|
||||
|
||||
<div className="chat-room">
|
||||
<ChatHeading name={activeChat.name} />
|
||||
<Messages
|
||||
<Messages
|
||||
messages={activeChat.messages}
|
||||
user={user}
|
||||
typingUsers={activeChat.typingUsers}
|
||||
/>
|
||||
<MessageInput
|
||||
sendMessage={
|
||||
(message)=>{
|
||||
this.sendMessage(activeChat.id, message)
|
||||
}
|
||||
}
|
||||
sendTyping={
|
||||
(isTyping)=>{
|
||||
this.sendTyping(activeChat.id, isTyping)
|
||||
}
|
||||
}
|
||||
/>
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<MessageInput
|
||||
sendMessage={
|
||||
(message)=>{
|
||||
this.sendMessage(activeChat.id, message)
|
||||
}
|
||||
}
|
||||
sendTyping={
|
||||
(isTyping)=>{
|
||||
this.sendTyping(activeChat.id, isTyping)
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
):
|
||||
<div className="chat-room choose">
|
||||
<h3>Choose a chat!</h3>
|
||||
<antd.Result
|
||||
icon={<Icons.SmileOutlined />}
|
||||
title="Hey, you still haven't started chatting with anyone"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function({name, numberOfUsers}) {
|
||||
|
||||
return (
|
||||
<div className="chat-header">
|
||||
<div className="user-info">
|
||||
<div className="user-name">{name}</div>
|
||||
<div className="status">
|
||||
<div className="indicator"></div>
|
||||
<span>{numberOfUsers ? numberOfUsers : null}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import * as ycore from 'ycore'
|
||||
import * as antd from 'antd'
|
||||
import styles from '../styles.less'
|
||||
|
||||
const userData = ycore.userData()
|
||||
|
||||
@ -25,7 +26,7 @@ export default class SideBar extends React.PureComponent{
|
||||
const { reciever } = this.state
|
||||
|
||||
return (
|
||||
<div id="side-bar">
|
||||
<div className={styles.chat_sider}>
|
||||
|
||||
<form onSubmit={this.handleSubmit} className="search">
|
||||
<input
|
||||
|
||||
@ -38,9 +38,9 @@ export default class Chats extends React.Component{
|
||||
if(!this.state.conn){
|
||||
await socket.on('connect', ()=>{
|
||||
console.log(prefix, "Connected");
|
||||
this.setState({ conn: true })
|
||||
const payload = { id: userData.UserID, name: userData.username, avatar: userData.avatar }
|
||||
this.setUser(payload)
|
||||
socket.emit(USER_CONNECTED, payload);
|
||||
this.setState({user: payload, conn: true})
|
||||
})
|
||||
}
|
||||
|
||||
@ -55,16 +55,6 @@ export default class Chats extends React.Component{
|
||||
})
|
||||
}
|
||||
|
||||
/*
|
||||
* Sets the user property in state
|
||||
* @param user {id:number, name:string}
|
||||
*/
|
||||
setUser = (user)=>{
|
||||
const { socket } = this.state
|
||||
socket.emit(USER_CONNECTED, user);
|
||||
this.setState({user})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { socket, user } = this.state
|
||||
return (
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import styles from '../styles.less'
|
||||
|
||||
export default class MessageInput extends Component {
|
||||
|
||||
@ -66,19 +67,29 @@ export default class MessageInput extends Component {
|
||||
render() {
|
||||
const { message } = this.state
|
||||
return (
|
||||
<div className="message-input">
|
||||
<form
|
||||
onSubmit={ this.handleSubmit }
|
||||
className="message-form">
|
||||
|
||||
<div className={styles.chat_area_footer}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video">
|
||||
<path d="M23 7l-7 5 7 5V7z" />
|
||||
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||||
<circle cx="8.5" cy="8.5" r="1.5" />
|
||||
<path d="M21 15l-5-5L5 21" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 8v8M8 12h8" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip">
|
||||
<path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" /></svg>
|
||||
<input
|
||||
id = "message"
|
||||
ref = {"messageinput"}
|
||||
type = "text"
|
||||
className = "form-control"
|
||||
value = { message }
|
||||
autoComplete = {'off'}
|
||||
placeholder = "Type something interesting"
|
||||
placeholder = "Type something here..."
|
||||
onKeyUp = { e => { e.keyCode !== 13 && this.sendTyping() } }
|
||||
onChange = {
|
||||
({target})=>{
|
||||
@ -86,15 +97,15 @@ export default class MessageInput extends Component {
|
||||
}
|
||||
}
|
||||
/>
|
||||
<button
|
||||
disabled = { message.length < 1 }
|
||||
type = "submit"
|
||||
className = "send"
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up">
|
||||
<path d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3" /></svg>
|
||||
</div>
|
||||
|
||||
> Send </button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import styles from '../styles.less'
|
||||
import classnames from 'classnames'
|
||||
|
||||
export default class Messages extends Component {
|
||||
constructor(props) {
|
||||
@ -23,22 +25,19 @@ export default class Messages extends Component {
|
||||
render() {
|
||||
const { messages, user, typingUsers } = this.props
|
||||
return (
|
||||
<div ref='container'
|
||||
className="thread-container">
|
||||
<div className="thread">
|
||||
<div ref='container' style={{ width: '100%' }}>
|
||||
{
|
||||
messages.map((mes)=>{
|
||||
return (
|
||||
<div
|
||||
key={mes.id}
|
||||
className={`message-container ${mes.sender === user.name && 'right'}`}
|
||||
>
|
||||
<div className="time">{mes.time}</div>
|
||||
<div className="data">
|
||||
<div className="message">{mes.message}</div>
|
||||
<div className="name">{mes.sender}</div>
|
||||
</div>
|
||||
<div className={classnames(styles.chat_msg, {[styles.owner]: mes.sender == user.name? true : false })} key={mes.id}>
|
||||
<div className={styles.chat_msg_profile}>
|
||||
<img className={styles.chat_msg_img} src={mes.avatar} />
|
||||
<div className={styles.chat_msg_date}>{mes.time}</div>
|
||||
</div>
|
||||
<div className={styles.chat_msg_content}>
|
||||
<div className={styles.chat_msg_text}>{mes.message}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
})
|
||||
@ -52,7 +51,6 @@ export default class Messages extends Component {
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
361
src/pages/chats/styles.less
Normal file
361
src/pages/chats/styles.less
Normal file
@ -0,0 +1,361 @@
|
||||
@import '~themes/index.less';
|
||||
|
||||
.hat_area{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chats_wrapper{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 80vh;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.chat_sider{
|
||||
border-right: 1px #eef2f4 solid;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
@body-bg-color: #1d1d1d;
|
||||
@theme-bg-color: #27292d;
|
||||
@border-color: #323336;
|
||||
@body-color: #d1d1d2;
|
||||
@active-conversation-bg: linear-gradient(
|
||||
to right,
|
||||
rgba(47, 50, 56, 0.54),
|
||||
rgba(238, 242, 244, 0) 100%
|
||||
);
|
||||
@msg-hover-bg: rgba(47, 50, 56, 0.54);
|
||||
@chat-text-bg: #383b40;
|
||||
@chat-text-color: #b5b7ba;
|
||||
@msg-date: #626466;
|
||||
@msg-message: var(@msg-date);
|
||||
@overlay-bg: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
#27292d 65%,
|
||||
#27292d 100%
|
||||
);
|
||||
@input-bg: #2f3236;
|
||||
@chat-header-bg: linear-gradient(
|
||||
to bottom,
|
||||
#27292d 0%,
|
||||
#27292d 78%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
@settings-icon-color: #7c7e80;
|
||||
@developer-color: var(@border-color);
|
||||
@button-bg-color: #393b40;
|
||||
@button-color: var(@body-color);
|
||||
@input-chat-color: #6f7073;
|
||||
@detail-font-color: var(@input-chat-color);
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: @body-bg-color;
|
||||
font-family: @body-font;
|
||||
color: @body-color;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: @theme-bg-color;
|
||||
max-width: 1600px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.conversation_area{
|
||||
width: 340px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat_area {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.conversation_area {
|
||||
border-right: 1px solid @border-color;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.msg_profile {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-right: 15px;
|
||||
&.group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: @border-color;
|
||||
|
||||
svg {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background-color: @msg-hover-bg;
|
||||
}
|
||||
&.active {
|
||||
background: @active-conversation-bg;
|
||||
border-left: 4px solid @theme-color;
|
||||
}
|
||||
&.online:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: #23be7e;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid @theme-bg-color;
|
||||
left: 50px;
|
||||
bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.msg_username {
|
||||
margin-bottom: 4px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.msg_detail {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.msg_content {
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.msg_message {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: @msg-message;
|
||||
}
|
||||
|
||||
.msg_date {
|
||||
font-size: 14px;
|
||||
color: @msg-date;
|
||||
margin-left: 3px;
|
||||
&:before {
|
||||
content: "•";
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat_area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
&.profile {
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
&.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
&.main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.chat_msg_img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.chat_area_main{
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding: 30px 0 30px 0;
|
||||
height: calc(100% - @chat_footer_height);
|
||||
}
|
||||
|
||||
.chat_msg_profile {
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: -20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat_msg_date {
|
||||
position: absolute;
|
||||
left: calc(100% + 12px);
|
||||
bottom: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: @msg-date;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat_msg {
|
||||
display: flex;
|
||||
padding: 0 20px 45px;
|
||||
|
||||
.chat_msg_content {
|
||||
margin-left: 12px;
|
||||
max-width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chat_msg_text {
|
||||
background-color: @chat-text-bg;
|
||||
padding: 15px;
|
||||
border-radius: 20px 20px 20px 0;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
|
||||
&.owner{
|
||||
flex-direction: row-reverse;
|
||||
.chat_msg_content {
|
||||
margin-left: 0;
|
||||
margin-right: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.chat_msg_text {
|
||||
background-color: @theme-color;
|
||||
color: #fff;
|
||||
border-radius: 20px 20px 0 20px;
|
||||
}
|
||||
.chat_msg_date {
|
||||
left: auto;
|
||||
right: calc(100% + 12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chat_msg_text {
|
||||
color: @chat-text-color;
|
||||
}
|
||||
|
||||
.chat_msg_text img {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat_area_footer {
|
||||
display: flex;
|
||||
border-top: 1px solid @border-color;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
height: @chat_footer_height;
|
||||
align-items: center;
|
||||
background-color: @theme-bg-color;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.chat_area_footer svg {
|
||||
color: @settings-icon-color;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: @settings-icon-hover;
|
||||
}
|
||||
|
||||
& + svg {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat_area_footer input {
|
||||
border: none;
|
||||
color: @body-color;
|
||||
background-color: @input-bg;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
margin: 0 12px;
|
||||
width: 100%;
|
||||
&::placeholder {
|
||||
color: @input-chat-color;
|
||||
}
|
||||
}
|
||||
|
||||
.chat_area_group {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
* {
|
||||
border: 2px solid @theme-bg-color;
|
||||
}
|
||||
* + * {
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: @button-bg-color;
|
||||
color: @theme-color;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.conversation_area {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
// FOR LAYOUTS
|
||||
@__Global_general_font_family: "Poppins", sans-serif;
|
||||
|
||||
@__Global_layout_backgroud: #F8F6F8;
|
||||
@__Global_layout_color: #2d2d2d;
|
||||
@__Global_layout_border-rd: 27px 0 0 0;
|
||||
@ -226,3 +227,41 @@ body {
|
||||
@borderRadius: 6px;
|
||||
@boxShadow: 0 2px 5px rgba(#333, 0.2);
|
||||
|
||||
// DSP2
|
||||
@chat_footer_height: 67px;
|
||||
@body-bg-color: #e5ecef;
|
||||
@theme-bg-color: #fff;
|
||||
@settings-icon-hover: #9fa7ac;
|
||||
@developer-color: #f9fafb;
|
||||
@input-bg: #f8f8fa;
|
||||
@input-chat-color: #a2a2a2;
|
||||
@border-color: #eef2f4;
|
||||
@body-font: "Manrope", sans-serif;
|
||||
@body-color: #273346;
|
||||
@settings-icon-color: #c1c7cd;
|
||||
@msg-message: #969eaa;
|
||||
@chat-text-bg: #f1f2f6;
|
||||
@chat-text-color: rgb(39, 51, 70);
|
||||
@theme-color: #0086ff;
|
||||
@msg-date: #c0c7d2;
|
||||
@button-bg-color: #f0f7ff;
|
||||
@button-color: var(@theme-color);
|
||||
@detail-font-color: #919ca2;
|
||||
@msg-hover-bg: rgba(238, 242, 244, 0.4);
|
||||
@active-conversation-bg: linear-gradient(
|
||||
to right,
|
||||
rgba(238, 242, 244, 0.4) 0%,
|
||||
rgba(238, 242, 244, 0) 100%
|
||||
);
|
||||
@overlay-bg: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 65%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
@chat-header-bg: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 1) 0%,
|
||||
rgba(255, 255, 255, 1) 78%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
@ -3,3 +3,4 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Kulim+Park&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700&display=swap&subset=latin-ext");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user