Added preliminary files modal; fixed tabs scroll issue; fixed missing build deps
This commit is contained in:
parent
f28dfa84c2
commit
ef56b8c84b
@ -50,7 +50,7 @@ app.whenReady().then(async () => {
|
|||||||
createWindow();
|
createWindow();
|
||||||
|
|
||||||
newton.fs.setWindow(window);
|
newton.fs.setWindow(window);
|
||||||
newton.fs.ipc.setWindow(window);
|
newton.ipc.setWindow(window);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -86,4 +86,4 @@ process.on('unhandledRejection', function(error = {}) {
|
|||||||
if (error.stack != null) {
|
if (error.stack != null) {
|
||||||
console.log(error.stack);
|
console.log(error.stack);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -24,8 +24,7 @@
|
|||||||
"icon": "./icos/",
|
"icon": "./icos/",
|
||||||
"files": [
|
"files": [
|
||||||
"newton/",
|
"newton/",
|
||||||
"build/",
|
"build/"
|
||||||
"!node_modules/"
|
|
||||||
],
|
],
|
||||||
"mac": {
|
"mac": {
|
||||||
"category": "public.app-category.developer-tools"
|
"category": "public.app-category.developer-tools"
|
||||||
@ -83,4 +82,4 @@
|
|||||||
"karma-jasmine-html-reporter": "2.1.0",
|
"karma-jasmine-html-reporter": "2.1.0",
|
||||||
"typescript": "5.7.2"
|
"typescript": "5.7.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
34
src/app/common/services/editor/modals/files-modal.service.ts
Normal file
34
src/app/common/services/editor/modals/files-modal.service.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { ReplaySubject, Observable } from 'rxjs';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class FilesModalService {
|
||||||
|
private showFilesModalSubject: ReplaySubject<null> = new ReplaySubject<null>(1);
|
||||||
|
private addFileSubject: ReplaySubject<string> = new ReplaySubject<string>(1);
|
||||||
|
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
showFilesModal(): void {
|
||||||
|
this.showFilesModalSubject.next(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
showFilesModalRequested$(): Observable<null> {
|
||||||
|
return this.showFilesModalSubject.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
addFileToModal(data: string): void {
|
||||||
|
this.addFileSubject.next(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
addFileToModalRequested$(): Observable<string> {
|
||||||
|
return this.addFileSubject.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -35,4 +35,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<files-modal></files-modal>
|
||||||
|
|
||||||
<div>
|
<div>
|
@ -2,6 +2,7 @@ import { Component, ElementRef, ViewChild, TemplateRef, ComponentRef, ViewContai
|
|||||||
import { Subject, takeUntil } from 'rxjs';
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
import { NewtonEditorComponent } from "./newton-editor/newton-editor.component";
|
import { NewtonEditorComponent } from "./newton-editor/newton-editor.component";
|
||||||
|
import { FilesModalComponent } from "./modals/files-modal.component";
|
||||||
import { EditorsService } from '../common/services/editor/editors.service';
|
import { EditorsService } from '../common/services/editor/editors.service';
|
||||||
import { FilesService } from '../common/services/editor/files.service';
|
import { FilesService } from '../common/services/editor/files.service';
|
||||||
|
|
||||||
@ -15,7 +16,8 @@ import { ServiceMessage } from '../common/types/service-message.type';
|
|||||||
selector: 'editors',
|
selector: 'editors',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [
|
imports: [
|
||||||
DndDirective
|
DndDirective,
|
||||||
|
FilesModalComponent
|
||||||
],
|
],
|
||||||
templateUrl: './editors.component.html',
|
templateUrl: './editors.component.html',
|
||||||
styleUrl: './editors.component.css',
|
styleUrl: './editors.component.css',
|
||||||
|
16
src/app/editor/modals/files-modal.component.css
Normal file
16
src/app/editor/modals/files-modal.component.css
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.modal-column {
|
||||||
|
min-height: 24em;
|
||||||
|
max-height: 24em;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button {
|
||||||
|
background: rgba(116, 0, 0, 0.64);
|
||||||
|
border-style: solid;
|
||||||
|
border-color: rgba(0, 0, 0, 0.64);
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button:hover {
|
||||||
|
background: rgba(256, 0, 0, 0.64);
|
||||||
|
}
|
52
src/app/editor/modals/files-modal.component.html
Normal file
52
src/app/editor/modals/files-modal.component.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<div #filesModal
|
||||||
|
id="filesModal" class="modal fade" tabindex="-1" role="dialog"
|
||||||
|
>
|
||||||
|
<div class="modal-dialog modal-lg" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">Files:</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col modal-column">
|
||||||
|
|
||||||
|
<div #filesList *ngFor="let file of files" class="row">
|
||||||
|
<div class="col-11 title"
|
||||||
|
title="{{file.path}}"
|
||||||
|
uuid="{{file.uuid}}"
|
||||||
|
path="{{file.path}}"
|
||||||
|
>
|
||||||
|
{{file.title}}
|
||||||
|
</div>
|
||||||
|
<div class="col-1 close-button">
|
||||||
|
X
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<input #filesSearch type="text" placeholder="Search..." />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col modal-column">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
85
src/app/editor/modals/files-modal.component.ts
Normal file
85
src/app/editor/modals/files-modal.component.ts
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
import { Component } from "@angular/core";
|
||||||
|
import { CommonModule } from "@angular/common";
|
||||||
|
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
|
import * as bootstrap from "bootstrap";
|
||||||
|
|
||||||
|
import { FilesModalService } from "../../common/services/editor/modals/files-modal.service";
|
||||||
|
import { TabsService } from '../../common/services/editor/tabs/tabs.service';
|
||||||
|
|
||||||
|
import { ServiceMessage } from '../../common/types/service-message.type';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'files-modal',
|
||||||
|
standalone: true,
|
||||||
|
imports: [
|
||||||
|
CommonModule
|
||||||
|
],
|
||||||
|
templateUrl: './files-modal.component.html',
|
||||||
|
styleUrl: './files-modal.component.css',
|
||||||
|
host: {
|
||||||
|
'class': ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export class FilesModalComponent {
|
||||||
|
private unsubscribe = new Subject<void>();
|
||||||
|
|
||||||
|
filesModal!: bootstrap.Modal;
|
||||||
|
files: any[] = [];
|
||||||
|
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private filesModalService: FilesModalService,
|
||||||
|
private tabsService: TabsService
|
||||||
|
) {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public ngAfterViewInit(): void {
|
||||||
|
this.loadSubscribers();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadSubscribers() {
|
||||||
|
this.tabsService.getData$().pipe(
|
||||||
|
takeUntil(this.unsubscribe)
|
||||||
|
).subscribe((data: ServiceMessage) => {
|
||||||
|
if (data.action === "create-tab") {
|
||||||
|
this.createFileRow(data.message, data.uuid, data.data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.filesModalService.showFilesModalRequested$().pipe(
|
||||||
|
takeUntil(this.unsubscribe)
|
||||||
|
).subscribe(() => {
|
||||||
|
if (!this.filesModal) {
|
||||||
|
this.createModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.filesModalService.addFileToModalRequested$().pipe(
|
||||||
|
takeUntil(this.unsubscribe)
|
||||||
|
).subscribe((uuid: string) => {
|
||||||
|
if (!this.filesModal) {
|
||||||
|
this.createModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private createFileRow(title: string, uuid: string, path: string): void {
|
||||||
|
this.files.push({title: title, path: path, uuid: uuid})
|
||||||
|
}
|
||||||
|
|
||||||
|
createModal() {
|
||||||
|
this.filesModal = new bootstrap.Modal("#filesModal", {});
|
||||||
|
}
|
||||||
|
|
||||||
|
showModal() {
|
||||||
|
this.filesModal?.toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -9,8 +9,9 @@ import "ace-builds/src-noconflict/theme-one_dark";
|
|||||||
import "ace-builds/src-noconflict/theme-dracula";
|
import "ace-builds/src-noconflict/theme-dracula";
|
||||||
|
|
||||||
import { InfoBarService } from '../../common/services/editor/info-bar/info-bar.service';
|
import { InfoBarService } from '../../common/services/editor/info-bar/info-bar.service';
|
||||||
import { EditorsService } from '../../common/services/editor/editors.service';
|
import { FilesModalService } from '../../common/services/editor/modals/files-modal.service';
|
||||||
import { LSPService } from '../../common/services/lsp.service';
|
import { LSPService } from '../../common/services/lsp.service';
|
||||||
|
import { EditorsService } from '../../common/services/editor/editors.service';
|
||||||
|
|
||||||
import { NewtonEditorBase } from './newton-editor.base';
|
import { NewtonEditorBase } from './newton-editor.base';
|
||||||
|
|
||||||
@ -33,7 +34,8 @@ export class NewtonEditorComponent extends NewtonEditorBase {
|
|||||||
constructor(
|
constructor(
|
||||||
private infoBarService: InfoBarService,
|
private infoBarService: InfoBarService,
|
||||||
private editorsService: EditorsService,
|
private editorsService: EditorsService,
|
||||||
private lspService: LSPService
|
private lspService: LSPService,
|
||||||
|
private filesModalService: FilesModalService
|
||||||
) {
|
) {
|
||||||
super();
|
super();
|
||||||
}
|
}
|
||||||
@ -174,6 +176,13 @@ export class NewtonEditorComponent extends NewtonEditorBase {
|
|||||||
this.saveFileAs();
|
this.saveFileAs();
|
||||||
},
|
},
|
||||||
readOnly: false
|
readOnly: false
|
||||||
|
}, {
|
||||||
|
name: "showModal",
|
||||||
|
bindKey: {win: "ctrl-b", mac: "ctrl-b"},
|
||||||
|
exec: () => {
|
||||||
|
this.filesModalService.showFilesModal();
|
||||||
|
},
|
||||||
|
readOnly: false
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
|
.display-contents {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: auto;
|
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 2em;
|
margin-right: 2em;
|
||||||
font-size: 0.2em;
|
font-size: 0.2em;
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
cdkDropListOrientation="horizontal"
|
cdkDropListOrientation="horizontal"
|
||||||
(cdkDropListDropped)="dropped($event)"
|
(cdkDropListDropped)="dropped($event)"
|
||||||
(click)="handleAction($event)"
|
(click)="handleAction($event)"
|
||||||
|
class="display-contents"
|
||||||
>
|
>
|
||||||
|
|
||||||
<div *ngFor="let tab of tabs"
|
<div *ngFor="let tab of tabs"
|
||||||
|
@ -21,7 +21,7 @@ import { ServiceMessage } from '../../common/types/service-message.type';
|
|||||||
templateUrl: './tabs.component.html',
|
templateUrl: './tabs.component.html',
|
||||||
styleUrl: './tabs.component.css',
|
styleUrl: './tabs.component.css',
|
||||||
host: {
|
host: {
|
||||||
'class': 'row tabs scroller'
|
'class': 'tabs scroller'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class TabsComponent {
|
export class TabsComponent {
|
||||||
@ -42,8 +42,9 @@ export class TabsComponent {
|
|||||||
this.tabsService.getData$().pipe(
|
this.tabsService.getData$().pipe(
|
||||||
takeUntil(this.unsubscribe)
|
takeUntil(this.unsubscribe)
|
||||||
).subscribe((data: ServiceMessage) => {
|
).subscribe((data: ServiceMessage) => {
|
||||||
if (data.action === "create-tab")
|
if (data.action === "create-tab") {
|
||||||
this.createTab(data.message, data.uuid, data.data);
|
this.createTab(data.message, data.uuid, data.data);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,6 +32,8 @@ body {
|
|||||||
padding-bottom: 0.4em;
|
padding-bottom: 0.4em;
|
||||||
padding-top: 0.4em;
|
padding-top: 0.4em;
|
||||||
color: rgba(255, 255, 255, 0.64);
|
color: rgba(255, 255, 255, 0.64);
|
||||||
|
margin-left: 0.2em;
|
||||||
|
margin-right: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en" data-bs-theme="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Newton</title>
|
<title>Newton</title>
|
||||||
|
Loading…
Reference in New Issue
Block a user