show right panel tabs inside panel instead of room header in grid mode

This commit is contained in:
Bruno Windels 2018-11-22 17:03:23 +00:00
parent ec070ea782
commit f593bff3c3
5 changed files with 47 additions and 5 deletions

View file

@ -14,6 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_GroupGridView {
display: flex;
flex-direction: column;
}
.mx_GroupGridView_rooms { .mx_GroupGridView_rooms {
display: grid; display: grid;
grid-template-columns: repeat(3, calc(100% / 3)); grid-template-columns: repeat(3, calc(100% / 3));
@ -21,11 +26,30 @@ limitations under the License.
flex: 1 1 0; flex: 1 1 0;
} }
.mx_GroupGridView {
.mx_GroupGridView_rightPanel {
display: flex; display: flex;
flex-direction: column; 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 { .mx_GroupGridView > .mx_MainSplit {
flex: 1 1 0; flex: 1 1 0;
display: flex; display: flex;

View file

@ -53,6 +53,10 @@ limitations under the License.
.mx_MemberList_query, .mx_MemberList_query,
.mx_GroupMemberList_query, .mx_GroupMemberList_query,
.mx_GroupRoomList_query { .mx_GroupRoomList_query {
flex: 0 0 auto;
}
.mx_MemberList .gm-scrollbar-container {
flex: 1 1 0; flex: 1 1 0;
} }

View file

@ -23,6 +23,7 @@ import RoomView from './RoomView';
import classNames from 'classnames'; import classNames from 'classnames';
import MainSplit from './MainSplit'; import MainSplit from './MainSplit';
import RightPanel from './RightPanel'; import RightPanel from './RightPanel';
import RoomHeaderButtons from '../views/right_panel/RoomHeaderButtons';
export default class RoomGridView extends React.Component { export default class RoomGridView extends React.Component {
@ -93,7 +94,15 @@ export default class RoomGridView extends React.Component {
roomStores = roomStores.concat(emptyTiles); roomStores = roomStores.concat(emptyTiles);
} }
const activeRoomId = this.state.activeRoomStore && this.state.activeRoomStore.getRoomId(); 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"> return (<main className="mx_GroupGridView">
<MainSplit panel={rightPanel}> <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}> return (<section onClick={() => {this._setActive(i)}} key={roomStore.getRoomId()} className={tileClasses}>
<RoomView <RoomView
collapsedRhs={true} isGrid={true}
roomViewStore={roomStore} roomViewStore={roomStore}
isActive={isActive} isActive={isActive}
/> />

View file

@ -1509,6 +1509,7 @@ module.exports = React.createClass({
<RoomHeader ref="header" <RoomHeader ref="header"
room={this.state.room} room={this.state.room}
oobData={this.props.oobData} oobData={this.props.oobData}
isGrid={this.props.isGrid}
collapsedRhs={this.props.collapsedRhs} collapsedRhs={this.props.collapsedRhs}
/> />
<div className="mx_RoomView_body"> <div className="mx_RoomView_body">
@ -1555,6 +1556,7 @@ module.exports = React.createClass({
<div className="mx_RoomView"> <div className="mx_RoomView">
<RoomHeader <RoomHeader
ref="header" ref="header"
isGrid={this.props.isGrid}
room={this.state.room} room={this.state.room}
collapsedRhs={this.props.collapsedRhs} 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 ( return (
<main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView"> <main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
<RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo} <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
isGrid={this.props.isGrid}
oobData={this.props.oobData} oobData={this.props.oobData}
editing={this.state.editingRoomSettings} editing={this.state.editingRoomSettings}
saving={this.state.uploadingRoomSettings} saving={this.state.uploadingRoomSettings}

View file

@ -433,7 +433,7 @@ module.exports = React.createClass({
{ saveButton } { saveButton }
{ cancelButton } { cancelButton }
{ rightRow } { rightRow }
<RoomHeaderButtons /> { !this.props.isGrid ? <RoomHeaderButtons /> : undefined }
</div> </div>
</div> </div>
); );