From 45eb91765b5b651d0754eedd0065cabaf9bbff9d Mon Sep 17 00:00:00 2001 From: or-else Date: Thu, 29 Jun 2017 14:02:16 +0300 Subject: [PATCH] more refactoring of topic and account editing --- css/base.css | 39 ++++++-- index.html | 278 +++++++++++++++++++++++++++++++++++---------------- 2 files changed, 219 insertions(+), 98 deletions(-) diff --git a/css/base.css b/css/base.css index c4081f7c..3d00b132 100644 --- a/css/base.css +++ b/css/base.css @@ -40,14 +40,15 @@ a:focus { form { font-size: 1.1rem; padding: 0.5rem 0.75rem; - line-height: 1.75; + line-height: 1.5; } -form label { +label { font-size: 1.1rem; + margin-right: auto; } -form label.small { +label.small { color: #1e88e5; font-size: 0.95rem; } @@ -251,7 +252,7 @@ ul.menu > li.separator:hover { position: relative; display: flex; flex-direction: column; - flex-grow: 0.3; + flex-grow: 0; flex-shrink: 0.3; width: 24rem; min-width: 18rem; @@ -268,7 +269,7 @@ ul.menu > li.separator:hover { #info-view { display: flex; flex-direction: column; - flex-grow: 0.3; + flex-grow: 0; flex-shrink: 0.3; width: 24rem; min-width: 18rem; @@ -461,6 +462,8 @@ ul.menu > li.separator:hover { display: flex; padding: 0.35rem 0.25rem 0.5rem 0.35rem; min-height: 3.5rem; + flex-grow: 0; + flex-shrink: 0; border-bottom: 1px solid #eee; } .contact-box > li:hover { @@ -544,20 +547,35 @@ ul.menu > li.separator:hover { flex-direction: column; } -.panel-form-one { +.panel-form-row { display: flex; justify-content: flex-start; align-items: center; + padding: 0.5rem 0.75rem; + line-height: 1.5; + flex-grow: 0; + flex-shrink: 0; } -.panel-form-two { +.panel-form-column { display: flex; flex-direction: column; - flex-grow: 1; + flex-grow: 0; + flex-shrink: 0; + padding: 0.5rem 0.75rem; + line-height: 1.5; +} +/* Make sure padding is only applied at + the top level panel */ +.panel-form-row > .panel-form-column { + padding: 0!important; + flex-grow: 1; +} +.panel-form-column > .panel-form-row { + padding: 0!important; } - -/* Styling of avatar upload area in the New Account panel */ +/* Styling of avatar upload control */ .avatar-upload { display: flex; flex-direction: column; @@ -565,6 +583,7 @@ ul.menu > li.separator:hover { width: 7rem; height: 9rem; margin-left: 0.5rem; + font-size: 4.5rem; padding: 0; } /* Clearfix */ diff --git a/index.html b/index.html index 3cc5b688..30b2f2ed 100644 --- a/index.html +++ b/index.html @@ -244,9 +244,13 @@ this.setState({text: e.target.value}); }, - handleKeyPress: function(e) { + handleKeyDown: function(e) { if (e.keyCode === 27) { + // Escape pressed this.setState({text: this.props.text, active: false}); + } else if (e.keyCode === 13) { + // Enter pressed + this.handleEditingFinished(); } }, @@ -257,8 +261,9 @@ handleEditingFinished: function() { this.setState({active: false}); - if (this.state.text !== this.props.text) { - this.props.onFinished(this.state.text); + var text = this.state.text.trim(); + if (text !== this.props.text) { + this.props.onFinished(text); } }, @@ -271,8 +276,8 @@ spanText = this.props.placeholder; spanClass += " placeholder"; } - if (spanText.length > 16) { - spanText = spanText.substring(0, 16) + "..."; + if (spanText.length > 20) { + spanText = spanText.substring(0, 19) + "..."; } return ( this.state.active ? @@ -280,7 +285,7 @@ value={this.state.text} placeholder={this.props.placeholder} onChange={this.handeTextChange} - onKeyPress={this.handleKeyPress} + onKeyDown={this.handleKeyDown} onBlur={this.handleEditingFinished} autoFocus /> : @@ -448,8 +453,8 @@ } return (
-
-
+
+
{this.state.dataUrl ? : -
128×128
} + this.props.readOnly && this.props.uid ? + : +
128×128
} {this.props.readOnly ? null : } @@ -726,8 +733,6 @@ var EditAccountView = React.createClass({ getInitialState: function() { return { - updatedDesc: false, - updatedPasswd: false, address: null, fullName: undefined, avatar: null, @@ -743,7 +748,6 @@ fullName: me.public ? me.public.fn : undefined, avatar: makeImageUrl(me.public ? me.public.photo : null), address: Tinode.getCurrentUserID(), - login: this.props.login, auth: defacs.auth, anon: defacs.anon }); @@ -758,29 +762,23 @@ }, handleFullNameUpdate: function(fn) { - this.setState({updatedDesc: true, fullName: fn}); + this.setState({fullName: fn}); + this.props.onSubmit(null, vcard(fn, this.state.avatar)); }, handlePasswordUpdate: function(pwd) { - this.setState({updatedPasswd: true, password: pwd}); + this.setState({password: pwd}); + this.props.onSubmit(pwd, null); }, handleImageChanged: function(img) { - this.setState({updatedDesc: true, avatar: img}); - }, - - handleSubmit: function(e) { - e.preventDefault(); - if (this.state.updatedDesc || this.state.updatedPasswd) { - this.props.onSubmit( - this.state.updatedPasswd ? this.state.password : null, - this.state.updatedDesc ? vcard(this.state.fullName, this.state.avatar) : null); - } + this.setState({avatar: img}); + this.props.onSubmit(null, vcard(this.state.fullName, img)); }, render: function() { return ( - -
-
+
+
+
-
-
Login: {this.state.login}
-
Address: {this.state.address}
- -
+
+
+ + {this.props.login} +
+
+ + {this.state.address} +
+
+ +
Auth: {this.state.auth}
Anon: {this.state.anon}
-
- -
- +
); } }); @@ -845,7 +849,7 @@
- + {this.props.showOnline ? : null}
{title} @@ -966,6 +970,7 @@ contacts={this.state.contactList} emptyListMessage={You have no chats
¯\_(ツ)_/¯} topicSelected={this.props.topicSelected} + showOnline={true} onTopicSelected={this.props.onTopicSelected} showContextMenu={this.props.showContextMenu} /> ); @@ -980,6 +985,10 @@ var contactNodes = []; if (this.props.contacts && this.props.contacts.length > 0) { this.props.contacts.map(function(c) { + var key = c.topic ? c.topic : c.user; + if (!key) { + console.log("empty key!"); + } contactNodes.push( + topic={key} + key={key} /> ); }, this); } @@ -1109,8 +1119,8 @@ } return (
-
-
+
+
@@ -1152,7 +1162,7 @@ render: function() { return ( -
+
@@ -1211,11 +1221,14 @@ getInitialState: function() { return { owner: false, - updated: false, address: null, + groupTopic: undefined, fullName: undefined, avatar: null, - private: null + private: null, + selectedContact: null, + muted: undefined, + contactList: [] }; }, componentWillMount: function() { @@ -1225,6 +1238,31 @@ } topic.onMetaDesc = this.onMetaDesc; + topic.onSubsUpdated = this.onSubsUpdated; + this.resetDesc(topic); + this.resetSubs(topic); + }, + + componentWillUnmount: function() { + var topic = Tinode.getTopic(this.props.topic); + if (!topic) { + return; + } + topic.onMetaDesc = undefined; + topic.onSubsUpdated = undefined; + }, + + resetSubs: function(topic) { + var contacts = []; + topic.subscribers(function(sub){ + contacts.push(sub); + }, this); + this.setState({ + contactList: contacts + }); + }, + + resetDesc: function(topic) { var defacs = topic.getDefaultAccess() || {}; var acs = topic.getAccessMode(); this.setState({ @@ -1233,30 +1271,62 @@ avatar: makeImageUrl(topic.public ? topic.public.photo : null), private: topic.private, address: topic.name, + groupTopic: (topic.getType() === "grp"), auth: defacs.auth, - anon: defacs.anon + anon: defacs.anon, + muted: acs && acs.isMuted() }); }, - componentWillUnmount: function() { + + onMetaDesc: function(desc) { var topic = Tinode.getTopic(this.props.topic); if (!topic) { return; } - topic.onMetaDesc = undefined; + this.resetDesc(topic); }, - onMetaDesc: function(desc) { - // Update form with changed values + onSubsUpdated: function() { + var topic = Tinode.getTopic(this.props.topic); + if (!topic) { + return; + } + this.resetSubs(topic); }, handleFullNameUpdate: function(fn) { - this.setState({updated: true, fullName: fn}); + this.setState({fullName: fn}); + this.props.onSubmit(this.props.topic, + vcard(fn, this.state.avatar), + null); }, + handlePrivateUpdate: function(priv) { - this.setState({updated: true, private: priv}); + this.setState({private: priv}); + this.props.onSubmit(this.props.topic, + null, + priv); }, + handleImageChanged: function(img) { - this.setState({updated: true, avatar: img}); + this.setState({avatar: img}); + this.props.onSubmit(this.props.topic, + vcard(this.state.fullName, img), + priv); + }, + + handleMuted: function(e) { + var checked = e.target.checked; + this.setState({muted: checked}); + this.props.onChangePermissions(this.props.topic, checked ? "-P" : "+P"); + }, + + handleMemberSelected: function(uid) { + this.setState({selectedContact: uid}); + }, + + handleContextMenu: function(item) { + console.log("context menu: " + item); }, handleSubmit: function(e) { @@ -1277,43 +1347,63 @@
- -
-
-
-
-
-
-
- +
+
+
+
+
+
-
-
Address: {this.state.address}
- {this.state.auth || this.state.anon ? -
-
-
-
Auth: {this.state.auth}
-
Anon: {this.state.anon}
-
+ +
+
+
+ + {this.state.address} +
+
+ + +
+ {this.state.auth || this.state.anon ? +
+
+
+
Auth: {this.state.auth}
+
Anon: {this.state.anon}
- : - null - } -
-
- -
- +
+ : + null + } +
+ {this.state.groupTopic ? +
+ +
: null} + {this.state.groupTopic ? + + : null}
); } @@ -1897,7 +1987,6 @@ }, handleUpdateAccountRequest: function(password, pub, priv) { - this.handleSidepanelCancel(); if (pub || priv) { Tinode.getMeTopic().setMeta({desc: {public: pub, private: priv}}); } @@ -1964,6 +2053,18 @@ var topic = Tinode.getTopic(topicName); topic.setMeta({desc: {public: pub, private: priv}}); }, + + handleChangePermissions: function(topicName, want) { + var topic = Tinode.getTopic(topicName); + if (!topic) { + return; + } + + var am = topic.getAccessMode(); + am.updateWant(want); + topic.setMeta({sub: {mode: am.getWant()}}); + }, + /** Called when the user enters a contact into the contact search field in the NewAccount panel @param query {Array} is an array of contacts to search for */ @@ -2122,6 +2223,7 @@ topic={this.state.topicSelected} onSubmit={this.handleTopicUpdateRequest} onCancel={this.handleHideInfoView} + onChangePermissions={this.handleChangePermissions} /> : null