mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-29 09:40:10 +02:00
Code Issues Releases Wiki Activity

fix split size saving for file mode

Browse Source
This commit is contained in:
Kushagra Gour
2018-10-22 14:29:10 +05:30
parent 63797f5e54
commit a08dbc4434
2 changed files with 49 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/ContentWrapFiles.jsx
View File

@@ -355,13 +355,8 @@ export default class ContentWrapFiles extends Component {
var mainSplitSizes; var mainSplitSizes;
const sidebarWidth = 200; const sidebarWidth = 200;
const { currentItem, currentLayoutMode } = this.props; const { currentItem, currentLayoutMode } = this.props;
if (false && currentItem && currentItem.mainSizes) { if (currentItem && currentItem.mainSizes) {
// For layout mode 3, main panes are reversed using flex-direction. mainSplitSizes = currentItem.mainSizes;
// So we need to apply the saved sizes in reverse order.
mainSplitSizes =
currentLayoutMode === 3
? [currentItem.mainSizes[1], currentItem.mainSizes[0]]
: currentItem.mainSizes;
} else { } else {
mainSplitSizes = [ mainSplitSizes = [
`${sidebarWidth}px`, `${sidebarWidth}px`,

65
src/components/app.jsx
View File

@@ -643,22 +643,48 @@ export default class App extends Component {
// Calculates the current sizes of code & preview panes. // Calculates the current sizes of code & preview panes.
getMainPaneSizes() { getMainPaneSizes() {
var sizes; let sizes;
function getPercentFromDimension(el, dimension = 'width') {
const match = el.style[dimension].match(/[\d.]+(%|px)/);
if (match) {
return match[0];
}
return null;
}
// File mode
if (this.state.currentItem && this.state.currentItem.files) {
const sidebarWidth = 200;
sizes = [
getPercentFromDimension($('#js-sidebar')),
getPercentFromDimension($('#js-code-side')),
getPercentFromDimension($('#js-demo-side'))
];
// Check if anything was returned falsy, reset in that case
if (sizes.filter(s => s).length !== 3) {
sizes = [
`${sidebarWidth}px`,
`calc(50% - ${sidebarWidth / 2}px)`,
`calc(50% - ${sidebarWidth / 2}px)`
];
}
return sizes;
}
const currentLayoutMode = this.state.currentLayoutMode; const currentLayoutMode = this.state.currentLayoutMode;
var dimensionProperty = currentLayoutMode === 2 ? 'height' : 'width'; var dimensionProperty = currentLayoutMode === 2 ? 'height' : 'width';
try { sizes = [
sizes = [ getPercentFromDimension($('#js-code-side'), dimensionProperty),
+$('#js-code-side').style[dimensionProperty].match(/([\d.]+)%/)[1], getPercentFromDimension($('#js-demo-side'), dimensionProperty)
+$('#js-demo-side').style[dimensionProperty].match(/([\d.]+)%/)[1] ];
];
} catch (e) {
sizes = [50, 50];
} finally {
/* eslint-disable no-unsafe-finally */
return sizes;
/* eslint-enable no-unsafe-finally */ if (sizes.filter(s => s).length !== 2) {
sizes = [50, 50];
} }
return sizes;
} }
saveSetting(setting, value) { saveSetting(setting, value) {
const d = deferred(); const d = deferred();
@@ -670,13 +696,16 @@ export default class App extends Component {
} }
saveCode(key) { saveCode(key) {
this.state.currentItem.updatedOn = Date.now(); const { currentItem } = this.state;
this.state.currentItem.layoutMode = this.state.currentLayoutMode; currentItem.updatedOn = Date.now();
currentItem.layoutMode = this.state.currentLayoutMode;
this.state.currentItem.sizes = this.getCodePaneSizes(); currentItem.mainSizes = this.getMainPaneSizes();
this.state.currentItem.mainSizes = this.getMainPaneSizes(); if (!currentItem.files) {
currentItem.sizes = this.getCodePaneSizes();
}
log('saving key', key || this.state.currentItem.id, this.state.currentItem); log('saving key', key || currentItem.id, currentItem);
function onSaveComplete() { function onSaveComplete() {
if (window.user && !navigator.onLine) { if (window.user && !navigator.onLine) {
@@ -690,7 +719,7 @@ export default class App extends Component {
} }
return itemService return itemService
.setItem(key || this.state.currentItem.id, this.state.currentItem) .setItem(key || currentItem.id, currentItem)
.then(onSaveComplete.bind(this)); .then(onSaveComplete.bind(this));
} }