Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6926 | Rev 6928 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 6926 Rev 6927
Línea 2... Línea 2...
2 
import { axios } from '../../utils'
 2 
import { axios } from '../../utils'
3 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from 'react-hook-form'
4 
import { useDispatch } from 'react-redux'
 4 
import { useDispatch } from 'react-redux'
5 
import { addNotification } from '../../redux/notification/notification.actions'
 5 
import { addNotification } from '../../redux/notification/notification.actions'
6 
import parse from 'html-react-parser'
 6 
import parse from 'html-react-parser'
7 
import styled from 'styled-components'
 7 
import styled, { css } from 'styled-components'
8 
import SendIcon from '@mui/icons-material/Send'
 8 
import SendIcon from '@mui/icons-material/Send'
9 
import IconButton from '@mui/material/IconButton'
 9 
import IconButton from '@mui/material/IconButton'
10 
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 10 
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
11 
import AttachFileIcon from '@mui/icons-material/AttachFile'
 11 
import AttachFileIcon from '@mui/icons-material/AttachFile'
12 
import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'
 12 
import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'
Línea 57... Línea 57...
57 
  height: -webkit-fill-available;
 57 
  height: -webkit-fill-available;
58 
  padding: 0.5rem 0;
 58 
  padding: 0.5rem 0;
59 
  overflow: auto;
 59 
  overflow: auto;
60 
`
 60 
`
Línea -... Línea 61...
- 
 
 61 
 
- 
 
 62 
const StyledMessage = styled.div`
- 
 
 63 
  box-shadow: var(--light-shadow);
- 
 
 64 
  display: inline-flex;
- 
 
 65 
  flex-direction: column;
- 
 
 66 
  gap: 0.5rem;
- 
 
 67 
  margin-bottom: 0.5rem;
- 
 
 68 
  max-width: 70%;
- 
 
 69 
  min-width: 4rem;
- 
 
 70 
  padding: 0.5rem;
- 
 
 71 
  position: relative;
- 
 
 72 
 
- 
 
 73 
  & > p {
- 
 
 74 
    color: var(--chat-color);
- 
 
 75 
    max-width: 100%;
- 
 
 76 
    overflow: hidden;
- 
 
 77 
    text-overflow: ellipsis;
- 
 
 78 
    word-break: break-word;
- 
 
 79 
  }
- 
 
 80 
 
- 
 
 81 
  & > img {
- 
 
 82 
    max-width: 250px;
- 
 
 83 
    max-height: 250px;
- 
 
 84 
    object-fit: contain;
- 
 
 85 
  }
- 
 
 86 
 
- 
 
 87 
  &:first-child {
- 
 
 88 
    margin-top: 0.5rem;
- 
 
 89 
  }
- 
 
 90 
 
- 
 
 91 
  .time {
- 
 
 92 
    color: $subtitle-color;
- 
 
 93 
    font-size: 0.8rem;
- 
 
 94 
  }
- 
 
 95 
 
- 
 
 96 
  .emojione {
- 
 
 97 
    width: 1rem;
- 
 
 98 
    height: 1rem;
- 
 
 99 
  }
- 
 
 100 
 
- 
 
 101 
  ${(props) => {
- 
 
 102 
    if (props.send) {
- 
 
 103 
      css`
- 
 
 104 
        align-self: flex-end;
- 
 
 105 
        background-color: var(--chat-send);
- 
 
 106 
        border-radius: 10px 0 10px 10px;
- 
 
 107 
      `
- 
 
 108 
    } else {
- 
 
 109 
      css`
- 
 
 110 
        align-items: flex-start;
- 
 
 111 
        background-color: var(--chat-received);
- 
 
 112 
        border-radius: 0 10px 10px 10px;
- 
 
 113 
      `
- 
 
 114 
    }
- 
 
 115 
  }}
- 
 
 116 
`
61 
 
 117 
 
62 
const Chat = ({ children }) => {
 118 
const Chat = ({ children }) => {
63 
  return <StyledChatContainer>{children}</StyledChatContainer>
 119 
  return <StyledChatContainer>{children}</StyledChatContainer>
Línea 64... Línea 120...
64 
}
 120 
}
Línea 137... Línea 193...
137 
      />
 193 
      />
138 
    ),
 194 
    ),
139 
  }
 195 
  }
Línea 140... Línea 196...
140 
 
 196 
 
141 
  return (
 - 
 
142 
    <div
 - 
 
143 
      className={`message_container ${message.u === 1 ? 'sent' : 'received'}`}
 197 
  return (
144 
    >
 198 
    <>
145 
      <span className="user_name">{senderName(message)}</span>
 199 
      <span className="user_name">{senderName(message)}</span>
146 
      <div className={`message ${message.u === 1 ? 'sent' : 'received'}`}>
 200 
      <StyledMessage send={message.u === 1}>
147 
        {messagesContent[message.mtype]}
 201 
        {messagesContent[message.mtype]}
148 
        <label className="message_time">
 202 
        <label className="time">
149 
          {!message.not_received && (
 203 
          {!message.not_received && (
150 
            <i
 204 
            <i
151 
              className="fa fa-check"
 205 
              className="fa fa-check"
152 
              style={message.seen ? { color: 'blue' } : { color: 'gray' }}
 206 
              style={message.seen ? { color: 'blue' } : { color: 'gray' }}
153 
            />
 207 
            />
154 
          )}
 208 
          )}
155 
          {message.time}
 209 
          {message.time}
156 
        </label>
 210 
        </label>
157 
      </div>
 211 
      </StyledMessage>
158 
    </div>
 212 
    </>
159 
  )
 213 
  )
Línea 160... Línea 214...
160 
}
 214 
}
161 
 
 215