4c138ed585
* feat: Add new icon button on collections in sidebar, move sort into menu * Remove unused menu, add warning when dragging in a-z collection * fix: Add hover background to sidebar actions, add tooltip to new doc button * Retain 'active' state on buttons when related context menu is open * fix: Two more spots that deserve active background
53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import * as React from "react";
|
|
import styled from "styled-components";
|
|
|
|
type Props = {
|
|
disabled?: boolean;
|
|
isActiveDrop: boolean;
|
|
innerRef: React.Ref<HTMLDivElement>;
|
|
position?: "top";
|
|
};
|
|
|
|
function DropCursor({ isActiveDrop, innerRef, position, disabled }: Props) {
|
|
return (
|
|
<Cursor
|
|
isOver={isActiveDrop}
|
|
disabled={disabled}
|
|
ref={innerRef}
|
|
position={position}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// transparent hover zone with a thin visible band vertically centered
|
|
const Cursor = styled.div<{
|
|
isOver?: boolean;
|
|
disabled?: boolean;
|
|
position?: "top";
|
|
}>`
|
|
opacity: ${(props) => (props.isOver ? 1 : 0)};
|
|
transition: opacity 150ms;
|
|
position: absolute;
|
|
z-index: 1;
|
|
|
|
width: 100%;
|
|
height: 14px;
|
|
background: transparent;
|
|
${(props) => (props.position === "top" ? "top: -7px;" : "bottom: -7px;")}
|
|
|
|
::after {
|
|
background: ${(props) =>
|
|
props.disabled
|
|
? props.theme.sidebarActiveBackground
|
|
: props.theme.slateDark};
|
|
position: absolute;
|
|
top: 6px;
|
|
content: "";
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
width: 100%;
|
|
}
|
|
`;
|
|
|
|
export default DropCursor;
|