2cc45187e6
* tweaking effect details * wrap work on this feature * adds correct color to drop cursor * simplify logic for early return * much better comment so Tom doesn't fire me * feat: Allow changing sort order of collections * refactor: Move validation to model feat: Make custom order the default (in prep for dnd) * feat: Add sort choice to edit collection modal fix: Improved styling of generic InputSelect * fix: Vertical space left after removing previous collection description * chore: Tweak language, menu contents, add auto-disclosure on sub menus * only show drop-to-reorder cursor when sort is set to manual Co-authored-by: Tom Moor <tom.moor@gmail.com>
43 lines
848 B
JavaScript
43 lines
848 B
JavaScript
// @flow
|
|
import * as React from "react";
|
|
import styled, { withTheme } from "styled-components";
|
|
import { type Theme } from "types";
|
|
|
|
function DropCursor({
|
|
isActiveDrop,
|
|
innerRef,
|
|
theme,
|
|
}: {
|
|
isActiveDrop: boolean,
|
|
innerRef: React.Ref<any>,
|
|
theme: Theme,
|
|
}) {
|
|
return <Cursor isOver={isActiveDrop} ref={innerRef} />;
|
|
}
|
|
|
|
// transparent hover zone with a thin visible band vertically centered
|
|
const Cursor = styled("div")`
|
|
opacity: ${(props) => (props.isOver ? 1 : 0)};
|
|
transition: opacity 150ms;
|
|
|
|
position: absolute;
|
|
z-index: 1;
|
|
|
|
width: 100%;
|
|
height: 14px;
|
|
bottom: -7px;
|
|
background: transparent;
|
|
|
|
::after {
|
|
background: ${(props) => props.theme.slateDark};
|
|
position: absolute;
|
|
top: 6px;
|
|
content: "";
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
width: 100%;
|
|
}
|
|
`;
|
|
|
|
export default withTheme(DropCursor);
|