mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-02 19:37:29 +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
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.isConsoleOpen !== nextState.isConsoleOpen ||
this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen || this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
this.state.codeSplitSizes != nextState.codeSplitSizes || this.state.codeSplitSizes != nextState.codeSplitSizes ||
this.state.mainSplitSizes != nextState.mainSplitSizes this.state.mainSplitSizes != nextState.mainSplitSizes ||
this.props.currentLayoutMode !== nextProps.currentLayoutMode
); );
} }
componentDidUpdate() { componentDidUpdate() {
@@ -921,7 +922,7 @@ export default class ContentWrap extends Component {
class="console__prompt flex flex-v-center" class="console__prompt flex flex-v-center"
> >
<svg width="18" height="18" fill="#346fd2"> <svg width="18" height="18" fill="#346fd2">
Chevron <use xlinkHref="#chevron-icon" />
</svg> </svg>
<input <input
onKeyUp={this.evalConsoleExpr.bind(this)} onKeyUp={this.evalConsoleExpr.bind(this)}

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

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

38
webmaker/src/style.css
View File

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