improved designable styling
This commit is contained in:
parent
2ba5e6f76f
commit
4bcde0befe
@ -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);
|
||||
|
@ -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;
|
||||
// }
|
||||
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());
|
||||
}}
|
||||
// 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;
|
||||
// // }
|
||||
// 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,
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
@ -68,4 +75,9 @@
|
||||
|
||||
.nb-designable-toggle.active {
|
||||
background: @bgcolor !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-card + .designable-bar {
|
||||
background: none !important;
|
||||
border: 2px solid rgba(241, 139, 98, 0.3) !important;
|
||||
}
|
||||
|
@ -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);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user