mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-16 09:36:17 +08:00
Ahsan Khaleeq
75f4c0eede
This PR implements [feature request] #14845 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Add-block control that appears when hovering blocks in page mode to insert and auto-focus a new paragraph; control hides after insertion. * **Improvements** * Improved hover and interaction handling to avoid accidental triggers when interacting with the drag handle or add-block control. * Consistent sizing, positioning, and visibility behavior for the add-block control. * **Style** * Moved heading icon slightly for improved visual alignment. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
104 lines
2.1 KiB
TypeScript
104 lines
2.1 KiB
TypeScript
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
|
|
import { css } from 'lit';
|
|
|
|
import {
|
|
ADD_BLOCK_WIDGET_WIDTH,
|
|
DRAG_HANDLE_CONTAINER_WIDTH,
|
|
} from './config.js';
|
|
|
|
export const styles = css`
|
|
.affine-drag-handle-widget {
|
|
display: flex;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
contain: size layout;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.affine-add-block-widget-container {
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: ${ADD_BLOCK_WIDGET_WIDTH}px;
|
|
min-height: 12px;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.affine-drag-handle-container {
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: ${DRAG_HANDLE_CONTAINER_WIDTH}px;
|
|
min-height: 12px;
|
|
pointer-events: auto;
|
|
user-select: none;
|
|
box-sizing: border-box;
|
|
}
|
|
.affine-drag-handle-container:hover {
|
|
cursor: grab;
|
|
}
|
|
|
|
.affine-drag-handle-grabber {
|
|
width: 4px;
|
|
height: 100%;
|
|
border-radius: 1px;
|
|
background: var(--affine-placeholder-color);
|
|
transition: width 0.25s ease;
|
|
}
|
|
|
|
.affine-drag-handle-grabber.dots {
|
|
width: 14px;
|
|
height: 26px;
|
|
box-sizing: border-box;
|
|
padding: 5px 2px;
|
|
border-radius: 4px;
|
|
gap: 2px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
background-color: transparent;
|
|
transform: translateX(-100%);
|
|
transition: unset;
|
|
}
|
|
|
|
.affine-drag-handle-grabber.dots:hover {
|
|
background-color: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
|
|
}
|
|
|
|
.affine-drag-handle-grabber.dots > .dot {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
flex: 0 0 4px;
|
|
background-color: ${unsafeCSSVarV2('icon/secondary')};
|
|
}
|
|
|
|
@media print {
|
|
.affine-drag-handle-widget {
|
|
display: none;
|
|
}
|
|
}
|
|
.affine-drag-hover-rect {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 6px;
|
|
background: var(--affine-hover-color);
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
animation: expand 0.25s forwards;
|
|
}
|
|
@keyframes expand {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
`;
|