Reto: Estilos en la pantalla de conversación

Clase 33 de 63 • Curso de Angular 6 2018

Contenido del curso

Introducción

Definición de la estructura del App

Basics de Angular y TypeScript

Estilos

Acceso a datos remotos y login

Opciones y subida de imágenes

Conversación

Amigos

Deploy

Conclusión

Tomar examen

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.

Comentarios

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