titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix styling for overflowing elements

Browse Source
This commit is contained in:
1ilit 2024-05-17 03:45:42 +03:00
parent 6c6d326544
commit cd050a59f9
7 changed files with 55 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/EditorHeader/Modal/Modal.jsx
View File

@ -333,6 +333,7 @@ export default function Modal({
}} }}
cancelText={t("cancel")} cancelText={t("cancel")}
width={modal === MODAL.NEW ? 740 : 600} width={modal === MODAL.NEW ? 740 : 600}
bodyStyle={{ maxHeight: window.innerHeight - 280, overflow: "auto" }}
> >
{getModalBody()} {getModalBody()}
</SemiUIModal> </SemiUIModal>

2
src/components/EditorHeader/Modal/New.jsx
View File

@ -10,7 +10,7 @@ export default function New({ selectedTemplateId, setSelectedTemplateId }) {
const templates = useLiveQuery(() => db.templates.toArray()); const templates = useLiveQuery(() => db.templates.toArray());
return ( return (
<div className="h-[360px] grid grid-cols-3 gap-2 overflow-auto px-1"> <div className="grid grid-cols-3 gap-2 overflow-auto px-1">
<div onClick={() => setSelectedTemplateId(0)}> <div onClick={() => setSelectedTemplateId(0)}>
<div <div
className={`rounded-md h-[180px] border-2 hover:border-dashed ${ className={`rounded-md h-[180px] border-2 hover:border-dashed ${

14
src/components/EditorSidePanel/AreasTab/AreasTab.jsx
View File

@ -1,4 +1,4 @@
import { Row, Col, Button } from "@douyinfe/semi-ui"; import { Button } from "@douyinfe/semi-ui";
import { IconPlus } from "@douyinfe/semi-icons"; import { IconPlus } from "@douyinfe/semi-icons";
import Empty from "../Empty"; import Empty from "../Empty";
import { useAreas } from "../../../hooks"; import { useAreas } from "../../../hooks";
@ -12,16 +12,14 @@ export default function AreasTab() {
return ( return (
<div> <div>
<Row gutter={6}> <div className="flex gap-2">
<Col span={16}> <SearchBar />
<SearchBar /> <div>
</Col>
<Col span={8}>
<Button icon={<IconPlus />} block onClick={addArea}> <Button icon={<IconPlus />} block onClick={addArea}>
{t("add_area")} {t("add_area")}
</Button> </Button>
</Col> </div>
</Row> </div>
{areas.length <= 0 ? ( {areas.length <= 0 ? (
<Empty <Empty
title={t("no_subject_areas")} title={t("no_subject_areas")}

28
src/components/EditorSidePanel/NotesTab/NotesTab.jsx
View File

@ -1,4 +1,4 @@
import { Row, Col, Button, Collapse } from "@douyinfe/semi-ui"; import { Button, Collapse } from "@douyinfe/semi-ui";
import { IconPlus } from "@douyinfe/semi-icons"; import { IconPlus } from "@douyinfe/semi-icons";
import { useNotes, useSelect } from "../../../hooks"; import { useNotes, useSelect } from "../../../hooks";
import Empty from "../Empty"; import Empty from "../Empty";
@ -13,23 +13,21 @@ export default function NotesTab() {
return ( return (
<> <>
<Row gutter={6}> <div className="flex gap-2">
<Col span={16}> <SearchBar
<SearchBar setActiveKey={(activeKey) =>
setActiveKey={(activeKey) => setSelectedElement((prev) => ({
setSelectedElement((prev) => ({ ...prev,
...prev, id: parseInt(activeKey),
id: parseInt(activeKey), }))
})) }
} />
/> <div>
</Col>
<Col span={8}>
<Button icon={<IconPlus />} block onClick={() => addNote()}> <Button icon={<IconPlus />} block onClick={() => addNote()}>
{t("add_note")} {t("add_note")}
</Button> </Button>
</Col> </div>
</Row> </div>
{notes.length <= 0 ? ( {notes.length <= 0 ? (
<Empty title={t("no_notes")} text={t("no_notes_text")} /> <Empty title={t("no_notes")} text={t("no_notes_text")} />
) : ( ) : (

20
src/components/EditorSidePanel/TablesTab/TableInfo.jsx
View File

@ -1,8 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { import {
Collapse, Collapse,
Row,
Col,
Input, Input,
TextArea, TextArea,
Button, Button,
@ -210,8 +208,8 @@ export default function TableInfo({ data }) {
</Collapse.Panel> </Collapse.Panel>
</Collapse> </Collapse>
</Card> </Card>
<Row gutter={6} className="mt-2"> <div className="flex justify-between items-center gap-1 mb-2">
<Col span={8}> <div>
<Popover <Popover
content={ content={
<div className="popover-theme"> <div className="popover-theme">
@ -263,12 +261,12 @@ export default function TableInfo({ data }) {
showArrow showArrow
> >
<div <div
className="h-[32px] w-[32px] rounded mb-2" className="h-[32px] w-[32px] rounded"
style={{ backgroundColor: data.color }} style={{ backgroundColor: data.color }}
/> />
</Popover> </Popover>
</Col> </div>
<Col span={7}> <div className="flex gap-1">
<Button <Button
block block
onClick={() => { onClick={() => {
@ -302,8 +300,6 @@ export default function TableInfo({ data }) {
> >
{t("add_index")} {t("add_index")}
</Button> </Button>
</Col>
<Col span={6}>
<Button <Button
onClick={() => { onClick={() => {
setUndoStack((prev) => [ setUndoStack((prev) => [
@ -342,15 +338,13 @@ export default function TableInfo({ data }) {
> >
{t("add_field")} {t("add_field")}
</Button> </Button>
</Col>
<Col span={3}>
<Button <Button
icon={<IconDeleteStroked />} icon={<IconDeleteStroked />}
type="danger" type="danger"
onClick={() => deleteTable(data.id)} onClick={() => deleteTable(data.id)}
/> />
</Col> </div>
</Row> </div>
</div> </div>
); );
} }

14
src/components/EditorSidePanel/TablesTab/TablesTab.jsx
View File

@ -1,4 +1,4 @@
import { Collapse, Row, Col, Button } from "@douyinfe/semi-ui"; import { Collapse, Button } from "@douyinfe/semi-ui";
import { IconPlus } from "@douyinfe/semi-icons"; import { IconPlus } from "@douyinfe/semi-icons";
import { useSelect, useTables } from "../../../hooks"; import { useSelect, useTables } from "../../../hooks";
import { ObjectType } from "../../../data/constants"; import { ObjectType } from "../../../data/constants";
@ -14,16 +14,14 @@ export default function TablesTab() {
return ( return (
<> <>
<Row gutter={6}> <div className="flex gap-2">
<Col span={16}> <SearchBar tables={tables} />
<SearchBar tables={tables} /> <div>
</Col>
<Col span={8}>
<Button icon={<IconPlus />} block onClick={() => addTable()}> <Button icon={<IconPlus />} block onClick={() => addTable()}>
{t("add_table")} {t("add_table")}
</Button> </Button>
</Col> </div>
</Row> </div>
{tables.length === 0 ? ( {tables.length === 0 ? (
<Empty title={t("no_tables")} text={t("no_tables_text")} /> <Empty title={t("no_tables")} text={t("no_tables_text")} />
) : ( ) : (

46
src/components/EditorSidePanel/TypesTab/TypesTab.jsx
View File

@ -1,4 +1,4 @@
import { Collapse, Row, Col, Button, Popover } from "@douyinfe/semi-ui"; import { Collapse, Button, Popover } from "@douyinfe/semi-ui";
import { IconPlus, IconInfoCircle } from "@douyinfe/semi-icons"; import { IconPlus, IconInfoCircle } from "@douyinfe/semi-icons";
import { useSelect, useTypes } from "../../../hooks"; import { useSelect, useTypes } from "../../../hooks";
import { ObjectType } from "../../../data/constants"; import { ObjectType } from "../../../data/constants";
@ -14,33 +14,29 @@ export default function TypesTab() {
return ( return (
<> <>
<Row gutter={6}> <div className="flex gap-2">
<Col span={13}> <Searchbar />
<Searchbar /> <div>
</Col>
<Col span={8}>
<Button icon={<IconPlus />} block onClick={() => addType()}> <Button icon={<IconPlus />} block onClick={() => addType()}>
{t("add_type")} {t("add_type")}
</Button> </Button>
</Col> </div>
<Col span={3}> <Popover
<Popover content={
content={ <div className="w-[240px] text-sm space-y-2 popover-theme">
<div className="w-[240px] text-sm space-y-2 popover-theme"> {t("types_info")
{t("types_info") .split("\n")
.split("\n") .map((line, index) => (
.map((line, index) => ( <div key={index}>{line}</div>
<div key={index}>{line}</div> ))}
))} </div>
</div> }
} showArrow
showArrow position="rightTop"
position="rightTop" >
> <Button theme="borderless" icon={<IconInfoCircle />} />
<Button theme="borderless" icon={<IconInfoCircle />} /> </Popover>
</Popover> </div>
</Col>
</Row>
{types.length <= 0 ? ( {types.length <= 0 ? (
<Empty title={t("no_types")} text={t("no_types_text")} /> <Empty title={t("no_types")} text={t("no_types_text")} />
) : ( ) : (