show right panel tabs inside panel instead of room header in grid mode
This commit is contained in:
parent
ec070ea782
commit
f593bff3c3
5 changed files with 47 additions and 5 deletions
|
@ -14,6 +14,11 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_GroupGridView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_GroupGridView_rooms {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, calc(100% / 3));
|
||||
|
@ -21,10 +26,29 @@ limitations under the License.
|
|||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_GroupGridView {
|
||||
|
||||
.mx_GroupGridView_rightPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_GroupGridView_tabs {
|
||||
flex: 0 0 52px;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> div {
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RightPanel {
|
||||
flex: 1 0 auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mx_GroupGridView > .mx_MainSplit {
|
||||
flex: 1 1 0;
|
||||
|
|
|
@ -53,6 +53,10 @@ limitations under the License.
|
|||
.mx_MemberList_query,
|
||||
.mx_GroupMemberList_query,
|
||||
.mx_GroupRoomList_query {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_MemberList .gm-scrollbar-container {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -23,6 +23,7 @@ import RoomView from './RoomView';
|
|||
import classNames from 'classnames';
|
||||
import MainSplit from './MainSplit';
|
||||
import RightPanel from './RightPanel';
|
||||
import RoomHeaderButtons from '../views/right_panel/RoomHeaderButtons';
|
||||
|
||||
export default class RoomGridView extends React.Component {
|
||||
|
||||
|
@ -93,7 +94,15 @@ export default class RoomGridView extends React.Component {
|
|||
roomStores = roomStores.concat(emptyTiles);
|
||||
}
|
||||
const activeRoomId = this.state.activeRoomStore && this.state.activeRoomStore.getRoomId();
|
||||
const rightPanel = activeRoomId ? <RightPanel roomId={activeRoomId} /> : undefined;
|
||||
let rightPanel;
|
||||
if (activeRoomId) {
|
||||
rightPanel = (
|
||||
<div className="mx_GroupGridView_rightPanel">
|
||||
<div className="mx_GroupGridView_tabs"><RoomHeaderButtons /></div>
|
||||
<RightPanel roomId={activeRoomId} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (<main className="mx_GroupGridView">
|
||||
<MainSplit panel={rightPanel}>
|
||||
|
@ -107,7 +116,7 @@ export default class RoomGridView extends React.Component {
|
|||
});
|
||||
return (<section onClick={() => {this._setActive(i)}} key={roomStore.getRoomId()} className={tileClasses}>
|
||||
<RoomView
|
||||
collapsedRhs={true}
|
||||
isGrid={true}
|
||||
roomViewStore={roomStore}
|
||||
isActive={isActive}
|
||||
/>
|
||||
|
|
|
@ -1509,6 +1509,7 @@ module.exports = React.createClass({
|
|||
<RoomHeader ref="header"
|
||||
room={this.state.room}
|
||||
oobData={this.props.oobData}
|
||||
isGrid={this.props.isGrid}
|
||||
collapsedRhs={this.props.collapsedRhs}
|
||||
/>
|
||||
<div className="mx_RoomView_body">
|
||||
|
@ -1555,6 +1556,7 @@ module.exports = React.createClass({
|
|||
<div className="mx_RoomView">
|
||||
<RoomHeader
|
||||
ref="header"
|
||||
isGrid={this.props.isGrid}
|
||||
room={this.state.room}
|
||||
collapsedRhs={this.props.collapsedRhs}
|
||||
/>
|
||||
|
@ -1813,11 +1815,14 @@ module.exports = React.createClass({
|
|||
},
|
||||
);
|
||||
|
||||
const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} /> : undefined;
|
||||
const rightPanel = this.state.room && !this.props.isGrid ?
|
||||
<RightPanel roomId={this.state.room.roomId} /> :
|
||||
undefined;
|
||||
|
||||
return (
|
||||
<main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
|
||||
<RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
|
||||
isGrid={this.props.isGrid}
|
||||
oobData={this.props.oobData}
|
||||
editing={this.state.editingRoomSettings}
|
||||
saving={this.state.uploadingRoomSettings}
|
||||
|
|
|
@ -433,7 +433,7 @@ module.exports = React.createClass({
|
|||
{ saveButton }
|
||||
{ cancelButton }
|
||||
{ rightRow }
|
||||
<RoomHeaderButtons />
|
||||
{ !this.props.isGrid ? <RoomHeaderButtons /> : undefined }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue