|
@@ -72,26 +72,38 @@ const LogseqTypeTag = ({
|
|
}
|
|
}
|
|
|
|
|
|
const LogseqPortalShapeHeader = observer(
|
|
const LogseqPortalShapeHeader = observer(
|
|
- ({ type, fill, opacity, children }: { type: 'P' | 'B'; fill: string; opacity: number; children: React.ReactNode }) => {
|
|
|
|
|
|
+ ({
|
|
|
|
+ type,
|
|
|
|
+ fill,
|
|
|
|
+ opacity,
|
|
|
|
+ children,
|
|
|
|
+ }: {
|
|
|
|
+ type: 'P' | 'B'
|
|
|
|
+ fill: string
|
|
|
|
+ opacity: number
|
|
|
|
+ children: React.ReactNode
|
|
|
|
+ }) => {
|
|
const bgColor = getComputedColor(fill, 'background')
|
|
const bgColor = getComputedColor(fill, 'background')
|
|
|
|
|
|
return (
|
|
return (
|
|
- <div className={`tl-logseq-portal-header tl-logseq-portal-header-${type === 'P' ? 'page' : 'block'}`}>
|
|
|
|
|
|
+ <div
|
|
|
|
+ className={`tl-logseq-portal-header tl-logseq-portal-header-${
|
|
|
|
+ type === 'P' ? 'page' : 'block'
|
|
|
|
+ }`}
|
|
|
|
+ >
|
|
<div
|
|
<div
|
|
className="absolute inset-0 tl-logseq-portal-header-bg"
|
|
className="absolute inset-0 tl-logseq-portal-header-bg"
|
|
style={{
|
|
style={{
|
|
opacity,
|
|
opacity,
|
|
background:
|
|
background:
|
|
- type === 'P'
|
|
|
|
- ? bgColor
|
|
|
|
- : `linear-gradient(0deg, var(--ls-highlight-color-${
|
|
|
|
- fill ? fill : 'default'
|
|
|
|
- }), ${bgColor}`,
|
|
|
|
|
|
+ type === 'P'
|
|
|
|
+ ? bgColor
|
|
|
|
+ : `linear-gradient(0deg, var(--ls-highlight-color-${
|
|
|
|
+ fill ? fill : 'default'
|
|
|
|
+ }), ${bgColor}`,
|
|
}}
|
|
}}
|
|
></div>
|
|
></div>
|
|
- <div className="relative">
|
|
|
|
- {children}
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div className="relative">{children}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
}
|
|
@@ -727,13 +739,15 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
|
|
<div
|
|
<div
|
|
ref={cpRefContainer}
|
|
ref={cpRefContainer}
|
|
className="relative tl-logseq-cp-container"
|
|
className="relative tl-logseq-cp-container"
|
|
- style={{overflow: this.props.isAutoResizing ? 'visible' : 'auto'}}
|
|
|
|
|
|
+ style={{ overflow: this.props.isAutoResizing ? 'visible' : 'auto' }}
|
|
>
|
|
>
|
|
<div
|
|
<div
|
|
className="absolute inset-0 tl-logseq-cp-container-bg"
|
|
className="absolute inset-0 tl-logseq-cp-container-bg"
|
|
style={{
|
|
style={{
|
|
- background: fill ? `var(--ls-highlight-color-${fill})` : 'var(--ls-secondary-background-color)',
|
|
|
|
- opacity
|
|
|
|
|
|
+ background: fill
|
|
|
|
+ ? `var(--ls-highlight-color-${fill})`
|
|
|
|
+ : 'var(--ls-secondary-background-color)',
|
|
|
|
+ opacity,
|
|
}}
|
|
}}
|
|
></div>
|
|
></div>
|
|
{this.props.blockType === 'B' && this.props.compact ? (
|
|
{this.props.blockType === 'B' && this.props.compact ? (
|
|
@@ -837,7 +851,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
|
|
return (
|
|
return (
|
|
<HTMLContainer
|
|
<HTMLContainer
|
|
style={{
|
|
style={{
|
|
- pointerEvents: 'all'
|
|
|
|
|
|
+ pointerEvents: 'all',
|
|
}}
|
|
}}
|
|
{...events}
|
|
{...events}
|
|
>
|
|
>
|
|
@@ -870,7 +884,11 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
{!this.props.compact && !targetNotFound && (
|
|
{!this.props.compact && !targetNotFound && (
|
|
- <LogseqPortalShapeHeader type={this.props.blockType ?? 'P'} fill={fill} opacity={opacity}>
|
|
|
|
|
|
+ <LogseqPortalShapeHeader
|
|
|
|
+ type={this.props.blockType ?? 'P'}
|
|
|
|
+ fill={fill}
|
|
|
|
+ opacity={opacity}
|
|
|
|
+ >
|
|
{this.props.blockType === 'P' ? (
|
|
{this.props.blockType === 'P' ? (
|
|
<PageNameLink pageName={pageId} />
|
|
<PageNameLink pageName={pageId} />
|
|
) : (
|
|
) : (
|
|
@@ -919,7 +937,11 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
|
|
return (
|
|
return (
|
|
<>
|
|
<>
|
|
<rect
|
|
<rect
|
|
- fill={this.props.fill ? `var(--ls-highlight-color-${this.props.fill})` : 'var(--ls-secondary-background-color)'}
|
|
|
|
|
|
+ fill={
|
|
|
|
+ this.props.fill
|
|
|
|
+ ? `var(--ls-highlight-color-${this.props.fill})`
|
|
|
|
+ : 'var(--ls-secondary-background-color)'
|
|
|
|
+ }
|
|
stroke={getComputedColor(this.props.fill, 'background')}
|
|
stroke={getComputedColor(this.props.fill, 'background')}
|
|
strokeWidth={this.props.strokeWidth ?? 2}
|
|
strokeWidth={this.props.strokeWidth ?? 2}
|
|
fillOpacity={this.props.opacity ?? 0.2}
|
|
fillOpacity={this.props.opacity ?? 0.2}
|
|
@@ -930,7 +952,11 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
|
|
/>
|
|
/>
|
|
{!this.props.compact && (
|
|
{!this.props.compact && (
|
|
<rect
|
|
<rect
|
|
- fill={this.props.fill ? getComputedColor(this.props.fill, 'background') : 'var(--ls-tertiary-background-color)'}
|
|
|
|
|
|
+ fill={
|
|
|
|
+ this.props.fill
|
|
|
|
+ ? getComputedColor(this.props.fill, 'background')
|
|
|
|
+ : 'var(--ls-tertiary-background-color)'
|
|
|
|
+ }
|
|
fillOpacity={this.props.opacity ?? 0.2}
|
|
fillOpacity={this.props.opacity ?? 0.2}
|
|
x={1}
|
|
x={1}
|
|
y={1}
|
|
y={1}
|