github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-13 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: right pannel style

Browse Source
This commit is contained in:
yehuozhili 2020-10-07 19:35:35 +08:00
parent dda212e5e9
commit ae19fce77a
3 changed files with 66 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/global.css
View File

@ -63,4 +63,5 @@ body {
} }
.ant-tabs-left.editorTabclass .ant-tabs-content-holder{ .ant-tabs-left.editorTabclass .ant-tabs-content-holder{
overflow: auto; overflow: auto;
padding:8px;
} }

52
src/pages/editor/Container.tsx
View File

@ -45,7 +45,7 @@ const Container = (props: {
}) => { }) => {
const [scaleNum, setScale] = useState(1); const [scaleNum, setScale] = useState(1);
const [collapsed, setCollapsed] = useState(true); const [collapsed, setCollapsed] = useState(true);
const [rightColla, setRightColla] = useState(true);
const { pstate, cstate, dispatch } = props; const { pstate, cstate, dispatch } = props;
const pointData = pstate ? pstate.pointData : []; const pointData = pstate ? pstate.pointData : [];
const cpointData = cstate ? cstate.pointData : []; const cpointData = cstate ? cstate.pointData : [];
@ -55,7 +55,11 @@ const Container = (props: {
setCollapsed(c); setCollapsed(c);
}; };
}, []); }, []);
const changeRightColla = useMemo(() => {
return (c: boolean) => {
setRightColla(c);
};
}, []);
const context = useContext(dooringContext); const context = useContext(dooringContext);
const curPoint = useMemo(() => { const curPoint = useMemo(() => {
if (context.theme === 'h5') { if (context.theme === 'h5') {
@ -213,7 +217,13 @@ const Container = (props: {
const renderRight = useMemo(() => { const renderRight = useMemo(() => {
if (context.theme === 'h5') { if (context.theme === 'h5') {
return ( return (
<div className={styles.attrSetting}> <div
className={styles.attrSetting}
style={{
transition: 'all ease-in-out 0.5s',
transform: rightColla ? 'translate(100%,0)' : 'translate(0,0)',
}}
>
{pointData.length && curPoint ? ( {pointData.length && curPoint ? (
<> <>
<div className={styles.tit}>属性设置</div> <div className={styles.tit}>属性设置</div>
@ -238,7 +248,13 @@ const Container = (props: {
); );
} else { } else {
return ( return (
<div className={styles.attrSetting}> <div
className={styles.attrSetting}
style={{
transition: 'all ease-in-out 0.5s',
transform: rightColla ? 'translate(100%,0)' : 'translate(0,0)',
}}
>
{cpointData.length && curPoint ? ( {cpointData.length && curPoint ? (
<> <>
<div className={styles.tit}>属性设置</div> <div className={styles.tit}>属性设置</div>
@ -262,7 +278,15 @@ const Container = (props: {
</div> </div>
); );
} }
}, [context.theme, cpointData.length, curPoint, handleDel, handleFormSave, pointData.length]); }, [
context.theme,
cpointData.length,
curPoint,
handleDel,
handleFormSave,
pointData.length,
rightColla,
]);
const tabRender = useMemo(() => { const tabRender = useMemo(() => {
if (collapsed) { if (collapsed) {
@ -409,6 +433,24 @@ const Container = (props: {
</div> </div>
</div> </div>
{renderRight} {renderRight}
<div
className={styles.rightcolla}
style={{
position: 'absolute',
right: rightColla ? 0 : '400px',
transform: 'translate(0,-50%)',
transition: 'all ease-in-out 0.5s',
}}
onClick={() => changeRightColla(!rightColla)}
>
{!rightColla ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
</div>
<div
style={{
width: rightColla ? 0 : '400px',
transition: 'all ease-in-out 0.5s',
}}
></div>
</div> </div>
</div> </div>
); );

20
src/pages/editor/index.less
View File

@ -25,7 +25,7 @@
.list { .list {
width: 350px; width: 350px;
height: 100%; height: 100%;
padding: 10px; padding: 10px 0 10px 10px;
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
display: inline-block; display: inline-block;
background-color: #fff; background-color: #fff;
@ -199,7 +199,8 @@
height: 100%; height: 100%;
box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.1); box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.1);
overflow: auto; overflow: auto;
position: fixed;
right: 0;
.tit { .tit {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 18px; font-size: 18px;
@ -253,6 +254,21 @@
} }
} }
} }
.rightcolla {
width: 20px;
height: 80px;
background: #ffffff;
box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
right: 400px;
top: 50%;
cursor: pointer;
&:hover {
color: #2f54eb;
}
}
} }
} }