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

make extra parameters collapsible to make more space for tags

Browse Source
This commit is contained in:
or-else
2018-03-28 12:33:31 -07:00
parent 60262291ce
commit fa90ff5bef
2 changed files with 92 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+6 -2
View File
@@ -765,13 +765,17 @@ table.permission-editor td.checkbox {
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 {
.panel-form-row > .panel-form-column,
.panel-form-column > .panel-form-column {
padding: 0!important;
flex-grow: 1;
}
.panel-form-column > .panel-form-row {
.panel-form-column > .panel-form-row,
.panel-form-row > .panel-form-row
{
padding: 0!important;
}
index.html
+86 -46
View File
@@ -528,6 +528,33 @@
}
}
// Toggle [Title text >] -> [Title text v]
class MoreButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
open: this.props.open
};
this.handleToggle = this.handleToggle.bind(this);
}
handleToggle() {
var open = !this.state.open;
this.setState({open: open});
if (this.props.onToggle) {
this.props.onToggle(open);
}
}
render() {
return (<label className="small" onClick={this.handleToggle}>{this.props.title}...
{this.state.open ? <i className="material-icons">expand_more</i> :
<i className="material-icons">chevron_right</i>}
</label>);
}
}
/* BEGIN Lettertile: Avatar box: either a bitmap or a letter tile or a stock icon. */
class LetterTile extends React.PureComponent {
render() {
@@ -2343,7 +2370,8 @@
anon: null,
contactList: [],
showMemberPanel: this.props.showMemberPanel,
showPermissionEditorFor: undefined
showPermissionEditorFor: undefined,
moreInfoExpanded: false
};
},
@@ -2585,7 +2613,9 @@
handleMemberSelected: function(uid) {
this.setState({selectedContact: uid});
},
handleMoreInfo: function(open) {
this.setState({moreInfoExpanded: open});
},
handleContextMenu: function(params) {
var instance = this;
var topic = Tinode.getTopic(this.props.topic);
@@ -2674,65 +2704,75 @@
</div>
<div className="hr" />
<div className="panel-form-column">
<div className="panel-form-row">
<label>Address:</label>
<tt>{this.state.address}</tt>
</div>
<div className="panel-form-row">
<label>Muted:</label>
<CheckBox name="P" checked={this.state.muted}
onChange={this.handleMuted} />
</div>
{this.state.groupTopic ?
<MoreButton
title="More"
open={this.state.moreInfoExpanded}
onToggle={this.handleMoreInfo} />
{this.state.moreInfoExpanded ?
<div className="panel-form-column">
<div className="panel-form-row">
<label>Your permissions:</label>
<tt className="clickable"
onClick={this.handleLaunchPermissionsEditor.bind(this, 'want')}>
{this.state.access}
</tt>
<label>Address:</label>
<tt>{this.state.address}</tt>
</div>
:
<div>
<div><label className="small">Permissions:</label></div>
<div className="quoted">
<div>Yours: &nbsp;<tt className="clickable"
{this.state.groupTopic ?
<div className="panel-form-row">
<label>Your permissions:</label>
<tt className="clickable"
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')}>
{this.state.modeGiven2}
</tt></div>
</tt>
</div>
</div>
}
{this.state.sharer && (this.state.auth || this.state.anon) ?
<div>
<div><label className="small">Default access mode:</label></div>
<div className="quoted">
<div>Auth: {this.state.admin ?
<tt className="clickable"
onClick={this.handleLaunchPermissionsEditor.bind(this, 'auth')}>
{this.state.auth}
</tt>
:
<tt>{this.state.auth}</tt>
}
</div>
<div>Anon: {this.state.admin ?
<tt className="clickable"
onClick={this.handleLaunchPermissionsEditor.bind(this, 'anon')}>
{this.state.anon}
</tt>
:
<tt>{this.state.anon}</tt>
}
:
<div>
<div><label className="small">Permissions:</label></div>
<div className="quoted">
<div>Yours: &nbsp;<tt className="clickable"
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')}>
{this.state.modeGiven2}
</tt></div>
</div>
</div>
}
{this.state.sharer && (this.state.auth || this.state.anon) ?
<div>
<div><label className="small">Default access mode:</label></div>
<div className="quoted">
<div>Auth: {this.state.admin ?
<tt className="clickable"
onClick={this.handleLaunchPermissionsEditor.bind(this, 'auth')}>
{this.state.auth}
</tt>
:
<tt>{this.state.auth}</tt>
}
</div>
<div>Anon: {this.state.admin ?
<tt className="clickable"
onClick={this.handleLaunchPermissionsEditor.bind(this, 'anon')}>
{this.state.anon}
</tt>
:
<tt>{this.state.anon}</tt>
}
</div>
</div>
</div>
:
null
}
</div>
:
null
}
}
</div>
<div className="hr" />
{this.state.groupTopic ?