fabricelements / skeleton-chat Goto Github PK
View Code? Open in Web Editor NEWLicense: BSD 3-Clause "New" or "Revised" License
License: BSD 3-Clause "New" or "Revised" License
Try not to use querySelector to obtain values because the Dom is not reliable.
https://github.com/FabricElements/skeleton-chat/blob/master/skeleton-chat-box/skeleton-chat-box.html#L251
firebase-auth
<link rel="import" href="../../polymerfire/firebase-auth.html">
<firebase-auth user="{{user}}"></firebase-auth>
user
/**
* The user Object.
*/
user: {
type: Object,
value: {},
},
_leaveChat
_leaveChat() {
const skeletonMessages = this
.shadowRoot
.querySelector(
'skeleton-chat-messages'
);
this.leave(skeletonMessages.group, skeletonMessages.user.uid);
}
_leaveChat() {
this.leave(this.group, this.user.uid);
}
Review changes made on 2.0 and update on master views. No need to validate that is working because we haven't migrated all and those views don't work, but it needs to be consistent.
Rename function removeUserFromChat
to: leave
.
Docs: https://firebase.google.com/docs/firestore/manage-data/delete-data
Review the Delete fields
Users are not suppose to have permissions to update the users
node just like that, but they can remove their uid
from that object.
Try this:
`users.${uid}`: firebase.firestore.FieldValue.delete()
signedIn
after this line this.signedIn = !(!user);
Read everything first.
We need to set up the main component with navigation or we will end up creating the same functionality on any app we need to implement the chat.
/chats
to /chat
in javascript and on the html wherever is implemented.Work over skeleton-chat.html
Fabric.ChatMixin
app-location
and app-route
(DOCS)iron-pages
or iron-selector
if needed to display the right page. But probably you can end up doing this manually to make it work with what we need. The less components the better.iron-pages
before. Check out this<skeleton-chat-groups>
. If [[routeData.page]]
is =
to chat
and the [[subrouteData.id]]
is not null
you should show <skeleton-chat-box>
. You need to make sure that <skeleton-chat-groups>
is displayed always if there is not [[subrouteData.id]]
.play-views
for now if you need them.Note: Completing this will help us a lot with the experience for the agents on the texting app.
We need a temporary solution for this. We don't have any designs for this.
Please review the most used apps and Google Allo (This is the best for us).
Show a message when the user doesn't have any massages (skeleton-chat-messages
).
Show a message when the user doesn't have any chats (skeleton-chat-groups
).
We are using a component called from-now that is ok for showing the time in the same day but is confusing after that. We need to show a formatted date if it has been more than 1 day.
instead of 2 days ago it should say the date in format dd/mm/yyyy
.
from-now
component if not.After this is done you need to implement the same functionality on connect-views
.
After this line and also this line
Be sure to use the item.updated
property
paper-item-body. Also change the attribute from two-line
to three-line
routeChat: {
type: String,
value: 'chat',
},
routeLeave: {
type: String,
value: null,
},
pattern$="/[[routeChat]]"
close-chat
event listener /**
* Connected callback
*/
connectedCallback() {
super.connectedCallback();
this.addEventListener('close-chat', () => {
this.routeData.page = this.routeLeave ? this.routeLeave : this.routeChat;
this.notifyPath('routeData');
this.notifyPath('routeData.page');
this.chatBoxActive = false;
}, true);
}
then
here with this. This event should close the chat the right way. this.dispatchEvent(new CustomEvent('close-chat', {
bubbles: true,
composed: true,
}));
linkBack
in components: skeleton-chat
and skeleton-chat-groups
linkBack: {
type: String,
value: "/"
}
skeleton-chat
too. Here<skeleton-chat-groups link-back$="[[linkBack]]" ></skeleton-chat-groups>
skeleton-chat-groups
. L57 <a href$="[[linkBack]]" tabindex="-1">
Implement the behavior in skeleton-chat-messages.html
. Call _scrollToLast
on iron-resize
https://github.com/FabricElements/fabric-imgix/blob/master/fabric-imgix.html#L3
https://github.com/FabricElements/fabric-imgix/blob/master/fabric-imgix.html#L64
https://github.com/FabricElements/fabric-imgix/blob/master/fabric-imgix.html#L423
Create method _extractHyperlinks(message)
Extract links and return like this:
From:
This is a demo http://test.com
to:
This is a demo <a href="http://test.com" target="_blak">http://test.com</a>
const baseMessage = _extractHyperlinks(message.text);
this._setText(baseMessage);
inner-h-t-m-l
to print new string in #L255<div class="text-translation" hidden$="[[showOriginal]]" inner-h-t-m-l$="[[text]]"></div>
uid: this.user.uid,
type: "default",
owner
value. #L433this._setIsOwner(thi.uid === message.uid);
else
after this lineusers/uid
;this._messageUser(message.user)
user.image
to user.avatar
;A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.