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

finished topic creation/deletion

Browse Source
This commit is contained in:
Gene S
2016-03-10 18:54:26 -08:00
parent 1db21526e1
commit e28655a64c
2 changed files with 83 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+17 -10
View File
@@ -345,6 +345,13 @@ ul.menu > li.separator:hover {
} }
/* List of contacts */ /* List of contacts */
.flex-column {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.contacts-panel { .contacts-panel {
overflow-y: auto; overflow-y: auto;
margin-top: 1rem;: margin-top: 1rem;:
@@ -772,26 +779,26 @@ ul.menu > li.separator:hover {
/* END of modal dialog */ /* END of modal dialog */
/* BEGIN Tabs */ /* BEGIN Tabs */
.tabbar {
padding-top: 1rem;
background: #eeeeee; /* #2196f3; */
}
.tabbar > ul { ul.tabbar {
flex-shrink: 0;
flex-grow: 0;
background: #eeeeee;
list-style:none; list-style:none;
margin:0; margin:0;
width:100%; width:100%;
overflow:hidden; overflow:hidden;
padding:0; padding:0;
margin-left:1rem; padding-left:1rem;
} }
.tabbar > ul > li { ul.tabbar > li {
float: left; float: left;
} }
.tabbar > ul > li > a { ul.tabbar > li > a {
position: relative; position: relative;
padding-top: 0.75rem;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
display: block; display: block;
@@ -805,11 +812,11 @@ ul.menu > li.separator:hover {
box-shadow: inset 0 -2px 2.5px -1px rgba(0,0,0,0.5); box-shadow: inset 0 -2px 2.5px -1px rgba(0,0,0,0.5);
} }
.tabbar li.active > a { ul.tabbar li.active > a {
color: #2196f3; color: #2196f3;
} }
.tabbar li.active > a:after { ul.tabbar li.active > a:after {
height:0.15rem; height:0.15rem;
display:block; display:block;
content:""; content:"";
index.html
+66 -55
View File
@@ -673,14 +673,14 @@
this.forceUpdate(); this.forceUpdate();
} else if (what === "msg") { } else if (what === "msg") {
// Skip update if the topic is currently open, otherwise the badge will annoyingly flash. // Skip update if the topic is currently open, otherwise the badge will annoyingly flash.
if (this.props.topicSelected !== cont.src) { if (this.props.topicSelected !== cont.topic) {
this.forceUpdate(); this.forceUpdate();
} }
} else if (what === "recv") { } else if (what === "recv") {
// Explicitly ignoring "recv" // Explicitly ignoring "recv"
} else if (what === "del") { } else if (what === "del") {
// Currently selected topic is deleted, clear selection. // Currently selected topic is deleted, clear selection.
if (this.props.topicSelected === cont.src) { if (this.props.topicSelected === cont.topic) {
this.props.onTopicSelected(null); this.props.onTopicSelected(null);
} }
// Redraw without the deleted topic. // Redraw without the deleted topic.
@@ -688,7 +688,6 @@
} else { } else {
// TODO(gene): handle other types of notifications // TODO(gene): handle other types of notifications
console.log("changed (not updating for it): " + what + " in:"); console.log("changed (not updating for it): " + what + " in:");
console.log(cont);
} }
}, },
tnInvite: function(invite) { tnInvite: function(invite) {
@@ -765,7 +764,6 @@
} }
}, },
handleGroupSubmit: function(name, dataUrl) { handleGroupSubmit: function(name, dataUrl) {
//this.setState({errorCleared: false});
var vcard = null; var vcard = null;
if (name || dataUrl) { if (name || dataUrl) {
vcard = { vcard = {
@@ -783,20 +781,21 @@
}, },
render: function() { render: function() {
return ( return (
<div> <div className="flex-column">
<div className="tabbar"> <ul className="tabbar">
<ul> <li className={this.state.tabSelected === "p2p" ? "active" : null}>
<li className={this.state.tabSelected === "p2p" ? "active" : null}> <a href="#" data-id="p2p" onClick={this.handleTabClick}>1:1</a>
<a href="#" data-id="p2p" onClick={this.handleTabClick}>1:1</a> </li>
</li> <li className={this.state.tabSelected === "grp" ? "active" : null}>
<li className={this.state.tabSelected === "grp" ? "active" : null}> <a href="#" data-id="grp" onClick={this.handleTabClick}>group</a>
<a href="#" data-id="grp" onClick={this.handleTabClick}>group</a> </li>
</li> </ul>
</ul>
</div>
{this.state.tabSelected === "grp" ? {this.state.tabSelected === "grp" ?
<NewTopicView.Group onSubmit={this.handleGroupSubmit} /> : <NewTopicView.Group onSubmit={this.handleGroupSubmit} /> :
<NewTopicView.SelectContacts onContactSelected={this.handleContactSelected} type="p2p" />} <div className="flex-column">
<NewTopicView.SearchContacts type="p2p" />
<NewTopicView.ContactsList onContactSelected={this.handleContactSelected} type="p2p" />
</div>}
</div> </div>
); );
} }
@@ -813,7 +812,6 @@
this.setState({fn: e.target.value}); this.setState({fn: e.target.value});
}, },
handleImageChanged: function(img) { handleImageChanged: function(img) {
console.log(img);
this.setState({imageDataUrl: img}); this.setState({imageDataUrl: img});
}, },
handleSubmit: function(e) { handleSubmit: function(e) {
@@ -842,10 +840,37 @@
} }
}); });
NewTopicView.SelectContacts = React.createClass({ NewTopicView.SearchContacts = React.createClass({
getInitialState: function() {
return {
search: null
};
},
handleSearchChange: function(e) {
this.setState({search: e.target.value});
},
handleSearch: function(e) {
e.preventDefault();
console.log("will search for '" + this.state.search + "'");
},
render: function() {
return (
<form className="panel-form" onSubmit={this.handleFindContacts}>
<div className="panel-form-one">
<input type="text" placeholder="Emails or phones to find" value={this.state.search}
onChange={this.handleSearchChange} required />
<a href="#" onClick={this.handleSearch}>
<i className="material-icons">search</i>
</a>
</div>
</form>
);
}
});
NewTopicView.ContactsList = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
search: null,
selectedUser: null selectedUser: null
}; };
}, },
@@ -856,13 +881,6 @@
console.log(sel); console.log(sel);
} }
}, },
handleSearchChange: function(e) {
this.setState({search: e.target.value});
},
handleSearch: function(e) {
e.preventDefault();
console.log("will search for '" + this.state.search + "'");
},
render: function() { render: function() {
var contactNodes = []; var contactNodes = [];
// Don't attempt to create P2P topics which already exist. Server will reject the duplicates. // Don't attempt to create P2P topics which already exist. Server will reject the duplicates.
@@ -882,21 +900,10 @@
); );
}, this); }, this);
return ( return (
<div> <div className="contacts-panel">
<form className="panel-form" onSubmit={this.handleFindContacts}> <ul className="contact-box">
<div className="panel-form-one"> {contactNodes}
<input type="text" placeholder="Emails or phones to find" value={this.state.search} </ul>
onChange={this.handleSearchChange} required />
<a href="#" onClick={this.handleSearch}>
<i className="material-icons">search</i>
</a>
</div>
</form>
<div className="contacts-panel">
<ul className="contact-box">
{contactNodes}
</ul>
</div>
</div> </div>
); );
} }
@@ -1003,7 +1010,9 @@
this.propsChange(nextProps); this.propsChange(nextProps);
}, },
propsChange: function(props) { propsChange: function(props) {
if (props.topic && (props.topic != this.state.topic)) { if (!props.topic) {
this.setState({messages: [], topic: null});
} else if (props.topic != this.state.topic) {
var msgs = []; var msgs = [];
var topic = Tinode.getTopic(props.topic); var topic = Tinode.getTopic(props.topic);
// Bind the new topic to component. // Bind the new topic to component.
@@ -1341,9 +1350,15 @@
Tinode.getTopic(data.topic).noteRecv(data.seq); Tinode.getTopic(data.topic).noteRecv(data.seq);
}, RECEIVED_DELAY); }, RECEIVED_DELAY);
}, },
// User clicked on a contact in the side panel. // User clicked on a contact in the side panel or deleted a contact.
handleTopicSelected: function(topicName) { handleTopicSelected: function(topicName) {
this.setState({topicSelected: topicName, mobilePanel: 'topic-view'}); if (topicName) {
// Contact selected
this.setState({topicSelected: topicName, mobilePanel: 'topic-view'});
} else {
// Currently selected contact deleted
this.setState({topicSelected: null, mobilePanel: 'sidepanel'});
}
}, },
// In mobile view user requested to show sidepanel // In mobile view user requested to show sidepanel
handleHideMessageView: function() { handleHideMessageView: function() {
@@ -1401,19 +1416,15 @@
var params = {get: {desc: {}, data: {}}}; var params = {get: {desc: {}, data: {}}};
if (!peerName) { if (!peerName) {
params.get.sub = {}; // Fetch subs for grp topics only. Subscriptions for a p2p topic are useless. params.get.sub = {}; // Fetch subs for grp topics only. Subscriptions for a p2p topic are useless.
params.set = {set: {desc: {public: vcard}}}; params.set = {desc: {public: vcard}};
} }
topic.subscribe(params).then(function() { topic.subscribe(params).then(function() {
if (peerName) { instance.setState({
instance.setState({ errorText: '',
errorText: '', topicSelected: topic.name,
topicSelected: topic.name, sidePanelSelected: 'contacts',
sidePanelSelected: 'contacts', mobilePanel: 'topic-view'
mobilePanel: 'topic-view' });
});
} else {
console.log("new group topic created: " + topic.name);
}
}).catch(function(err) { }).catch(function(err) {
instance.setState({errorText: err.message}); instance.setState({errorText: err.message});
}); });