Reto: Mejorar estilos en la pantalla de conversación

Clase 35 de 63 • Curso de Angular 6 2018

Ahora, llevemos el estilo de la pantalla de conversación un paso más allá.

Agrega cada mensaje de texto en una “burbuja” como las que encontrarías en las apps más populares de mensajería instantánea.

También, agrega el avatar de los participantes a un lado de cada mensaje enviado.

Comentarios

Elberth Jair Agreda Rosero

student•

Inspiración:

Teofilo Rosales Gama

student•

Perdonen es algo como esto:

aqui les mando el codigo no soy egoista

<div id="conversationContainer">
  <div class="whiteBorderGlassBox">
      <div class="homeHeadContainer">
        <div class="row">
          <div class="col-md-auto">
            <div class="avatarFrameonline">
                <img src="assets/img/generic_avatar.png" id="homeAvatarPicture">
            </div>
          </div>
          <div class="col">
            <h1>Eduardo</h1>
            <div>
              <span>Online</span>
              <br />
              <span>Escribe un mensaje Personal </span>
              <hr/>
            </div>
            <form >
              <div class="form-group">
                <div class="card">
                  <div class="card-body">
                    <div class="col">
                      <i>
                        <img src="assets/img/generic_avatar.png" alt="" class="icon-chat">
                      </i>
                      <span class="badge badge-primary">Hola como estas?</span>
                    </div>
                    <div class="col text-right">
                        <i>
                          <span class="badge badge-primary">Yo bien y tu?</span>
                          <img src="assets/img/generic_avatar.png" alt="" class="icon-chat">
                        </i>
                      </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="whiteBorderGlassBox">
        <div class="homeHeadContainer">
          <div class="row">
            <div class="col-md-auto">
              <div class="avatarFrameonline">
                  <img src="assets/img/generic_avatar.png" id="homeAvatarPicture">
              </div>
            </div>
            <div class="col">
              <b>Yo</b>
              <div>
                <form >
                  <div class="form-group">
                    <textarea class="form-control" id="Area-de-Chat" rows="3" placeholder="Escribe menos de 140 caracteres"></textarea>
                    <div class="col text-right">
                      <i class="img mr-1">
                        <img src="assets/img/icons/regular_smile.gif" alt="">
                      </i>
                      <i class="img mr-1">
                        <img src="assets/img/icons/tongue_smile.gif" alt="">
                      </i>
                      <i class="img mr-1">
                        <img src="assets/img/icons/angry_smile.gif" alt="">
                      </i>
                      <button type="button" class="btn btn-primary btn-sm mr-1">
                        Enviar
                      </button>
                      <label class="custom-file-upload mr-1">
                        <input type="file">
                        Selecciona Imagen
                      </label>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>

conversation.component.css:

#conversationContainer {
  background-image: url(/assets/img/msnbg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}
img.avatarImage{
  height: 100px;
  width: 100px;
}
.icon-chat{
  height: 40px;
  width: 40px;
}

Juan Diego Lopez Triana

student•

No sé si a esto era a lo que se refería:

Michael Villanueva Balanzar

student•

Así me quedo el diseño

David Alejandro Mosquera Moreno

student•

Jehison Orostegui

student•

Hi! My doggy

Wilson Fabian Pérez Sucuzhañay

student•

pues no se si quedo igual pero ya va cogiendo forma jaja

Luis Alberto Espinosa Muñoz

student•

Asi me quedo:

Luis Rodolfo Lara Espinoza

student•

Me quedo de la siguiente forma:

Emerson Marin

student•

Jeffry Davila

student•

Asi me quedo…

Alexander Sandoval

student•

Va quedando así:

Pueden obtener algunos efectos burbujas:

Acá:
Y aquí también:

Ricardo Portillo

student•

HTML

<div id="conversationContainer">
<div class="container-fluid pt-3 sendMsn">
  <div class="row align-items-start">
    <div class="col-3  col-md-2 col-lg-1 ">
      <div class="avatarFrameonline">
        <img class="avatarImage img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico">
      </div>
    </div>
    <div class="col">
      <h1><b>Amigo</b> (Online)</h1>
      <b>Mensaje Personal</b>
      <hr>
      <div class="msg">
        <div class="msgMe"> <img class="img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico"><span>Hola</span></div>
        <div class="msgYou"> <span>Hola</span><img class="img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico"></div>
        <div class="msgMe"> <img class="img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico"><span>Como tas</span></div>
        <div class="msgYou"> <span>bien tú</span><img class="img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico"></div>
      </div>
    </div>
  </div>
  <div class="row lign-items-end">
    <div class="col-3  col-md-2 col-lg-1">
        <div class="avatarFrameonline">
          <img class="avatarImage img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico">
        </div>
    </div>
    <div class="col">
      <div class="msgArea">
      <textarea></textarea>
      <div class="row">
        <div class="col">
          <img src="assets/img/zumbido.png"  class="icon">
        </div>
        <div class="col-3 col-md-1">
          <button class="btn btn-primary">Enviar</button>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>
</div>

Código en SASS ( estoy trabajando el curso así)

#conversationContainer
  background-image: url(/assets/img/msnbg.jpg)
  background-size: 100%
  background-repeat: no-repeat

.msg
  height: 350px
  overflow-y: auto
  .msgMe, .msgYou
    img
      width: 32px
      border-radius: 15px
    span
      border-radius: 10px
      padding: 3px 5px
  .msgMe
    span
      margin-left: 5px
      background-color: #EAECEB
  .msgYou
    text-align: right
    span
      margin-right: 5px
      background-color: #B8E5F9
