improved designable styling
This commit is contained in:
parent
2ba5e6f76f
commit
4bcde0befe
@ -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);
|
||||||
|
@ -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,
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user