test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-05 05:18:34 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

amis-saas-10220 布局容器外观

Browse Source 
Change-Id: I3a19924cc249a2d141c228de41a329240f0eebe0
This commit is contained in:
qkiroc 2023-03-16 20:01:47 +08:00
parent 61ab64fd00
commit aeeef05c12
4 changed files with 70 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/amis-editor/src/plugin/Container.tsx
View File

@ -163,7 +163,7 @@ export class ContainerPlugin extends BasePlugin {
}),
getSchemaTpl('layout:flex-wrap', {
visibleOn: 'data.style && data.style.display === "flex"'
}),
})
];
return getSchemaTpl('tabs', [
@ -220,35 +220,35 @@ export class ContainerPlugin extends BasePlugin {
// 自由容器不需要 display 相关配置项
...(!isFreeContainer ? displayTpl : []),
isFlexItem
? getSchemaTpl('layout:flex', {
isFlexColumnItem,
label: isFlexColumnItem ? '高度设置' : '宽度设置',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative")'
})
: null,
? getSchemaTpl('layout:flex', {
isFlexColumnItem,
label: isFlexColumnItem ? '高度设置' : '宽度设置',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative")'
})
: null,
isFlexItem
? getSchemaTpl('layout:flex-grow', {
visibleOn:
'data.style && data.style.flex === "1 1 auto" && (data.style.position === "static" || data.style.position === "relative")'
})
: null,
? getSchemaTpl('layout:flex-grow', {
visibleOn:
'data.style && data.style.flex === "1 1 auto" && (data.style.position === "static" || data.style.position === "relative")'
})
: null,
isFlexItem
? getSchemaTpl('layout:flex-basis', {
label: isFlexColumnItem ? '弹性高度' : '弹性宽度',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"'
})
: null,
? getSchemaTpl('layout:flex-basis', {
label: isFlexColumnItem ? '弹性高度' : '弹性宽度',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"'
})
: null,
isFlexItem
? getSchemaTpl('layout:flex-basis', {
label: isFlexColumnItem ? '固定高度' : '固定宽度',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 150px"'
})
: null,
? getSchemaTpl('layout:flex-basis', {
label: isFlexColumnItem ? '固定高度' : '固定宽度',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 150px"'
})
: null,
getSchemaTpl('layout:overflow-x', {
visibleOn: `${
@ -288,7 +288,7 @@ export class ContainerPlugin extends BasePlugin {
getSchemaTpl('layout:min-width', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
}),
getSchemaTpl('layout:overflow-x', {
visibleOn: `${
!isFlexItem || isFlexColumnItem
@ -308,16 +308,7 @@ export class ContainerPlugin extends BasePlugin {
title: '外观',
className: 'p-none',
body: getSchemaTpl('collapseGroup', [
...getSchemaTpl('style:common', ['layout']),
getSchemaTpl('style:classNames', {
isFormItem: false,
schema: [
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容区'
})
]
})
...getSchemaTpl('theme:common', ['layout'])
])
}
]);

11
packages/amis-editor/src/plugin/IFrame.tsx
View File

@ -77,10 +77,7 @@ export class IFramePlugin extends BasePlugin {
})
]
},
getSchemaTpl('style:classNames', {
isFormItem: false
}),
...getSchemaTpl('style:common', [], 'border')
...getSchemaTpl('theme:common', ['layout'])
])
]
}
@ -88,7 +85,11 @@ export class IFramePlugin extends BasePlugin {
};
renderRenderer(props: any) {
return this.renderPlaceholder(`IFrame 页面（${props.src}）`, props.key, props.style);
return this.renderPlaceholder(
`IFrame 页面（${props.src}）`,
props.key,
props.style
);
}
}

68
packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
View File

