imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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. limitations under the License.
*/ */
.mx_GroupGridView { .mx_GroupGridView_rooms {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 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 { .mx_GroupGridView_emptyTile::before {
display: block; display: block;
@ -67,32 +76,32 @@ limitations under the License.
height: 100%; height: 100%;
} }
.mx_GroupGridView > *:nth-child(1) { .mx_GroupGridView_rooms > *:nth-child(1) {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
} }
.mx_GroupGridView > *:nth-child(2) { .mx_GroupGridView_rooms > *:nth-child(2) {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
} }
.mx_GroupGridView > *:nth-child(3) { .mx_GroupGridView_rooms > *:nth-child(3) {
grid-column: 3; grid-column: 3;
grid-row: 1; grid-row: 1;
} }
.mx_GroupGridView > *:nth-child(4) { .mx_GroupGridView_rooms > *:nth-child(4) {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
} }
.mx_GroupGridView > *:nth-child(5) { .mx_GroupGridView_rooms > *:nth-child(5) {
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
} }
.mx_GroupGridView > *:nth-child(6) { .mx_GroupGridView_rooms > *:nth-child(6) {
grid-column: 3; grid-column: 3;
grid-row: 2; 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 dis from '../../dispatcher';
import RoomView from './RoomView'; import RoomView from './RoomView';
import classNames from 'classnames'; import classNames from 'classnames';
import MainSplit from './MainSplit';
import RightPanel from './RightPanel';
export default class RoomGridView extends React.Component { 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); const emptyTiles = Array.from({length: emptyCount}, () => null);
roomStores = roomStores.concat(emptyTiles); 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"> return (<main className="mx_GroupGridView">
{ roomStores.map((roomStore, i) => { <MainSplit panel={rightPanel}>
if (roomStore) { <div className="mx_GroupGridView_rooms">
const isActive = roomStore === this.state.activeRoomStore; { roomStores.map((roomStore, i) => {
const tileClasses = classNames({ if (roomStore) {
"mx_GroupGridView_tile": true, const isActive = roomStore === this.state.activeRoomStore;
"mx_GroupGridView_activeTile": isActive, const tileClasses = classNames({
}); "mx_GroupGridView_tile": true,
return (<section onClick={() => {this._setActive(i)}} key={roomStore.getRoomId()} className={tileClasses}> "mx_GroupGridView_activeTile": isActive,
<RoomView });
collapsedRhs={true} return (<section onClick={() => {this._setActive(i)}} key={roomStore.getRoomId()} className={tileClasses}>
roomViewStore={roomStore} <RoomView
isActive={isActive} collapsedRhs={true}
/> roomViewStore={roomStore}
</section>); isActive={isActive}
} else { />
return (<section className={"mx_GroupGridView_emptyTile"} key={`empty-${i}`} />); </section>);
} } else {
}) } return (<section className={"mx_GroupGridView_emptyTile"} key={`empty-${i}`} />);
}
}) }
</div>
</MainSplit>
</main>); </main>);
} }