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

cosmetic changes, allow aditing of user"s default permissions

Browse Source
This commit is contained in:
or-else
2018-10-21 16:36:01 +03:00
parent 49c0fbfd78
commit 2e02f8a1c8
2 changed files with 121 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+12
View File
@@ -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 */
src/webapp.jsx
+54 -18
View File
@@ -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,6 +2042,13 @@ class EditAccountView extends React.Component {
tags = <i>No tags defined. Add some.</i>;
}
return (
<React.Fragment>{this.state.showPermissionEditorFor ?
<PermissionsEditor
mode={this.state.editedPermissions}
skip="O"
onSubmit={this.handlePermissionsChanged}
onCancel={this.handleHidePermissionsEditor} />
:
<div id="edit-account" className="scrollable-panel">
<div className="panel-form-row">
<div className="panel-form-column">
@@ -2048,8 +2080,10 @@ class EditAccountView extends React.Component {
<label className="small">Default access mode:</label>
</div>
<div className="quoted">
<div>Auth: <tt>{this.state.auth}</tt></div>
<div>Anon: <tt>{this.state.anon}</tt></div>
<div>Auth: <tt className="clickable"
onClick={this.handleLaunchPermissionsEditor.bind(this, 'auth')}>{this.state.auth}</tt></div>
<div>Anon: <tt className="clickable"
onClick={this.handleLaunchPermissionsEditor.bind(this, 'anon')}>{this.state.anon}</tt></div>
</div>
</div>
<div className="hr" />
@@ -2079,6 +2113,7 @@ class EditAccountView extends React.Component {
</a>
</div>
</div>
}</React.Fragment>
);
}
};
@@ -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 {
<div className="panel-form-column">
<div><label className="small">Name</label></div>
<div><InPlaceEdit
placeholder="Group name"
placeholder={this.state.groupTopic ? "Group name" : <i>Unknown</i>}
readOnly={!this.state.owner}
value={this.state.fullName}
onFinished={this.handleFullNameUpdate} /></div>
@@ -3393,10 +3427,11 @@ class InfoView extends React.Component {
onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
{this.state.access}
</tt></div>
<div>{this.state.fullName}&prime;s: &nbsp;<tt className="clickable"
onClick={this.handleLaunchPermissionsEditor.bind(this, 'given')}>
<div>{this.state.fullName ? this.state.fullName : "Other"}&prime;s:
&nbsp;<tt className="clickable" onClick={this.handleLaunchPermissionsEditor.bind(this, 'given')}>
{this.state.modeGiven2}
</tt></div>
</tt>
</div>
</div>
</div>
}
@@ -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 {
<span className={online} />
</div>
<div id="topic-title-group">
<div id="topic-title" className="panel-title">{this.state.title}</div>
<div id="topic-title" className="panel-title">{this.state.title || <i>Unknown</i>}</div>
<div id="topic-last-seen">{lastSeen}</div>
</div>
{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");
});
}