diff --git a/css/base.css b/css/base.css index 22c0b714..a3239c4e 100644 --- a/css/base.css +++ b/css/base.css @@ -821,6 +821,15 @@ i.search { height: 7rem; } +.avatar-upload .avatar-box > .material-icons { + position: relative; + width: 7rem; + height: 7rem; + font-size: 4rem; + line-height: 7rem; + vertical-align: middle; +} + /* Clearfix */ .avatar-upload:after { content: "."; @@ -1588,6 +1597,9 @@ ul.tabbar li.active > a:after { #self-avatar.material-icons, .avatar-box .material-icons { font-size: 2.4rem; + width: 3rem; + height: 3rem; + line-height: 3rem; } .avatar-box .material-icons { color: rgba(250, 250, 250, 0.8); /* #fafafa, gray 50 */ diff --git a/src/webapp.jsx b/src/webapp.jsx index be0ca933..211085d6 100644 --- a/src/webapp.jsx +++ b/src/webapp.jsx @@ -1849,7 +1849,7 @@ class SidepanelView extends React.Component { messageSounds={this.props.messageSounds} desktopAlerts={this.props.desktopAlerts} desktopAlertsEnabled={this.props.desktopAlertsEnabled} - onSubmit={this.props.onUpdateAccount} + onUpdateAccount={this.props.onUpdateAccount} onUpdateTags={this.props.onUpdateAccountTags} onTogglePushNotifications={this.props.onTogglePushNotifications} onToggleMessageSounds={this.props.onToggleMessageSounds} @@ -1947,6 +1947,7 @@ class EditAccountView extends React.Component { auth: defacs ? defacs.auth : null, anon: defacs ? defacs.anon : null, tags: fnd.tags(), + showPermissionEditorFor: undefined, previousOnTags: fnd.onTagsUpdated }; @@ -1955,6 +1956,9 @@ class EditAccountView extends React.Component { this.handlePasswordUpdate = this.handlePasswordUpdate.bind(this); this.handleImageChanged = this.handleImageChanged.bind(this); this.handleCheckboxClick = this.handleCheckboxClick.bind(this); + this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this); + this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this); + this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this); this.handleTagsUpdated = this.handleTagsUpdated.bind(this); } @@ -1979,17 +1983,17 @@ class EditAccountView extends React.Component { handleFullNameUpdate(fn) { this.setState({fullName: fn}); - this.props.onSubmit(null, vcard(fn, this.state.avatar)); + this.props.onUpdateAccount(undefined, vcard(fn, this.state.avatar)); } handlePasswordUpdate(pwd) { this.setState({password: pwd}); - this.props.onSubmit(pwd, null); + this.props.onUpdateAccount(pwd); } handleImageChanged(img) { this.setState({avatar: img}); - this.props.onSubmit(null, vcard(this.state.fullName, img)); + this.props.onUpdateAccount(undefined, vcard(this.state.fullName, img)); } handleCheckboxClick(what, checked) { @@ -2000,6 +2004,27 @@ class EditAccountView extends React.Component { } } + handleLaunchPermissionsEditor(which) { + this.setState({ + showPermissionEditorFor: which, + editedPermissions: this.state[which] + }); + } + + handleHidePermissionsEditor() { + this.setState({showPermissionEditorFor: undefined}); + } + + handlePermissionsChanged(perm) { + let defacs = {}; + defacs[this.state.showPermissionEditorFor] = perm; + this.props.onUpdateAccount(undefined, undefined, defacs); + + let newState = {showPermissionEditorFor: undefined}; + newState[this.state.showPermissionEditorFor] = perm; + this.setState(newState); + } + handleTagsUpdated(tags) { // Check if tags have actually changed. if (arrayEqual(this.state.tags.slice(0), tags.slice(0))) { @@ -2017,68 +2042,78 @@ class EditAccountView extends React.Component { tags = No tags defined. Add some.; } return ( -
-
-
-
-
-
-
-
- -
-
-
+ {this.state.showPermissionEditorFor ? + + : +
- - {this.props.myUserId} +
+
+
+
+
+
+
-
- +
+
+
+ + {this.props.myUserId} +
+
+ +
+
+
Auth: {this.state.auth}
+
Anon: {this.state.anon}
+
-
-
Auth: {this.state.auth}
-
Anon: {this.state.anon}
+
+
+ + +
+
+ + +
+
+ + -
-
- - -
-
- - -
-
- - + } ); } }; @@ -3173,7 +3208,7 @@ class InfoView extends React.Component { } handleLaunchPermissionsEditor(which, uid) { - var toEdit, toCompare, toSkip, titleEdit, titleCompare, userTitle, userAvatar + let toEdit, toCompare, toSkip, titleEdit, titleCompare, userTitle, userAvatar; switch (which) { case 'mode': toEdit = this.state.access; @@ -3201,7 +3236,7 @@ class InfoView extends React.Component { toSkip = 'O'; break; case 'user': { - var topic = this.props.tinode.getTopic(this.props.topic); + let topic = this.props.tinode.getTopic(this.props.topic); if (!topic) { return; } @@ -3332,7 +3367,6 @@ class InfoView extends React.Component { userTitle={this.state.userPermissionsTitle} item={this.state.userPermissionsEdited} userAvatar={this.state.userPermissionsAvatar} - skip={this.state.editedPermissionsSkipped} onSubmit={this.handlePermissionsChanged} onCancel={this.handleHidePermissionsEditor} /> @@ -3342,7 +3376,7 @@ class InfoView extends React.Component {
Unknown} readOnly={!this.state.owner} value={this.state.fullName} onFinished={this.handleFullNameUpdate} />
@@ -3393,10 +3427,11 @@ class InfoView extends React.Component { onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}> {this.state.access}
-
{this.state.fullName}′s:   +
{this.state.fullName ? this.state.fullName : "Other"}′s: +   {this.state.modeGiven2} -
+
+
} @@ -3742,6 +3777,7 @@ class Attachment extends React.Component { ); } }; + const NOT_FOUND_TOPIC_TITLE = "Not found"; class MessagesView extends React.Component { @@ -3967,7 +4003,7 @@ class MessagesView extends React.Component { }); } else { this.setState({ - title: NOT_FOUND_TOPIC_TITLE, + title: '', avatar: null }); } @@ -4170,7 +4206,7 @@ class MessagesView extends React.Component {
-
{this.state.title}
+
{this.state.title || Unknown}
{lastSeen}
{groupTopic ? @@ -5122,9 +5158,9 @@ class TinodeWeb extends React.Component { }); } - handleUpdateAccountRequest(password, pub, priv) { - if (pub || priv) { - this.tinode.getMeTopic().setMeta({desc: {public: pub, private: priv}}).catch((err) => { + handleUpdateAccountRequest(password, pub, defacs) { + if (pub || defacs) { + this.tinode.getMeTopic().setMeta({desc: {public: pub, defacs: defacs}}).catch((err) => { this.handleError(err.message, "err"); }); }