fix: ui problem of compact theme (#1670)
* fix: graphical interface override tabs * fix: link of markdown too longer * fix: page tab designer override in compact theme * feat: url should be ellipsis
This commit is contained in:
parent
a529d9b7eb
commit
13b74bde3f
@ -46,10 +46,6 @@ export const actionDesignerCss = css`
|
|||||||
display: none;
|
display: none;
|
||||||
background: rgba(241, 139, 98, 0.06);
|
background: rgba(241, 139, 98, 0.06);
|
||||||
border: 0;
|
border: 0;
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
> .general-schema-designer-icons {
|
> .general-schema-designer-icons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -18,9 +18,11 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
--nb-spacing: 24px;
|
--nb-spacing: 24px;
|
||||||
|
--nb-designer-offset: -10px;
|
||||||
}
|
}
|
||||||
.theme-compact {
|
.theme-compact {
|
||||||
--nb-spacing: 16px;
|
--nb-spacing: 16px;
|
||||||
|
--nb-designer-offset: -6px;
|
||||||
.ant-formily-item {
|
.ant-formily-item {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
@ -6,6 +6,7 @@ import { useCompile } from '../..';
|
|||||||
import { EllipsisWithTooltip } from './EllipsisWithTooltip';
|
import { EllipsisWithTooltip } from './EllipsisWithTooltip';
|
||||||
import { HTMLEncode } from './shared';
|
import { HTMLEncode } from './shared';
|
||||||
import { cx, css } from '@emotion/css';
|
import { cx, css } from '@emotion/css';
|
||||||
|
import { Typography } from 'antd';
|
||||||
|
|
||||||
type Composed = {
|
type Composed = {
|
||||||
Input: React.FC<InputProps & { ellipsis?: any }>;
|
Input: React.FC<InputProps & { ellipsis?: any }>;
|
||||||
@ -47,10 +48,15 @@ ReadPretty.TextArea = (props) => {
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
const content = ellipsis ?
|
const content = ellipsis ? (
|
||||||
(<EllipsisWithTooltip ellipsis={ellipsis} popoverContent={autop ? html : value}>
|
<EllipsisWithTooltip ellipsis={ellipsis} popoverContent={autop ? html : value}>
|
||||||
{text || value}
|
{text || value}
|
||||||
</EllipsisWithTooltip>) : (autop ? html : value);
|
</EllipsisWithTooltip>
|
||||||
|
) : autop ? (
|
||||||
|
html
|
||||||
|
) : (
|
||||||
|
value
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<div className={cls(prefixCls, props.className)} style={props.style}>
|
<div className={cls(prefixCls, props.className)} style={props.style}>
|
||||||
{props.addonBefore}
|
{props.addonBefore}
|
||||||
@ -101,9 +107,9 @@ ReadPretty.Html = (props) => {
|
|||||||
ReadPretty.URL = (props) => {
|
ReadPretty.URL = (props) => {
|
||||||
const prefixCls = usePrefixCls('description-url', props);
|
const prefixCls = usePrefixCls('description-url', props);
|
||||||
const content = props.value && (
|
const content = props.value && (
|
||||||
<a target={'_blank'} href={props.value as any}>
|
<Typography.Link ellipsis target={'_blank'} href={props.value as any}>
|
||||||
{props.value}
|
{props.value}
|
||||||
</a>
|
</Typography.Link>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div className={cls(prefixCls, props.className)} style={props.style}>
|
<div className={cls(prefixCls, props.className)} style={props.style}>
|
||||||
@ -120,11 +126,15 @@ ReadPretty.JSON = (props) => {
|
|||||||
const prefixCls = usePrefixCls('json', props);
|
const prefixCls = usePrefixCls('json', props);
|
||||||
return (
|
return (
|
||||||
<pre
|
<pre
|
||||||
className={cx(prefixCls, props.className, css`
|
className={cx(
|
||||||
|
prefixCls,
|
||||||
|
props.className,
|
||||||
|
css`
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
`)}
|
`,
|
||||||
|
)}
|
||||||
style={props.style}
|
style={props.style}
|
||||||
>
|
>
|
||||||
{props.value != null ? JSON.stringify(props.value, null, props.space ?? 2) : ''}
|
{props.value != null ? JSON.stringify(props.value, null, props.space ?? 2) : ''}
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
.nb-markdown {
|
.nb-markdown {
|
||||||
line-height: 1.612;
|
line-height: 1.612;
|
||||||
|
a {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nb-markdown > *:last-child {
|
.nb-markdown > *:last-child {
|
||||||
|
@ -26,10 +26,10 @@ const designerCss = css`
|
|||||||
}
|
}
|
||||||
&.nb-action-link {
|
&.nb-action-link {
|
||||||
> .general-schema-designer {
|
> .general-schema-designer {
|
||||||
top: -10px;
|
top: var(--nb-designer-offset);
|
||||||
bottom: -10px;
|
bottom: var(--nb-designer-offset);
|
||||||
left: -10px;
|
right: var(--nb-designer-offset);
|
||||||
right: -10px;
|
left: var(--nb-designer-offset);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .general-schema-designer {
|
> .general-schema-designer {
|
||||||
@ -42,10 +42,6 @@ const designerCss = css`
|
|||||||
display: none;
|
display: none;
|
||||||
background: rgba(241, 139, 98, 0.06);
|
background: rgba(241, 139, 98, 0.06);
|
||||||
border: 0;
|
border: 0;
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
> .general-schema-designer-icons {
|
> .general-schema-designer-icons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -88,10 +84,6 @@ const pageDesignerCss = css`
|
|||||||
display: none;
|
display: none;
|
||||||
/* background: rgba(241, 139, 98, 0.06); */
|
/* background: rgba(241, 139, 98, 0.06); */
|
||||||
border: 0;
|
border: 0;
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
> .general-schema-designer-icons {
|
> .general-schema-designer-icons {
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
|
@ -117,7 +117,7 @@ export const GraphCollectionPane = () => {
|
|||||||
className={css`
|
className={css`
|
||||||
height: calc(100vh - 160px);
|
height: calc(100vh - 160px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin: -24px;
|
margin: calc(var(--nb-spacing) * -1);
|
||||||
position: relative;
|
position: relative;
|
||||||
`}
|
`}
|
||||||
id="graph_container"
|
id="graph_container"
|
||||||
|
Loading…
Reference in New Issue
Block a user