itdominator/Newton-Editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added quarter based resizing of editors

Browse Source
This commit is contained in:
itdominator 2025-06-14 16:50:46 -05:00
parent 7f55d68372
commit f28dfa84c2
6 changed files with 109 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/editor/editors.component.css
View File

@ -1,3 +1,20 @@
.dropzone {
height: 92vh;
height: 90vh;
}
.editor-size-button {
text-align: center;
width: 4em;
color: rgba(225, 225, 225, 0.64);
border-style: solid;
border-width: thin;
border-color: rgba(124, 124, 124, 0.64);
margin-left: 0.2em;
margin-right: 0.2em;
float: left;
}
.editor-size-button:hover {
cursor: pointer;
border-color: rgba(0, 124, 0, 0.64);
}

32
src/app/editor/editors.component.html
View File

@ -1,6 +1,38 @@
<div class="col">
<div class="row dropzone" #dropzone dropzone (fileDropped)="onFileDropped($event)">
<ng-container #containerRef>
</ng-container>
</div>
<div class="row">
<div class="col editor-left-size" (click)="setEditorSize($event)">
<div class="editor-size-button size-12">
100%
</div>
<div class="editor-size-button size-8">
75%
</div>
<div class="editor-size-button size-6">
50%
</div>
<div class="editor-size-button size-2">
25%
</div>
</div>
<div class="col editor-right-size" (click)="setEditorSize($event)">
<div class="editor-size-button size-12">
100%
</div>
<div class="editor-size-button size-8">
75%
</div>
<div class="editor-size-button size-6">
50%
</div>
<div class="editor-size-button size-2">
25%
</div>
</div>
</div>
<div>

53
src/app/editor/editors.component.ts
View File

@ -197,6 +197,59 @@ export class EditorsComponent {
this.unsubscribe.complete();
}
// Note: Only really works with 2 editors and very brittle logic.
protected setEditorSize(event: any) {
let lEditorComponent = null;
let rEditorComponent = null;
let lSize = 6;
let rSize = 6;
if (
event.target.parentElement.classList.contains("editor-left-size")
) {
lSize = parseInt(
event.target.classList[1].split("-")[1]
);
rSize = 12 - lSize;
lEditorComponent = this.editorsService.get(this.activeEditor);
if (lEditorComponent.leftSiblingUUID) {
rEditorComponent = lEditorComponent;
lEditorComponent = this.editorsService.get(lEditorComponent.leftSiblingUUID);
} else {
rEditorComponent = this.editorsService.get(lEditorComponent.rightSiblingUUID);
}
} else {
rSize = parseInt(
event.target.classList[1].split("-")[1]
);
lSize = 12 - rSize;
rEditorComponent = this.editorsService.get(this.activeEditor);
if (rEditorComponent.rightSiblingUUID) {
lEditorComponent = rEditorComponent;
rEditorComponent = this.editorsService.get(rEditorComponent.rightSiblingUUID);
} else {
lEditorComponent = this.editorsService.get(rEditorComponent.leftSiblingUUID);
}
}
let lElm = lEditorComponent.editorElm.nativeElement.parentElement;
let rElm = rEditorComponent.editorElm.nativeElement.parentElement;
lElm.setAttribute(
'class',
(lSize == 0) ? "hidden" : `col col-${lSize}`
);
rElm.setAttribute(
'class',
(rSize == 0) ? "hidden" : `col col-${rSize}`
);
if (lSize == 0) rEditorComponent.editor.focus();
if (rSize == 0) lEditorComponent.editor.focus();
}
private createEditor() {
const component = this.containerRef.createComponent(NewtonEditorComponent);
component.instance.editorSettings = this.editorsService.editorSettings;

2
src/app/editor/newton-editor/newton-editor.component.css
View File

@ -25,4 +25,4 @@
border-style: solid;
border-width: thin;
border-color: rgba(124, 124, 124, 1);
}
}

2
src/app/editor/newton-editor/newton-editor.component.ts
View File

@ -24,7 +24,7 @@ import { NewtonEditorBase } from './newton-editor.base';
templateUrl: './newton-editor.component.html',
styleUrl: './newton-editor.component.css',
host: {
'class': 'col'
'class': 'col col-6'
}
})
export class NewtonEditorComponent extends NewtonEditorBase {

4
src/assets/css/styles.css
View File

@ -38,6 +38,10 @@ body {
.hidden {
display: none;
}
.scroller {
/*
-webkit-scrollbar-color: #00000084 #ffffff64;