Skip to content

Commit

Permalink
hide and shiw treeview works
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Sep 19, 2024
1 parent 3b9964f commit 5b9750f
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 29 deletions.
14 changes: 0 additions & 14 deletions src/app/shared/system-component/filetreeview/filetreeview.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,33 +273,19 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
}

setBtnStyle(elmntId:string, isMouseHover:boolean):void{

const btnElement = document.getElementById(elmntId) as HTMLElement;
if(btnElement){
btnElement.style.backgroundColor = '#4c4c4c';
// btnElement.style.border = '1px solid #3c3c3c';

if(this.selectedElementId == elmntId){

if(isMouseHover){
btnElement.style.backgroundColor ='#787474'
}

// if(!isMouseHover && this.isIconInFocusDueToCurrentAction){
// btnElement.style.backgroundColor ='#787474'
// }

if(!isMouseHover){
btnElement.style.backgroundColor = '#4c4c4c';
}

// if(!isMouseHover && this.isIconInFocusDueToPriorAction){
// btnElement.style.backgroundColor = 'transparent';
// btnElement.style.border = '0.5px solid white'
// }
}
}

}

removeBtnStyle(elmntId:string):void{
Expand Down
37 changes: 25 additions & 12 deletions src/app/system-apps/fileexplorer/fileexplorer.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div class="view-tab-pane-container">
<div class="tab-empty-line-container "></div>
<div class="view-tab-pane-top-cntnr">
<div class="view-tab-pane-top1">
<div class="view-tab-pane-top1" (click) = "onNavPaneBtnClick()" (mouseenter) ="onNavPaneBtnEnter()" (mouseleave)="onNavPaneBtnLeave()" id="navPaneIconCntnr-{{this.processId}}">
<div class="tab-empty-space"></div>
<figure class="figure-tab-view-pane">
<img class="img-tab-view-pane" [src]="'osdrive/Cheetah/System/Imageres/navigation_pane.png' | safeResourceUrl"/>
Expand All @@ -32,7 +32,7 @@
</div>
<div class="view-tab-pane-top2">
<div class="tab-empty-space"></div>
<div class="tab-pane-top2-1">
<div class="tab-pane-top2-1" (click) = "onPrevPaneBtnClick()" (mouseenter) ="onPrevPaneBtnEnter()" (mouseleave)="onPrevPaneBtnLeave()" id="prevPaneIconCntnr-{{this.processId}}-1">
<span class="span-tab-pane-cntnr">
<figure class="figure-tab-view-pane1">
<img class="img-tab-view-pane1" [src]="'osdrive/Cheetah/System/Imageres/preview_pane.png' | safeResourceUrl"/>
Expand All @@ -41,7 +41,7 @@
</span>
</div>
<div class="tab-empty-space1"></div>
<div class="tab-pane-top2-2">
<div class="tab-pane-top2-2" (click) = "onDetailPaneBtnClick()" (mouseenter) ="onDetailPaneBtnEnter()" (mouseleave)="onDetailPaneBtnLeave()" id="detailsPaneIconCntnr-{{this.processId}}">
<span class="span-tab-pane-cntnr">
<figure class="figure-tab-view-pane1">
<img class="img-tab-view-pane1" [src]="'osdrive/Cheetah/System/Imageres/details_pane.png' | safeResourceUrl"/>
Expand All @@ -61,7 +61,7 @@
<div class="view-tab-layout-top-cntnr">
<div class="view-tab-layout-top1" (mouseenter)="colorTabLayoutContainer()" (mouseleave)="unColorTabLayoutContainer()" [style]="tabLayoutCntnrStyle">
<div class="view-tab-layout-content">
<span class="span-tab-layout-cntnr" (mouseenter)="onMouseEnterTabLayoutBtn(this.extraLargeIconsView, 1)" (mouseleave)="onMouseLeaveTabLayoutBtn(1)" (click)="onClickTabLayoutBtn(this.extraLargeIconsView, 1)" id="tabLayoutIconCntnr-{{this.processId}}-1">
<span class="span-tab-layout-cntnr" (mouseenter)="onMouseEnterTabLayoutBtn(this.extraLargeIconsView, 1)" (mouseleave)="onMouseLeaveTabLayoutBtn(1)" (click)="onClickTabLayoutBtn(this.extraLargeIconsView, 1)" id="tabLayoutIconCntnr-{{this.processId}}-1">
<figure class="figure-tab-view-layout">
<img class="img-tab-view-layout" [src]="'osdrive/Cheetah/System/Imageres/extra_large_image.png' | safeResourceUrl"/>
</figure>
Expand Down Expand Up @@ -237,10 +237,13 @@
<div class="header-empty-line-container2"></div>
<div class="fileexp-main-container" #fileExplorerMainContainer>
<div class="fileexp-content-container">
<div class="navigation-content-container" (mouseenter)="showExpandTreeIconBtn()" (mouseleave)="hideExpandTreeIconBtn()" #navExplorerContainer>
<div style="height: 10px; width: 100%;"></div>
<cos-filetreeview [pid] ="this.processId" [isHoverActive]="showExpandTreeIcon" [treeData]="fileTreeNode"></cos-filetreeview>
</div>
<ng-container *ngIf="showNavigationPane">
<div class="navigation-content-container" (mouseenter)="showExpandTreeIconBtn()" (mouseleave)="hideExpandTreeIconBtn()" #navExplorerContainer>
<div style="height: 10px; width: 100%;"></div>
<cos-filetreeview [pid] ="this.processId" [isHoverActive]="showExpandTreeIcon" [treeData]="fileTreeNode"></cos-filetreeview>
</div>
</ng-container>

<div class="file-content-container" #fileExplorerContentContainer>

<!-- ngResizable [rzHandles]="'w'" [rzMinWidth]="270" -->
Expand Down Expand Up @@ -397,10 +400,20 @@
</div>
</ol>
</div>
<div class="previewOrdetails-content-container">
<!-- ngResizable [rzHandles]="'w'" [rzMinWidth]="200" -->
<p>hide/show</p>
</div>
<ng-container *ngIf="showPreviewPane">
<div class="previewOrdetails-content-container">
<!-- ngResizable [rzHandles]="'w'" [rzMinWidth]="200" -->
<p>hide/show</p>
</div>
</ng-container>

<ng-container *ngIf="showDetailsPane">
<div class="previewOrdetails-content-container" >
<!-- ngResizable [rzHandles]="'w'" [rzMinWidth]="200" -->
<p>Details</p>
</div>
</ng-container>

</div>
</div>
<div class="fileexp-footer-container" >
Expand Down
37 changes: 34 additions & 3 deletions src/app/system-apps/fileexplorer/fileexplorer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,11 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
isSortBySize = false;
isSortByDateModified = false;

showExpandTreeIcon = false;
showExpandTreeIcon = true;
showNavigationPane = true;
showPreviewPane = false;
showDetailsPane = false;


renameForm!: FormGroup;
pathForm!: FormGroup;
Expand Down Expand Up @@ -307,7 +311,6 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
})
}


