Skip to content

Commit

Permalink
Properties view is coming together
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Sep 24, 2024
1 parent bd70483 commit 260cf86
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 60 deletions.
18 changes: 14 additions & 4 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { DialogComponent } from './shared/system-component/dialog/dialog.compone
import { TextEditorComponent } from './system-apps/texteditor/texteditor.component';
import { CodeEditorComponent } from './user-apps/codeeditor/codeeditor.component';
import { MarkDownViewerComponent } from './user-apps/markdownviewer/markdownviewer.component';
import { PropertiesComponent } from './shared/system-component/properties/properties.component';

@Component({
selector: 'cos-root',
Expand Down Expand Up @@ -134,11 +135,13 @@ export class AppComponent implements OnDestroy, AfterViewInit {
ngAfterViewInit():void{
// This quiets the - Expression has changed after it was checked.
//TODO: change detection is the better solution TBD
setTimeout(()=> {
const priorSessionInfo = this.fetchPriorSessionInfo();
const sessionKeys = this.getSessionKey(priorSessionInfo);
this.restorePriorSession(sessionKeys);
setTimeout(()=> {
const priorSessionInfo = this.fetchPriorSessionInfo();
const sessionKeys = this.getSessionKey(priorSessionInfo);
this.restorePriorSession(sessionKeys);
}, this.SECONDS_DELAY[0]);

this.showPropertiesWindow();
}

async loadApps(appName:string):Promise<void>{
Expand Down Expand Up @@ -170,6 +173,13 @@ export class AppComponent implements OnDestroy, AfterViewInit {
}
}

private showPropertiesWindow():void{
const componentRef = this.itemViewContainer.createComponent(PropertiesComponent);
const propertyId = componentRef.instance.propertiesId;
this._componentReferenceService.addComponentReference(propertyId, componentRef);

}

private closeDialogMsgBox(dialogId:number):void{
const componentToDelete = this._componentReferenceService.getComponentReference(dialogId);
this._componentRefView = componentToDelete.hostView;
Expand Down
99 changes: 68 additions & 31 deletions src/app/shared/system-component/properties/properties.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,12 @@
position: absolute;
top: 25%;
left: 25%;
transform: translate(-50%, -50%); /* Move the element back by 50% of its own width and height */
/* transform: translate(-50%, -50%); Move the element back by 50% of its own width and height */
transform: translate(431px, -914px); /* Move the element back by 50% of its own width and height */
outline: 1px hsl(0deg 0% 20%/70%);
z-index: 2;
width: 350px;
height: 650px;
width: 325px;
height: 500px;
}


Expand Down Expand Up @@ -93,52 +94,51 @@




.properties-body-container{
width: 100%;
background-color: #f0f0f0;
padding: 0px 7px;
}

/* Styles for the tab navigation */
.properties-header-tab-container {
width: 100%;
display: flex;
background-color: #ccc;
display: block;
background-color: #ffffff;
}

.properties-header-tabs {
display: flex;
background-color: #080404;
background-color: #f0f0f0;
}


.properties-tab {
/* flex: 1; */
width: 55px;
padding: 4px 8px;
margin: 0 4px;
width: 100px;
padding: 4px 0px;
font-weight: normal;
font-size: 11px;
text-align: center;
cursor:default;
background-color: #000;
color: white;
background-color: #f0f0f0;
border:0.3px solid #2d2d2d;
color: black;
transition: background-color 0.3s;
}

.properties-tab.highlight-default {
margin: 0px 0px;
background-color: #0464ac;
color: white;
}

.properties-tab.active {
border:0.3px solid #2d2d2d;
border-bottom: none;
background-color: #202020;
color: white;
background-color: #ffffff;
color: black;
}

/* Styles for tab content */
.properties-header-tab-content-container {
width: 100%;
height: 100%;
border:0.3px solid #2d2d2d;

}

.properties-tab-pane {
Expand Down Expand Up @@ -168,44 +168,81 @@

.general-tab-section{
width: 100%;
padding: 5px 5px;
padding: 10px 5px;
}

.general-tab-section2{
width: 100%;
padding: 10px 9px;
}

.general-tab-content{
display: inline-flex;
width: 100%;
/* border: 1px solid black; */
}

.general-tab-line-container {
position:relative;
bottom: 0;
max-height: 0.5px;
background-color: #ffffff;
}

.general-tab-line{
border: 0.5px solid #9c9898;
margin: 0 8px;
}

.general-tab-head{
width: 30%;
padding-left: 4px;
width: 26%;
}

.general-tab-mid{
min-width: 10%;
min-width: 5%;
padding: 0 4px;
}


.general-tab-tail{
width: 60%;
width: 69%;
padding-right: 4px;
}

.general-tab-p{
position: relative;
top: 30%;
text-align: left;
border: 1px solid #333;
}

.general-tab-p1{
position: relative;
top: 0%;
font-size:11px;
font-weight:normal;
text-align: left;
/* border: 1px solid #333; */
}

.general-tab-figure{
align-items: center;
display:inline-flex;
width: 18px;
height: 18px;
width: 38px;
height: 38px;
}

.general-tab-img{
height: 18px;
width: 18px;
height: 38px;
width: 38px;
image-rendering:optimizeQuality;
position: relative;
margin: 0 0;
left: -12px;
}




.properties-footer-container{
width: 100%;
}
Expand Down
70 changes: 61 additions & 9 deletions src/app/shared/system-component/properties/properties.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div #leftHS1 class="properties-left-header-section">
<h1 class="properties-h1">
<figure class="properties-figure">
<!-- <img class="properties-img" [src]="this.icon" [alt]="this.name"/> -->
<img class="properties-img" [src]="'osdrive/Cheetah/System/Imageres/camera.png'" [alt]="''"/>
<figcaption class="properties-figcaption"> {{this.displayMgs}} </figcaption>
</figure>
</h1>
Expand All @@ -19,7 +19,7 @@ <h1 class="properties-h1">
</div>
</div>
<div class="properties-body-container">
<div style="width: 100%; height: 10px;"> </div>
<div style="width: 100%; height: 10px; background-color:#f0f0f0;"> </div>

<div class="properties-header-tab-container">
<div class="properties-header-tabs">
Expand All @@ -30,22 +30,74 @@ <h1 class="properties-h1">
<div class="properties-header-tab-content-container">
<div class="properties-tab-pane active">
<div class="general-tab-containter">
<div style="width: 100%; height: 15px;"> </div>
<div class="general-tab-section1">
<div style="width: 100%; height: 5px;"> </div>

<div class="general-tab-section">
<div class="general-tab-content">
<div class="general-tab-head"><figure class="general-tab-figure"><img class="general-tab-img" [src]="''"/></figure></div>
<div class="general-tab-mid"><p class="general-tab-p"> {{''}}</p></div>
<div class="general-tab-head"><figure class="general-tab-figure"><img class="general-tab-img" [src]="'osdrive/Cheetah/System/Imageres/camera.png'"/></figure></div>
<div class="general-tab-mid"></div>
<div class="general-tab-tail"><p class="general-tab-p"> {{this.name}}</p></div>
</div>

</div>
<div class="general-tab-section2">
<div class="general-tab-line-container"><div class="general-tab-line"></div></div>
<div class="general-tab-section2">
<div class="general-tab-content">
<div class="general-tab-head"><p class="general-tab-p1"> Type of file:</p></div>
<div class="general-tab-mid"></div>
<div class="general-tab-tail"><p class="general-tab-p1"> .url</p></div>
</div>

<div class="general-tab-content">
<div class="general-tab-head"><p class="general-tab-p1"> Description:</p></div>
<div class="general-tab-mid"></div>
<div class="general-tab-tail"><p class="general-tab-p1"> camera </p></div>
</div>
</div>
<div class="general-tab-section3">
<div class="general-tab-line-container"><div class="general-tab-line"></div></div>
<div class="general-tab-section2">

<div class="general-tab-content">
<div class="general-tab-head"><p class="general-tab-p1"> Location:</p></div>
<div class="general-tab-mid"></div>
<div class="general-tab-tail"><p class="general-tab-p1"> C:\Cheetah\System\Imageres</p></div>
</div>


<div class="general-tab-content">
<div class="general-tab-head"><p class="general-tab-p1"> Size:</p></div>
<div class="general-tab-mid"></div>
<div class="general-tab-tail"><p class="general-tab-p1"> 1.44 KB(1,482 bytes)</p></div>
</div>

<div class="general-tab-content">
<div class="general-tab-head"><p class="general-tab-p1"> Size on disk:</p></div>
<div class="general-tab-mid"></div>
<div class="general-tab-tail"><p class="general-tab-p1"> 4.00 KB (4,096 bytes) </p></div>
</div>
</div>
<div class="general-tab-section4">
<div class="general-tab-line-container"><div class="general-tab-line"></div></div>
<div class="general-tab-section2">

<div class="general-tab-content">
<div class="general-tab-head"><p class="general-tab-p1">Created:</p></div>
<div class="general-tab-mid"></div>
<div class="general-tab-tail"><p class="general-tab-p1">Thur, Sep 19,2024, 9:22.26 PM</p></div>
</div>

<div class="general-tab-content">
<div class="general-tab-head"><p class="general-tab-p1">Modified:</p></div>
<div class="general-tab-mid"></div>
<div class="general-tab-tail"><p class="general-tab-p1">Thur, Sep 19,2024, 9:22.26 PM</p></div>
</div>

<div class="general-tab-content">
<div class="general-tab-head"><p class="general-tab-p1"> Accessed:</p></div>
<div class="general-tab-mid"></div>
<div class="general-tab-tail"><p class="general-tab-p1"> Thur, Sep 19,2024, 9:22.26 PM </p></div>
</div>
</div>
<div class="general-tab-line-container"><div class="general-tab-line"></div></div>
</div>
</div>
<div class="properties-tab-pane">
Expand Down
8 changes: 4 additions & 4 deletions src/app/shared/system-component/properties/properties.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export class PropertiesComponent implements OnChanges {

@Input() inputMsg = '';

propertyId = 0;
propertiesId = 0;
type = ComponentType.System;
displayMgs = '';

displayMgs = 'Test Test Properties';
name = 'Test Test';

constructor(private changeDetectorRef: ChangeDetectorRef){
this.propertyId = this.generatePropertyId();
this.propertiesId = this.generatePropertyId();
}


Expand Down
25 changes: 13 additions & 12 deletions src/app/system-apps/desktop/desktop.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,18 +166,19 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
}

ngOnInit():void{
this._scriptService.loadScript("vanta-waves","osdrive/Program-Files/Backgrounds/vanta.waves.min.js").then(() =>{
this._vantaEffect = VANTA.WAVES({
el: '#vanta',
color:this.defaultColor, //this._numSequence,
waveHeight:20,
shininess: 50,
waveSpeed:0.5,
zoom:0.75,
});
})

this.getDesktopMenuData();
1
// this._scriptService.loadScript("vanta-waves","osdrive/Program-Files/Backgrounds/vanta.waves.min.js").then(() =>{
// this._vantaEffect = VANTA.WAVES({
// el: '#vanta',
// color:this.defaultColor, //this._numSequence,
// waveHeight:20,
// shininess: 50,
// waveSpeed:0.5,
// zoom:0.75,
// });
// })

// this.getDesktopMenuData();
}

ngAfterViewInit():void{
Expand Down

0 comments on commit 260cf86

Please sign in to comment.