TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Z-index issue for “annotation tools” overlay Viewport ActionBar “Label” (Checkmark + ‘A’)

Browse Source
This commit is contained in:
Gustavo Lelis 2020-04-14 09:11:14 -03:00 committed by James A. Petts
parent f084597f2b
commit 68b8b04a1c
6 changed files with 41 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
platform/ui/src/assets/styles/styles.css
View File

@ -20,6 +20,22 @@
@apply hidden;
}
.invisible-scrollbar::-webkit-scrollbar-track {
@apply hidden;
}
.invisible-scrollbar::-webkit-scrollbar-thumb {
@apply hidden;
}
.invisible-scrollbar::-webkit-scrollbar-thumb:window-inactive {
@apply hidden;
}
.tooltip {
@apply z-10 absolute;
}
/* TOOLTIP WORKAROUND FOR ARROW UP */
.tooltip.tooltip-up::before {
@apply bg-primary-dark absolute z-10;

2
platform/ui/src/components/Thumbnail/Thumbnail.jsx
View File

@ -36,7 +36,7 @@ const Thumbnail = ({
</div>
<div
className={classnames(
'tooltip tooltip-right absolute bg-black border border-secondary-main text-common-light text-base rounded py-2 px-4 top-0 w-max-content hidden'
'tooltip tooltip-right bg-black border border-secondary-main text-common-light text-base rounded py-2 px-4 top-0 w-max-content hidden'
)}
>
<div className="flex flex-row flex-1">

4
platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
View File

@ -38,7 +38,7 @@ const ViewportActionBar = ({ isTracked, isLocked, modality }) => {
{isTracked && (
<div
className={classnames(
'tooltip tooltip-top-left absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
'tooltip tooltip-top-left bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
)}
>
<div className="flex py-2">
@ -111,7 +111,7 @@ const ViewportActionBar = ({ isTracked, isLocked, modality }) => {
</div>
<div
className={classnames(
'tooltip tooltip-top-right absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content ml-1'
'tooltip tooltip-top-right bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content ml-1'
)}
>
<div className="flex py-2">

2
platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx
View File

@ -86,7 +86,7 @@ components.
{shouldShowTooltip && (
<div
className={classnames(
'tooltip tooltip-up absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
'tooltip tooltip-up bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
)}
>
{tool.label}

2
platform/ui/src/views/Viewer/components/Header.js
View File

@ -71,7 +71,7 @@ const Header = () => {
{shouldShowTooltip && (
<div
className={classnames(
'tooltip tooltip-up absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
'tooltip tooltip-up bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
)}
>
{tool.label}

43
platform/ui/src/views/Viewer/components/ViewportToolBar.js
View File

@ -5,7 +5,6 @@ import { Icon, IconButton } from '@ohif/ui';
const ViewportToolbar = () => {
const [activeTool, setActiveTool] = useState(null);
const [showTooltip, setShowTooltip] = useState(null);
const tools = [
{
id: 'Annotate',
@ -43,9 +42,11 @@ const ViewportToolbar = () => {
const renderToolbar = () => {
return tools.map((tool, i) => {
const isActive = activeTool === tool.id;
const shouldShowTooltip = showTooltip === tool.id;
return (
<div className="relative flex justify-center" key={tool.id}>
<div
className="relative flex justify-center showTooltipOnHover"
key={tool.id}
>
<IconButton
variant={isActive ? 'contained' : 'text'}
className={classnames('mx-1', {
@ -55,30 +56,26 @@ const ViewportToolbar = () => {
onClick={(e) => {
setActiveTool(tool.id);
}}
onMouseOver={() => setShowTooltip(tool.id)}
onMouseOut={() => setShowTooltip(null)}
>
<Icon name={tool.icon} />
</IconButton>
{shouldShowTooltip && (
<div
className={classnames(
'tooltip tooltip-up absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
)}
<div
className={classnames(
'tooltip tooltip-up bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
)}
>
{tool.label}
<svg
className="absolute text-primary-dark w-full h-4 left-0 stroke-secondary-main"
style={{ top: -15 }}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
{tool.label}
<svg
className="absolute text-primary-dark w-full h-4 left-0 stroke-secondary-main"
style={{ top: -15 }}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path fill="currentColor" d="M24 22h-24l12-20z" />
</svg>
</div>
)}
<path fill="currentColor" d="M24 22h-24l12-20z" />
</svg>
</div>
</div>
);
});