mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
Implement general-purpose tooltip "(?)"-style
This commit is contained in:
parent
9ff1fe8a72
commit
e1d16acddb
@ -19,13 +19,16 @@ limitations under the License.
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
||||
import classNames from 'classnames';
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'RoomTooltip',
|
||||
|
||||
propTypes: {
|
||||
// Alllow the tooltip to be styled by the parent element
|
||||
// Class applied to the element used to position the tooltip
|
||||
className: React.PropTypes.string.isRequired,
|
||||
// Class applied to the tooltip itself
|
||||
tooltipClassName: React.PropTypes.string,
|
||||
// The tooltip is derived from either the room name or a label
|
||||
room: React.PropTypes.object,
|
||||
label: React.PropTypes.string,
|
||||
@ -69,8 +72,12 @@ module.exports = React.createClass({
|
||||
style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset;
|
||||
style.display = "block";
|
||||
|
||||
const tooltipClasses = classNames(
|
||||
"mx_RoomTooltip", this.props.tooltipClassName,
|
||||
);
|
||||
|
||||
var tooltip = (
|
||||
<div className="mx_RoomTooltip" style={style} >
|
||||
<div className={tooltipClasses} style={style} >
|
||||
<div className="mx_RoomTooltip_chevron"></div>
|
||||
{ label }
|
||||
</div>
|
||||
|
@ -35,6 +35,7 @@
|
||||
@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_RichText.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_RoleButton.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_ToolTip.scss";
|
||||
@import "./matrix-react-sdk/views/groups/_GroupRoomList.scss";
|
||||
@import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss";
|
||||
@import "./matrix-react-sdk/views/login/_ServerConfig.scss";
|
||||
|
@ -0,0 +1,51 @@
|
||||
/*
|
||||
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_ToolTip {
|
||||
display: inline-block;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-left: 5px;
|
||||
|
||||
border: 2px solid $neutral-badge-color;
|
||||
border-radius: 20px;
|
||||
color: $neutral-badge-color;
|
||||
|
||||
transition: opacity 0.2s ease-in;
|
||||
opacity: 0.6;
|
||||
|
||||
line-height: 11px;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ToolTip:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.mx_ToolTip_container {
|
||||
position: relative;
|
||||
top: -18px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.mx_ToolTip_helpText {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
line-height: 17px !important;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user