@ -40,9 +40,9 @@ const defaultFlexContainerSchema = {
defaultFlexColumnSchema('第三列')
],
style: {
position: 'static',
position: 'static'
},
direction: "row",
direction: 'row',
justify: 'flex-start',
alignItems: 'stretch'
};
@ -87,7 +87,7 @@ export class FlexPluginBase extends BasePlugin {
getSchemaTpl('layout:originPosition'),
getSchemaTpl('layout:inset', {
mode: 'vertical'
}),
})
];
return [
@ -225,33 +225,33 @@ export class FlexPluginBase extends BasePlugin {
getSchemaTpl('layout:flex-wrap'),
isFlexItem
? getSchemaTpl('layout:flex', {
isFlexColumnItem,
label: isFlexColumnItem ? '高度设置' : '宽度设置',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative")'
})
: null,
? getSchemaTpl('layout:flex', {
isFlexColumnItem,
label: isFlexColumnItem ? '高度设置' : '宽度设置',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative")'
})
: null,
isFlexItem
? getSchemaTpl('layout:flex-grow', {
visibleOn:
'data.style && data.style.flex === "1 1 auto" && (data.style.position === "static" || data.style.position === "relative")'
})
: null,
? getSchemaTpl('layout:flex-grow', {
visibleOn:
'data.style && data.style.flex === "1 1 auto" && (data.style.position === "static" || data.style.position === "relative")'
})
: null,
isFlexItem
? getSchemaTpl('layout:flex-basis', {
label: isFlexColumnItem ? '弹性高度' : '弹性宽度',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"'
})
: null,
? getSchemaTpl('layout:flex-basis', {
label: isFlexColumnItem ? '弹性高度' : '弹性宽度',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"'
})
: null,
isFlexItem
? getSchemaTpl('layout:flex-basis', {
label: isFlexColumnItem ? '固定高度' : '固定宽度',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 150px"'
})
: null,
? getSchemaTpl('layout:flex-basis', {
label: isFlexColumnItem ? '固定高度' : '固定宽度',
visibleOn:
'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 150px"'
})
: null,
getSchemaTpl('layout:overflow-x', {
visibleOn: `${
@ -292,7 +292,7 @@ export class FlexPluginBase extends BasePlugin {
getSchemaTpl('layout:min-width', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
}),
getSchemaTpl('layout:overflow-x', {
visibleOn: `${
!isFlexItem || isFlexColumnItem
@ -313,11 +313,7 @@ export class FlexPluginBase extends BasePlugin {
title: '外观',
className: 'p-none',
body: getSchemaTpl('collapseGroup', [
...getSchemaTpl('style:common', []),
{
title: 'CSS 类名',
body: [getSchemaTpl('className', {label: '外层CSS类名'})]
}
...getSchemaTpl('theme:common', [])
])
}
])
@ -342,7 +338,7 @@ export class FlexPluginBase extends BasePlugin {
const isFlexColumnItem = this.manager?.isFlexColumnItem(id);
const newColumnSchema = defaultFlexColumnSchema('新的一列');
const toolbarsTooltips:any = {};
const toolbarsTooltips: any = {};
toolbars.forEach(toolbar => {
if (toolbar.tooltip) {
toolbarsTooltips[toolbar.tooltip] = 1;
@ -403,7 +399,9 @@ export class FlexPluginBase extends BasePlugin {
}
if (isFlexItem && !draggableContainer) {
if (!toolbarsTooltips[`${isFlexColumnItem ? '上方' : '左侧'}插入列级容器`]) {
if (
!toolbarsTooltips[`${isFlexColumnItem ? '上方' : '左侧'}插入列级容器`]
) {
// 布局容器的列级元素 增加左右插入icon
toolbars.push(
{

12
packages/amis-editor/src/plugin/TableView.tsx
View File

@ -236,13 +236,7 @@ export class TableViewPlugin extends BasePlugin {
{
title: '外观',
className: 'p-none',
body: getSchemaTpl('collapseGroup', [
...getSchemaTpl('style:common'),
{
title: 'CSS 类名',
body: [getSchemaTpl('className')]
}
])
body: getSchemaTpl('collapseGroup', [...getSchemaTpl('theme:common')])
},
{
title: '状态',
@ -437,7 +431,7 @@ export class TableViewPlugin extends BasePlugin {
{
title: '外观',
className: 'p-none',
body: getSchemaTpl('collapseGroup', getSchemaTpl('style:common'))
body: getSchemaTpl('collapseGroup', getSchemaTpl('theme:common'))
}
])
];
@ -467,7 +461,7 @@ export class TableViewPlugin extends BasePlugin {
{
title: '外观',
className: 'p-none',
body: getSchemaTpl('collapseGroup', getSchemaTpl('style:common'))
body: getSchemaTpl('collapseGroup', getSchemaTpl('theme:common'))
}
])
];