From 80484822478af2380eaee99a68b38ba102f4ac79 Mon Sep 17 00:00:00 2001 From: chenos Date: Fri, 3 Sep 2021 15:10:10 +0800 Subject: [PATCH] feat: improve styling --- .../client/src/components/Sortable/index.tsx | 4 +- packages/client/src/schemas/menu/index.tsx | 41 ++++++++++++------- packages/client/src/schemas/menu/style.less | 40 ++++++++++++++++++ .../client/src/schemas/table/Sortable.tsx | 8 +++- packages/client/src/schemas/table/style.less | 16 ++++++++ 5 files changed, 92 insertions(+), 17 deletions(-) diff --git a/packages/client/src/components/Sortable/index.tsx b/packages/client/src/components/Sortable/index.tsx index 4499c0e41..7aa995c14 100644 --- a/packages/client/src/components/Sortable/index.tsx +++ b/packages/client/src/components/Sortable/index.tsx @@ -76,7 +76,7 @@ export function Droppable(props: DroppableProps) { return ( { @@ -138,7 +138,7 @@ export function SortableItem(props: SortableItemProps) { { ) : ( } + icon={null} + // icon={} title={ - <> - {schema.title} - + + {icon && ( + + + + )} + {schema.title} + + + // <> + // {schema.title} + // } eventKey={schema.name} key={schema.name} @@ -734,16 +750,13 @@ Menu.DesignableBar = (props) => { _.set(initialValues, name, get(schema, name)); }, ); - const values = await FormDialog( - `编辑菜单项`, - () => { - return ( - - - - ); - }, - ).open({ + const values = await FormDialog(`编辑菜单项`, () => { + return ( + + + + ); + }).open({ initialValues, }); if (values.title) { diff --git a/packages/client/src/schemas/menu/style.less b/packages/client/src/schemas/menu/style.less index 3871e2b73..99f75a2c4 100644 --- a/packages/client/src/schemas/menu/style.less +++ b/packages/client/src/schemas/menu/style.less @@ -6,6 +6,10 @@ .ant-menu-horizontal { width: 100%; + .ant-menu-item:active, + .ant-menu-submenu-title:active { + background-color: inherit !important; + } } .ant-menu-item-active .designable-bar { @@ -110,3 +114,39 @@ .nb-add-new-menu-item.menu-mode-inline { margin: 0 14px; } + +.ant-menu-horizontal { + .ant-menu-submenu, + .ant-menu-item { + .droppable.isDragging { + opacity: .2; + } + .droppable:not(.isDragging).isOver::after { + content: ''; + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 2px; + background-color: #f18b62; + } + } +} + +.ant-menu-inline { + .ant-menu-submenu, + .ant-menu-item { + .droppable.isDragging { + opacity: .2; + } + .droppable:not(.isDragging).isOver::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + height: 2px; + width: 100%; + background-color: #f18b62; + } + } +} diff --git a/packages/client/src/schemas/table/Sortable.tsx b/packages/client/src/schemas/table/Sortable.tsx index f06ab489a..4728a60d8 100644 --- a/packages/client/src/schemas/table/Sortable.tsx +++ b/packages/client/src/schemas/table/Sortable.tsx @@ -173,7 +173,13 @@ export function SortableHeaderRow(props) { }} > {createPortal( - + {dragOverlayContent} , document.body, diff --git a/packages/client/src/schemas/table/style.less b/packages/client/src/schemas/table/style.less index b568a6ca1..419ab4531 100644 --- a/packages/client/src/schemas/table/style.less +++ b/packages/client/src/schemas/table/style.less @@ -242,4 +242,20 @@ td.nb-table-operation { .field-interface-attachment { margin-top: -13px; margin-bottom: -13px; +} + +.ant-table-cell { + &.droppable.isDragging { + opacity: .5; + background-color: rgba(241, 139, 98, 0.06) !important; + } + &.droppable:not(.isDragging).isOver::after { + content: ''; + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 2px; + background-color: #f18b62; + } } \ No newline at end of file