feat: support code shrink

zouhangwithsweet · Feb 27, 2024 · a23c2fe · a23c2fe
1 parent a81ccb9
commit a23c2fe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/entrypoints/injected/components/Code.tsx b/entrypoints/injected/components/Code.tsx
@@ -1,16 +1,18 @@
+import { DividerHorizontalIcon } from '@radix-ui/react-icons'
 import { useAtom, useAtomValue } from 'jotai'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Clipboard } from 'react-feather'
 import { toTailwindcss } from 'transform-to-tailwindcss-core'
 import { toUnocssClass } from 'transform-to-unocss-core'
 import { useCopyToClipboard } from 'usehooks-ts'
 
-import { cssEngine, cssUnit, currentSelection } from '@/entrypoints/injected/store'
+import { cssEngine, cssUnit, currentSelection, expandCode } from '@/entrypoints/injected/store'
 import { cn } from '@/entrypoints/utils/cn'
 
 export const CodeArea = memo((props: { minimized?: boolean }) => {
   const engine = useAtomValue(cssEngine)
   const unit = useAtomValue(cssUnit)
+  const [expand, setExpand] = useAtom(expandCode)
   const isRem = useMemo(() => unit === 'rem', [unit])
 
   const [name, setName] = useState('')
@@ -130,7 +132,7 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
   return (
     <>
       {!name && !props.minimized && <div className="p-4 font-600 text-13px">Select Layer </div>}
-      <div className={`${props.minimized || !name ? 'hidden' : ''}`}>
+      <div className={`relative ${props.minimized || !name ? 'hidden' : ''}`}>
         <div className="flex px-4 py-2 items-center border-b border-#e5e5e5 border-solid font-600 text-13px">
           <span className="p-1 hover:bg-#e5e5e5/50 rounded-sm cursor-pointer truncate" onClick={handleCopy(name)}>
             {name}
@@ -143,7 +145,12 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
           onClick={(e) => e.stopPropagation()}
         >
           {unoResult?.map((u) => (
-            <div className="flex flex-col items-stretch bg-#f5f5f5 rounded-sm overflow-hidden">
+            <div
+              className={cn(
+                'flex flex-col items-stretch bg-#f5f5f5 rounded-sm overflow-hidden',
+                !expand && u.type === 'css' ? '!hidden' : '',
+              )}
+            >
               <div className="px-4 h-8 flex-center justify-between border-b border-#e5e5e5 border-solid">
                 <span className="text-#000/50 text-xs">{u.title}</span>
                 <Clipboard
@@ -192,6 +199,10 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
             </div>
           ))}
         </div>
+        <DividerHorizontalIcon
+          className="absolute bottom-0 left-1/2 -translate-x-1/2 text-#000/50 hover:text-#000 cursor-pointer"
+          onClick={() => setExpand(!expand)}
+        />
       </div>
     </>
   )

diff --git a/entrypoints/injected/store/index.ts b/entrypoints/injected/store/index.ts
@@ -12,3 +12,5 @@ export const exportExt = atomWithStorage<'png' | 'jpg' | 'svg'>('fubuki_export_e
 export const exportScale = atomWithStorage<1 | 1.5 | 2 | 3 | 4>('fubuki_export_scale', 3)
 
 export const colorMode = atomWithStorage<'rgb' | 'hex' | 'hsl'>('fubuki_export_color_mode', 'hex')
+
+export const expandCode = atomWithStorage<boolean>('fubuki_expand_code', true)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,3 +12,5 @@ export const exportExt = atomWithStorage<'png' \| 'jpg' \| 'svg'>('fubuki_export_e
		export const exportScale = atomWithStorage<1 \| 1.5 \| 2 \| 3 \| 4>('fubuki_export_scale', 3)

		export const colorMode = atomWithStorage<'rgb' \| 'hex' \| 'hsl'>('fubuki_export_color_mode', 'hex')

		export const expandCode = atomWithStorage<boolean>('fubuki_expand_code', true)