You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.0 KiB
121 lines
3.0 KiB
import { theme } from "app/client/ui2018/cssVars";
|
|
import { icon } from "app/client/ui2018/icons";
|
|
import { styled } from "grainjs";
|
|
|
|
export const treeViewContainer = styled('div', `
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* adds 2px to make room for the target when shown above the first item */
|
|
margin-top: 2px;
|
|
`);
|
|
|
|
export const itemChildren = styled('div', `
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
.itemContainer.collapsed > & {
|
|
display: none;
|
|
}
|
|
`);
|
|
|
|
export const dragDropContainer = styled('div', `
|
|
position: relative;
|
|
`);
|
|
|
|
// pointer-events: none is set while dragging, to ensure that mouse events are sent to the element
|
|
// over which we are dragging, rather than the one being dragged (which is also under the cursor).
|
|
export const itemHeaderWrapper = styled('div', `
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&.dragged {
|
|
pointer-events: none;
|
|
}
|
|
`);
|
|
|
|
export const itemHeader = styled('div', `
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
border-radius: 0 2px 2px 0;
|
|
border: solid 1px transparent;
|
|
color: ${theme.text};
|
|
.${itemHeaderWrapper.className}-not-dragging:hover > & {
|
|
background-color: ${theme.pageHoverBg};
|
|
}
|
|
.${itemHeaderWrapper.className}-not-dragging > &.selected {
|
|
background-color: ${theme.activePageBg};
|
|
color: ${theme.activePageFg};
|
|
}
|
|
&.highlight {
|
|
border-color: ${theme.controlFg};
|
|
}
|
|
`);
|
|
|
|
export const dropdown = styled(icon, `
|
|
background-color: ${theme.controlSecondaryFg};
|
|
.${itemHeaderWrapper.className}-not-dragging > .${itemHeader.className}.selected & {
|
|
background-color: ${theme.activePageFg};
|
|
}
|
|
`);
|
|
|
|
export const itemLabelRight = styled('div', `
|
|
--icon-color: ${theme.controlSecondaryFg};
|
|
width: 16px;
|
|
.${treeViewContainer.className}-close & {
|
|
display: none;
|
|
}
|
|
`);
|
|
|
|
export const centeredIcon = styled(icon, `
|
|
height: 100%;
|
|
visibility: hidden;
|
|
.${itemHeaderWrapper.className}-not-dragging:hover &, .${itemHeaderWrapper.className}.dragged & {
|
|
visibility: visible;
|
|
cursor: grab;
|
|
}
|
|
`);
|
|
|
|
export const itemLabel = styled('div', `
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
cursor: pointer;
|
|
.${itemHeaderWrapper.className}.dragged & {
|
|
opacity: 0.5;
|
|
transform: rotate(3deg);
|
|
position: relative;
|
|
}
|
|
`);
|
|
|
|
export const arrow = styled('div', `
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
width: 24px;
|
|
justify-content: center;
|
|
.${treeViewContainer.className}-close & {
|
|
display: none;
|
|
}
|
|
`);
|
|
|
|
export const offset = styled('div', `
|
|
flex-shrink: 0;
|
|
.${treeViewContainer.className}-close & {
|
|
display: none;
|
|
}
|
|
`);
|
|
|
|
// I gave target a 2px height in order to make it dstinguishable from the header's highlight which
|
|
// is a 1px border of same color. Setting pointer-events to prevent target from grabbing mouse
|
|
// events none and causes some intermittent interruptions to the processing of mouse events when
|
|
// hovering while dragging.
|
|
export const target = styled('div', `
|
|
position: absolute;
|
|
height: 2px;
|
|
background: ${theme.controlFg};
|
|
pointer-events: none;
|
|
`);
|