OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve the look of tooltips (#7049)

pull/21833/head
Šimon Brandner 2021-11-02 10:41:33 +01:00 committed by GitHub
parent f643839a00
commit 57fae01991
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
res/css/views/elements/_Tooltip.scss
View File

@ -52,7 +52,6 @@ limitations under the License.
display: none; display: none;
position: fixed; position: fixed;
border-radius: 8px; border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
z-index: 6000; // Higher than context menu so tooltips can be used everywhere z-index: 6000; // Higher than context menu so tooltips can be used everywhere
padding: 10px; padding: 10px;
pointer-events: none; pointer-events: none;
@ -63,7 +62,7 @@ limitations under the License.
word-break: break-word; word-break: break-word;
margin-right: 50px; margin-right: 50px;
background-color: $inverted-bg-color; background-color: #21262C; // Same on both themes
color: $accent-fg-color; color: $accent-fg-color;
border: 0; border: 0;
text-align: center; text-align: center;

8
src/components/views/elements/AccessibleTooltipButton.tsx
View File

@ -16,7 +16,6 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import AccessibleButton from "./AccessibleButton"; import AccessibleButton from "./AccessibleButton";
import Tooltip, { Alignment } from './Tooltip'; import Tooltip, { Alignment } from './Tooltip';
@ -70,13 +69,12 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, ...props } = this.props; const { title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, ...props } = this.props;
const tip = this.state.hover ? <Tooltip const tip = this.state.hover && <Tooltip
className="mx_AccessibleTooltipButton_container" tooltipClassName={tooltipClassName}
tooltipClassName={classNames("mx_AccessibleTooltipButton_tooltip", tooltipClassName)}
label={tooltip || title} label={tooltip || title}
yOffset={yOffset} yOffset={yOffset}
alignment={alignment} alignment={alignment}
/> : null; />;
return ( return (
<AccessibleButton <AccessibleButton
{...props} {...props}