From 26642b94be493789a5b2f1521d768dd9845c5f79 Mon Sep 17 00:00:00 2001 From: chinons098 Date: Thu, 16 Nov 2023 12:20:43 -0500 Subject: [PATCH] desktop v0.6.5 --- .../system-apps/desktop/desktop.component.css | 123 ++++++++++++++---- .../desktop/desktop.component.html | 99 +++++++++++++- .../system-apps/desktop/desktop.component.ts | 80 ++++++------ 3 files changed, 233 insertions(+), 69 deletions(-) diff --git a/src/app/system-apps/desktop/desktop.component.css b/src/app/system-apps/desktop/desktop.component.css index 415aee1b..72dc7aa0 100644 --- a/src/app/system-apps/desktop/desktop.component.css +++ b/src/app/system-apps/desktop/desktop.component.css @@ -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; @@ -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%; diff --git a/src/app/system-apps/desktop/desktop.component.html b/src/app/system-apps/desktop/desktop.component.html index 3b5d3ebe..4a254259 100644 --- a/src/app/system-apps/desktop/desktop.component.html +++ b/src/app/system-apps/desktop/desktop.component.html @@ -1,6 +1,91 @@ -
+
- + + + +
+
+ Next Background +
+
+ +
+ +
+
+ Previous Background +
+
+ + + + +
+
+
+ New +
+
+
+
+
+ Hello +
+
+ +
+
+ Yoyo +
+
+ +
+
+ Yoyo 1 +
+
+
+
+ + + + + + + + + + - + - +
diff --git a/src/app/system-apps/desktop/desktop.component.ts b/src/app/system-apps/desktop/desktop.component.ts index ae6af40f..fb5678c2 100644 --- a/src/app/system-apps/desktop/desktop.component.ts +++ b/src/app/system-apps/desktop/desktop.component.ts @@ -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{