PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

add right panel back to grid view

Browse source
This commit is contained in:
Bruno Windels 2018-11-22 16:00:11 +00:00
parent 44200a6f78
commit 74becf71d8
2 changed files with 44 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
res/css/structures/_GroupGridView.scss
View file

@ -14,13 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_GroupGridView {
.mx_GroupGridView_rooms {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
background-color: red;
flex: 1 1 0;
}
.mx_GroupGridView {
display: flex;
flex-direction: column;
}
.mx_GroupGridView > .mx_MainSplit {
flex: 1 1 0;
display: flex;
}
.mx_GroupGridView_emptyTile::before {
display: block;
@ -67,32 +76,32 @@ limitations under the License.
height: 100%;
}
.mx_GroupGridView > *:nth-child(1) {
.mx_GroupGridView_rooms > *:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.mx_GroupGridView > *:nth-child(2) {
.mx_GroupGridView_rooms > *:nth-child(2) {
grid-column: 2;
grid-row: 1;
}
.mx_GroupGridView > *:nth-child(3) {
.mx_GroupGridView_rooms > *:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.mx_GroupGridView > *:nth-child(4) {
.mx_GroupGridView_rooms > *:nth-child(4) {
grid-column: 1;
grid-row: 2;
}
.mx_GroupGridView > *:nth-child(5) {
.mx_GroupGridView_rooms > *:nth-child(5) {
grid-column: 2;
grid-row: 2;
}
.mx_GroupGridView > *:nth-child(6) {
.mx_GroupGridView_rooms > *:nth-child(6) {
grid-column: 3;
grid-row: 2;
}

45
src/components/structures/GroupGridView.js
View file

@ -21,6 +21,8 @@ import OpenRoomsStore from '../../stores/OpenRoomsStore';
import dis from '../../dispatcher';
import RoomView from './RoomView';
import classNames from 'classnames';
import MainSplit from './MainSplit';
import RightPanel from './RightPanel';
export default class RoomGridView extends React.Component {
@ -90,25 +92,32 @@ export default class RoomGridView extends React.Component {
const emptyTiles = Array.from({length: emptyCount}, () => null);
roomStores = roomStores.concat(emptyTiles);
}
const activeRoomId = this.state.activeRoomStore && this.state.activeRoomStore.getRoomId();
const rightPanel = activeRoomId ? <RightPanel roomId={activeRoomId} /> : undefined;
return (<main className="mx_GroupGridView">
{ roomStores.map((roomStore, i) => {
if (roomStore) {
const isActive = roomStore === this.state.activeRoomStore;
const tileClasses = classNames({
"mx_GroupGridView_tile": true,
"mx_GroupGridView_activeTile": isActive,
});
return (<section onClick={() => {this._setActive(i)}} key={roomStore.getRoomId()} className={tileClasses}>
<RoomView
collapsedRhs={true}
roomViewStore={roomStore}
isActive={isActive}
/>
</section>);
} else {
return (<section className={"mx_GroupGridView_emptyTile"} key={`empty-${i}`} />);
}
}) }
<MainSplit panel={rightPanel}>
<div className="mx_GroupGridView_rooms">
{ roomStores.map((roomStore, i) => {
if (roomStore) {
const isActive = roomStore === this.state.activeRoomStore;
const tileClasses = classNames({
"mx_GroupGridView_tile": true,
"mx_GroupGridView_activeTile": isActive,
});
return (<section onClick={() => {this._setActive(i)}} key={roomStore.getRoomId()} className={tileClasses}>
<RoomView
collapsedRhs={true}
roomViewStore={roomStore}
isActive={isActive}
/>
</section>);
} else {
return (<section className={"mx_GroupGridView_emptyTile"} key={`empty-${i}`} />);
}
}) }
</div>
</MainSplit>
</main>);
}