aiden
/
tailchat
mirror of https://github.com/msgbyte/tailchat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: 修复迁移后产生的问题，并统一图标按钮的显示方式

Browse Source
pull/81/head
moonrailgun 3 years ago
parent f156fe6410
commit b9c91f243d
8 changed files with 507 additions and 228 deletions
Show Stats Download Patch File Download Diff File

20
web/src/components/FullModal/Field.tsx
Unescape Escape View File

@ -1,10 +1,10 @@
import React, { useState, useCallback, useEffect } from 'react';
import _isString from 'lodash/isString';
import _isNil from 'lodash/isNil';
import { Button, Input, Space } from 'antd';
import { Icon } from '@iconify/react';
import { Input, Space } from 'antd';
import { t } from 'tailchat-shared';
import { DelayTip } from '../DelayTip';
import { IconBtn } from '../IconBtn';
export type FullModalFieldEditorRenderComponent = React.FC<{
value: string;
@ -86,25 +86,15 @@ const FullModalFieldEditor: React.FC<FullModalFieldProps> = React.memo(
{!isEditing ? (
<DelayTip title={t('编辑')}>
<Button
icon={<Icon className="anticon" icon="mdi:square-edit-outline" />}
onClick={handleEditing}
/>
<IconBtn icon="mdi:square-edit-outline" onClick={handleEditing} />
</DelayTip>
) : (
<>
<DelayTip title={t('取消')}>
<Button
icon={<Icon className="anticon" icon="mdi:close" />}
onClick={handleEditing}
/>
<IconBtn icon="mdi:close" onClick={handleEditing} />
</DelayTip>
<DelayTip title={t('保存变更')}>
<Button
type="primary"
icon={<Icon className="anticon" icon="mdi:check" />}
onClick={handleSave}
/>
<IconBtn type="primary" icon="mdi:check" onClick={handleSave} />
</DelayTip>
</>
)}

48
web/src/components/IconBtn.tsx
Unescape Escape View File

@ -1,20 +1,48 @@
import { Icon } from '@iconify/react';
import { Button, ButtonProps } from 'antd';
import { Button, ButtonProps, Tooltip } from 'antd';
import React from 'react';
import { isValidStr } from 'tailchat-shared';
interface IconBtnProps extends ButtonProps {
const btnClassName =
'border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60';
type IconBtnShapeType = 'circle' | 'square';
function calcShape(
inputShape: IconBtnShapeType = 'circle'
): ButtonProps['shape'] {
if (inputShape === 'circle') {
return 'circle';
}
return 'default';
}
interface IconBtnProps extends Omit<ButtonProps, 'shape'> {
icon: string;
iconClassName?: string;
shape?: IconBtnShapeType;
title?: string;
}
export const IconBtn: React.FC<IconBtnProps> = React.memo(
({ icon, ...props }) => {
return (
<Button
className="border-0 bg-black bg-opacity-30 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
shape="circle"
{...props}
icon={<Icon className="anticon" icon={icon} />}
/>
({ icon, iconClassName, title, ...props }) => {
const shape = calcShape(props.shape);
const iconEl = (
<span className="anticon">
<Icon className={iconClassName} icon={icon} />
</span>
);
const btnEl = (
<Button className={btnClassName} {...props} shape={shape} icon={iconEl} />
);
if (isValidStr(title)) {
return <Tooltip title={title}>{btnEl}</Tooltip>;
} else {
return btnEl;
}
}
);
IconBtn.displayName = 'IconBtn';

9
web/src/components/Panel/common/Wrapper.tsx
Unescape Escape View File

@ -1,9 +1,8 @@
import React, { useState } from 'react';
import { PanelCommonHeader } from '../common/Header';
import { Icon } from '@iconify/react';
import { Button } from 'antd';
import clsx from 'clsx';
import { useIsMobile } from '@/hooks/useIsMobile';
import { IconBtn } from '@/components/IconBtn';
interface RightPanelType {
name: string;
@ -54,9 +53,11 @@ export const CommonPanelWrapper: React.FC<CommonPanelWrapperProps> = React.memo(
<PanelCommonHeader
actions={[
// 关闭按钮
<Button
<IconBtn
key="close"
icon={<Icon className="anticon text-2xl" icon="mdi:close" />}
shape="square"
icon="mdi:close"
iconClassName="text-2xl"
onClick={() => setRightPanel(undefined)}
/>,
]}

48
web/src/components/Panel/group/Wrapper.tsx
Unescape Escape View File

@ -1,12 +1,11 @@
import React from 'react';
import { t, useGroupPanel } from 'tailchat-shared';
import _isNil from 'lodash/isNil';
import { Icon } from '@iconify/react';
import { Button, Tooltip } from 'antd';
import { MembersPanel } from './MembersPanel';
import { CommonPanelWrapper } from '../common/Wrapper';
import { usePanelWindow } from '@/hooks/usePanelWindow';
import { OpenedPanelTip } from '@/components/OpenedPanelTip';
import { IconBtn } from '@/components/IconBtn';
/**
* 群组面板通用包装器
@ -33,30 +32,27 @@ export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
<CommonPanelWrapper
header={panelInfo.name}
actions={(setRightPanel) => [
<Tooltip key="open" title={t('在新窗口打开')}>
<Button
icon={
<Icon className="anticon text-2xl" icon="mdi:dock-window" />
}
onClick={openPanelWindow}
/>
</Tooltip>,
<Tooltip key="members" title={t('成员列表')}>
<Button
icon={
<Icon
className="anticon text-2xl"
icon="mdi:account-supervisor-outline"
/>
}
onClick={() =>
setRightPanel({
name: t('成员'),
panel: <MembersPanel groupId={props.groupId} />,
})
}
/>
</Tooltip>,
<IconBtn
key="open"
title={t('在新窗口打开')}
shape="square"
icon="mdi:dock-window"
iconClassName="text-2xl"
onClick={openPanelWindow}
/>,
<IconBtn
key="members"
title={t('成员列表')}
shape="square"
icon="mdi:account-supervisor-outline"
iconClassName="text-2xl"
onClick={() =>
setRightPanel({
name: t('成员'),
panel: <MembersPanel groupId={props.groupId} />,
})
}
/>,
]}
>
{props.children}

79
web/src/components/Panel/personal/ConversePanel.tsx
Unescape Escape View File

@ -1,7 +1,5 @@
import { ChatBox } from '@/components/ChatBox';
import { UserListItem } from '@/components/UserListItem';
import { Icon } from '@iconify/react';
import { Button, Tooltip } from 'antd';
import React from 'react';
import {
ChatConverseState,
@ -15,6 +13,7 @@ import { openModal } from '@/components/Modal';
import { AppendDMConverseMembers } from '@/components/modals/AppendDMConverseMembers';
import { usePanelWindow } from '@/hooks/usePanelWindow';
import { OpenedPanelTip } from '@/components/OpenedPanelTip';
import { IconBtn } from '@/components/IconBtn';
const ConversePanelTitle: React.FC<{ converse: ChatConverseState }> =
React.memo(({ converse }) => {
@ -61,52 +60,44 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
}
return _compact([
<Tooltip key="open" title={t('在新窗口打开')}>
<Button
icon={
<Icon className="anticon text-2xl" icon="mdi:dock-window" />
}
onClick={openPanelWindow}
/>
</Tooltip>,
<Tooltip key="add" title={t('邀请成员')}>
<Button
icon={
<Icon
className="anticon text-2xl"
icon="mdi:account-multiple-plus-outline"
<IconBtn
key="open"
title={t('在新窗口打开')}
shape="square"
icon="mdi:dock-window"
iconClassName="text-2xl"
onClick={openPanelWindow}
/>,
<IconBtn
key="add"
title={t('邀请成员')}
shape="square"
icon="mdi:account-multiple-plus-outline"
iconClassName="text-2xl"
onClick={() =>
openModal(
<AppendDMConverseMembers
converseId={converse._id}
withoutUserIds={converse.members}
/>
}
)
}
/>,
// 当成员数大于2时，显示成员列表按钮
converse.members.length > 2 && (
<IconBtn
key="members"
title={t('成员列表')}
shape="square"
icon="mdi:account-supervisor-outline"
iconClassName="text-2xl"
onClick={() =>
openModal(
<AppendDMConverseMembers
converseId={converse._id}
withoutUserIds={converse.members}
/>
)
setRightPanel({
name: t('成员'),
panel: <ConversePanelMembers members={converse.members} />,
})
}
/>
</Tooltip>,
// 当成员数大于2时，显示成员列表按钮
converse.members.length > 2 && (
<Tooltip key="members" title={t('成员列表')}>
<Button
icon={
<Icon
className="anticon text-2xl"
icon="mdi:account-supervisor-outline"
/>
}
onClick={() =>
setRightPanel({
name: t('成员'),
panel: (
<ConversePanelMembers members={converse.members} />
),
})
}
/>
</Tooltip>
),
]);
}}

8
web/src/components/__tests__/__snapshots__/IconBtn.spec.tsx.snap
Unescape Escape View File

@ -3,10 +3,14 @@
exports[`IconBtn render 1`] = `
<div>
<button
class="ant-btn ant-btn-circle ant-btn-icon-only border-0 bg-black bg-opacity-30 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
class="ant-btn ant-btn-circle ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
[iconify icon="mdi:close"]
<span
class="anticon"
>
[iconify icon="mdi:close"]
</span>
</button>
</div>
`;

59
web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx
Unescape Escape View File

@ -5,13 +5,13 @@ import {
showAlert,
t,
} from 'tailchat-shared';
import { Button, Tree } from 'antd';
import { Space, Tree } from 'antd';
import type { DataNode } from 'antd/lib/tree';
import { buildTreeDataWithGroupPanel } from './utils';
import { Icon } from '@iconify/react';
import { useGroupPanelTreeDrag } from './useGroupPanelTreeDrag';
import { closeModal, openModal } from '@/components/Modal';
import { ModalModifyGroupPanel } from '../../GroupPanel/ModifyGroupPanel';
import { IconBtn } from '@/components/IconBtn';
interface GroupPanelTree {
groupId: string;
@ -61,32 +61,36 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
return (
<div className="flex group">
<span>{node.title}</span>
<div className="opacity-0 group-hover:opacity-100">
<Button
type="text"
size="small"
icon={<Icon className="anticon" icon="mdi:pencil-outline" />}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handleModifyPanel(String(node.key));
}}
/>
<div className="opacity-0 group-hover:opacity-100 ml-2">
<Space size="small">
<IconBtn
title={t('编辑')}
type="text"
size="small"
icon="mdi:pencil-outline"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handleModifyPanel(String(node.key));
}}
/>
<Button
type="text"
size="small"
icon={<Icon className="anticon" icon="mdi:trash-can-outline" />}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handleDeletePanel(
String(node.key),
String(node.title),
!node.isLeaf
);
}}
/>
<IconBtn
title={t('删除')}
type="text"
size="small"
icon="mdi:trash-can-outline"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handleDeletePanel(
String(node.key),
String(node.title),
!node.isLeaf
);
}}
/>
</Space>
</div>
</div>
);
@ -103,6 +107,7 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
defaultExpandAll={true}
blockNode={true}
draggable={true}
selectable={false}
titleRender={titleRender}
onDrop={handleDrop}
// TODO: 待简化 https://github.com/react-component/tree/pull/482

464
web/src/components/modals/GroupDetail/Panel/__tests__/__snapshots__/GroupPanelTree.spec.tsx.snap
Unescape Escape View File

@ -3,12 +3,12 @@
exports[`GroupPanelTree simple render snapshot 1`] = `
<div>
<div
class="ant-tree ant-tree-icon-hide ant-tree-block-node"
class="ant-tree ant-tree-icon-hide ant-tree-block-node ant-tree-unselectable"
role="tree"
>
<div
role="tree"
>
<div>
<input
aria-label="for screen reader"
style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
tabindex="0"
value=""
@ -40,12 +40,37 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
style="display: flex; flex-direction: column;"
>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-open"
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
draggable="true"
>
<span
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"
>
@ -70,9 +95,7 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
</span>
</span>
<span
aria-grabbed="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable"
draggable="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
title="section-1"
>
<span
@ -85,27 +108,50 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
section-1
</span>
<div
class="opacity-0 group-hover:opacity-100"
class="opacity-0 group-hover:opacity-100 ml-2"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
>
[iconify icon="mdi:pencil-outline"]
</button>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
[iconify icon="mdi:trash-can-outline"]
</button>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:pencil-outline"]
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:trash-can-outline"]
</span>
</button>
</div>
</div>
</div>
</div>
</span>
</span>
</div>
<div
class="ant-tree-treenode"
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-draggable"
draggable="true"
>
<span
aria-hidden="true"
@ -115,13 +161,34 @@ 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"
/>
<span
aria-grabbed="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
draggable="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="panel-01"
>
<span
@ -134,27 +201,50 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
panel-01
</span>
<div
class="opacity-0 group-hover:opacity-100"
class="opacity-0 group-hover:opacity-100 ml-2"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
[iconify icon="mdi:pencil-outline"]
</button>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
>
[iconify icon="mdi:trash-can-outline"]
</button>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:pencil-outline"]
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:trash-can-outline"]
</span>
</button>
</div>
</div>
</div>
</div>
</span>
</span>
</div>
<div
class="ant-tree-treenode ant-tree-treenode-leaf-last"
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
draggable="true"
>
<span
aria-hidden="true"
@ -164,13 +254,34 @@ 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"
/>
<span
aria-grabbed="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
draggable="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="panel-02"
>
<span
@ -183,32 +294,78 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
panel-02
</span>
<div
class="opacity-0 group-hover:opacity-100"
class="opacity-0 group-hover:opacity-100 ml-2"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
[iconify icon="mdi:pencil-outline"]
</button>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
>
[iconify icon="mdi:trash-can-outline"]
</button>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:pencil-outline"]
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:trash-can-outline"]
</span>
</button>
</div>
</div>
</div>
</div>
</span>
</span>
</div>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
draggable="true"
>
<span
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"
>
@ -233,9 +390,7 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
</span>
</span>
<span
aria-grabbed="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable"
draggable="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
title="section-2"
>
<span
@ -248,27 +403,50 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
section-2
</span>
<div
class="opacity-0 group-hover:opacity-100"
class="opacity-0 group-hover:opacity-100 ml-2"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
[iconify icon="mdi:pencil-outline"]
</button>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
>
[iconify icon="mdi:trash-can-outline"]
</button>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:pencil-outline"]
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:trash-can-outline"]
</span>
</button>
</div>
</div>
</div>
</div>
</span>
</span>
</div>
<div
class="ant-tree-treenode"
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-draggable"
draggable="true"
>
<span
aria-hidden="true"
@ -278,13 +456,34 @@ 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"
/>
<span
aria-grabbed="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
draggable="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="panel-11"
>
<span
@ -297,27 +496,50 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
panel-11
</span>
<div
class="opacity-0 group-hover:opacity-100"
class="opacity-0 group-hover:opacity-100 ml-2"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
>
[iconify icon="mdi:pencil-outline"]
</button>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
[iconify icon="mdi:trash-can-outline"]
</button>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:pencil-outline"]
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:trash-can-outline"]
</span>
</button>
</div>
</div>
</div>
</div>
</span>
</span>
</div>
<div
class="ant-tree-treenode ant-tree-treenode-leaf-last"
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
draggable="true"
>
<span
aria-hidden="true"
@ -327,13 +549,34 @@ 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"
/>
<span
aria-grabbed="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
draggable="true"
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="panel-12"
>
<span
@ -346,20 +589,41 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
panel-12
</span>
<div
class="opacity-0 group-hover:opacity-100"
class="opacity-0 group-hover:opacity-100 ml-2"
>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
>
[iconify icon="mdi:pencil-outline"]
</button>
<button
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
type="button"
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
[iconify icon="mdi:trash-can-outline"]
</button>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:pencil-outline"]
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
type="button"
>
<span
class="anticon"
>
[iconify icon="mdi:trash-can-outline"]
</span>
</button>
</div>
</div>
</div>
</div>
</span>

Write Preview
Loading…
Cancel
Save