subhra74/linux-web-console
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed editor issue

Browse Source
This commit is contained in:
subhra74 2019-07-12 09:04:41 +02:00
parent 50d2a95d3c
commit 4b07803fdc
11 changed files with 404 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/app/data.service.ts
View File

@ -78,6 +78,8 @@ export class DataService {
currentViewChanger = new Subject<string>();
viewTextRequests=new Subject<string>();
terminalSession: TerminalSession;
constructor(private http: HttpClient) {

5
ui/src/app/home/editor/editor.component.html
View File

@ -1,5 +1,4 @@
<div style="height: calc(100vh - 55px); width: 100vw; display: flex; flex-direction: column; position: fixed; top: 55px; left: 0px; z-index: 100; background: white;"
*ngIf="tabKeys.length>0">
<div style="height: calc(100vh - 55px); width: 100vw; display: flex; flex-direction: column; position: fixed; top: 55px; left: 0px; background: white; z-index: 10;">
<div class="desktop-tabs" *ngIf="service.selectedEditorTab">
<div *ngFor="let tab of tabKeys"
style="padding: 10px; padding-left: 5px; padding-right: 5px; display: flex; justify-content: space-between;"
@ -32,6 +31,6 @@
</div>
<div *ngIf="tabKeys.length<1"
style="height: calc(100vh - 55px); width: 100vw; position: fixed; top: 55px; left: 0px; z-index: 100; background: white; text-align: center; padding-top: 30px;">
style="height: calc(100vh - 55px); width: 100vw; position: fixed; top: 55px; left: 0px; background: white; text-align: center; padding-top: 30px;">
<span>No file is opened, please goto files and select some.</span>
</div>

18
ui/src/app/home/editor/editor.component.ts
View File

@ -31,7 +31,14 @@ export class EditorComponent implements OnInit,AfterViewInit {
constructor(public service: DataService, private route: ActivatedRoute) { }
ngOnInit() {
console.log("editor: ngOnInit "+this.codeEditorElmRef);
this.getTabbedSessions();
this.service.viewTextRequests.subscribe(a=>{
this.getTabbedSessions();
this.loadSession(this.service.selectedEditorTab);
});
// console.log("selected tab: " + this.service.selectedEditorTab+" tabkexs: "+this.tabKeys);
if(this.tabKeys.length<1){
return;
@ -62,9 +69,16 @@ export class EditorComponent implements OnInit,AfterViewInit {
}
shouldShowTab(){
console.log("Tab count: "+this.tabKeys.length);
return this.tabKeys.length>0;
}
ngAfterViewInit(){
console.log("editor: ngAfterViewInit "+this.codeEditorElmRef);
ace.require('ace/ext/language_tools');
if(!this.codeEditorElmRef){
console.log("Code editor reference not found");
return;
}
const element = this.codeEditorElmRef.nativeElement;
@ -96,6 +110,7 @@ export class EditorComponent implements OnInit,AfterViewInit {
getTabbedSessions(): void {
this.tabKeys = Object.keys(this.service.editorContexts);
console.log("tab keys: "+JSON.stringify(this.tabKeys))
// this.service.editorContexts.forEach((value: EditorContext, key: string) => {
// this.tabKeys.push(key);
// console.log("tabbed key: " + key);
@ -123,6 +138,9 @@ export class EditorComponent implements OnInit,AfterViewInit {
}
onResize(event: any) {
if(!this.codeEditorElmRef){
return;
}
//console.log("window resized");
let doc: any = this.codeEditor.getSession().getDocument();
let r: any = this.codeEditor.renderer;

22
ui/src/app/home/files/files.component.css
View File

@ -1,3 +1,13 @@
.selected-tab{
border-bottom: 3px solid dodgerblue;
border-right: 1px solid rgb(230,230,230);
}
.normal-tab{
border-bottom: 3px solid rgb(240,240,240);
border-right: 1px solid rgb(230,230,230);
}
.nav-tree {
height: 100%;
width: 250px;
@ -20,19 +30,15 @@
max-width: calc(100vw - 250px);
}
.file-list-content-wrapper {
padding-top: 52px;
}
.file-list-header {
display: flex;
height: 51px;
background: white;
border-bottom: 1px solid rgb(230, 230, 230);
cursor: pointer;
position: fixed;
position: sticky;
top: 0px;
box-shadow: 0px 0px 6px 0px rgb(230, 230, 230);
z-index: 0;
}
.file-list-item-row {
@ -66,6 +72,7 @@
.desktop-nav {
display: flex;
padding: 10px;
padding-left: 15px;
background: rgb(245, 245, 245);
border-bottom: 1px solid rgb(230, 230, 230);
flex-wrap: nowrap;
@ -85,7 +92,8 @@
height: 50px;
width: 100%;
display: flex;
background: rgb(230, 230, 230);
background: rgb(240, 240, 240);
border-bottom: 1px solid rgb(220,220,220);
}
.dropdown-ctx-menu {

9
ui/src/app/home/files/files.component.html
View File

@ -1,4 +1,4 @@
<div style="height: 100%; width: 100%; display: flex;" (click)="onWindowClicked(contextmenu)" class="noselect">
<div style="height: 100%; width: 100%; display: flex; z-index: 5;" (click)="onWindowClicked(contextmenu)" class="noselect">
<!-- navigation tree start -->
<div class="nav-tree">
<!-- <app-tree [model]="service.tree1" [icon]="'fa-bookmark-o'"></app-tree> -->
@ -14,7 +14,8 @@
<div *ngIf="service.tabs.length>1" class="desktop-file-tabs">
<div (click)="showTab(i)" (mouseenter)="hoverIndex=i" (mouseleave)="hoverIndex=-1"
*ngFor="let tab of service.tabs; let i=index"
[ngStyle]="{'background': service.selectedTab==i? 'rgb(245,245,245)' : 'rgb(230,230,230)'}"
[ngClass]="service.selectedTab==i?'selected-tab': 'normal-tab'"
style="padding: 10px; padding-left: 10px; padding-right: 5px; display: flex; justify-content: space-between; cursor: pointer;">
<span style="line-height: 30px; margin-left: 10px; margin-right: 10px;">{{tab.folderName}}</span>
<div style="width: 20px;">
@ -101,7 +102,7 @@
<div class="file-list" *ngIf="service.tabs[service.selectedTab]&&service.tabs[service.selectedTab].files">
<!-- header start -->
<div [style.width]="content.clientWidth+'px'" class="file-list-header" #header>
<div class="file-list-header" #header>
<span style="flex: 2; line-height: 50px; padding-left: 20px;" (click)="sort(0)">
<span style="padding-right: 10px;">Name</span>
<span *ngIf="this.sortColumn==0&&this.ascendingSort">
@ -158,7 +159,7 @@
<!-- actual content begin -->
<div #content class="file-list-content-wrapper" (keydown)="keyup($event)" id="list" #list>
<div #content (keydown)="keyup($event)" id="list" #list>
<div *ngFor="let file of service.tabs[service.selectedTab].files; let i=index" class="file-list-item-row"
[style.color]="file.selected?'white':'black'" [style.background]="file.selected?'deepskyblue':'white'"
(dblclick)="file.type === 'Directory'?navigateTo(file.path): openItem(file)"

12
ui/src/app/home/files/files.component.ts
View File

@ -27,7 +27,7 @@ export class FilesComponent implements OnInit, OnDestroy {
toastVisible: boolean = false;
toastMessage: string;
@ViewChild("list")
@ViewChild("content")
list: ElementRef;
@ViewChild("header")
@ -144,7 +144,8 @@ export class FilesComponent implements OnInit, OnDestroy {
ctx.session.setUseWrapMode(false);
this.service.editorContexts[file] = ctx;
this.loading = false;
console.log("before route init of editor: " + JSON.stringify(Object.keys(this.service.editorContexts)))
console.log("before route init of editor: " + JSON.stringify(Object.keys(this.service.editorContexts)));
this.service.viewTextRequests.next("changed");
this.viewChanged.emit("editor");
//this.router.navigate(["/app/editor"]);
}, err => {
@ -398,8 +399,9 @@ export class FilesComponent implements OnInit, OnDestroy {
let content: HTMLElement = this.list.nativeElement as HTMLElement;
let h: HTMLElement = this.header.nativeElement as HTMLElement;
console.log("window resized " + content.clientWidth);
h.style.width = content.clientWidth + "px";
console.log("Header width: " + h.style.width);
let s = getComputedStyle(content);
//h.style.width = (s.getPropertyValue("width"));
console.log("Header width: " + s.getPropertyValue("width"));
}
onWindowClicked(c) {
@ -439,11 +441,13 @@ export class FilesComponent implements OnInit, OnDestroy {
for (let i = 0; i < this.service.tabs[this.service.selectedTab].files.length; i++) {
if (this.service.tabs[this.service.selectedTab].files[i].selected) {
let path = this.service.tabs[this.service.selectedTab].files[i].path;
if (this.service.tabs[this.service.selectedTab].files[i].type === "Directory") {
this.navigateTo(path);
break;
}
}
}
}
openInNewTab() {
for (let i = 0; i < this.service.tabs[this.service.selectedTab].files.length; i++) {

4
ui/src/app/home/home.component.css
View File

@ -50,6 +50,7 @@
height: calc(100vh - 40px);
}
.router-wrapper {
padding-top: 55px;
height: 100%;
@ -72,7 +73,8 @@
.desktop-nav {
height: 55px;
background: rgb(33, 37, 43);
/* background: rgb(33, 37, 43); */
background: rgb(36, 46, 43);;
display: flex;
justify-content: flex-end;
box-shadow: 0px 3px 6px 0px rgb(200, 200, 200);

9
ui/src/app/home/home.component.html
View File

@ -76,10 +76,13 @@
</div>
<div class="router-wrapper">
<app-editor [style.display]="view=='editor'?'block':'none'" ></app-editor>
<app-search [style.display]="view=='search'?'block':'none'" ></app-search>
<app-settings [style.display]="view=='settings'?'block':'none'" ></app-settings>
<div style="width: 100vw; height: calc(100vh - 55px);" [style.display]="view?'none':'block'" >
<app-files (viewChanged)="view=$event"></app-files>
<app-editor *ngIf="view=='editor'"></app-editor>
<app-search *ngIf="view=='search'"></app-search>
<app-settings *ngIf="view=='settings'"></app-settings>
</div>
<!-- <router-outlet></router-outlet> -->
</div>
</div>

2
ui/src/app/home/home.component.ts
View File

@ -97,4 +97,6 @@ export class HomeComponent implements OnInit {
this.router.navigate(["/login"]);
}
}

2
ui/src/app/home/search/search.component.html
View File

@ -1,4 +1,4 @@
<div style="height: calc(100vh - 55px); width: 100vw; position: fixed; left: 0px; top: 55px; background: white; display: flex; z-index: 100; flex-direction: column;" *ngIf="!loading">
<div style="height: calc(100vh - 55px); width: 100vw; position: fixed; left: 0px; top: 55px; background: white; display: flex; flex-direction: column;" *ngIf="!loading">
<div style="display: flex; justify-content: center; padding-top: 20px;" *ngIf="!ctx.searching">
<div>
<div class="form-group">

2
ui/src/app/home/settings/settings.component.html
View File

@ -1,5 +1,5 @@
<div
style="height: calc(100vh - 55px); width: 100vw; position: fixed; left: 0px; top: 55px; background: white; z-index: 100; display: flex; flex-direction: column; align-items: center; padding-top: 50px;">
style="height: calc(100vh - 55px); width: 100vw; position: fixed; left: 0px; top: 55px; background: white; display: flex; flex-direction: column; align-items: center; padding-top: 50px;">
<div style="padding:30px; box-shadow: 3px 3px 15px 5px gray; min-width: 400px;">
<div class="form-group">
<label for="username">New user name</label>