Browse Source

style: run prettier

Konstantinos Kaloutas 3 years ago
parent
commit
62f3db3b42

+ 1 - 1
tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -326,7 +326,7 @@ const NoFillAction = observer(() => {
       pressed={noFill}
       pressed={noFill}
       onPressedChange={handleChange}
       onPressedChange={handleChange}
     >
     >
-      <TablerIcon name={noFill ?  "droplet-off" : "droplet"} />
+      <TablerIcon name={noFill ? 'droplet-off' : 'droplet'} />
     </ToggleInput>
     </ToggleInput>
   )
   )
 })
 })

+ 14 - 3
tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx

@@ -11,7 +11,14 @@ interface ColorInputProps extends React.InputHTMLAttributes<HTMLButtonElement> {
   setOpacity: (value: number) => void
   setOpacity: (value: number) => void
 }
 }
 
 
-export function ColorInput({ color, opacity, collisionRef, setColor, setOpacity, ...rest }: ColorInputProps) {
+export function ColorInput({
+  color,
+  opacity,
+  collisionRef,
+  setColor,
+  setOpacity,
+  ...rest
+}: ColorInputProps) {
   const ref = React.useRef<HTMLDivElement>(null)
   const ref = React.useRef<HTMLDivElement>(null)
 
 
   function renderColor(color: string) {
   function renderColor(color: string) {
@@ -32,7 +39,12 @@ export function ColorInput({ color, opacity, collisionRef, setColor, setOpacity,
         <button className="tl-color-drip mx-1">{renderColor(color)}</button>
         <button className="tl-color-drip mx-1">{renderColor(color)}</button>
       </Popover.Trigger>
       </Popover.Trigger>
 
 
-      <Popover.Content className="tl-popover-content" side="top" sideOffset={15} collisionBoundary={collisionRef}>
+      <Popover.Content
+        className="tl-popover-content"
+        side="top"
+        sideOffset={15}
+        collisionBoundary={collisionRef}
+      >
         <div className={'tl-color-palette'}>
         <div className={'tl-color-palette'}>
           {Object.values(Color).map(value => (
           {Object.values(Color).map(value => (
             <button
             <button
@@ -62,7 +74,6 @@ export function ColorInput({ color, opacity, collisionRef, setColor, setOpacity,
 
 
         <Popover.Arrow className="tl-popover-arrow" />
         <Popover.Arrow className="tl-popover-arrow" />
       </Popover.Content>
       </Popover.Content>
-
     </Popover.Root>
     </Popover.Root>
   )
   )
 }
 }

+ 43 - 17
tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -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}