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

more or less complete

Browse Source
This commit is contained in:
or-else
2021-08-08 18:51:25 -07:00
parent fcb61dcc3b
commit 1c0b464bed
25 changed files with 407 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/contact.jsx
+1 -1
View File
@@ -114,7 +114,7 @@ class Contact extends React.Component {
</div>
{this.props.showMode ?
<span><ContactBadges badges={badges} /></span> :
<div className="contact-comment">{marker}{subtitle || '\u00A0'}</div>}
this.props.small ? null : <div className="contact-comment">{marker}{subtitle || '\u00A0'}</div>}
</div>
{this.props.showContextMenu ?
<span className="menuTrigger">
src/widgets/in-place-edit.jsx
+2 -4
View File
@@ -97,7 +97,6 @@ export default class InPlaceEdit extends React.Component {
let element;
const attr = {};
let value = null;
if (this.props.type == 'password') {
element = VisiblePassword;
attr.onFinished = this.handlePasswordFinished;
@@ -106,12 +105,11 @@ export default class InPlaceEdit extends React.Component {
element = 'textarea';
attr.rows = this.props.multiline;
attr.className = 'inplace-edit';
value = this.state.value;
} else {
element = 'input';
attr.type = this.props.type || 'text';
attr.value = this.state.value;
}
attr.value = this.state.value;
attr.onChange = this.handeTextChange;
attr.onKeyDown = this.handleKeyDown;
attr.onBlur = this.handleEditingFinished;
@@ -122,6 +120,6 @@ export default class InPlaceEdit extends React.Component {
attr.autoFocus = true;
attr.ref = this.selfRef;
return React.createElement(element, attr, value);
return React.createElement(element, attr, null);
}
};
src/widgets/more-button.jsx
-29
View File
@@ -1,29 +0,0 @@
// Toggle [Title text >] -> [Title text v]
import React from 'react';
export default class MoreButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
open: props.open
};
this.handleToggle = this.handleToggle.bind(this);
}
handleToggle() {
const open = !this.state.open;
this.setState({open: open});
if (this.props.onToggle) {
this.props.onToggle(open);
}
}
render() {
return (<label className="small clean-clickable" onClick={this.handleToggle}>{this.props.title}...
{this.state.open ? <i className="material-icons">expand_more</i> :
<i className="material-icons">chevron_right</i>}
</label>);
}
}
src/widgets/new-topic-group.jsx
+1 -1
View File
@@ -115,7 +115,7 @@ export default class NewTopicGroup extends React.PureComponent {
defaultMessage="This is a channel"
description="Checkbox label when creating a channel" /></label>
</div>
<FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
<FormattedMessage id="title_tag_manager" defaultMessage="Tags (search & discovery)"
description="Section title for TagManager">{
(title) => <TagManager
tags={this.state.tags}
src/widgets/permissions-editor.jsx
+2 -1
View File
@@ -132,9 +132,10 @@ class PermissionsEditor extends React.Component {
return (
<div className="panel-form-column">
{this.props.userTitle ?
<ul className="contact-box"><Contact
<ul className="contact-box small"><Contact
item={this.props.item}
title={this.props.userTitle}
small={true}
avatar={makeImageUrl(this.props.userAvatar ? this.props.userAvatar : null)} /></ul> : null}
<label className="small"><FormattedMessage id="title_permissions"
defaultMessage="Permissions" description="Section title"/></label>
src/widgets/topic-common.jsx
+1 -24
View File
@@ -3,17 +3,10 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import Tinode from 'tinode-sdk';
import AvatarUpload from '../widgets/avatar-upload.jsx';
import InPlaceEdit from '../widgets/in-place-edit.jsx';
import TagManager from '../widgets/tag-manager.jsx';
import TopicDescEdit from '../widgets/topic-desc-edit.jsx';
import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE,
MAX_INBAND_ATTACHMENT_SIZE, MAX_TITLE_LENGTH } from '../config.js';
import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
import { arrayEqual, asEmail, asPhone, theCard } from '../lib/utils.js';
import { arrayEqual, asEmail, asPhone } from '../lib/utils.js';
export default class TopicCommon extends React.Component {
constructor(props) {
@@ -178,22 +171,6 @@ export default class TopicCommon extends React.Component {
</>
: null
}
{this.state.owner ?
<>
<div className="hr" />
<FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
description="Section title for TagManager">{
(tags) => <TagManager
title={tags}
tags={this.state.tags}
activated={false}
tinode={this.props.tinode}
onSubmit={this.handleTagsUpdated} />
}</FormattedMessage>
</>
:
null
}
</div>
);
}
src/widgets/topic-desc-edit.jsx
+3 -3
View File
@@ -71,7 +71,7 @@ export default class TopicDescEdit extends React.Component {
comment = comment.trim().substring(0, MAX_TITLE_LENGTH);
if (this.state.private !== comment) {
this.setState({private: comment});
this.props.onTopicDescUpdate(this.props.topic, null, comment || Tinode.DEL_CHAR);
this.props.onUpdateTopicDesc(this.props.topic, null, comment || Tinode.DEL_CHAR);
}
}
@@ -211,7 +211,7 @@ export default class TopicDescEdit extends React.Component {
<div>
<InPlaceEdit
placeholder={this.state.groupTopic ? "Group name" : <i>Unknown</i>}
readOnly={editable}
readOnly={!editable}
value={this.state.fullName}
required={true}
onFinished={this.handleFullNameUpdate} />
@@ -262,7 +262,7 @@ export default class TopicDescEdit extends React.Component {
{editable ?
<>
<div className="hr" />
<FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
<FormattedMessage id="title_tag_manager" defaultMessage="Tags (search & discovery)"
description="Section title for TagManager">{
(title_tag_manager) => <TagManager
title={title_tag_manager}
src/widgets/topic-security.jsx
+50 -34
View File
@@ -4,6 +4,8 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import InPlaceEdit from './in-place-edit.jsx';
import { NO_ACCESS_MODE } from '../config.js';
const messages = defineMessages({
clear_messages: {
id: 'action_clear_messages',
@@ -74,6 +76,18 @@ class TopicSecurity extends React.Component {
const defacs = topic.getDefaultAccess() || {};
const acs = topic.getAccessMode();
let modeGiven2 = NO_ACCESS_MODE;
let modeWant2 = NO_ACCESS_MODE;
if (topic.getType() == 'p2p') {
// Fetch the other party in the p2p conversation.
// Topic may not be ready yet, so check if user is found.
const user2 = topic.subscriber(props.topic);
if (user2 && user2.acs) {
modeGiven2 = user2.acs.getGiven();
modeWant2 = user2.acs.getWant();
}
}
this.state = {
owner: acs && acs.isOwner(),
admin: acs && acs.isAdmin(),
@@ -86,22 +100,18 @@ class TopicSecurity extends React.Component {
access: acs ? acs.getMode() : undefined,
modeGiven: acs ? acs.getGiven() : undefined,
modeWant: acs ? acs.getWant() : undefined,
modeGiven2: modeGiven2, // P2P topic, the other user mode given
modeWant2: modeWant2, // P2P topic, the other user mode want
auth: defacs ? defacs.auth : null,
anon: defacs ? defacs.anon : null,
};
this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
this.handleDeleteMessages = this.handleDeleteMessages.bind(this);
this.handleLeave = this.handleLeave.bind(this);
this.handleBlock = this.handleBlock.bind(this);
this.handleReport = this.handleReport.bind(this);
}
handleLaunchPermissionsEditor(which) {
this.props.onNavigate(`perm/${which}/${this.state[which] || ''}`);
}
handleDeleteMessages(e) {
e.preventDefault();
const {formatMessage} = this.props.intl;
@@ -189,15 +199,33 @@ class TopicSecurity extends React.Component {
<div className="hr" />
<div className="panel-form-column">
{this.state.groupTopic ?
<div className="group">
<label>
<FormattedMessage id="label_your_permissions" defaultMessage="Your permissions:"
description="Label for current user permissions" />
</label> <tt className="clickable"
onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
{this.state.access}
</tt>
</div>
<>
<div className="group">
<label>
<FormattedMessage id="label_your_permissions" defaultMessage="Your permissions:"
description="Label for current user permissions" />
</label> <tt className="clickable"
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('want')}}>
{this.state.access}
</tt>
</div>
<div className="group">
<div>
<label className="small">
<FormattedMessage id="label_default_access_mode" defaultMessage="Default access mode:"
description="Label for default access mode" />
</label>
</div>
<div className="quoted">
<div>Auth: <tt className="clickable"
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('auth')}}>{this.state.auth}</tt>
</div>
<div>Anon: <tt className="clickable"
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('anon')}}>{this.state.anon}</tt>
</div>
</div>
</div>
</>
:
<div className="group">
<div>
@@ -210,31 +238,19 @@ class TopicSecurity extends React.Component {
<div>
<FormattedMessage id="label_you" defaultMessage="You:"
description="Label for the current user" /> <tt className="clickable"
onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
{this.state.access}
</tt></div>
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('want')}}>
{this.state.access}
</tt>
</div>
<div>{this.state.fullName ? this.state.fullName : formatMessage(messages.other_user)}:
&nbsp;<tt className="clickable" onClick={this.handleLaunchPermissionsEditor.bind(this, 'given')}>
{this.state.modeGiven2}
&nbsp;<tt className="clickable"
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('given')}}>
{this.state.modeGiven2}
</tt>
</div>
</div>
</div>
}
<div className="group">
<div>
<label className="small">
<FormattedMessage id="label_default_access_mode" defaultMessage="Default access mode:"
description="Label for default access mode" />
</label>
</div>
<div className="quoted">
<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>
</div>
);