From c01ea566763733fb2525f21f15aa02afccb37dce Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 2 Nov 2017 13:40:07 +0000 Subject: [PATCH] Add toggle to alter visibility of room-group association --- src/components/structures/RightPanel.js | 9 ++--- .../views/elements/InlineSpinner.js | 33 +++++++++++++++++++ src/skins/vector/css/_components.scss | 5 +-- .../views/rooms/_MemberInfo.scss | 10 ++++++ .../views/elements/_InlineSpinner.scss | 24 ++++++++++++++ 5 files changed, 75 insertions(+), 6 deletions(-) create mode 100644 src/components/views/elements/InlineSpinner.js create mode 100644 src/skins/vector/css/vector-web/views/elements/_InlineSpinner.scss diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 76d9dd3743..dedd715f9c 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -90,6 +90,7 @@ module.exports = React.createClass({ RoomMemberList: 'RoomMemberList', GroupMemberList: 'GroupMemberList', GroupRoomList: 'GroupRoomList', + GroupRoomInfo: 'GroupRoomInfo', FilePanel: 'FilePanel', NotificationPanel: 'NotificationPanel', RoomMemberInfo: 'RoomMemberInfo', @@ -217,7 +218,7 @@ module.exports = React.createClass({ } else if (payload.action === "view_group_room") { this.setState({ phase: this.Phase.GroupRoomInfo, - groupRoom: payload.groupRoom, + groupRoomId: payload.groupRoomId, }); } else if (payload.action === "view_group_room_list") { this.setState({ @@ -312,7 +313,7 @@ module.exports = React.createClass({ analytics={['Right Panel', 'Group Member List Button', 'click']} />, , @@ -349,9 +350,9 @@ module.exports = React.createClass({ key={this.state.member.user_id} />; } else if (this.state.phase == this.Phase.GroupRoomInfo) { panel = ; + key={this.state.groupRoomId} />; } else if (this.state.phase == this.Phase.NotificationPanel) { panel = ; } else if (this.state.phase == this.Phase.FilePanel) { diff --git a/src/components/views/elements/InlineSpinner.js b/src/components/views/elements/InlineSpinner.js new file mode 100644 index 0000000000..adb916fcf0 --- /dev/null +++ b/src/components/views/elements/InlineSpinner.js @@ -0,0 +1,33 @@ +/* +Copyright 2017 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. +*/ + +const React = require('react'); + +module.exports = React.createClass({ + displayName: 'InlineSpinner', + + render: function() { + var w = this.props.w || 16; + var h = this.props.h || 16; + var imgClass = this.props.imgClassName || ""; + + return ( +
+ +
+ ); + } +}); diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 82c2c18641..c857a7c35a 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -55,6 +55,8 @@ @import "./matrix-react-sdk/views/rooms/_MemberInfo.scss"; @import "./matrix-react-sdk/views/rooms/_MemberList.scss"; @import "./matrix-react-sdk/views/rooms/_MessageComposer.scss"; +@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss"; +@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss"; @import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss"; @import "./matrix-react-sdk/views/rooms/_RoomHeader.scss"; @import "./matrix-react-sdk/views/rooms/_RoomList.scss"; @@ -68,8 +70,6 @@ @import "./matrix-react-sdk/views/voip/_CallView.scss"; @import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss"; @import "./matrix-react-sdk/views/voip/_VideoView.scss"; -@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss"; -@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss"; @import "./vector-web/_fonts.scss"; @import "./vector-web/structures/_CompatibilityPage.scss"; @import "./vector-web/structures/_HomePage.scss"; @@ -86,6 +86,7 @@ @import "./vector-web/views/dialogs/_SetPasswordDialog.scss"; @import "./vector-web/views/directory/_NetworkDropdown.scss"; @import "./vector-web/views/elements/_ImageView.scss"; +@import "./vector-web/views/elements/_InlineSpinner.scss"; @import "./vector-web/views/elements/_Spinner.scss"; @import "./vector-web/views/globals/_MatrixToolbar.scss"; @import "./vector-web/views/messages/_DateSeparator.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss index 8920c6f69d..567d6dba7b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss @@ -94,3 +94,13 @@ limitations under the License. cursor: pointer; } +.mx_MemberInfo label { + font-size: 13px; +} + +.mx_MemberInfo input[type="radio"] { + vertical-align: -2px; + margin-right: 5px; + margin-left: 8px; +} + diff --git a/src/skins/vector/css/vector-web/views/elements/_InlineSpinner.scss b/src/skins/vector/css/vector-web/views/elements/_InlineSpinner.scss new file mode 100644 index 0000000000..612b6209c6 --- /dev/null +++ b/src/skins/vector/css/vector-web/views/elements/_InlineSpinner.scss @@ -0,0 +1,24 @@ +/* +Copyright 2017 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. +*/ + +.mx_InlineSpinner { + display: inline; +} + +.mx_InlineSpinner img { + margin: 0px 6px; + vertical-align: -3px; +}