diff --git a/lama_cleaner/app/src/components/ImageSize/ImageSize.scss b/lama_cleaner/app/src/components/ImageSize/ImageSize.scss new file mode 100644 index 0000000..9016bef --- /dev/null +++ b/lama_cleaner/app/src/components/ImageSize/ImageSize.scss @@ -0,0 +1,5 @@ +.imageSize { + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 8px 8px; +} \ No newline at end of file diff --git a/lama_cleaner/app/src/components/ImageSize/ImageSize.tsx b/lama_cleaner/app/src/components/ImageSize/ImageSize.tsx new file mode 100644 index 0000000..ae4bcb4 --- /dev/null +++ b/lama_cleaner/app/src/components/ImageSize/ImageSize.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { useRecoilValue } from 'recoil' +import { imageHeightState, imageWidthState } from '../../store/Atoms' + +const ImageSize = () => { + const imageWidth = useRecoilValue(imageWidthState) + const imageHeight = useRecoilValue(imageHeightState) + + if (!imageWidth || !imageHeight) { + return null + } + + return ( +
+ {imageWidth}x{imageHeight} +
+ ) +} + +export default ImageSize diff --git a/lama_cleaner/app/src/components/Plugins/Plugins.scss b/lama_cleaner/app/src/components/Plugins/Plugins.scss index afc8706..caad783 100644 --- a/lama_cleaner/app/src/components/Plugins/Plugins.scss +++ b/lama_cleaner/app/src/components/Plugins/Plugins.scss @@ -1,9 +1,9 @@ @use '../../styles/Mixins/' as *; .plugins { - position: absolute; - top: 68px; - left: 24px; + // position: absolute; + // top: 68px; + // left: 24px; z-index: 4; border: 1px solid var(--border-color); border-radius: 8px; diff --git a/lama_cleaner/app/src/components/Workspace.tsx b/lama_cleaner/app/src/components/Workspace.tsx index d26c68f..42002c3 100644 --- a/lama_cleaner/app/src/components/Workspace.tsx +++ b/lama_cleaner/app/src/components/Workspace.tsx @@ -25,6 +25,8 @@ import PESidePanel from './SidePanel/PESidePanel' import FileManager from './FileManager/FileManager' import P2PSidePanel from './SidePanel/P2PSidePanel' import Plugins from './Plugins/Plugins' +import Flex from './shared/Layout' +import ImageSize from './ImageSize/ImageSize' const Workspace = () => { const setFile = useSetRecoilState(fileState) @@ -103,7 +105,10 @@ const Workspace = () => { {isSD ? : <>} {isPaintByExample ? : <>} {isPix2Pix ? : <>} - + + + +