add image size on left corner
This commit is contained in:
parent
aba98ca5fa
commit
af167a0daa
5
lama_cleaner/app/src/components/ImageSize/ImageSize.scss
Normal file
5
lama_cleaner/app/src/components/ImageSize/ImageSize.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.imageSize {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 8px 8px;
|
||||
}
|
20
lama_cleaner/app/src/components/ImageSize/ImageSize.tsx
Normal file
20
lama_cleaner/app/src/components/ImageSize/ImageSize.tsx
Normal file
@ -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 (
|
||||
<div className="imageSize">
|
||||
{imageWidth}x{imageHeight}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImageSize
|
@ -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;
|
||||
|
@ -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 ? <SidePanel /> : <></>}
|
||||
{isPaintByExample ? <PESidePanel /> : <></>}
|
||||
{isPix2Pix ? <P2PSidePanel /> : <></>}
|
||||
<Flex style={{ position: 'absolute', top: 68, left: 24, gap: 12 }}>
|
||||
<Plugins />
|
||||
<ImageSize />
|
||||
</Flex>
|
||||
<FileManager
|
||||
photoWidth={256}
|
||||
show={showFileManager}
|
||||
|
@ -10,6 +10,7 @@
|
||||
@use '../components/FileManager/FileManager';
|
||||
@use '../components/LandingPage/LandingPage';
|
||||
@use '../components/Header/Header';
|
||||
@use '../components/ImageSize/ImageSize.scss';
|
||||
@use '../components/Header/PromptInput';
|
||||
@use '../components/Header/ThemeChanger';
|
||||
@use '../components/Shortcuts/Shortcuts';
|
||||
|
Loading…
Reference in New Issue
Block a user