pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated search, better typing indicator

Browse Source
This commit is contained in:
or-else
2018-05-18 14:12:50 -07:00
parent e77513d44b
commit f5af1ff193
2 changed files with 42 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+15 -12
View File
@@ -547,6 +547,14 @@ table.permission-editor td.checkbox {
padding-left: 0.5rem;
}
/* Input with a search icon on the left */
input.search {
text-indent: 1.4rem;
}
i.search {
position: absolute;
left: .6rem;
}
/* Area which displays an error message */
.alert-box {
@@ -703,20 +711,15 @@ table.permission-editor td.checkbox {
/* Typing indicator: animation of the online dot */
.online.typing {
animation: typing 1.5s infinite;
animation: typing 0.5s infinite;
}
@keyframes typing {
0% { background-color: #40C040; }
25% { background-image: radial-gradient(#30D030 0%, #40C040 67%); }
33.3% { background-image: radial-gradient(#10EE10 0%, #40C040 50%); }
41.7% { background-image: radial-gradient(#00FF00 0%, #40C040 35%); }
50% { background-image: radial-gradient(#30D030 0%, #40C040 67%); }
58.3% { background-image: radial-gradient(#10EE10 0%, #40C040 50%); }
66.7% { background-image: radial-gradient(#00FF00 0%, #40C040 35%); }
75% { background-image: radial-gradient(#30D030 0%, #40C040 67%); }
83.3% { background-image: radial-gradient(#10EE10 0%, #40C040 50%); }
91.6% { background-image: radial-gradient(#00FF00 0%, #40C040 35%); }
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(-0.3rem);
}
}
.contact-box .checkmark.material-icons {
index.html
+27 -19
View File
@@ -47,6 +47,9 @@
// Sound to play on message received.
var POP_SOUND = new Audio('audio/msg.mp3');
// Unicode symbol used to clear objects
var DEL_CHAR = "\u2421";
// API key. Use https://github.com/tinode/chat/tree/master/keygen to generate your own
var API_KEY = "AQEAAAABAAD_rAp4DJh05a1HAwFT3A6K";
@@ -2390,11 +2393,15 @@
NewTopicView.SearchContacts = React.createClass({
getInitialState: function() {
return {
edited: false,
search: this.props.searchQuery
};
},
componentWillReceiveProps: function(nextProps) {
this.setState({search: nextProps.searchQuery});
componentWillUnmount: function() {
if (this.state.search) {
this.setState({search: ''});
this.props.onSearchContacts(DEL_CHAR);
}
},
handleSearchChange: function(e) {
this.setState({search: e.target.value});
@@ -2403,9 +2410,16 @@
e.preventDefault();
var query = this.state.search.trim();
if (query.length > 0) {
this.setState({edited: true});
this.props.onSearchContacts(query);
}
},
handleClear: function() {
if (this.state.edited || this.state.search) {
this.props.onSearchContacts(DEL_CHAR);
}
this.setState({search: '', edited: false});
},
handleKeyPress: function(e) {
if (e.key === 'Enter') {
this.handleSearch(e);
@@ -2415,11 +2429,13 @@
return (
<div className="panel-form">
<div className="panel-form-row">
<input type="text" placeholder="List like email:alice@example.com, tel:17025550003..."
value={this.state.search} onChange={this.handleSearchChange}
onKeyPress={this.handleKeyPress} required autoFocus />
<a href="javascript:;" onClick={this.handleSearch}>
<i className="material-icons">search</i>
<i className="material-icons search">search</i>
<input className="search" type="text"
placeholder="List like email:alice@example.com, tel:17025550003..."
value={this.state.search} onChange={this.handleSearchChange}
onKeyPress={this.handleKeyPress} required autoFocus />
<a href="javascript:;" onClick={this.handleClear}>
<i className="material-icons">close</i>
</a>
</div>
</div>
@@ -4095,24 +4111,17 @@
tnInitFind: function() {
var fnd = Tinode.getFndTopic();
if (fnd.isSubscribed()) {
this.setState({contactsSearchQuery: fnd.private ? fnd.private.toString() : ''});
this.setState({contactsSearchQuery: ''});
this.tnFndSubsUpdated();
} else {
fnd.onSubsUpdated = this.tnFndSubsUpdated;
fnd.onMetaDesc = this.tnFndMetaDesc;
var instance = this;
fnd.subscribe(fnd.startMetaQuery().withSub().withLaterDesc().withTags().build()).catch(function(err){
fnd.subscribe(fnd.startMetaQuery().withSub().withTags().build()).catch(function(err){
instance.handleError(err.message, "err");
});
}
},
tnFndMetaDesc: function(desc) {
if (desc.private) {
this.setState({contactsSearchQuery: desc.private.toString()});
}
},
tnFndSubsUpdated: function() {
var contacts = [];
// Don't attempt to create P2P topics which already exist. Server will reject the duplicates.
@@ -4127,9 +4136,8 @@
handleSearchContacts: function(query) {
var fnd = Tinode.getFndTopic();
var instance = this;
fnd.setMeta({desc: {private: query}})
.then(function(ctrl) {
return fnd.getMeta(fnd.startMetaQuery().withSub().withLaterDesc().build());
fnd.setMeta({desc: {public: query}}).then(function(ctrl) {
return fnd.getMeta(fnd.startMetaQuery().withSub().build());
}).catch(function(err){
instance.handleError(err.message, "err");
});