mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-22 12:36:24 +08:00
fundon
93b1d6c729
Related to: [BS-3143](https://linear.app/affine-design/issue/BS-3143/更新-loading-和错误样式) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a unified resource controller for managing image and attachment resources, providing improved loading, error, and state handling. - Added a visual loading indicator overlay to image blocks for better feedback during image loading. - **Improvements** - Simplified and centralized image and attachment state management, reducing redundant properties and manual state tracking. - Updated fallback UI for image blocks with clearer titles, descriptions, and improved layout. - Enhanced batch image block creation and download handling for improved efficiency. - Refined image block accessibility with improved alt text and streamlined rendering logic. - Centralized target model selection for image insertion in AI actions. - Reordered CSS declarations without affecting styling. - Improved reactive state tracking for blob upload/download operations in mock server. - **Bug Fixes** - Improved cleanup of object URLs to prevent resource leaks. - Adjusted toolbar logic to more accurately reflect available actions based on image state. - **Tests** - Updated end-to-end tests to match new UI text and behaviors for image loading and error states. - **Chores** - Refactored internal logic and updated comments for clarity and maintainability. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
import { html } from 'lit';
|
|
import { when } from 'lit/directives/when.js';
|
|
|
|
const styles = html`<style>
|
|
.affine-page-selected-embed-rects-container {
|
|
position: absolute;
|
|
border: 2px solid var(--affine-primary-color);
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: calc(100% + 1px);
|
|
user-select: none;
|
|
pointer-events: none;
|
|
box-sizing: border-box;
|
|
line-height: 0;
|
|
}
|
|
|
|
.affine-page-selected-embed-rects-container .resize {
|
|
position: absolute;
|
|
padding: 5px;
|
|
pointer-events: auto;
|
|
z-index: 1;
|
|
}
|
|
|
|
.affine-page-selected-embed-rects-container .resize-inner {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
border: 2px solid var(--affine-primary-color);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.affine-page-selected-embed-rects-container .resize.top-left {
|
|
left: 0;
|
|
top: 0;
|
|
transform: translate(-50%, -50%);
|
|
cursor: nwse-resize; /*resizer cursor*/
|
|
}
|
|
.affine-page-selected-embed-rects-container .resize.top-right {
|
|
right: 0;
|
|
top: 0;
|
|
transform: translate(50%, -50%);
|
|
cursor: nesw-resize;
|
|
}
|
|
.affine-page-selected-embed-rects-container .resize.bottom-left {
|
|
left: 0;
|
|
bottom: 0;
|
|
transform: translate(-50%, 50%);
|
|
cursor: nesw-resize;
|
|
}
|
|
.affine-page-selected-embed-rects-container .resize.bottom-right {
|
|
right: 0;
|
|
bottom: 0;
|
|
transform: translate(50%, 50%);
|
|
cursor: nwse-resize;
|
|
}
|
|
</style>`;
|
|
|
|
export function ImageSelectedRect(readonly: boolean) {
|
|
return html`
|
|
${styles}
|
|
<div class="affine-page-selected-embed-rects-container resizable resizes">
|
|
${when(
|
|
!readonly,
|
|
() => html`
|
|
<div class="resize top-left">
|
|
<div class="resize-inner"></div>
|
|
</div>
|
|
<div class="resize top-right">
|
|
<div class="resize-inner"></div>
|
|
</div>
|
|
<div class="resize bottom-left">
|
|
<div class="resize-inner"></div>
|
|
</div>
|
|
<div class="resize bottom-right">
|
|
<div class="resize-inner"></div>
|
|
</div>
|
|
`
|
|
)}
|
|
</div>
|
|
`;
|
|
}
|