improved designable styling

This commit is contained in:
chenos 2021-08-17 15:58:28 +08:00
parent 2ba5e6f76f
commit 4bcde0befe
5 changed files with 59 additions and 39 deletions

View File

@ -16,7 +16,7 @@ import { extend } from 'umi-request';
const request = extend({
prefix: process.env.API_URL,
timeout: 1000,
timeout: 30000,
});
console.log('process.env.API_URL', process.env.API_URL);

View File

@ -37,40 +37,40 @@ const DraggableBlock = (props) => {
return (
<DraggableBlockContext.Provider value={{ dragRef }}>
<div
onMouseEnter={(e) => {
setActive(true);
// console.log('e.onMouseEnter', new Date().toString());
}}
onMouseMove={(event) => {
let dropElement = document.elementFromPoint(
event.clientX,
event.clientY,
);
const dropIds = [];
while (dropElement) {
if (!dropElement.getAttribute) {
dropElement = dropElement.parentNode as HTMLElement;
continue;
}
const dropId = dropElement.getAttribute('data-drop-id');
if (dropId) {
dropIds.push(dropId);
}
// if (dropId && dropId !== schema.name) {
// setActive(false);
// break;
// onMouseEnter={(e) => {
// setActive(true);
// // console.log('e.onMouseEnter', new Date().toString());
// }}
// onMouseMove={(event) => {
// let dropElement = document.elementFromPoint(
// event.clientX,
// event.clientY,
// );
// const dropIds = [];
// while (dropElement) {
// if (!dropElement.getAttribute) {
// dropElement = dropElement.parentNode as HTMLElement;
// continue;
// }
dropElement = dropElement.parentNode as HTMLElement;
}
if (dropIds.length > 0) {
setActive(dropIds[0] === schema.name);
}
// console.log('e.onMouseMove', dropIds, schema.name);
}}
onMouseLeave={(e) => {
setActive(false);
// console.log('e.onMouseLeave', new Date().toString());
}}
// const dropId = dropElement.getAttribute('data-drop-id');
// if (dropId) {
// dropIds.push(dropId);
// }
// // if (dropId && dropId !== schema.name) {
// // setActive(false);
// // break;
// // }
// dropElement = dropElement.parentNode as HTMLElement;
// }
// if (dropIds.length > 0) {
// setActive(dropIds[0] === schema.name);
// }
// // console.log('e.onMouseMove', dropIds, schema.name);
// }}
// onMouseLeave={(e) => {
// setActive(false);
// // console.log('e.onMouseLeave', new Date().toString());
// }}
ref={mergeRefs([previewRef, dropRef])}
className={cls('nb-grid-block', 'designable-form-item', {
'top-half': onTopHalf,

View File

@ -1,5 +1,6 @@
.designable-form-item {
position: relative;
&:hover,
&.active {
> .designable-bar {
display: block;
@ -16,6 +17,7 @@
bottom: -0;
border-radius: 2px;
border: 2px solid #1890ff;
&:hover,
&.active {
display: block;
}
@ -37,4 +39,10 @@
}
}
}
.ant-formily-item + .designable-bar {
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
}
}

View File

@ -9,16 +9,22 @@
line-height: 16px;
height: 16px;
border-bottom-right-radius: 2px;
border-radius: 2px;
top: 2px;
left: 2px;
}
.designable-bar {
border-radius: 1px !important;
border: 2px solid @bgcolor !important;
border-radius: 2px !important;
// border: 2px solid @bgcolor !important;
border: 0 !important;
background: rgba(241, 139, 98, 0.06) !important;
.designable-bar-actions {
padding: 0 !important;
background: none !important;
display: flex !important;
right: 2px !important;
top: 2px !important;
// .ant-space-item {
// margin: 0 !important;
// }
@ -26,6 +32,7 @@
gap: 2px !important;
}
.anticon {
border-radius: 1px;
width: 16px !important;
height: 16px !important;
vertical-align: top;
@ -69,3 +76,8 @@
.nb-designable-toggle.active {
background: @bgcolor !important;
}
.ant-card + .designable-bar {
background: none !important;
border: 2px solid rgba(241, 139, 98, 0.3) !important;
}

View File

@ -23,7 +23,7 @@ export function useDefaultAction() {
export const request = extend({
prefix: process.env.API_URL,
timeout: 1000,
timeout: 30000,
});
console.log('process.env.API_URL', process.env.API_URL);