Reto: Estilos en la pantalla de conversación

Clase 33 de 63 • Curso de Angular 6 2018

Ya que tenemos el resto del app con estilos, lo más parecido posible al legendario Msn Messenger, toma la pantalla de conversación y dale estilo.

Ezequiel Freire

student•

Hola, asi me quedo.

Romario Augusto Estrada Flórez

student•

jajajajaja

Juan Diego Lopez Triana

student•

Así me quedo:

Sigaweb sas

student•

Esa carita, la da estil, se ve muy bn

Carlos Garrido Marin

student•

Así quedo el mío:

Wilson Fabian Pérez Sucuzhañay

student•

listo

Jehison Orostegui

student•

Intento hacerlo lo mas parecido a MSN

Fernando Vallejo

student•

Jeffry Davila

student•

Al final así me quedo:

Luis Miguel Ramos Hernández

student•

Ezequiel Fabbroni

student•

Asi me salio:

Saludos

<div id="conversationContainer">
	<div class="contPrinc pato45">
		<div class="row">
			<div class="col-xs-3 bg-grey marle-25">
				<div class="avatarFrameOnLine ">
					<img src="assets/img/generic_avatar.png" class=" homeAvatarPicture img-fluid">
				</div>

				<div class="avatarFrameOnLine  marto250">
					<img src="assets/img/generic_avatar.png" class=" homeAvatarPicture img-fluid">
				</div>

			</div>
			<div class="col">
				<span><b>Persona (Online)</b></span>
				<div class="container">
					<div class="chatContainer marto15">
						<div class="exampleChat">
							<span><b>Persona dice:</b></span>
							<p class="marle-25">Hola, ¿como estas?</p>
						</div>
						<div class="exampleChat">
							<span><b>Persona2 dice:</b></span>
							<p class="marle-25">Bien, aquí esforzandome por diseñar el chat :C <br> ¿y tu?</p>
						</div>
						

					</div>
					<div class="bottomChat">
						<input type="area" class="form-control areaChat" placeholder="Escribe un mensaje" name="">
						
						<div class="marto15">

							<img src="assets/img/zumbido.png" class="iconImage img-fluid">
							<img src="assets/img/zumbido.png" class="iconImage img-fluid">
							<img src="assets/img/zumbido.png" class="iconImage img-fluid">
							
							<label class="customFileUpload">
								<input type="file">
								<i class="far fa-images"></i>
								Seleccionar Imagen
							</label>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</div>

// css
.contPrinc{
	padding: 15px;
}
.margin-left{
	margin-left: 0px;
}
.chatContainer{
	width: 100%;
	height: 350px;
}
.bottomChat{
	width: 100%;
	bottom: 0px;
}
#conversationContainer{
  background-image: url("/assets/img/msnbg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;

}
.homeAvatarPicture {
  max-width: 100px;
}
.marto100 {
	margin-top: 100px;
}
.marle-25{
	margin-left: 25px;
}
.marto250{
  margin-top: 250px;
}
.areaChat{
	height:100px;
}

.exampleChat {
	font-family: 'San-serif'
}

.iconImage{
	width: 30px;
	margin-right: 10px;
}

img .logoPers {
	width: 65px;
}
.icon{
	margin-right:  10px;
}

Luis Abdel Rangel Castro

student•

html

<div class="conversationContainer">
  <div class="contPrinc pato45">
    <div class="row">
      <div class="col-xs-3 bg-grey marle-25">
        <div class="avatarFrameOnLine">
          <img
            src="assets/img/generic_avatar.png"
            class="homeAvatarPicture img-fluid"
          />
        </div>

        <div class="avatarFrameOnLine marto250">
          <img
            src="assets/img/generic_avatar.png"
            class="homeAvatarPicture img-fluid"
          />
        </div>
      </div>
      <div class="col">
        <span><b>Persona (Online)</b></span>
        <div class="container">
          <div class="chatContainer marto15">
            <div class="exampleChat">
              <span><b>Persona dice:</b></span>
              <p class="marle-25">Hola, ¿como estas?</p>
            </div>
            <div class="exampleChat">
              <span><b>Persona2 dice:</b></span>
              <p class="marle-25">
                Bien, aquí esforzandome por diseñar el chat :C <br />
                ¿y tu?
              </p>
            </div>
          </div>
          <div class="bottomChat">
            <input
              type="area"
              class="form-control areaChat"
              placeholder="Escribe un mensaje"
              name=""
            />

            <div class="marto15">
              <img src="assets/img/zumbido.png" class="iconImage img-fluid" />
              <img src="assets/img/zumbido.png" class="iconImage img-fluid" />
              <img src="assets/img/zumbido.png" class="iconImage img-fluid" />

              <label class="customFileUpload">
                <input type="file" />
                <i class="far fa-images"></i>
                Seleccionar Imagen
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Luis Abdel Rangel Castro

