From 62305a1ccd263ddcb4c1d5f54569ada074982706 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 7 Nov 2017 14:07:31 +0000 Subject: [PATCH] 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:",