.msgArea
  background: #ffffff
  border: 1px solid #cccccc
  textarea
    width: 100%
    height: 86px
    border: 1px solid #cccccc

img.icon
  width: 30px```

Luis Miguel Ramos Hernández

student•

Ezequiel Fabbroni

student•

Me imagino algo así, saludos

Ana Lorena Bojorquez Acuña

company_admin•

Algo asi (8

Felipe Vidal

student•

Me compartes tu codigo? :3

IVAN RODRIGUEZ GUERRERO

student•

JESUS IVAN MENDOZA CONTRERAS

student•

Ruben Garcia

student•

Saludos mi proyecto lo estoy trabajando con materialize css, y va quedando de esta manera:

William Vega

student•

Tengo curiosidad, una pregunta a todos, cuanto tiempo les llevó hacer este reto? Cual es el tiempo en su opinion que un pro se debería de llevar en hacer algo como esto? Dos horas? toda una mañana? Realmente apreciaría saber su opinión.

<div id="conversationContainer">
  <div class="whiteBorderGlassBox">
      <div class="homeHeadContainer">
        <div class="row">
          <div class="col-md-auto">
            <div class="avatarFrameonline">
                <img src="assets/img/generic_avatar.png" id="homeAvatarPicture">
            </div>
          </div>
          <div class="col">
            <h1>Eduardo</h1>
            <div>
              <span>Online</span>
              <br />
              <span>Escribe un mensaje Personal </span>
              <hr/>
            </div>
            <form >
              <div class="form-group">
                <div class="card">
                  <div class="card-body">
                    <div class="col">
                      <i>
                        <img src="assets/img/generic_avatar.png" alt="" class="icon-chat">
                      </i>
                      <span class="badge badge-primary">Hola como estas?</span>
                    </div>
                    <div class="col text-right">
                        <i>
                          <span class="badge badge-primary">Yo bien y tu?</span>
                          <img src="assets/img/generic_avatar.png" alt="" class="icon-chat">
                        </i>
                      </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="whiteBorderGlassBox">
        <div class="homeHeadContainer">
          <div class="row">
            <div class="col-md-auto">
              <div class="avatarFrameonline">
                  <img src="assets/img/generic_avatar.png" id="homeAvatarPicture">
              </div>
            </div>
            <div class="col">
              <b>Yo</b>
              <div>
                <form >
                  <div class="form-group">
                    <textarea class="form-control" id="Area-de-Chat" rows="3" placeholder="Escribe menos de 140 caracteres"></textarea>
                    <div class="col text-right">
                      <i class="img mr-1">
                        <img src="assets/img/icons/regular_smile.gif" alt="">
                      </i>
                      <i class="img mr-1">
                        <img src="assets/img/icons/tongue_smile.gif" alt="">
                      </i>
                      <i class="img mr-1">
                        <img src="assets/img/icons/angry_smile.gif" alt="">
                      </i>
                      <button type="button" class="btn btn-primary btn-sm mr-1">
                        Enviar
                      </button>
                      <label class="custom-file-upload mr-1">
                        <input type="file">
                        Selecciona Imagen
                      </label>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>

#conversationContainer {
  background-image: url(/assets/img/msnbg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}
img.avatarImage{
  height: 100px;
  width: 100px;
}
.icon-chat{
  height: 40px;
  width: 40px;
}

<div id="conversationContainer">
<div class="container-fluid pt-3 sendMsn">
  <div class="row align-items-start">
    <div class="col-3  col-md-2 col-lg-1 ">
      <div class="avatarFrameonline">
        <img class="avatarImage img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico">
      </div>
    </div>
    <div class="col">
      <h1><b>Amigo</b> (Online)</h1>
      <b>Mensaje Personal</b>
      <hr>
      <div class="msg">
        <div class="msgMe"> <img class="img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico"><span>Hola</span></div>
        <div class="msgYou"> <span>Hola</span><img class="img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico"></div>
        <div class="msgMe"> <img class="img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico"><span>Como tas</span></div>
        <div class="msgYou"> <span>bien tú</span><img class="img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico"></div>
      </div>
    </div>
  </div>
  <div class="row lign-items-end">
    <div class="col-3  col-md-2 col-lg-1">
        <div class="avatarFrameonline">
          <img class="avatarImage img-fluid" src="assets/img/generic_avatar.png" alt="Avatar generico">
        </div>
    </div>
    <div class="col">
      <div class="msgArea">
      <textarea></textarea>
      <div class="row">
        <div class="col">
          <img src="assets/img/zumbido.png"  class="icon">
        </div>
        <div class="col-3 col-md-1">
          <button class="btn btn-primary">Enviar</button>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>
</div>

#conversationContainer
  background-image: url(/assets/img/msnbg.jpg)
  background-size: 100%
  background-repeat: no-repeat

.msg
  height: 350px
  overflow-y: auto
  .msgMe, .msgYou
    img
      width: 32px
      border-radius: 15px
    span
      border-radius: 10px
      padding: 3px 5px
  .msgMe
    span
      margin-left: 5px
      background-color: #EAECEB
  .msgYou
    text-align: right
    span
      margin-right: 5px
      background-color: #B8E5F9
.msgArea
  background: #ffffff
  border: 1px solid #cccccc
  textarea
    width: 100%
    height: 86px
    border: 1px solid #cccccc

img.icon
  width: 30px```

Reto: Mejorar estilos en la pantalla de conversación

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos