hsuanxyz / ionic3-chat Goto Github PK

View Code? Open in Web Editor NEW

468.0 40.0 212.0 604 KB

ionic3 chat example

Home Page: https://stackblitz.com/edit/ionic3-chat

License: MIT License

TypeScript 55.69% HTML 18.27% CSS 23.19% JavaScript 2.86%

ionic chat emojis example ionic2 ionic3 components

ionic3-chat's Introduction

ionic3-chat

ionic3 chat example

DEMO

Running

Clone this repository: https://github.com/HsuanXyz/ionic3-chat.git.
Run npm install from the project root.
If you do not install the ionic CLI (npm install -g ionic)
Run ionic serve in a terminal from the project root.

App Preview

File Structure

.
├── LICENSE
├── README.md
├── config.xml
├── ionic.config.json
├── package.json
├── resources
├── src
│   ├── index.html
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.html
│   │   ├── app.module.ts
│   │   ├── app.scss
│   │   └── main.ts
│   ├── assets
│   │   └── mock
│   │       └── msg-list.json                 * mock json
│   │   └── icon
│   │       └── favicon.ico
│   │   └── to-user.jpg
│   │   └── user.jpg
│   ├── components/emoji-picker               * emoji-picker component
│   │   └── emoji-picker.html
│   │   └── emoji-picker.module.ts
│   │   └── emoji-picker.scss
│   │   └── emoji-picker.ts
│   ├── providers
│   │   └── chat-service.ts                  * chat-service
│   │   └── emoji.ts                         * emoji-provider
│   ├── pipes
│   │   └── relative-time.ts                 * relative time pipes
│   ├── pages
│   │   ├── home
│   │   │   ├── home.html        
│   │   │   ├── home.scss         
│   │   │   └── home.ts           
│   │   ├── chat                             * chat page
│   │   │   ├── chat.html                    * chat template
│   │   │   ├── chat.scss                    * chat stylesheet
│   │   │   ├── chat.ts                      * chat code
│   │   │   └── chat.module.ts               * chat module
│   │   └── tabs
│   │       ├── tabs.html
│   │       └── tabs.ts
│   ├── service-worker.js
│   └── theme
│       └── variables.scss
├── tsconfig.json
└── tslint.json

Environment

cli packages: 

   @ionic/cli-utils  : 1.12.0
   ionic (Ionic CLI) : 3.13.1

global packages:

   Cordova CLI : 7.0.1 

local packages:

   @ionic/app-scripts : 2.1.4
   Cordova Platforms  : android 6.0.0 browser 4.1.0 ios 4.1.1
   Ionic Framework    : ionic-angular 3.7.1

System:

   ios-deploy : 1.9.1 
   ios-sim    : 6.0.0 
   Node       : v6.9.2
   npm        : 5.4.2 
   OS         : macOS Sierra
   Xcode      : Xcode 9.0 Build version 9A235

ionic3-chat's People

Contributors

Stargazers

Watchers

Forkers

qrry jornason originalsin hkfoxok dodi-br tang1007 frednking wangzhongshan23584 echalkpad lanrehnics 739923259 hogle482 thoughtall lxyhe dawesi habibtalib orrinzeng sebco acoldfox devjuliocesar jiangxiaolhm devkgoon fiv38 baddot antojsh dhcc-lifei neotrixsx shurenzhou aelkz kmhtoo 51100807 donggunn wjs0509 chacal88 yixuhui jelordreygulle ww-gh juchen0429 inandrinan itamayo fatehialqadasi rk-forfuns eisekson jejeabdul rendy14s williams9438 dosoftdata abdelhakimd bharatjain7723 yacel100 joyoduan maantudas91 nsima josetiagobispo huiqiangyang twinice suryopambudi theevil whoget webkader nits-ravis andal-mariappan ekosurya avongeric chandumunna hocjs awei4home onelazyboy maggwilly shilianggit rajanshahsa hypemister shafiqshams adnanmuhib aislanlander twinpigs thiagopov hyperonic kurozumi vmlellis rsginer matrixdekoder yufi113 fawzywassel uphoon webmaster-monresto wanghj0928 adityarw hanu73 hawk1102 ignacionorambuena arumuganainar73 olaw2jr emanbakeer sumantasam1990 sergiobrunacci linox yashodhanapte tonioguns carlosh93

ionic3-chat's Issues

Emoji icon fill is transparent

Hi, by your demo the emoji is yellow and its very nice but when i run it on my host it is transparent

can you help me change it ?

thanks!

Update the message time without reloading the chat page

First thanks for this great application,
I am just wondering how can i get the message time to update itself without reloading the page
It always stuck on the "less than a minute ago" when I stay on the conversation page.

why i can't send and receive emoji icons in ionic 3?

iOS 设备上 , 导航条和底部的输入框存在以下问题

