add image size on left corner

This commit is contained in:
Qing 2023-03-28 21:24:44 +08:00
parent aba98ca5fa
commit af167a0daa
5 changed files with 35 additions and 4 deletions

View File

@ -0,0 +1,5 @@
.imageSize {
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 8px 8px;
}

View 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

View File

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

View File

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

View File

@ -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';