mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-14 01:15:44 +01:00
This reverts commit 67bd96ea81, because the changes to the tooltips caused a rendering error for ahead/behind tags for branches.
This commit is contained in:
René Pfeuffer
GitHub
@@ -1,2 +0,0 @@
|
||||
- type: changed
|
||||
description: improve tooltip accessibility ([#1938](https://github.com/scm-manager/scm-manager/pull/1938))
|
||||
@@ -21,128 +21,12 @@
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import React, { FC, ReactNode, useEffect, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import classNames from "classnames";
|
||||
|
||||
// See for css reference: https://github.com/Wikiki/bulma-tooltip/blob/master/src/sass/index.sass
|
||||
|
||||
const TooltipWrapper = styled.span`
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
`;
|
||||
|
||||
const ArrowBase = styled.span`
|
||||
z-index: 1020;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
`;
|
||||
|
||||
const ArrowTop = styled(ArrowBase)`
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
margin-top: -5px;
|
||||
margin-right: auto;
|
||||
margin-bottom: auto;
|
||||
margin-left: -5px;
|
||||
border-width: 5px 5px 0 5px;
|
||||
`;
|
||||
|
||||
const ArrowRight = styled(ArrowBase)`
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 50%;
|
||||
left: auto;
|
||||
margin-top: auto;
|
||||
margin-right: -5px;
|
||||
margin-bottom: -5px;
|
||||
margin-left: auto;
|
||||
border-width: 5px 5px 5px 0;
|
||||
`;
|
||||
|
||||
const ArrowLeft = styled(ArrowBase)`
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 50%;
|
||||
left: 0;
|
||||
margin-top: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: -5px;
|
||||
margin-left: -5px;
|
||||
border-width: 5px 0 5px 5px;
|
||||
`;
|
||||
|
||||
const ArrowBottom = styled(ArrowBase)`
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-top: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: -5px;
|
||||
margin-left: -5px;
|
||||
border-width: 0 5px 5px 5px;
|
||||
`;
|
||||
|
||||
const Arrow = {
|
||||
bottom: ArrowBottom,
|
||||
left: ArrowLeft,
|
||||
right: ArrowRight,
|
||||
top: ArrowTop
|
||||
};
|
||||
|
||||
const TooltipContainerBase = styled.div<{ multiline?: boolean }>`
|
||||
z-index: 1020;
|
||||
position: absolute;
|
||||
padding: 0.5rem 1rem;
|
||||
overflow: hidden;
|
||||
hyphens: auto;
|
||||
text-overflow: ${({ multiline }) => (multiline ? "clip" : "ellipsis")};
|
||||
white-space: ${({ multiline }) => (multiline ? "normal" : "pre")};
|
||||
max-width: ${({ multiline }) => (multiline ? "15rem" : "auto")};
|
||||
width: ${({ multiline }) => (multiline ? "15rem" : "auto")};
|
||||
word-break: ${({ multiline }) => (multiline ? "keep-all" : "unset")};
|
||||
`;
|
||||
|
||||
const TooltipContainerTop = styled(TooltipContainerBase)`
|
||||
left: 50%;
|
||||
bottom: calc(100% + 5px);
|
||||
transform: translateX(-50%);
|
||||
`;
|
||||
|
||||
const TooltipContainerBottom = styled(TooltipContainerBase)`
|
||||
left: 50%;
|
||||
top: calc(100% + 5px);
|
||||
transform: translateX(-50%);
|
||||
`;
|
||||
|
||||
const TooltipContainerLeft = styled(TooltipContainerBase)`
|
||||
right: calc(100% + 5px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
`;
|
||||
|
||||
const TooltipContainerRight = styled(TooltipContainerBase)`
|
||||
left: calc(100% + 5px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
`;
|
||||
|
||||
const Container = {
|
||||
bottom: TooltipContainerBottom,
|
||||
left: TooltipContainerLeft,
|
||||
right: TooltipContainerRight,
|
||||
top: TooltipContainerTop
|
||||
};
|
||||
import React, { ReactNode } from "react";
|
||||
|
||||
type Props = {
|
||||
message: string;
|
||||
className?: string;
|
||||
location?: TooltipLocation;
|
||||
location: TooltipLocation;
|
||||
multiline?: boolean;
|
||||
children: ReactNode;
|
||||
id?: string;
|
||||
@@ -150,53 +34,27 @@ type Props = {
|
||||
|
||||
export type TooltipLocation = "bottom" | "right" | "top" | "left";
|
||||
|
||||
const Tooltip: FC<Props> = ({ className, message, location = "right", multiline, children, id }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const listener = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
setOpen(false);
|
||||
}
|
||||
class Tooltip extends React.Component<Props> {
|
||||
static defaultProps = {
|
||||
location: "right"
|
||||
};
|
||||
window.addEventListener("keydown", listener);
|
||||
return () => window.removeEventListener("keydown", listener);
|
||||
}, []);
|
||||
|
||||
const LocationContainer = Container[location];
|
||||
const LocationArrow = Arrow[location];
|
||||
render() {
|
||||
const { className, message, location, multiline, children, id } = this.props;
|
||||
let classes = `tooltip has-tooltip-${location}`;
|
||||
if (multiline) {
|
||||
classes += " has-tooltip-multiline";
|
||||
}
|
||||
if (className) {
|
||||
classes += " " + className;
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipWrapper
|
||||
onMouseEnter={() => setOpen(true)}
|
||||
onMouseLeave={() => setOpen(false)}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{open ? (
|
||||
<>
|
||||
<LocationArrow className={`tooltip-arrow-${location}-border-color`} />
|
||||
<LocationContainer
|
||||
className={classNames(
|
||||
className,
|
||||
"is-size-7",
|
||||
"is-family-primary",
|
||||
"has-rounded-border",
|
||||
"has-text-white",
|
||||
"has-background-grey-dark",
|
||||
"has-text-weight-semibold"
|
||||
)}
|
||||
multiline={multiline}
|
||||
aria-live="polite"
|
||||
id={id}
|
||||
role="tooltip"
|
||||
>
|
||||
{message}
|
||||
</LocationContainer>
|
||||
</>
|
||||
) : null}
|
||||
<span className={classes} data-tooltip={message} aria-label={message} id={id}>
|
||||
{children}
|
||||
</TooltipWrapper>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default Tooltip;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -12,6 +12,7 @@
|
||||
"@fortawesome/fontawesome-free": "^5.11.2",
|
||||
"bulma": "^0.9.3",
|
||||
"bulma-popover": "^1.0.0",
|
||||
"bulma-tooltip": "^3.0.0",
|
||||
"react-diff-view": "^2.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
/*
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
|
||||
.tooltip-arrow-top-border-color {
|
||||
border-color: $grey-dark transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip-arrow-right-border-color {
|
||||
border-color: transparent $grey-dark transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip-arrow-bottom-border-color {
|
||||
border-color: transparent transparent $grey-dark transparent;
|
||||
}
|
||||
|
||||
.tooltip-arrow-left-border-color {
|
||||
border-color: transparent transparent transparent $grey-dark;
|
||||
}
|
||||
@@ -23,6 +23,6 @@
|
||||
*/
|
||||
@import "bulma/bulma";
|
||||
@import "../variables/_derived.scss";
|
||||
@import "bulma-tooltip/dist/css/bulma-tooltip.min";
|
||||
@import "bulma-popover/css/bulma-popover";
|
||||
@import "../components/_main.scss";
|
||||
@import "../components/_tooltip.scss";
|
||||
|
||||
@@ -6638,6 +6638,11 @@ bulma-popover@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/bulma-popover/-/bulma-popover-1.0.3.tgz#bc948b7b855bedbe8adf20737fc569ac87623a91"
|
||||
integrity sha512-/StxOsgTvxrK1OIVrzUk7w4+Lyg9VvXDeh/wj9HhsYoCkqLqRi+EYm9htX6FP0GvscwlPradkgZG6bb997oBBA==
|
||||
|
||||
bulma-tooltip@^3.0.0:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/bulma-tooltip/-/bulma-tooltip-3.0.2.tgz#2cf0abab1de2eba07f9d84eb7f07a8a88819ea92"
|
||||
integrity sha512-CsT3APjhlZScskFg38n8HYL8oYNUHQtcu4sz6ERarxkUpBRbk9v0h/5KAvXeKapVSn2dp9l7bOGit5SECP8EWQ==
|
||||
|
||||
bulma@^0.9.3:
|
||||
version "0.9.3"
|
||||
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
|
||||
|
||||
Reference in New Issue
Block a user