mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-04-05 03:12:25 +02:00
Code Issues Releases Wiki Activity

fix modal animation and layouts

Browse Source
This commit is contained in:
Kushagra Gour 2018-06-15 00:29:59 +05:30
parent 1757883183
commit c2e1d25d47
3 changed files with 37 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
webmaker/src/components/ContentWrap.jsx
View File

@ -248,7 +248,8 @@ export default class ContentWrap extends Component {
this.state.isConsoleOpen !== nextState.isConsoleOpen ||
this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
this.state.codeSplitSizes != nextState.codeSplitSizes ||
this.state.mainSplitSizes != nextState.mainSplitSizes
this.state.mainSplitSizes != nextState.mainSplitSizes ||
this.props.currentLayoutMode !== nextProps.currentLayoutMode
);
}
componentDidUpdate() {
@ -921,7 +922,7 @@ export default class ContentWrap extends Component {
class="console__prompt flex flex-v-center"
>
<svg width="18" height="18" fill="#346fd2">
Chevron
<use xlinkHref="#chevron-icon" />
</svg>
<input
onKeyUp={this.evalConsoleExpr.bind(this)}

7
webmaker/src/components/app.jsx
View File

@ -502,7 +502,6 @@ export default class App extends Component {
this.setState({ currentLayoutMode: mode });
return;
}
this.setState({ currentLayoutMode: mode });
// Remove all layout classes
[1, 2, 3, 4, 5].forEach(layoutNumber => {
window[`layoutBtn${layoutNumber}`].classList.remove('selected');
@ -511,8 +510,10 @@ export default class App extends Component {
$('#layoutBtn' + mode).classList.add('selected');
document.body.classList.add('layout-' + mode);
this.contentWrap.resetSplitting();
this.contentWrap.setPreviewContent(true);
this.setState({ currentLayoutMode: mode }, () => {
this.contentWrap.resetSplitting();
this.contentWrap.setPreviewContent(true);
});
}
layoutBtnClickHandler(layoutId) {

38
webmaker/src/style.css
View File

@ -275,6 +275,8 @@ body:not(.light-version).overlay-visible .main-container {
}
.content-wrap {
/* HACK: */
height: 1px;
/* HACK: 70px is approx header+footer. This is required to because
on FF the content-wrap goes beyond the flex parent otherwise. */
max-height: calc(100% - 70px);
@ -695,12 +697,19 @@ body>#demo-frame {
justify-content: center;
z-index: 2000;
visibility: hidden;
background-color: rgba(102, 51, 153, 0.7);
background-color: rgba(0, 0, 0, 0.7);
/* background-color: rgba(102, 51, 153, 0.7); */
/* background-color: rgba(0, 0, 0, 0.7); */
/* To prevent scroll repaint inside modal */
will-change: transform;
}
@keyframes anim-modal-overlay {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal__close-btn {
position: absolute;
right: 10px;
@ -733,9 +742,16 @@ body>#demo-frame {
box-sizing: border-box;
overflow-y: auto;
pointer-events: auto;
transition-property: transform, opacity;
transition-duration: 0.19s;
transform: translateY(50px) scale(0.95);
animation: anim-modal 300ms ease forwards;
animation-delay: 150ms;
}
@keyframes anim-modal {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media screen and (max-width: 900px) {
@ -749,9 +765,9 @@ body>#demo-frame {
}
.is-modal-visible .modal__content {
transition-duration: 0.3s;
transform: translateY(0px) scale(1);
opacity: 1;
/* transition-duration: 0.3s; */
/* transform: translateY(0px) scale(1); */
/* opacity: 1; */
}
.modal-overlay {
@ -1281,6 +1297,8 @@ body>#demo-frame {
height: 35vh;
left: 0;
right: 0;
display: flex;
flex-direction: column;
transform: translateY(0);
transition: transform 0.4s cubic-bezier(0.76, 0.01, 0.13, 0.9);
}
@ -1290,7 +1308,11 @@ body>#demo-frame {
}
.console .CodeMirror {
height: calc(100% - 55px);
height: calc(100% - 30px);
}
.console__log {
flex: 1;
}
.console-exec-input {