colorTabLayoutContainer():void{
this.tabLayoutCntnrStyle ={
'background-color': '#403c3c'
Expand Down Expand Up @@ -389,7 +392,6 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
}
}


changeLayoutCss(iconSize:string):void{

const layoutOptions:string[] = [this.smallIconsView,this.mediumIconsView,this.largeIconsView,this.extraLargeIconsView,
Expand Down Expand Up @@ -673,6 +675,35 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
}
}

onNavPaneBtnClick():void{
this.showNavigationPane = !this.showNavigationPane;
}

onNavPaneBtnEnter():void{
const btnElement = document.getElementById(`navPaneIconCntnr-${this.processId}`) as HTMLDivElement;
if(btnElement){
btnElement.style.border = '0.5px solid #ccc';
btnElement.style.backgroundColor = '#807c7c';
}

}

onNavPaneBtnLeave():void{
const btnElement = document.getElementById(`navPaneIconCntnr-${this.processId}`) as HTMLDivElement;
if(btnElement){
btnElement.style.backgroundColor = 'transparent';
btnElement.style.border = 'none'
}
}

onPrevPaneBtnClick():void{1}
onPrevPaneBtnEnter():void{1}
onPrevPaneBtnLeave():void{1}

onDetailPaneBtnClick():void{1}
onDetailPaneBtnEnter():void{1}
onDetailPaneBtnLeave():void{1}

showExpandTreeIconBtn():void{
this.showExpandTreeIcon = true;
}
Expand Down

0 comments on commit 5b9750f

Please sign in to comment.