fixed editor issue

ui/src/app/data.service.ts

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

ui/src/app/home/editor/editor.component.html

@@ -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;"
+<div style="height: calc(100vh - 55px); width: 100vw; display: flex; flex-direction: column; position: fixed; top: 55px; left: 0px; background: white; z-index: 10;">
-       *ngIf="tabKeys.length>0">
        <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>

ui/src/app/home/editor/editor.component.ts

@@ -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;

ui/src/app/home/files/files.component.css

@@ -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 {

ui/src/app/home/files/files.component.html

@@ -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)"

ui/src/app/home/files/files.component.ts

@@ -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";
+    let s = getComputedStyle(content);
-    console.log("Header width: " + h.style.width);
+    //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++) {

ui/src/app/home/home.component.css

@@ -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);

ui/src/app/home/home.component.html

@@ -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>
+    </div>
-    <app-search *ngIf="view=='search'"></app-search>
+    
-    <app-settings *ngIf="view=='settings'"></app-settings>
     <!-- <router-outlet></router-outlet> -->
   </div>
 </div>

ui/src/app/home/home.component.ts

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

ui/src/app/home/search/search.component.html

@@ -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">

ui/src/app/home/settings/settings.component.html

@@ -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>