@@ -372,13 +218,8 @@ module.exports = React.createClass({
return (
);
- },
-});
+ }
+}
diff --git a/src/components/views/right_panel/GroupHeaderButtons.js b/src/components/views/right_panel/GroupHeaderButtons.js
new file mode 100644
index 0000000000..6d7d9da3a7
--- /dev/null
+++ b/src/components/views/right_panel/GroupHeaderButtons.js
@@ -0,0 +1,81 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+Copyright 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 { _t } from '../../../languageHandler';
+import dis from '../../../dispatcher';
+import HeaderButton from './HeaderButton';
+import HeaderButtons from './HeaderButtons';
+import RightPanel from '../../structures/RightPanel';
+
+export default class GroupHeaderButtons extends HeaderButtons {
+
+ constructor(props) {
+ super(props, RightPanel.Phase.GroupMemberList);
+ }
+
+ onAction(payload) {
+ super.onAction(payload);
+
+ if (payload.action === "view_user") {
+ dis.dispatch({
+ action: 'show_right_panel',
+ });
+ if (payload.member) {
+ this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member});
+ } else {
+ this.setPhase(RightPanel.Phase.GroupMemberList);
+ }
+ } else if (payload.action === "view_group") {
+ this.setPhase(RightPanel.Phase.GroupMemberList);
+ } else if (payload.action === "view_group_room") {
+ this.setPhase(RightPanel.Phase.GroupRoomInfo, {groupRoomId: payload.groupRoomId});
+ } else if (payload.action === "view_group_room_list") {
+ this.setPhase(RightPanel.Phase.GroupRoomList);
+ } else if (payload.action === "view_group_member_list") {
+ this.setPhase(RightPanel.Phase.GroupMemberList);
+ } else if (payload.action === "view_group_user") {
+ this.setPhase(RightPanel.Phase.GroupMemberInfo, {member: payload.member});
+ }
+ }
+
+ renderButtons() {
+ const isPhaseGroup = [
+ RightPanel.Phase.GroupMemberInfo,
+ RightPanel.Phase.GroupMemberList,
+ ].includes(this.state.phase);
+ const isPhaseRoom = [
+ RightPanel.Phase.GroupRoomList,
+ RightPanel.Phase.GroupRoomInfo,
+ ].includes(this.state.phase);
+
+ return [
+ ,
+
+ ];
+ }
+}
diff --git a/src/components/views/right_panel/HeaderButton.js b/src/components/views/right_panel/HeaderButton.js
new file mode 100644
index 0000000000..a01d3444f1
--- /dev/null
+++ b/src/components/views/right_panel/HeaderButton.js
@@ -0,0 +1,74 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+Copyright 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 classNames from 'classnames';
+import dis from '../../../dispatcher';
+import Analytics from '../../../Analytics';
+import AccessibleButton from '../elements/AccessibleButton';
+import TintableSvg from '../elements/TintableSvg';
+
+export default class HeaderButton extends React.Component {
+ constructor() {
+ super();
+ this.onClick = this.onClick.bind(this);
+ }
+
+ onClick(ev) {
+ Analytics.trackEvent(...this.props.analytics);
+ dis.dispatch({
+ action: 'view_right_panel_phase',
+ phase: this.props.clickPhase,
+ });
+ }
+
+ render() {
+ const classes = classNames({
+ mx_RightPanel_headerButton: true,
+ mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
+ });
+
+ return
+
+ ;
+ }
+}
+
+HeaderButton.propTypes = {
+ // Whether this button is highlighted
+ isHighlighted: PropTypes.bool.isRequired,
+ // The phase to swap to when the button is clicked
+ clickPhase: PropTypes.string.isRequired,
+ // The source file of the icon to display
+ iconSrc: PropTypes.string.isRequired,
+
+ // The badge to display above the icon
+ badge: PropTypes.node,
+ // The parameters to track the click event
+ analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+ // Button title
+ title: PropTypes.string.isRequired,
+};
diff --git a/src/components/views/right_panel/HeaderButtons.js b/src/components/views/right_panel/HeaderButtons.js
new file mode 100644
index 0000000000..d47e923806
--- /dev/null
+++ b/src/components/views/right_panel/HeaderButtons.js
@@ -0,0 +1,65 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+Copyright 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 dis from '../../../dispatcher';
+
+export default class HeaderButtons extends React.Component {
+
+ constructor(props, initialPhase) {
+ super(props);
+
+ this.state = {
+ phase: initialPhase,
+ isUserPrivilegedInGroup: null,
+ };
+ this.onAction = this.onAction.bind(this);
+ }
+
+ componentWillMount() {
+ this.dispatcherRef = dis.register(this.onAction);
+ }
+
+ componentWillUnmount() {
+ dis.unregister(this.dispatcherRef);
+ }
+
+ setPhase(phase, extras) {
+ // TODO: delay?
+ dis.dispatch(Object.assign({
+ action: 'view_right_panel_phase',
+ phase: phase,
+ }, extras));
+ }
+
+ onAction(payload) {
+ if (payload.action === "view_right_panel_phase") {
+ this.setState({
+ phase: payload.phase,
+ });
+ }
+ }
+
+ render() {
+ // inline style as this will be swapped around in future commits
+ return
+ { this.renderButtons() }
+
;
+ }
+}
diff --git a/src/components/views/right_panel/RoomHeaderButtons.js b/src/components/views/right_panel/RoomHeaderButtons.js
new file mode 100644
index 0000000000..1d33afd9a8
--- /dev/null
+++ b/src/components/views/right_panel/RoomHeaderButtons.js
@@ -0,0 +1,73 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+Copyright 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 { _t } from '../../../languageHandler';
+import dis from '../../../dispatcher';
+import HeaderButton from './HeaderButton';
+import HeaderButtons from './HeaderButtons';
+import RightPanel from '../../structures/RightPanel';
+
+export default class RoomHeaderButtons extends HeaderButtons {
+
+ constructor(props) {
+ super(props, RightPanel.Phase.RoomMemberList);
+ }
+
+ onAction(payload) {
+ super.onAction(payload);
+ if (payload.action === "view_user") {
+ dis.dispatch({
+ action: 'show_right_panel',
+ });
+ if (payload.member) {
+ this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member});
+ } else {
+ this.setPhase(RightPanel.Phase.RoomMemberList);
+ }
+ } else if (payload.action === "view_room") {
+ this.setPhase(RightPanel.Phase.RoomMemberList);
+ }
+ }
+
+ renderButtons() {
+ const isMembersPhase = [
+ RightPanel.Phase.RoomMemberList,
+ RightPanel.Phase.RoomMemberInfo,
+ ].includes(this.state.phase);
+
+ return [
+ ,
+ ,
+
+ ];
+ }
+}
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 8a98f2a8bc..1cc04b1168 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -33,6 +33,7 @@ import AccessibleButton from '../elements/AccessibleButton';
import ManageIntegsButton from '../elements/ManageIntegsButton';
import {CancelButton} from './SimpleRoomHeader';
import SettingsStore from "../../../settings/SettingsStore";
+import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
linkifyMatrix(linkify);
@@ -432,6 +433,7 @@ module.exports = React.createClass({
{ saveButton }
{ cancelButton }
{ rightRow }
+
);