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>(); currentViewChanger = new Subject<string>();
viewTextRequests=new Subject<string>();
terminalSession: TerminalSession; terminalSession: TerminalSession;
constructor(private http: HttpClient) { 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;" <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 class="desktop-tabs" *ngIf="service.selectedEditorTab">
<div *ngFor="let tab of tabKeys" <div *ngFor="let tab of tabKeys"
style="padding: 10px; padding-left: 5px; padding-right: 5px; display: flex; justify-content: space-between;" style="padding: 10px; padding-left: 5px; padding-right: 5px; display: flex; justify-content: space-between;"
@ -32,6 +31,6 @@
</div> </div>
<div *ngIf="tabKeys.length<1" <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> <span>No file is opened, please goto files and select some.</span>
</div> </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) { } constructor(public service: DataService, private route: ActivatedRoute) { }
ngOnInit() { ngOnInit() {
console.log("editor: ngOnInit "+this.codeEditorElmRef);
this.getTabbedSessions(); this.getTabbedSessions();
this.service.viewTextRequests.subscribe(a=>{
this.getTabbedSessions();
this.loadSession(this.service.selectedEditorTab);
});
// console.log("selected tab: " + this.service.selectedEditorTab+" tabkexs: "+this.tabKeys); // console.log("selected tab: " + this.service.selectedEditorTab+" tabkexs: "+this.tabKeys);
if(this.tabKeys.length<1){ if(this.tabKeys.length<1){
return; 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(){ ngAfterViewInit(){
console.log("editor: ngAfterViewInit "+this.codeEditorElmRef);
ace.require('ace/ext/language_tools'); ace.require('ace/ext/language_tools');
if(!this.codeEditorElmRef){ if(!this.codeEditorElmRef){
console.log("Code editor reference not found");
return; return;
} }
const element = this.codeEditorElmRef.nativeElement; const element = this.codeEditorElmRef.nativeElement;
@ -96,6 +110,7 @@ export class EditorComponent implements OnInit,AfterViewInit {
getTabbedSessions(): void { getTabbedSessions(): void {
this.tabKeys = Object.keys(this.service.editorContexts); this.tabKeys = Object.keys(this.service.editorContexts);
console.log("tab keys: "+JSON.stringify(this.tabKeys))
// this.service.editorContexts.forEach((value: EditorContext, key: string) => { // this.service.editorContexts.forEach((value: EditorContext, key: string) => {
// this.tabKeys.push(key); // this.tabKeys.push(key);
// console.log("tabbed key: " + key); // console.log("tabbed key: " + key);
@ -123,6 +138,9 @@ export class EditorComponent implements OnInit,AfterViewInit {
} }
onResize(event: any) { onResize(event: any) {
if(!this.codeEditorElmRef){
return;
}
//console.log("window resized"); //console.log("window resized");
let doc: any = this.codeEditor.getSession().getDocument(); let doc: any = this.codeEditor.getSession().getDocument();
let r: any = this.codeEditor.renderer; let r: any = this.codeEditor.renderer;

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

@ -1,167 +1,175 @@
.nav-tree { .selected-tab{
height: 100%; border-bottom: 3px solid dodgerblue;
width: 250px; border-right: 1px solid rgb(230,230,230);
min-width: 250px; }
background: rgb(240, 240, 240);
overflow: hidden; .normal-tab{
overflow-x: auto; border-bottom: 3px solid rgb(240,240,240);
overflow-y: auto; border-right: 1px solid rgb(230,230,230);
border-right: 1px solid rgb(230, 230, 230); }
padding-top: 10px;
} .nav-tree {
height: 100%;
.file-list { width: 250px;
flex: 1; min-width: 250px;
overflow: hidden; background: rgb(240, 240, 240);
overflow-x: auto; overflow: hidden;
overflow-y: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; overflow-y: auto;
position: relative; border-right: 1px solid rgb(230, 230, 230);
max-width: calc(100vw - 250px); padding-top: 10px;
} }
.file-list-content-wrapper { .file-list {
padding-top: 52px; flex: 1;
} overflow: hidden;
overflow-x: auto;
.file-list-header { overflow-y: auto;
display: flex; -webkit-overflow-scrolling: touch;
height: 51px; position: relative;
background: white; max-width: calc(100vw - 250px);
border-bottom: 1px solid rgb(230, 230, 230); }
cursor: pointer;
position: fixed; .file-list-header {
box-shadow: 0px 0px 6px 0px rgb(230, 230, 230); display: flex;
z-index: 0; height: 51px;
} background: white;
border-bottom: 1px solid rgb(230, 230, 230);
.file-list-item-row { cursor: pointer;
display: flex; position: sticky;
height: 51px; top: 0px;
border-bottom: 1px solid rgb(240, 240, 240); box-shadow: 0px 0px 6px 0px rgb(230, 230, 230);
overflow: hidden; }
}
.file-list-item-row {
.desktop-file-list-first-item { display: flex;
flex: 2; height: 51px;
overflow-x: hidden; border-bottom: 1px solid rgb(240, 240, 240);
line-height: 50px; overflow: hidden;
display: flex; }
padding-left: 10px;
} .desktop-file-list-first-item {
flex: 2;
.desktop-file-list-other-item { overflow-x: hidden;
flex: 1; line-height: 50px;
line-height: 50px; display: flex;
overflow: hidden; padding-left: 10px;
text-overflow: ellipsis; }
white-space: nowrap;
} .desktop-file-list-other-item {
flex: 1;
.mobile-file-list-row { line-height: 50px;
display: none; overflow: hidden;
width: 100%; text-overflow: ellipsis;
} white-space: nowrap;
}
.desktop-nav {
display: flex; .mobile-file-list-row {
padding: 10px; display: none;
background: rgb(245, 245, 245); width: 100%;
border-bottom: 1px solid rgb(230, 230, 230); }
flex-wrap: nowrap;
overflow: hidden; .desktop-nav {
} display: flex;
padding: 10px;
.mobile-nav { padding-left: 15px;
display: none; background: rgb(245, 245, 245);
justify-content: space-around; border-bottom: 1px solid rgb(230, 230, 230);
flex-wrap: nowrap; flex-wrap: nowrap;
overflow: hidden; overflow: hidden;
background: rgb(245, 245, 245); }
border-top: 1px solid rgb(230, 230, 230);
} .mobile-nav {
display: none;
.desktop-file-tabs { justify-content: space-around;
height: 50px; flex-wrap: nowrap;
width: 100%; overflow: hidden;
display: flex; background: rgb(245, 245, 245);
background: rgb(230, 230, 230); border-top: 1px solid rgb(230, 230, 230);
} }
.dropdown-ctx-menu { .desktop-file-tabs {
display: flex; height: 50px;
width: 200px; width: 100%;
flex-direction: column; display: flex;
position: fixed; background: rgb(240, 240, 240);
right: 0px; border-bottom: 1px solid rgb(220,220,220);
max-height: 50vh; }
background: white;
border: 1px solid rgb(200, 200, 200); .dropdown-ctx-menu {
box-shadow: 3px 3px 10px 0px rgb(200, 200, 200); display: flex;
z-index: 301; width: 200px;
overflow-y: auto; flex-direction: column;
} position: fixed;
right: 0px;
.noselect { max-height: 50vh;
-webkit-touch-callout: none; background: white;
/* iOS Safari */ border: 1px solid rgb(200, 200, 200);
-webkit-user-select: none; box-shadow: 3px 3px 10px 0px rgb(200, 200, 200);
/* Safari */ z-index: 301;
-khtml-user-select: none; overflow-y: auto;
/* Konqueror HTML */ }
-moz-user-select: none;
/* Firefox */ .noselect {
-ms-user-select: none; -webkit-touch-callout: none;
/* Internet Explorer/Edge */ /* iOS Safari */
user-select: none; -webkit-user-select: none;
/* Non-prefixed version, currently /* Safari */
supported by Chrome and Opera */ -khtml-user-select: none;
} /* Konqueror HTML */
-moz-user-select: none;
@media (max-width:800px) { /* Firefox */
[class="nav-tree"] { -ms-user-select: none;
display: none; /* Internet Explorer/Edge */
} user-select: none;
[class="file-list"] { /* Non-prefixed version, currently
max-width: 100vw; supported by Chrome and Opera */
} }
[class="file-list-header"] {
display: none; @media (max-width:800px) {
} [class="nav-tree"] {
[class*="file-list-content-wrapper"] { display: none;
padding-top: 0px; }
} [class="file-list"] {
[class*="file-list-item-row"] { max-width: 100vw;
height: 80px; }
} [class="file-list-header"] {
[class="desktop-file-list-first-item"] { display: none;
display: none; }
} [class*="file-list-content-wrapper"] {
[class="desktop-file-list-other-item"] { padding-top: 0px;
display: none; }
} [class*="file-list-item-row"] {
[class="mobile-file-list-row"] { height: 80px;
display: flex; }
} [class="desktop-file-list-first-item"] {
[class="desktop-file-list-other-item"] { display: none;
display: none; }
} [class="desktop-file-list-other-item"] {
[class="desktop-nav"] { display: none;
display: none; }
} [class="mobile-file-list-row"] {
[class="mobile-nav"] { display: flex;
display: flex; }
} [class="desktop-file-list-other-item"] {
[class*="desktop-file-tabs"] { display: none;
display: none; }
} [class="desktop-nav"] {
[class="dropdown-ctx-menu"] { display: none;
bottom: 40px; }
} [class="mobile-nav"] {
} display: flex;
}
@media (min-width:800px) { [class*="desktop-file-tabs"] {
[class="dropdown-ctx-menu"] { display: none;
top: 100px; }
} [class="dropdown-ctx-menu"] {
bottom: 40px;
}
}
@media (min-width:800px) {
[class="dropdown-ctx-menu"] {
top: 100px;
}
} }

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 --> <!-- navigation tree start -->
<div class="nav-tree"> <div class="nav-tree">
<!-- <app-tree [model]="service.tree1" [icon]="'fa-bookmark-o'"></app-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 *ngIf="service.tabs.length>1" class="desktop-file-tabs">
<div (click)="showTab(i)" (mouseenter)="hoverIndex=i" (mouseleave)="hoverIndex=-1" <div (click)="showTab(i)" (mouseenter)="hoverIndex=i" (mouseleave)="hoverIndex=-1"
*ngFor="let tab of service.tabs; let i=index" *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;"> 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> <span style="line-height: 30px; margin-left: 10px; margin-right: 10px;">{{tab.folderName}}</span>
<div style="width: 20px;"> <div style="width: 20px;">
@ -101,7 +102,7 @@
<div class="file-list" *ngIf="service.tabs[service.selectedTab]&&service.tabs[service.selectedTab].files"> <div class="file-list" *ngIf="service.tabs[service.selectedTab]&&service.tabs[service.selectedTab].files">
<!-- header start --> <!-- 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="flex: 2; line-height: 50px; padding-left: 20px;" (click)="sort(0)">
<span style="padding-right: 10px;">Name</span> <span style="padding-right: 10px;">Name</span>
<span *ngIf="this.sortColumn==0&&this.ascendingSort"> <span *ngIf="this.sortColumn==0&&this.ascendingSort">
@ -158,7 +159,7 @@
<!-- actual content begin --> <!-- 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" <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'" [style.color]="file.selected?'white':'black'" [style.background]="file.selected?'deepskyblue':'white'"
(dblclick)="file.type === 'Directory'?navigateTo(file.path): openItem(file)" (dblclick)="file.type === 'Directory'?navigateTo(file.path): openItem(file)"

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

@ -27,7 +27,7 @@ export class FilesComponent implements OnInit, OnDestroy {
toastVisible: boolean = false; toastVisible: boolean = false;
toastMessage: string; toastMessage: string;
@ViewChild("list") @ViewChild("content")
list: ElementRef; list: ElementRef;
@ViewChild("header") @ViewChild("header")
@ -36,7 +36,7 @@ export class FilesComponent implements OnInit, OnDestroy {
@Output() @Output()
viewChanged = new EventEmitter<string>(); viewChanged = new EventEmitter<string>();
fileToOpen:FileItem; fileToOpen: FileItem;
uploadPopup: boolean; uploadPopup: boolean;
hoverIndex: number = -1; hoverIndex: number = -1;
@ -63,7 +63,7 @@ export class FilesComponent implements OnInit, OnDestroy {
this.service.fileOpenRequests.subscribe((file: FileItem) => { this.service.fileOpenRequests.subscribe((file: FileItem) => {
if (file.type == "Directory") { if (file.type == "Directory") {
this.navigateTo(file.path); this.navigateTo(file.path);
}else{ } else {
this.openItem(file); this.openItem(file);
} }
}); });
@ -116,7 +116,7 @@ export class FilesComponent implements OnInit, OnDestroy {
openItem(fileItem: FileItem) { openItem(fileItem: FileItem) {
let file: string = fileItem.path; let file: string = fileItem.path;
this.loading = true; this.loading = true;
this.fileToOpen=fileItem; this.fileToOpen = fileItem;
console.log("Opening file: " + file) console.log("Opening file: " + file)
if (fileItem.type.startsWith("image")) { if (fileItem.type.startsWith("image")) {
this.previewer = "image"; this.previewer = "image";
@ -144,7 +144,8 @@ export class FilesComponent implements OnInit, OnDestroy {
ctx.session.setUseWrapMode(false); ctx.session.setUseWrapMode(false);
this.service.editorContexts[file] = ctx; this.service.editorContexts[file] = ctx;
this.loading = false; 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.viewChanged.emit("editor");
//this.router.navigate(["/app/editor"]); //this.router.navigate(["/app/editor"]);
}, err => { }, err => {
@ -153,16 +154,16 @@ export class FilesComponent implements OnInit, OnDestroy {
}); });
} }
// openAsText() { // openAsText() {
// let file: string; // let file: string;
// for (let i = 0; i < this.service.tabs[this.service.selectedTab].files.length; i++) { // for (let i = 0; i < this.service.tabs[this.service.selectedTab].files.length; i++) {
// if (this.service.tabs[this.service.selectedTab].files[i].selected) { // if (this.service.tabs[this.service.selectedTab].files[i].selected) {
// file = this.service.tabs[this.service.selectedTab].files[i].path; // file = this.service.tabs[this.service.selectedTab].files[i].path;
// this.openWithTextEditor(file); // this.openWithTextEditor(file);
// break; // break;
// } // }
// } // }
// } // }
navigateTo(file: string) { navigateTo(file: string) {
this.loading = true; this.loading = true;
@ -398,8 +399,9 @@ export class FilesComponent implements OnInit, OnDestroy {
let content: HTMLElement = this.list.nativeElement as HTMLElement; let content: HTMLElement = this.list.nativeElement as HTMLElement;
let h: HTMLElement = this.header.nativeElement as HTMLElement; let h: HTMLElement = this.header.nativeElement as HTMLElement;
console.log("window resized " + content.clientWidth); 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) { 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++) { for (let i = 0; i < this.service.tabs[this.service.selectedTab].files.length; i++) {
if (this.service.tabs[this.service.selectedTab].files[i].selected) { if (this.service.tabs[this.service.selectedTab].files[i].selected) {
let path = this.service.tabs[this.service.selectedTab].files[i].path; let path = this.service.tabs[this.service.selectedTab].files[i].path;
this.navigateTo(path); if (this.service.tabs[this.service.selectedTab].files[i].type === "Directory") {
break; this.navigateTo(path);
break;
}
} }
} }
} }

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

@ -1,168 +1,170 @@
.fullscreen { .fullscreen {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: black; background: black;
color: white; color: white;
z-index: 100; z-index: 100;
} }
.minimized { .minimized {
width: 200px; width: 200px;
position: fixed; position: fixed;
right: 10px; right: 10px;
bottom: 0px; bottom: 0px;
color: white; color: white;
background: black; background: black;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.rounded-top { .rounded-top {
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
} }
.normal { .normal {
width: 740px; width: 740px;
height: 450px; height: 450px;
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
right: 10px; right: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: black; background: black;
color: white; color: white;
z-index: 100; z-index: 100;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.term-normal { .term-normal {
height: 410px; height: 410px;
} }
.term-fullscreen { .term-fullscreen {
height: calc(100vh - 40px); height: calc(100vh - 40px);
} }
.router-wrapper {
padding-top: 55px; .router-wrapper {
height: 100%; padding-top: 55px;
} height: 100%;
}
.desktop-title {
flex: 1; .desktop-title {
line-height: 55px; flex: 1;
color: gray; line-height: 55px;
font-size: 22px; color: gray;
} font-size: 22px;
}
.mobile-title {
flex: 1; .mobile-title {
line-height: 55px; flex: 1;
color: gray; line-height: 55px;
font-size: 22px; color: gray;
display: none; font-size: 22px;
} display: none;
}
.desktop-nav {
height: 55px; .desktop-nav {
background: rgb(33, 37, 43); height: 55px;
display: flex; /* background: rgb(33, 37, 43); */
justify-content: flex-end; background: rgb(36, 46, 43);;
box-shadow: 0px 3px 6px 0px rgb(200, 200, 200); display: flex;
margin-bottom: 5px; justify-content: flex-end;
position: fixed; box-shadow: 0px 3px 6px 0px rgb(200, 200, 200);
width: 100vw; margin-bottom: 5px;
z-index: 150; position: fixed;
padding-left: 20px; width: 100vw;
padding-right: 20px; z-index: 150;
left: 0px; padding-left: 20px;
top: 0px; padding-right: 20px;
} left: 0px;
top: 0px;
.mobile-nav { }
background: rgb(33, 37, 43);
display: none; .mobile-nav {
justify-content: space-around; background: rgb(33, 37, 43);
box-shadow: 0px 3px 6px 0px rgb(200, 200, 200); display: none;
margin-bottom: 5px; justify-content: space-around;
position: fixed; box-shadow: 0px 3px 6px 0px rgb(200, 200, 200);
width: 100vw; margin-bottom: 5px;
z-index: 150; position: fixed;
padding-left: 20px; width: 100vw;
padding-right: 20px; z-index: 150;
left: 0px; padding-left: 20px;
top: 0px; padding-right: 20px;
} left: 0px;
top: 0px;
.desktop-terminal-wrapper { }
display: block;
} .desktop-terminal-wrapper {
display: block;
.terminal-btn { }
position: fixed;
right: 30px; .terminal-btn {
bottom: 30px; position: fixed;
border-radius: 50%; right: 30px;
background: rgb(20, 20, 20); bottom: 30px;
color: white; border-radius: 50%;
width: 50px; background: rgb(20, 20, 20);
text-align: center; color: white;
height: 50px; width: 50px;
z-index: 300; text-align: center;
box-shadow: 2px 2px 5px gray; height: 50px;
} z-index: 300;
box-shadow: 2px 2px 5px gray;
.active-link { }
background: rgb(62, 66, 81)
} .active-link {
background: rgb(62, 66, 81)
.device-keyboard { }
padding-right: 10px;
cursor: pointer; .device-keyboard {
color: white; padding-right: 10px;
display: none; cursor: pointer;
} color: white;
display: none;
@media (max-width:800px) { }
[class="desktop-nav"] {
display: none; @media (max-width:800px) {
} [class="desktop-nav"] {
[class="mobile-nav"] { display: none;
display: flex; }
} [class="mobile-nav"] {
[class*="desktop-terminal-wrapper"] { display: flex;
display: none; }
} [class*="desktop-terminal-wrapper"] {
[class="terminal-btn"] { display: none;
bottom: 60px; }
right: 30px; [class="terminal-btn"] {
} bottom: 60px;
[class*="desktop-title"] { right: 30px;
display: none; }
} [class*="desktop-title"] {
[class*="mobile-title"] { display: none;
display: block; }
} [class*="mobile-title"] {
[class="device-keyboard"] { display: block;
display: block; }
} [class="device-keyboard"] {
[class="term-fullscreen"]{ display: block;
height: 50vh }
} [class="term-fullscreen"]{
} height: 50vh
}
.bg-gradient { }
background: #3A1C71;
/* fallback for old browsers */ .bg-gradient {
background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71); background: #3A1C71;
/* Chrome 10-25, Safari 5.1-6 */ /* fallback for old browsers */
background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71); background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ /* 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+ */
} }

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

@ -76,10 +76,13 @@
</div> </div>
<div class="router-wrapper"> <div class="router-wrapper">
<app-files (viewChanged)="view=$event"></app-files> <app-editor [style.display]="view=='editor'?'block':'none'" ></app-editor>
<app-editor *ngIf="view=='editor'"></app-editor> <app-search [style.display]="view=='search'?'block':'none'" ></app-search>
<app-search *ngIf="view=='search'"></app-search> <app-settings [style.display]="view=='settings'?'block':'none'" ></app-settings>
<app-settings *ngIf="view=='settings'"></app-settings> <div style="width: 100vw; height: calc(100vh - 55px);" [style.display]="view?'none':'block'" >
<app-files (viewChanged)="view=$event"></app-files>
</div>
<!-- <router-outlet></router-outlet> --> <!-- <router-outlet></router-outlet> -->
</div> </div>
</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"]); 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 style="display: flex; justify-content: center; padding-top: 20px;" *ngIf="!ctx.searching">
<div> <div>
<div class="form-group"> <div class="form-group">

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

@ -1,5 +1,5 @@
<div <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 style="padding:30px; box-shadow: 3px 3px 15px 5px gray; min-width: 400px;">
<div class="form-group"> <div class="form-group">
<label for="username">New user name</label> <label for="username">New user name</label>