Skip to content

Commit

Permalink
desktop v0.6.5
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Nov 16, 2023
1 parent 8c76377 commit 26642b9
Show file tree
Hide file tree
Showing 3 changed files with 233 additions and 69 deletions.
123 changes: 101 additions & 22 deletions src/app/system-apps/desktop/desktop.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,36 +15,36 @@
width: 250px; /* Set a width if you like */
box-shadow: 2px 2px rgba(0,0,0,0.3);
z-index:2;

}

span{
display: block;

.vertical-menu-item{
height: fit-content;
padding: 4px 0; /* Add some padding */
background-color: #eee; /* Grey background color */
display: inline-flex;
width: 100%;
z-index:2;
}

span.container{
.line-container{
max-height: 1px;
background-color: #eee; /* Grey background color */
}

span.section-line{
.line{
border: 1px solid #afadad; /* Add a border to col-md-6 */
margin: 0 8px;
}

span.container2{
height: fit-content;
padding: 4px 0; /* Add some padding */
background-color: #eee; /* Grey background color */
display: inline-flex;
.vertical-sub-menu{
float: left;
overflow: hidden;
width: 100%;
z-index:2;
}

span.container2:hover {
background-color: #ccc; /* Dark grey background on mouse-over */
}

span.container2.sub-menu-container {
.vertical-sub-menu-content{
display: none;
position: absolute;
background-color: #f1f1f1;
Expand All @@ -56,22 +56,101 @@ span.container2.sub-menu-container {
}


span.container2.sub-menu-container:hover {

.vertical-sub-menu:hover .vertical-sub-menu-content {
display: block;
}

.vertical-sub-menu-content .vertical-menu-item:hover{
background-color: orange;
}


.vertical-span-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}


.vertical-menu a:hover {
background-color: #ccc; /* Dark grey background on mouse-over */
}


.vertical-menu .vertical-menu-item:hover {
background-color: red; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
background-color: #04AA6D; /* Add a green color to the "active/current" link */
color: white;
}





span{
display: block;
z-index: 2;
}

span.container2.sub-menu{
.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.dropdown:hover .dropbtn {
background-color: red;
}


.dropdown-content {
display: none;
position: absolute;
left:100%;
top:0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 4px 0;
padding: 12px 16px;
text-decoration: none;
display: inline-flex;
display: block;
text-align: left;
}

.inactive {
color: #6f6c6c;
.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}






span.head{
max-width: 25%;
Expand Down
99 changes: 92 additions & 7 deletions src/app/system-apps/desktop/desktop.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,91 @@
<main id="vanta" class="main-desktop" > <!-- (contextmenu)="showContextMenu($event)" (click)="hideContextMenu()" -->
<main id="vanta" class="main-desktop" (contextmenu)="showContextMenu($event)" (click)="hideContextMenu()">
<div class="vertical-menu" [style]="cntxtMenuStyle" #cntxtMenu>
<span class="span container2" (mouseenter)="showContextSubMenu('View')" (mouseleave)="hideContextSubMenu('View')">

<!-- <a href="#home">Home</a>
<a href="#news">News</a> -->

<div class="vertical-menu-item" (click)="nextBackground()">
<span class="span head"> <figure > </figure></span>
<span class="span mid">Next Background</span>
<span class="span tail"> <figure> </figure> </span>
</div>

<div class="line-container"><div class="line"></div></div>

<div class="vertical-menu-item" (click)="previousBackground()">
<span class="span head"> <figure > </figure></span>
<span class="span mid">Previous Background</span>
<span class="span tail"> <figure> </figure> </span>
</div>

<!-- <div class="dropdown">
<button class="dropbtn">Dropdown </button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div> -->


<div class="vertical-sub-menu">
<div class="vertical-menu-item">
<span class="span head"> <figure > </figure></span>
<span class="span mid">New</span>
<span class="span tail"> <figure> </figure> </span>
</div>
<div class="vertical-sub-menu-content">
<div class="vertical-menu-item" >
<span class="span head"> <figure > </figure></span>
<span class="span mid">Hello</span>
<span class="span tail"> <figure> </figure> </span>
</div>

<div class="vertical-menu-item" >
<span class="span head"> <figure > </figure></span>
<span class="span mid">Yoyo</span>
<span class="span tail"> <figure> </figure> </span>
</div>

<div class="vertical-menu-item" >
<span class="span head"> <figure > </figure></span>
<span class="span mid">Yoyo 1</span>
<span class="span tail"> <figure> </figure> </span>
</div>
</div>
</div>



<!-- <span class="span container2">
<span class="span head"><figure ></figure></span>
<span class="span mid">View</span>
<span class="span tail"><figure> <img [src]="'osdrive/icons/arrow_next.png'"></figure></span>
<span class="span container2 sub-menu-container">
<span class="container2 sub-menu">
<span class="span head"><figure ></figure></span>
<span class="span mid">Large icons</span>
<span class="span tail"><figure></figure></span>
</span>
<span class="container2 sub-menu">
<span class="span head"><figure ></figure></span>
<span class="span mid">Medium icons</span>
<span class="span tail"><figure></figure></span>
</span>
<span class="container2 sub-menu">
<span class="span head"><figure ></figure></span>
<span class="span mid">Small icon</span>
<span class="span tail"><figure> </figure></span>
</span>
</span>
</span> -->





<!-- <span class="span container2" (mouseenter)="showContextSubMenu('View')" (mouseleave)="hideContextSubMenu('View')">
<span class="span head"><figure ></figure></span>
<span class="span mid">View</span>
<span class="span tail"><figure> <img [src]="'osdrive/icons/arrow_next.png'"></figure></span>
Expand Down Expand Up @@ -43,9 +128,9 @@
<span class="span tail"><figure></figure></span>
</span>
</span>
</span>
</span> -->

<span class="span container2" (mouseenter)="showContextSubMenu('Sort by')" (mouseleave)="hideContextSubMenu('Sort by')">
<!-- <span class="span container2" (mouseenter)="showContextSubMenu('Sort by')" (mouseleave)="hideContextSubMenu('Sort by')">
<span class="span head"><figure ></figure></span>
<span class="span mid">Sort by </span>
<span class="span tail"> <figure> <img [src]="'osdrive/icons/arrow_next.png'"></figure></span>
Expand Down Expand Up @@ -73,9 +158,9 @@
<span class="span tail"><figure> </figure></span>
</span>
</span>
</span>
</span> -->

<span class="span container2">
<!-- <span class="span container2">
<span class="span head"> <figure > </figure></span>
<span class="span mid">Refresh</span>
<span class="span tail"> <figure> </figure> </span>
Expand All @@ -101,7 +186,7 @@
<span class="span head"> <figure > </figure></span>
<span class="span mid">New</span>
<span class="span tail"> <figure> </figure> </span>
</span>
</span> -->
</div>
<ng-content> </ng-content>
</main>
80 changes: 40 additions & 40 deletions src/app/system-apps/desktop/desktop.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,54 +177,54 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{

hideContextMenu():void{

this.cntxtMenuStyle = {
'width': '0px',
'height': '0px',
'transform': 'translate(-100000px, 100000px)',
'z-index': -1,
'opacity':0
}
// this.cntxtMenuStyle = {
// 'width': '0px',
// 'height': '0px',
// 'transform': 'translate(-100000px, 100000px)',
// 'z-index': -1,
// 'opacity':0
// }
}

showContextSubMenu(menuName:string):void{

const baseStyle = {
'width': '235px',
'display': 'block',
'position': 'absolute',
'background-color': '#f1f1f1',
'z-index': 2,
'left':'100%',
}

if(menuName ==='View'){
setTimeout((baseStyle:any) => {
this.cntxtSubMenuStyle = baseStyle
}, 750, baseStyle);
}
// const baseStyle = {
// 'width': '235px',
// 'display': 'block',
// 'position': 'absolute',
// 'background-color': '#f1f1f1',
// 'z-index': 2,
// 'left':'100%',
// }

// if(menuName ==='View'){
// setTimeout((baseStyle:any) => {
// this.cntxtSubMenuStyle = baseStyle
// }, 750, baseStyle);
// }

if(menuName === 'Sort by'){
setTimeout((baseStyle:any) => {
this.cntxtSubMenu1Style = baseStyle
}, 750,baseStyle);
}
// if(menuName === 'Sort by'){
// setTimeout((baseStyle:any) => {
// this.cntxtSubMenu1Style = baseStyle
// }, 750,baseStyle);
// }
}

hideContextSubMenu(menuName:string):void{
const baseStyle= {
'width': '0px',
'height': '0px',
'display': 'none',
'position': 'absolute',
'z-index': -1,
}

if(menuName === 'View'){
this.cntxtSubMenuStyle = baseStyle
}
if(menuName === 'Sort by'){
this.cntxtSubMenu1Style = baseStyle
}
// const baseStyle= {
// 'width': '0px',
// 'height': '0px',
// 'display': 'none',
// 'position': 'absolute',
// 'z-index': -1,
// }

// if(menuName === 'View'){
// this.cntxtSubMenuStyle = baseStyle
// }
// if(menuName === 'Sort by'){
// this.cntxtSubMenu1Style = baseStyle
// }
}

previousBackground():void{
Expand Down

0 comments on commit 26642b9

Please sign in to comment.