diff --git a/ui/src/app/data.service.ts b/ui/src/app/data.service.ts index 6549e43..d97a867 100644 --- a/ui/src/app/data.service.ts +++ b/ui/src/app/data.service.ts @@ -78,6 +78,8 @@ export class DataService { currentViewChanger = new Subject(); + viewTextRequests=new Subject(); + terminalSession: TerminalSession; constructor(private http: HttpClient) { diff --git a/ui/src/app/home/editor/editor.component.html b/ui/src/app/home/editor/editor.component.html index 73cd5c1..bf6bd2e 100644 --- a/ui/src/app/home/editor/editor.component.html +++ b/ui/src/app/home/editor/editor.component.html @@ -1,5 +1,4 @@ -
+
+ style="height: calc(100vh - 55px); width: 100vw; position: fixed; top: 55px; left: 0px; background: white; text-align: center; padding-top: 30px;"> No file is opened, please goto files and select some.
\ No newline at end of file diff --git a/ui/src/app/home/editor/editor.component.ts b/ui/src/app/home/editor/editor.component.ts index d324028..048651d 100644 --- a/ui/src/app/home/editor/editor.component.ts +++ b/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; diff --git a/ui/src/app/home/files/files.component.css b/ui/src/app/home/files/files.component.css index 131d979..efbbe3e 100644 --- a/ui/src/app/home/files/files.component.css +++ b/ui/src/app/home/files/files.component.css @@ -1,167 +1,175 @@ -.nav-tree { - height: 100%; - width: 250px; - min-width: 250px; - background: rgb(240, 240, 240); - overflow: hidden; - overflow-x: auto; - overflow-y: auto; - border-right: 1px solid rgb(230, 230, 230); - padding-top: 10px; -} - -.file-list { - flex: 1; - overflow: hidden; - overflow-x: auto; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - position: relative; - 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; - box-shadow: 0px 0px 6px 0px rgb(230, 230, 230); - z-index: 0; -} - -.file-list-item-row { - display: flex; - height: 51px; - border-bottom: 1px solid rgb(240, 240, 240); - overflow: hidden; -} - -.desktop-file-list-first-item { - flex: 2; - overflow-x: hidden; - line-height: 50px; - display: flex; - padding-left: 10px; -} - -.desktop-file-list-other-item { - flex: 1; - line-height: 50px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mobile-file-list-row { - display: none; - width: 100%; -} - -.desktop-nav { - display: flex; - padding: 10px; - background: rgb(245, 245, 245); - border-bottom: 1px solid rgb(230, 230, 230); - flex-wrap: nowrap; - overflow: hidden; -} - -.mobile-nav { - display: none; - justify-content: space-around; - flex-wrap: nowrap; - overflow: hidden; - background: rgb(245, 245, 245); - border-top: 1px solid rgb(230, 230, 230); -} - -.desktop-file-tabs { - height: 50px; - width: 100%; - display: flex; - background: rgb(230, 230, 230); -} - -.dropdown-ctx-menu { - display: flex; - width: 200px; - flex-direction: column; - position: fixed; - right: 0px; - max-height: 50vh; - background: white; - border: 1px solid rgb(200, 200, 200); - box-shadow: 3px 3px 10px 0px rgb(200, 200, 200); - z-index: 301; - overflow-y: auto; -} - -.noselect { - -webkit-touch-callout: none; - /* iOS Safari */ - -webkit-user-select: none; - /* Safari */ - -khtml-user-select: none; - /* Konqueror HTML */ - -moz-user-select: none; - /* Firefox */ - -ms-user-select: none; - /* Internet Explorer/Edge */ - user-select: none; - /* Non-prefixed version, currently - supported by Chrome and Opera */ -} - -@media (max-width:800px) { - [class="nav-tree"] { - display: none; - } - [class="file-list"] { - max-width: 100vw; - } - [class="file-list-header"] { - display: none; - } - [class*="file-list-content-wrapper"] { - padding-top: 0px; - } - [class*="file-list-item-row"] { - height: 80px; - } - [class="desktop-file-list-first-item"] { - display: none; - } - [class="desktop-file-list-other-item"] { - display: none; - } - [class="mobile-file-list-row"] { - display: flex; - } - [class="desktop-file-list-other-item"] { - display: none; - } - [class="desktop-nav"] { - display: none; - } - [class="mobile-nav"] { - display: flex; - } - [class*="desktop-file-tabs"] { - display: none; - } - [class="dropdown-ctx-menu"] { - bottom: 40px; - } -} - -@media (min-width:800px) { - [class="dropdown-ctx-menu"] { - top: 100px; - } +.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; + min-width: 250px; + background: rgb(240, 240, 240); + overflow: hidden; + overflow-x: auto; + overflow-y: auto; + border-right: 1px solid rgb(230, 230, 230); + padding-top: 10px; +} + +.file-list { + flex: 1; + overflow: hidden; + overflow-x: auto; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + position: relative; + max-width: calc(100vw - 250px); +} + +.file-list-header { + display: flex; + height: 51px; + background: white; + border-bottom: 1px solid rgb(230, 230, 230); + cursor: pointer; + position: sticky; + top: 0px; + box-shadow: 0px 0px 6px 0px rgb(230, 230, 230); +} + +.file-list-item-row { + display: flex; + height: 51px; + border-bottom: 1px solid rgb(240, 240, 240); + overflow: hidden; +} + +.desktop-file-list-first-item { + flex: 2; + overflow-x: hidden; + line-height: 50px; + display: flex; + padding-left: 10px; +} + +.desktop-file-list-other-item { + flex: 1; + line-height: 50px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mobile-file-list-row { + display: none; + width: 100%; +} + +.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; + overflow: hidden; +} + +.mobile-nav { + display: none; + justify-content: space-around; + flex-wrap: nowrap; + overflow: hidden; + background: rgb(245, 245, 245); + border-top: 1px solid rgb(230, 230, 230); +} + +.desktop-file-tabs { + height: 50px; + width: 100%; + display: flex; + background: rgb(240, 240, 240); + border-bottom: 1px solid rgb(220,220,220); +} + +.dropdown-ctx-menu { + display: flex; + width: 200px; + flex-direction: column; + position: fixed; + right: 0px; + max-height: 50vh; + background: white; + border: 1px solid rgb(200, 200, 200); + box-shadow: 3px 3px 10px 0px rgb(200, 200, 200); + z-index: 301; + overflow-y: auto; +} + +.noselect { + -webkit-touch-callout: none; + /* iOS Safari */ + -webkit-user-select: none; + /* Safari */ + -khtml-user-select: none; + /* Konqueror HTML */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* Internet Explorer/Edge */ + user-select: none; + /* Non-prefixed version, currently + supported by Chrome and Opera */ +} + +@media (max-width:800px) { + [class="nav-tree"] { + display: none; + } + [class="file-list"] { + max-width: 100vw; + } + [class="file-list-header"] { + display: none; + } + [class*="file-list-content-wrapper"] { + padding-top: 0px; + } + [class*="file-list-item-row"] { + height: 80px; + } + [class="desktop-file-list-first-item"] { + display: none; + } + [class="desktop-file-list-other-item"] { + display: none; + } + [class="mobile-file-list-row"] { + display: flex; + } + [class="desktop-file-list-other-item"] { + display: none; + } + [class="desktop-nav"] { + display: none; + } + [class="mobile-nav"] { + display: flex; + } + [class*="desktop-file-tabs"] { + display: none; + } + [class="dropdown-ctx-menu"] { + bottom: 40px; + } +} + +@media (min-width:800px) { + [class="dropdown-ctx-menu"] { + top: 100px; + } } \ No newline at end of file diff --git a/ui/src/app/home/files/files.component.html b/ui/src/app/home/files/files.component.html index e856d1c..fea39eb 100644 --- a/ui/src/app/home/files/files.component.html +++ b/ui/src/app/home/files/files.component.html @@ -1,4 +1,4 @@ -
+
@@ -14,7 +14,8 @@
{{tab.folderName}}
@@ -101,7 +102,7 @@
-
+
Name @@ -158,7 +159,7 @@ -
+
(); - fileToOpen:FileItem; + fileToOpen: FileItem; uploadPopup: boolean; hoverIndex: number = -1; @@ -63,7 +63,7 @@ export class FilesComponent implements OnInit, OnDestroy { this.service.fileOpenRequests.subscribe((file: FileItem) => { if (file.type == "Directory") { this.navigateTo(file.path); - }else{ + } else { this.openItem(file); } }); @@ -116,7 +116,7 @@ export class FilesComponent implements OnInit, OnDestroy { openItem(fileItem: FileItem) { let file: string = fileItem.path; this.loading = true; - this.fileToOpen=fileItem; + this.fileToOpen = fileItem; console.log("Opening file: " + file) if (fileItem.type.startsWith("image")) { this.previewer = "image"; @@ -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 => { @@ -153,16 +154,16 @@ export class FilesComponent implements OnInit, OnDestroy { }); } -// openAsText() { -// let file: string; -// for (let i = 0; i < this.service.tabs[this.service.selectedTab].files.length; i++) { -// if (this.service.tabs[this.service.selectedTab].files[i].selected) { -// file = this.service.tabs[this.service.selectedTab].files[i].path; -// this.openWithTextEditor(file); -// break; -// } -// } -// } + // openAsText() { + // let file: string; + // for (let i = 0; i < this.service.tabs[this.service.selectedTab].files.length; i++) { + // if (this.service.tabs[this.service.selectedTab].files[i].selected) { + // file = this.service.tabs[this.service.selectedTab].files[i].path; + // this.openWithTextEditor(file); + // break; + // } + // } + // } navigateTo(file: string) { this.loading = true; @@ -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,8 +441,10 @@ 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; - this.navigateTo(path); - break; + if (this.service.tabs[this.service.selectedTab].files[i].type === "Directory") { + this.navigateTo(path); + break; + } } } } diff --git a/ui/src/app/home/home.component.css b/ui/src/app/home/home.component.css index 5704c79..ce745d5 100644 --- a/ui/src/app/home/home.component.css +++ b/ui/src/app/home/home.component.css @@ -1,168 +1,170 @@ -.fullscreen { - width: 100vw; - height: 100vh; - position: fixed; - bottom: 0px; - right: 0px; - display: flex; - flex-direction: column; - background: black; - color: white; - z-index: 100; -} - -.minimized { - width: 200px; - position: fixed; - right: 10px; - bottom: 0px; - color: white; - background: black; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} - -.rounded-top { - border-top-left-radius: 10px; - border-top-right-radius: 10px; -} - -.normal { - width: 740px; - height: 450px; - position: fixed; - bottom: 0px; - right: 10px; - display: flex; - flex-direction: column; - background: black; - color: white; - z-index: 100; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} - -.term-normal { - height: 410px; -} - -.term-fullscreen { - height: calc(100vh - 40px); -} - -.router-wrapper { - padding-top: 55px; - height: 100%; -} - -.desktop-title { - flex: 1; - line-height: 55px; - color: gray; - font-size: 22px; -} - -.mobile-title { - flex: 1; - line-height: 55px; - color: gray; - font-size: 22px; - display: none; -} - -.desktop-nav { - height: 55px; - background: rgb(33, 37, 43); - display: flex; - justify-content: flex-end; - box-shadow: 0px 3px 6px 0px rgb(200, 200, 200); - margin-bottom: 5px; - position: fixed; - width: 100vw; - z-index: 150; - padding-left: 20px; - padding-right: 20px; - left: 0px; - top: 0px; -} - -.mobile-nav { - background: rgb(33, 37, 43); - display: none; - justify-content: space-around; - box-shadow: 0px 3px 6px 0px rgb(200, 200, 200); - margin-bottom: 5px; - position: fixed; - width: 100vw; - z-index: 150; - padding-left: 20px; - padding-right: 20px; - left: 0px; - top: 0px; -} - -.desktop-terminal-wrapper { - display: block; -} - -.terminal-btn { - position: fixed; - right: 30px; - bottom: 30px; - border-radius: 50%; - background: rgb(20, 20, 20); - color: white; - width: 50px; - text-align: center; - height: 50px; - z-index: 300; - box-shadow: 2px 2px 5px gray; -} - -.active-link { - background: rgb(62, 66, 81) -} - -.device-keyboard { - padding-right: 10px; - cursor: pointer; - color: white; - display: none; -} - -@media (max-width:800px) { - [class="desktop-nav"] { - display: none; - } - [class="mobile-nav"] { - display: flex; - } - [class*="desktop-terminal-wrapper"] { - display: none; - } - [class="terminal-btn"] { - bottom: 60px; - right: 30px; - } - [class*="desktop-title"] { - display: none; - } - [class*="mobile-title"] { - display: block; - } - [class="device-keyboard"] { - display: block; - } - [class="term-fullscreen"]{ - height: 50vh - } -} - -.bg-gradient { - background: #3A1C71; - /* fallback for old browsers */ - background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71); - /* Chrome 10-25, Safari 5.1-6 */ - background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71); - /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ +.fullscreen { + width: 100vw; + height: 100vh; + position: fixed; + bottom: 0px; + right: 0px; + display: flex; + flex-direction: column; + background: black; + color: white; + z-index: 100; +} + +.minimized { + width: 200px; + position: fixed; + right: 10px; + bottom: 0px; + color: white; + background: black; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.rounded-top { + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} + +.normal { + width: 740px; + height: 450px; + position: fixed; + bottom: 0px; + right: 10px; + display: flex; + flex-direction: column; + background: black; + color: white; + z-index: 100; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.term-normal { + height: 410px; +} + +.term-fullscreen { + height: calc(100vh - 40px); +} + + +.router-wrapper { + padding-top: 55px; + height: 100%; +} + +.desktop-title { + flex: 1; + line-height: 55px; + color: gray; + font-size: 22px; +} + +.mobile-title { + flex: 1; + line-height: 55px; + color: gray; + font-size: 22px; + display: none; +} + +.desktop-nav { + height: 55px; + /* 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); + margin-bottom: 5px; + position: fixed; + width: 100vw; + z-index: 150; + padding-left: 20px; + padding-right: 20px; + left: 0px; + top: 0px; +} + +.mobile-nav { + background: rgb(33, 37, 43); + display: none; + justify-content: space-around; + box-shadow: 0px 3px 6px 0px rgb(200, 200, 200); + margin-bottom: 5px; + position: fixed; + width: 100vw; + z-index: 150; + padding-left: 20px; + padding-right: 20px; + left: 0px; + top: 0px; +} + +.desktop-terminal-wrapper { + display: block; +} + +.terminal-btn { + position: fixed; + right: 30px; + bottom: 30px; + border-radius: 50%; + background: rgb(20, 20, 20); + color: white; + width: 50px; + text-align: center; + height: 50px; + z-index: 300; + box-shadow: 2px 2px 5px gray; +} + +.active-link { + background: rgb(62, 66, 81) +} + +.device-keyboard { + padding-right: 10px; + cursor: pointer; + color: white; + display: none; +} + +@media (max-width:800px) { + [class="desktop-nav"] { + display: none; + } + [class="mobile-nav"] { + display: flex; + } + [class*="desktop-terminal-wrapper"] { + display: none; + } + [class="terminal-btn"] { + bottom: 60px; + right: 30px; + } + [class*="desktop-title"] { + display: none; + } + [class*="mobile-title"] { + display: block; + } + [class="device-keyboard"] { + display: block; + } + [class="term-fullscreen"]{ + height: 50vh + } +} + +.bg-gradient { + background: #3A1C71; + /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71); + /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71); + /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } \ No newline at end of file diff --git a/ui/src/app/home/home.component.html b/ui/src/app/home/home.component.html index 1e1d986..6d002fc 100644 --- a/ui/src/app/home/home.component.html +++ b/ui/src/app/home/home.component.html @@ -76,10 +76,13 @@
- - - - + + + +
+ +
+
diff --git a/ui/src/app/home/home.component.ts b/ui/src/app/home/home.component.ts index 3ab4b2c..9b92c1d 100644 --- a/ui/src/app/home/home.component.ts +++ b/ui/src/app/home/home.component.ts @@ -97,4 +97,6 @@ export class HomeComponent implements OnInit { this.router.navigate(["/login"]); } + + } diff --git a/ui/src/app/home/search/search.component.html b/ui/src/app/home/search/search.component.html index 1a6b0d1..67d7f55 100644 --- a/ui/src/app/home/search/search.component.html +++ b/ui/src/app/home/search/search.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/ui/src/app/home/settings/settings.component.html b/ui/src/app/home/settings/settings.component.html index 3ccd42d..67db786 100644 --- a/ui/src/app/home/settings/settings.component.html +++ b/ui/src/app/home/settings/settings.component.html @@ -1,5 +1,5 @@
+ 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;">