1.当弹起键盘, 顶部的导航条不见了
2.键盘顶起时, 底部的输入框没有跟着一起弹起

Template parse error

'emoji-picker' is not a known element:

If 'emoji-picker' is an Angular component, then verify that it is part of this module.
If 'emoji-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]

help me

how to run your projet decose i can't. Tanks to help me

发现一个不错的表情键盘可否引入

发现一个不错的表情键盘可否引入
https://github.com/danielehrhardt/ionic3-emoji-picker

Problem with <emoji-picker>

i using ionic 3 cli 3.8.0 and is saying is not a ionic tag or something it not working

两次点击输入框会自动收回键盘，这样不利于粘贴内容，另外能否加入表情键盘

如题

a error

HOw integrate app with site php

So, i would like know, how can i integrate this sample with my php web panel on-line agent

Ios keyboard issue

ha, guy. Good job!
But how about IOS ? I know that there are many keyboard issues in IOS.
for example: spellcheck, autocomplete and keyboard scroll issue, those issue is mentions in this ionic forum issue:
https://forum.ionicframework.com/t/about-to-give-up-with-ionic-3-simple-native-like-chat-page-not-possible/87548/20

Would you like to take a look at that and improve you project.

Well done and good luck

Best Regards

ios version

ios version have issue with the status bar

Send location, image and audio ?

Hey thanks for this great contribution! It would be nice if we can send location, image and audio.

emoji undefined

some of the emoji icon appears undefined, only those in square shape appears affected.

const EMOJIS = "😀 😃 😄 😁 😆 😅 😂 🤣 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 🤡 🤠 😏 😒 😞 😔 😟 😕 🙁" +
    " ☹️ 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 🤤 😭 😓 😪 😴 🙄 🤔 🤥 😬 🤐 🤢 🤧 😷 🤒 🤕 😈 👿" +
    " 👹 👺 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🙌 👏 🙏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚" +
    " 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🤳 💅 🖖 💄 💋 👄 👅 👂 👃 👣 👁 👀 🗣 👤 👥 👶 👦 👧 👨 👩 👱‍♀️ 👱 👴 👵 👲 👳‍♀️ 👳 👮‍♀️ 👮 👷‍♀️ 👷" +
    " 💂‍♀️ 💂 🕵️‍♀️ 🕵️ 👩‍⚕️ 👨‍⚕️ 👩‍🌾 👨‍🌾 👩‍🍳 👨‍🍳 👩‍🎓 👨‍🎓 👩‍🎤 👨‍🎤 👩‍🏫 👨‍🏫 👩‍🏭 👨‍🏭 👩‍💻 👨‍💻 👩‍💼 👨‍💼 👩‍🔧 👨‍🔧 👩‍🔬 👨‍🔬" +
    " 👩‍🎨 👨‍🎨 👩‍🚒 👨‍🚒 👩‍✈️ 👨‍✈️ 👩‍🚀 👨‍🚀 👩‍⚖️ 👨‍⚖️ 🤶 🎅 👸 🤴 👰 🤵 👼 🤰 🙇‍♀️ 🙇 💁 💁‍♂️ 🙅 🙅‍♂️ 🙆 🙆‍♂️ 🙋 🙋‍♂️ 🤦‍♀️ 🤦‍♂️ 🤷‍♀" +
    "️ 🤷‍♂️ 🙎 🙎‍♂️ 🙍 🙍‍♂️ 💇 💇‍♂️ 💆 💆‍♂️ 🕴 💃 🕺 👯 👯‍♂️ 🚶‍♀️ 🚶 🏃‍♀️ 🏃 👫 👭 👬 💑 👩‍❤️‍👩 👨‍❤️‍👨 💏 👩‍❤️‍💋‍👩 👨‍❤️‍💋‍👨 👪 👨‍👩‍👧" +
    " 👨‍👩‍👧‍👦 👨‍👩‍👦‍👦 👨‍👩‍👧‍👧 👩‍👩‍👦 👩‍👩‍👧 👩‍👩‍👧‍👦 👩‍👩‍👦‍👦 👩‍👩‍👧‍👧 👨‍👨‍👦 👨‍👨‍👧 👨‍👨‍👧‍👦 👨‍👨‍👦‍👦 👨‍👨‍👧‍👧 👩‍👦 👩‍👧" +
    " 👩‍👧‍👦 👩‍👦‍👦 👩‍👧‍👧 👨‍👦 👨‍👧 👨‍👧‍👦 👨‍👦‍👦 👨‍👧‍👧 👚 👕 👖 👔 👗 👙 👘 👠 👡 👢 👞 👟 👒 🎩 🎓 👑 ⛑ 🎒 👝 👛 👜 💼 👓" +
    " 🕶 🌂 ☂️";