ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: quick edit styles (#1177)

Browse Source 
Co-authored-by: sealday <sealday@gmail.com>
Reviewed-on: daoyoucloud/tachybase#1177
This commit is contained in:
sealday 2024-06-13 07:44:13 +08:00
parent 31188169f3
commit 7a80e13faa
2 changed files with 56 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/core/client/src/schema-component/antd/association-field/SubTabs/InternalCollapse.tsx
View File

@ -4,8 +4,7 @@ import { fuzzysearch } from '@tachybase/utils/client';
import { CheckOutlined, SearchOutlined } from '@ant-design/icons';
import { useAsyncEffect, useDeepCompareEffect } from 'ahooks';
import { Button, Collapse, CollapseProps, Input, Space, Tabs } from 'antd';
import { createStyles } from 'antd-style';
import { Button, Collapse, CollapseProps, Input, Space } from 'antd';
import flat from 'flat';
import { useTranslation } from 'react-i18next';
import { useInView } from 'react-intersection-observer';
@ -15,36 +14,7 @@ import { useCollectionManager } from '../../../../data-source';
import { markRecordAsNew } from '../../../../data-source/collection-record/isNewRecord';
import { useAssociationFieldContext } from '../hooks';
import { useFieldServiceFilter } from './hook';
const useStyles = createStyles(({ css }) => {
return {
container: css`
display: flex;
flex-direction: row;
max-height: 30vh;
.left-pane {
display: flex;
flex-direction: column;
width: 200px;
background-color: red;
overflow-y: auto;
div {
cursor: pointer;
}
}
.right-pane {
display: flex;
flex-direction: column;
overflow-y: auto;
flex: 1;
background-color: blue;
div {
margin-bottom: 2px;
}
}
`,
};
});
import { useStyles } from './styles';
export const ObservableItem = ({ item, onChange, leftRef }) => {
const { ref } = useInView({

54
packages/core/client/src/schema-component/antd/association-field/SubTabs/styles.ts Normal file
View File

@ -0,0 +1,54 @@
import { createStyles } from 'antd-style';
export const useStyles = createStyles(({ css }) => {
return {
container: css`
display: flex;
flex-direction: row;
max-height: 30vh;
.left-pane {
padding: 2px;
display: flex;
font-weight: 500;
flex-direction: column;
width: 100px;
overflow-y: auto;
/* 隐藏滚动条 微软/火狐 */
-ms-overflow-style: none;
scrollbar-width: none;
div {
background-color: #ddd;
white-space: normal;
cursor: pointer;
margin-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
}
div:last-of-type {
margin-bottom: 0;
}
}
/* 隐藏滚动条 谷歌浏览器 */
.left-pane::-webkit-scrollbar {
display: none;
}
.right-pane {
padding: 2px;
display: flex;
flex-direction: column;
overflow-y: auto;
flex: 1;
div {
margin-bottom: 1em;
.ant-btn {
margin-right: 2px;
}
}
div:last-of-type {
margin-bottom: 0;
}
}
`,
};
});