gristlabs_grist-core/app/client/ui/TreeViewComponentCss.ts

121 lines
3.0 KiB
TypeScript
Raw Normal View History

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;
`);