refactor: 修改面板管理的样式。并设置最高高度以优化用户体验

release/desktop
moonrailgun 3 years ago
parent b9c91f243d
commit 977050ea0b

@ -106,7 +106,9 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
treeData={treeData}
defaultExpandAll={true}
blockNode={true}
draggable={true}
draggable={{
icon: false,
}}
selectable={false}
titleRender={titleRender}
onDrop={handleDrop}

@ -48,29 +48,6 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-draggable-icon"
>
<span
aria-label="holder"
class="anticon anticon-holder"
role="img"
>
<svg
aria-hidden="true"
data-icon="holder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-switcher ant-tree-switcher_open"
>
@ -161,29 +138,6 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
class="ant-tree-indent-unit ant-tree-indent-unit-start"
/>
</span>
<span
class="ant-tree-draggable-icon"
>
<span
aria-label="holder"
class="anticon anticon-holder"
role="img"
>
<svg
aria-hidden="true"
data-icon="holder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
@ -254,29 +208,6 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
class="ant-tree-indent-unit ant-tree-indent-unit-start"
/>
</span>
<span
class="ant-tree-draggable-icon"
>
<span
aria-label="holder"
class="anticon anticon-holder"
role="img"
>
<svg
aria-hidden="true"
data-icon="holder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
@ -343,29 +274,6 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-draggable-icon"
>
<span
aria-label="holder"
class="anticon anticon-holder"
role="img"
>
<svg
aria-hidden="true"
data-icon="holder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-switcher ant-tree-switcher_open"
>
@ -456,29 +364,6 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
class="ant-tree-indent-unit ant-tree-indent-unit-end"
/>
</span>
<span
class="ant-tree-draggable-icon"
>
<span
aria-label="holder"
class="anticon anticon-holder"
role="img"
>
<svg
aria-hidden="true"
data-icon="holder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
@ -549,29 +434,6 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
class="ant-tree-indent-unit ant-tree-indent-unit-end"
/>
</span>
<span
class="ant-tree-draggable-icon"
>
<span
aria-label="holder"
class="anticon anticon-holder"
role="img"
>
<svg
aria-hidden="true"
data-icon="holder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>

@ -72,11 +72,13 @@ export const GroupPanel: React.FC<{
{t('面板管理')}
</FullModalCommonTitle>
<GroupPanelTree
groupId={groupId}
groupPanels={editingGroupPanels}
onChange={handleChange}
/>
<div className="max-h-80 overflow-auto border rounded border-black border-opacity-20 p-1">
<GroupPanelTree
groupId={groupId}
groupPanels={editingGroupPanels}
onChange={handleChange}
/>
</div>
{!_isEqual(groupPanels, editingGroupPanels) && (
<div className="space-x-1 mt-2">

Loading…
Cancel
Save