From 62305a1ccd263ddcb4c1d5f54569ada074982706 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 7 Nov 2017 14:07:31 +0000 Subject: [PATCH 1/3] Implement tooltip for group rooms --- src/components/structures/GroupView.js | 13 +++++- src/components/views/elements/ToolTip.js | 55 ++++++++++++++++++++++++ src/i18n/strings/en_EN.json | 1 + 3 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 src/components/views/elements/ToolTip.js diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 24aa552890..4e62aece6c 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -661,6 +661,14 @@ export default React.createClass({ const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const TintableSvg = sdk.getComponent('elements.TintableSvg'); const Spinner = sdk.getComponent('elements.Spinner'); + const ToolTip = sdk.getComponent('elements.ToolTip'); + + const roomsHelpNode = this.state.editing ? :
; const addRoomRow = this.state.editing ? () :
; return
-

{ _t('Rooms') }

+

+ { _t('Rooms') } + { roomsHelpNode } +

{ addRoomRow }
{ this.state.groupRoomsLoading ? diff --git a/src/components/views/elements/ToolTip.js b/src/components/views/elements/ToolTip.js new file mode 100644 index 0000000000..20cde8852e --- /dev/null +++ b/src/components/views/elements/ToolTip.js @@ -0,0 +1,55 @@ +/* +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. +*/ + +import React from 'react'; +import sdk from '../../../index'; + +module.exports = React.createClass({ + displayName: 'ToolTip', + + getInitialState: function() { + return { + hover: false, + } + }, + + onMouseOver: function() { + this.setState({ + hover: true, + }) + }, + + onMouseOut: function() { + this.setState({ + hover: false, + }) + }, + + render: function() { + var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); + const tip = this.state.hover ? :
; + return ( +
+ ? + { tip } +
+ ); + } +}); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index bff52e2e93..0eecc63ed7 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -694,6 +694,7 @@ "Leave": "Leave", "Unable to leave room": "Unable to leave room", "Community Settings": "Community Settings", + "These rooms are displayed to community members on the community page. Community members can join the rooms by clicking on them.": "These rooms are displayed to community members on the community page. Community members can join the rooms by clicking on them.", "Add rooms to this community": "Add rooms to this community", "Featured Rooms:": "Featured Rooms:", "Featured Users:": "Featured Users:", From ddc1ff2f235d680eaa89def050b1a40116bc70e1 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 7 Nov 2017 15:13:26 +0000 Subject: [PATCH 2/3] Name things in a sane way --- src/components/structures/GroupView.js | 4 ++-- .../elements/{ToolTip.js => ToolTipButton.js} | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) rename src/components/views/elements/{ToolTip.js => ToolTipButton.js} (76%) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 4e62aece6c..ce807ab026 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -661,9 +661,9 @@ export default React.createClass({ const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const TintableSvg = sdk.getComponent('elements.TintableSvg'); const Spinner = sdk.getComponent('elements.Spinner'); - const ToolTip = sdk.getComponent('elements.ToolTip'); + const ToolTipButton = sdk.getComponent('elements.ToolTipButton'); - const roomsHelpNode = this.state.editing ? :
; return ( -
+
? { tip }
); - } + }, }); From 646cabf324fb80667a3a516c0c3f84d5e012dc9e Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 7 Nov 2017 15:15:10 +0000 Subject: [PATCH 3/3] Add missing whitespace --- src/components/views/elements/ToolTipButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/ToolTipButton.js b/src/components/views/elements/ToolTipButton.js index c711f1acb7..b5b2d735ee 100644 --- a/src/components/views/elements/ToolTipButton.js +++ b/src/components/views/elements/ToolTipButton.js @@ -46,7 +46,7 @@ module.exports = React.createClass({ label={this.props.helpText} /> :
; return ( -
+
? { tip }