diff --git a/css/base.css b/css/base.css index 1abaf048..aa88fe9f 100644 --- a/css/base.css +++ b/css/base.css @@ -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; } diff --git a/index.html b/index.html index b834e70e..2aac0b98 100644 --- a/index.html +++ b/index.html @@ -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 (); + } + } + /* 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 @@