diff --git a/res/css/_components.scss b/res/css/_components.scss index 92e243e8d1..16bb4938c1 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -5,6 +5,7 @@ @import "./structures/_ContextualMenu.scss"; @import "./structures/_CreateRoom.scss"; @import "./structures/_FilePanel.scss"; +@import "./structures/_GroupGridView.scss"; @import "./structures/_GroupView.scss"; @import "./structures/_HomePage.scss"; @import "./structures/_LeftPanel.scss"; diff --git a/res/css/structures/_GroupGridView.scss b/res/css/structures/_GroupGridView.scss new file mode 100644 index 0000000000..ed0d824388 --- /dev/null +++ b/res/css/structures/_GroupGridView.scss @@ -0,0 +1,65 @@ +/* +Copyright 2017 Vector Creations Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_GroupGridView { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-column-gap: 10px; + grid-row-gap: 10px; + background-color: red; +} + +.mx_RoomGridView_emptyTile::before { + display: block; + margin-top: 100px; + text-align: center; + content: "no room in this tile yet"; +} + +.mx_RoomGridView_tile > .mx_RoomView { + height: 100%; +} + +.mx_GroupGridView > *:nth-child(1) { + grid-column: 1; + grid-row: 1; +} + +.mx_GroupGridView > *:nth-child(2) { + grid-column: 2; + grid-row: 1; +} + +.mx_GroupGridView > *:nth-child(3) { + grid-column: 3; + grid-row: 1; +} + +.mx_GroupGridView > *:nth-child(4) { + grid-column: 1; + grid-row: 2; +} + +.mx_GroupGridView > *:nth-child(5) { + grid-column: 2; + grid-row: 2; +} + +.mx_GroupGridView > *:nth-child(6) { + grid-column: 3; + grid-row: 2; +} diff --git a/src/components/structures/GroupGridView.js b/src/components/structures/GroupGridView.js new file mode 100644 index 0000000000..282919f019 --- /dev/null +++ b/src/components/structures/GroupGridView.js @@ -0,0 +1,84 @@ +/* +Copyright 2017 Vector Creations Ltd. +Copyright 2017, 2018 New Vector Ltd. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import OpenRoomsStore from '../../stores/OpenRoomsStore'; +import dis from '../../dispatcher'; +import RoomView from './RoomView'; + +export default class RoomGridView extends React.Component { + + constructor(props) { + super(props); + this.state = { + roomStores: OpenRoomsStore.getRoomStores(), + }; + } + + componentWillMount() { + this._unmounted = false; + this._openRoomsStoreRegistration = OpenRoomsStore.addListener(this.onRoomsChanged); + this._dispatcherRef = dis.register(this._onAction); + } + + componentWillUnmount() { + this._unmounted = true; + if (this._openRoomsStoreRegistration) { + this._openRoomsStoreRegistration.unregister(); + } + dis.unregister(this._dispatcherRef); + } + + onRoomsChanged() { + if (this._unmounted) return; + this.setState({ + roomStores: OpenRoomsStore.getRoomStores(), + }); + } + + _onAction(payload) { + switch (payload.action) { + default: + break; + } + } + + render() { + let roomStores = this.state.roomStores.slice(0, 6); + const emptyCount = 6 - roomStores.length; + if (emptyCount) { + const emptyTiles = Array.from({length: emptyCount}, () => null); + roomStores = roomStores.concat(emptyTiles); + } + return (
+ { roomStores.map(roomStore => { + if (roomStore) { + return (
+ +
); + } else { + return (
); + } + }) } +
); + } + +} diff --git a/src/components/structures/RoomGridView.js b/src/components/structures/RoomGridView.js deleted file mode 100644 index d472767dbb..0000000000 --- a/src/components/structures/RoomGridView.js +++ /dev/null @@ -1,92 +0,0 @@ -/* -Copyright 2017 Vector Creations Ltd. -Copyright 2017, 2018 New Vector Ltd. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import React from 'react'; -import PropTypes from 'prop-types'; - -export default class RoomGridView extends React.Component { - /* displayName: 'GroupView', - - propTypes: { - groupId: PropTypes.string.isRequired, - }, - - childContextTypes = { - groupStore: PropTypes.instanceOf(GroupStore), - };*/ - - getInitialState() { - return { - rooms: [], - }; - } - - componentWillMount() { - this._unmounted = false; - this._initGroupStore(this.props.groupId); - this._dispatcherRef = dis.register(this._onAction); - } - - componentWillUnmount() { - this._unmounted = true; - if (this._groupStoreRegistration) { - this._groupStoreRegistration.unregister(); - } - dis.unregister(this._dispatcherRef); - } - - componentWillReceiveProps(newProps) { - if (this.props.groupId != newProps.groupId) { - this.setState(this.getInitialState(), () => { - this._initGroupStore(newProps.groupId); - }); - } - } - - _initGroupStore(groupId) { - if (this._groupStoreRegistration) { - this._groupStoreRegistration.unregister(); - } - this._groupStoreRegistration = GroupStore.registerListener(groupId, this.onGroupStoreUpdated); - } - - onGroupStoreUpdated() { - if (this._unmounted) return; - this.setState({ - rooms: GroupStore.getGroupRooms(this.props.groupId), - }); - } - - _onAction(payload) { - switch (payload.action) { - default: - break; - } - } - - render() { - const rooms = this.state.rooms.slice(0, 6); - return
- { rooms.map(room => { -
- -
- }) } -
- } - -}