From c01ea566763733fb2525f21f15aa02afccb37dce Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 2 Nov 2017 13:40:07 +0000 Subject: [PATCH 1/2] 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 76d9dd37..dedd715f 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 00000000..adb916fc --- /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 82c2c186..c857a7c3 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 8920c6f6..567d6dba 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 00000000..612b6209 --- /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; +} From 06ce4678761a6d8d0434f11fe16a6d3440a31adf Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 2 Nov 2017 15:05:08 +0000 Subject: [PATCH 2/2] Add CSS for group room visibility label alignment --- .../css/matrix-react-sdk/views/rooms/_MemberInfo.scss | 6 ++++++ 1 file changed, 6 insertions(+) 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 567d6dba..5d47275e 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 @@ -98,6 +98,12 @@ limitations under the License. font-size: 13px; } +.mx_MemberInfo label .mx_MemberInfo_label_text { + display: inline-block; + max-width: 180px; + vertical-align: text-top; +} + .mx_MemberInfo input[type="radio"] { vertical-align: -2px; margin-right: 5px;