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({ const request = extend({
prefix: process.env.API_URL, prefix: process.env.API_URL,
timeout: 1000, timeout: 30000,
}); });
console.log('process.env.API_URL', process.env.API_URL); console.log('process.env.API_URL', process.env.API_URL);

View File

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

View File

@ -1,5 +1,6 @@
.designable-form-item { .designable-form-item {
position: relative; position: relative;
&:hover,
&.active { &.active {
> .designable-bar { > .designable-bar {
display: block; display: block;
@ -16,6 +17,7 @@
bottom: -0; bottom: -0;
border-radius: 2px; border-radius: 2px;
border: 2px solid #1890ff; border: 2px solid #1890ff;
&:hover,
&.active { &.active {
display: block; 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; line-height: 16px;
height: 16px; height: 16px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
border-radius: 2px;
top: 2px;
left: 2px;
} }
.designable-bar { .designable-bar {
border-radius: 1px !important; border-radius: 2px !important;
border: 2px solid @bgcolor !important; // border: 2px solid @bgcolor !important;
border: 0 !important;
background: rgba(241, 139, 98, 0.06) !important;
.designable-bar-actions { .designable-bar-actions {
padding: 0 !important; padding: 0 !important;
background: none !important; background: none !important;
display: flex !important; display: flex !important;
right: 2px !important; right: 2px !important;
top: 2px !important;
// .ant-space-item { // .ant-space-item {
// margin: 0 !important; // margin: 0 !important;
// } // }
@ -26,6 +32,7 @@
gap: 2px !important; gap: 2px !important;
} }
.anticon { .anticon {
border-radius: 1px;
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
vertical-align: top; vertical-align: top;
@ -69,3 +76,8 @@
.nb-designable-toggle.active { .nb-designable-toggle.active {
background: @bgcolor !important; 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({ export const request = extend({
prefix: process.env.API_URL, prefix: process.env.API_URL,
timeout: 1000, timeout: 30000,
}); });
console.log('process.env.API_URL', process.env.API_URL); console.log('process.env.API_URL', process.env.API_URL);