whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

style: update responsive container styling for paintingslist component

Browse Source
This commit is contained in:
kangfenmao 2024-10-31 14:39:27 +08:00
parent 0e1674ce6c
commit e2fc593624
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/src/pages/paintings/PaintingsList.tsx
View File

@ -1,5 +1,6 @@
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons' import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'
import DragableList from '@renderer/components/DragableList' import DragableList from '@renderer/components/DragableList'
import Scrollbar from '@renderer/components/Scrollbar'
import { usePaintings } from '@renderer/hooks/usePaintings' import { usePaintings } from '@renderer/hooks/usePaintings'
import FileManager from '@renderer/services/FileManager' import FileManager from '@renderer/services/FileManager'
import { Painting } from '@renderer/types' import { Painting } from '@renderer/types'
@ -29,7 +30,7 @@ const PaintingsList: FC<PaintingsListProps> = ({
const { updatePaintings } = usePaintings() const { updatePaintings } = usePaintings()
return ( return (
<Container style={{ paddingBottom: dragging ? 80 : 0 }}> <Container style={{ paddingBottom: dragging ? 80 : 10 }}>
<DragableList <DragableList
list={paintings} list={paintings}
onUpdate={updatePaintings} onUpdate={updatePaintings}
@ -63,17 +64,18 @@ const PaintingsList: FC<PaintingsListProps> = ({
) )
} }
const Container = styled.div` const Container = styled(Scrollbar)`
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: 100%;
gap: 10px; gap: 10px;
padding: 10px 0; padding: 10px;
background-color: var(--color-background); background-color: var(--color-background);
max-width: 100px; max-width: 100px;
border-left: 0.5px solid var(--color-border); border-left: 0.5px solid var(--color-border);
height: calc(100vh - var(--navbar-height));
overflow-x: hidden;
` `
const CanvasWrapper = styled.div` const CanvasWrapper = styled.div`
@ -131,6 +133,7 @@ const DeleteButton = styled.div.attrs({ className: 'delete-button' })`
const NewPaintingButton = styled.div` const NewPaintingButton = styled.div`
width: 80px; width: 80px;
height: 80px; height: 80px;
min-height: 80px;
margin-top: -10px; margin-top: -10px;
background-color: var(--color-background-soft); background-color: var(--color-background-soft);
cursor: pointer; cursor: pointer;