student•

css

.conversationContainer {
  background-image: url("./../../assets/img/msnbg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}
.contPrinc {
  padding: 15px;
}
.margin-left {
  margin-left: 0px;
}
.chatContainer {
  width: 100%;
  height: 350px;
}
.bottomChat {
  width: 100%;
  bottom: 0px;
}
.homeAvatarPicture {
  max-width: 100px;
}
.marto100 {
  margin-top: 100px;
}
.marle-25 {
  margin-left: 25px;
}
.marto250 {
  margin-top: 250px;
}
.areaChat {
  height: 100px;
}

.exampleChat {
  font-family: "San-serif";
}

.iconImage {
  width: 30px;
  margin-right: 10px;
}

img .logoPers {
  width: 65px;
}
.icon {
  margin-right: 10px;
}

Jorge Alexander López Molina

student•

El mio quedo asi, falta mejorarlo mucho.![](

<div class="conversationContainer">
    <div class="container margenSuperior45">
        <div class="row">
            <div class="col-md-3 margenIzquierda">
                <div class="avatarFrameOnline">
                    <img src="assets/img/generic_avatar.png" class="avatarImage img-fluid" />
                </div>
                <div class="avatarFrameOnline margenSuperior200">
                    <img src="assets/img/generic_avatar.png" class="avatarImage img-fluid" />
                </div>
            </div>
            <div class="col">
                <span><b>{{friend.nick}} - ({{friend.status}})</b></span>
                <div class="container">
                    <div clas="espacioChat margenSuperior">
                        <div class="msjChat">
                            <span><b>{{friend.nick}} dice:</b></span>
                            <p>Hola, como estas?</p>
                        </div>
                        <div class="msjChat">
                            <span><b>Jorge dice:</b></span>
                            <p>Muy bien y tu?</p>
                        </div>
                    </div>
                    <div class="posicionCuadroTexto">
                        <input type="text" class="form-control tamañoCuadroTexto" placeholder="Ingresa tu mensaje">
                        <div class="margenSuperior">
                            <img src="assets/img/zumbido.png" class="iconImage img-fluid">
                            <label class="custom-file-upload">
                                <input type="file">
                                <i class="far fa-images"></i>
                                Seleccionar Imagen
                            </label>
                            <button type="button" class="btn btn-primary posicionBotonEnviar">Enviar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Luis Rodolfo Lara Espinoza

student•

Gianfranco Verrocchi

student•

Adrian Camilo Caminos

student•

asi os quedo

Juan David Arias

student•

Mario Alejandro Cortez Salinas

student•

Asi me quedó

Dany Ladino

student•

Hola, este es la pantalla de conversation:

Luis Miguel Ramos Hernández

student•

Luis Alberto Espinosa Muñoz

student•

Así me quedo :

Michael Villanueva Balanzar

student•

Asi me quedo el diseño de la pantalla de conversación

Hans Vogt

student•

<div id="conversationContainer">
	<div class="contPrinc pato45">
		<div class="row">
			<div class="col-xs-3 bg-grey marle-25">
				<div class="avatarFrameOnLine ">
					<img src="assets/img/generic_avatar.png" class=" homeAvatarPicture img-fluid">
				</div>

				<div class="avatarFrameOnLine  marto250">
					<img src="assets/img/generic_avatar.png" class=" homeAvatarPicture img-fluid">
				</div>

			</div>
			<div class="col">
				<span><b>Persona (Online)</b></span>
				<div class="container">
					<div class="chatContainer marto15">
						<div class="exampleChat">
							<span><b>Persona dice:</b></span>
							<p class="marle-25">Hola, ¿como estas?</p>
						</div>
						<div class="exampleChat">
							<span><b>Persona2 dice:</b></span>
							<p class="marle-25">Bien, aquí esforzandome por diseñar el chat :C <br> ¿y tu?</p>
						</div>
						

					</div>
					<div class="bottomChat">
						<input type="area" class="form-control areaChat" placeholder="Escribe un mensaje" name="">
						
						<div class="marto15">

							<img src="assets/img/zumbido.png" class="iconImage img-fluid">
							<img src="assets/img/zumbido.png" class="iconImage img-fluid">
							<img src="assets/img/zumbido.png" class="iconImage img-fluid">
							
							<label class="customFileUpload">
								<input type="file">
								<i class="far fa-images"></i>
								Seleccionar Imagen
							</label>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</div>

// css
.contPrinc{
	padding: 15px;
}
.margin-left{
	margin-left: 0px;
}
.chatContainer{
	width: 100%;
	height: 350px;
}
.bottomChat{
	width: 100%;
	bottom: 0px;
}
#conversationContainer{
  background-image: url("/assets/img/msnbg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;

}
.homeAvatarPicture {
  max-width: 100px;
}
.marto100 {
	margin-top: 100px;
}
.marle-25{
	margin-left: 25px;
}
.marto250{
  margin-top: 250px;
}
.areaChat{
	height:100px;
}

.exampleChat {
	font-family: 'San-serif'
}

.iconImage{
	width: 30px;
	margin-right: 10px;
}

img .logoPers {
	width: 65px;
}
.icon{
	margin-right:  10px;
}

<div class="conversationContainer">
  <div class="contPrinc pato45">
    <div class="row">
      <div class="col-xs-3 bg-grey marle-25">
        <div class="avatarFrameOnLine">
          <img
            src="assets/img/generic_avatar.png"
            class="homeAvatarPicture img-fluid"
          />
        </div>

        <div class="avatarFrameOnLine marto250">
          <img
            src="assets/img/generic_avatar.png"
            class="homeAvatarPicture img-fluid"
          />
        </div>
      </div>
      <div class="col">
        <span><b>Persona (Online)</b></span>
        <div class="container">
          <div class="chatContainer marto15">
            <div class="exampleChat">
              <span><b>Persona dice:</b></span>
              <p class="marle-25">Hola, ¿como estas?</p>
            </div>
            <div class="exampleChat">
              <span><b>Persona2 dice:</b></span>
              <p class="marle-25">
                Bien, aquí esforzandome por diseñar el chat :C <br />
                ¿y tu?
              </p>
            </div>
          </div>
          <div class="bottomChat">
            <input
              type="area"
              class="form-control areaChat"
              placeholder="Escribe un mensaje"
              name=""
            />

            <div class="marto15">
              <img src="assets/img/zumbido.png" class="iconImage img-fluid" />
              <img src="assets/img/zumbido.png" class="iconImage img-fluid" />
              <img src="assets/img/zumbido.png" class="iconImage img-fluid" />

              <label class="customFileUpload">
                <input type="file" />
                <i class="far fa-images"></i>
                Seleccionar Imagen
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.conversationContainer {
  background-image: url("./../../assets/img/msnbg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}
.contPrinc {
  padding: 15px;
}
.margin-left {
  margin-left: 0px;
}
.chatContainer {
  width: 100%;
  height: 350px;
}
.bottomChat {
  width: 100%;
  bottom: 0px;
}
.homeAvatarPicture {
  max-width: 100px;
}
.marto100 {
  margin-top: 100px;
}
.marle-25 {
  margin-left: 25px;
}
.marto250 {
  margin-top: 250px;
}
.areaChat {
  height: 100px;
}

.exampleChat {
  font-family: "San-serif";
}

.iconImage {
  width: 30px;
  margin-right: 10px;
}

img .logoPers {
  width: 65px;
}
.icon {
  margin-right: 10px;
}

<div class="conversationContainer">
    <div class="container margenSuperior45">
        <div class="row">
            <div class="col-md-3 margenIzquierda">
                <div class="avatarFrameOnline">
                    <img src="assets/img/generic_avatar.png" class="avatarImage img-fluid" />
                </div>
                <div class="avatarFrameOnline margenSuperior200">
                    <img src="assets/img/generic_avatar.png" class="avatarImage img-fluid" />
                </div>
            </div>
            <div class="col">
                <span><b>{{friend.nick}} - ({{friend.status}})</b></span>
                <div class="container">
                    <div clas="espacioChat margenSuperior">
                        <div class="msjChat">
                            <span><b>{{friend.nick}} dice:</b></span>
                            <p>Hola, como estas?</p>
                        </div>
                        <div class="msjChat">
                            <span><b>Jorge dice:</b></span>
                            <p>Muy bien y tu?</p>
                        </div>
                    </div>
                    <div class="posicionCuadroTexto">
                        <input type="text" class="form-control tamañoCuadroTexto" placeholder="Ingresa tu mensaje">
                        <div class="margenSuperior">
                            <img src="assets/img/zumbido.png" class="iconImage img-fluid">
                            <label class="custom-file-upload">
                                <input type="file">
                                <i class="far fa-images"></i>
                                Seleccionar Imagen
                            </label>
                            <button type="button" class="btn btn-primary posicionBotonEnviar">Enviar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Reto: 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