ClassroomCopilot/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: extract static shape styles to CSS classes in CCBaseShapeUtil

Browse Source
This commit is contained in:
CC Worker 2026-05-31 21:46:33 +00:00
parent 3afba919c4
commit 2a6359e247
2 changed files with 72 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
View File

@ -40,44 +40,32 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
component(shape: T) {
const {
props: { w, h, isLocked },
props: { w, h, isLocked, headerColor },
} = shape
const toolbarItems = this.getToolbarItems(shape)
return (
<HTMLContainer
id={shape.id}
className="cc-shape-container"
style={{
width: toDomPrecision(w),
height: toDomPrecision(h),
backgroundColor: shape.props.headerColor,
borderRadius: CC_BASE_STYLE_CONSTANTS.CONTAINER.borderRadius,
boxShadow: CC_BASE_STYLE_CONSTANTS.CONTAINER.boxShadow,
overflow: 'hidden',
position: 'relative',
}}
'--shape-header-color': headerColor,
} as React.CSSProperties}
>
{/* Header */}
<div
style={{
backgroundColor: shape.props.headerColor,
padding: CC_BASE_STYLE_CONSTANTS.HEADER.padding,
height: CC_BASE_STYLE_CONSTANTS.HEADER.height,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
cursor: isLocked ? 'not-allowed' : 'move',
pointerEvents: 'all',
position: 'relative',
zIndex: 1,
}}
className="cc-shape-header"
style={{ cursor: isLocked ? 'not-allowed' : 'move' }}
>
<span style={{ color: 'white', fontWeight: 'bold' }}>{shape.props.title}</span>
<div style={{ display: 'flex', gap: '4px', alignItems: 'center', pointerEvents: 'all' }}>
<span className="shape-title">{shape.props.title}</span>
<div className="cc-shape-toolbar">
{toolbarItems.map((item) => (
<button
key={item.id}
title={item.label}
style={{ opacity: item.isActive ? 1 : 0.7 }}
onClick={(e) => {
logger.info('cc-base-shape-util', 'toolbar item clicked', item.id)
e.preventDefault()
@ -89,25 +77,6 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
e.preventDefault()
e.stopPropagation()
}}
style={{
background: 'transparent',
border: 'none',
padding: '4px',
cursor: 'pointer',
color: 'white',
opacity: item.isActive ? 1 : 0.7,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
pointerEvents: 'all',
fontSize: '16px',
width: '24px',
height: '24px',
zIndex: 100,
userSelect: 'none',
position: 'relative',
touchAction: 'none',
}}
>
<div style={{ pointerEvents: 'none' }}>
{item.icon}
@ -118,17 +87,9 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
</div>
</div>
{/* Content */}
<div
style={{
position: 'absolute',
top: CC_BASE_STYLE_CONSTANTS.HEADER.height,
left: 0,
right: 0,
bottom: 0,
overflow: 'auto',
padding: CC_BASE_STYLE_CONSTANTS.CONTENT.padding,
backgroundColor: shape.props.backgroundColor,
}}
<div
className="cc-shape-content"
style={{ backgroundColor: shape.props.backgroundColor }}
>
{this.renderContent(shape)}
</div>

60
src/utils/tldraw/ui-overrides/components/shared/panel.css
View File

@ -268,4 +268,64 @@
text-align: center;
color: var(--color-text-2);
padding: 16px;
}
/* CC Base Shape Styles */
.cc-shape-container {
overflow: hidden;
position: relative;
border-radius: 4px;
box-shadow: 0 2px 4px var(--color-muted-1);
}
.cc-shape-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: not-allowed;
position: relative;
z-index: 1;
background: var(--shape-header-color, var(--color-muted));
padding: 8px;
height: 32px;
}
.cc-shape-header .shape-title {
color: white;
font-weight: bold;
}
.cc-shape-toolbar {
display: flex;
gap: 4px;
align-items: center;
}
.cc-shape-toolbar button {
background: transparent;
border: none;
padding: 4px;
cursor: pointer;
color: white;
opacity: 0.7;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
width: 24px;
height: 24px;
z-index: 100;
user-select: none;
position: relative;
touch-action: none;
}
.cc-shape-content {
position: absolute;
top: 32px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
padding: 8px;
}