Start menu fluent effect style added

src/app/system-apps/startmenu/startmenu.component.css

@@ -64,7 +64,7 @@
     display:flex;
     width: 315px;
     height: 500px;
-    background-color: rgba(33,33, 33, 0.6);
+    background-color: rgba(51,51, 51, 1);
     backdrop-filter: blur(12px);
 }
 
@@ -94,11 +94,14 @@
     border: 2px solid transparent;
 }
 
-.start-menu-list-li:hover{
-    border: 2px solid white;
-}
 
 .start-menu-list-btn{
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+    /* padding: 1rem 2rem; */
+    background-color: rgba(51, 51, 51, 1);
+    color: #fff;
+    border: 0;
+    transition: all 200ms ease;
     display: flex;
     width: 100%;
     height: 32px;

src/app/system-apps/startmenu/startmenu.component.html

@@ -69,7 +69,7 @@
             <div class="start-menu-main-content-list-content">
                 <ol class="start-menu-list-ol"> 
                     <li  class="start-menu-list-li"  *ngFor="let file of startMenuFiles; let i = index"  >
-                        <button class="start-menu-list-btn">
+                        <button class="start-menu-list-btn" (mouseenter)="onBtnHover()" (mouseleave)="onBtnExit()">
                             <div class="start-menu-list-head"> <figure class="start-menu-list-fig"><img class="start-menu-list-img" [src]="file.getIconPath"/></figure></div>
                             <div class="start-menu-list-mid"><p class="start-menu-list-p">{{file.getFileName}}</p></div>
                             <div class="start-menu-list-tail"> <figure class="start-menu-list-fig"></figure> </div>

src/app/system-apps/startmenu/startmenu.component.ts

@@ -8,6 +8,8 @@ import { FileInfo } from 'src/app/system-files/file.info';
 import { FileService } from 'src/app/shared/system-service/file.service';
 import { FileEntry } from 'src/app/system-files/file.entry';
 
+import { applyEffect } from "src/osdrive/Cheetah/System/Fluent Effect";
+
 @Component({
   selector: 'cos-startmenu',
   templateUrl: './startmenu.component.html',
@@ -112,6 +114,30 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
     }
   }
 
+  onBtnHover():void{
+    // applyEffect('.start-menu-list-btn', {
+    //   lightColor: 'rgba(255,255,255,0.1)',
+    //   gradientSize: 150,
+    // });
+
+    applyEffect('.start-menu-list-ol', {
+      clickEffect: true,
+      lightColor: 'rgba(255,255,255,0.6)',
+      gradientSize: 40,
+      isContainer: true,
+      children: {
+        borderSelector: '.start-menu-list-li',
+        elementSelector: '.start-menu-list-btn',
+        lightColor: 'rgba(255,255,255,0.3)',
+        gradientSize: 150
+      }
+    })
+  }
+
+  onBtnExit():void{
+//
+  }
+
   private async loadFilesInfoAsync():Promise<void>{
     this.startMenuFiles = [];
     this._fileService.resetDirectoryFiles();

src/app/system-apps/taskbar/taskbar.component.css

@@ -1,5 +1,5 @@
 .task-bar-nav{
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: rgba(51, 51, 51, 0.6);
     backdrop-filter: blur(5px);
     bottom: 0;
     height: 40px;

src/app/system-apps/taskmanager/taskmanager.component.ts

@@ -89,7 +89,7 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
   powerUtil = 'Very low';
 
   hasWindow = true;
-  icon = `${this._consts.IMAGE_BASE_PATH}taskmanger.png`;
+  icon = `${this._consts.IMAGE_BASE_PATH}taskmanager.png`;
   name = 'taskmanager';
   processId = 0;
   type = ComponentType.System;

src/app/user-apps/codeeditor/codeeditor.component.ts

@@ -42,7 +42,7 @@ export class CodeEditorComponent  implements BaseComponent,  OnDestroy, AfterVie
 
 
   hasWindow = true;
-  icon = `${this._consts.IMAGE_BASE_PATH}vs-code.png`;
+  icon = `${this._consts.IMAGE_BASE_PATH}vs_code.png`;
   name = 'codeeditor';
   processId = 0;
   type = ComponentType.User;

src/osdrive/AppData/StartMenu/audioplayer.url

@@ -1,5 +1,5 @@
 [InternetShortcut]
-FileName=AudioPlayer
+FileName=Audio Player
 IconPath=/osdrive/Cheetah/System/Imageres/audioplayer.png
 FileType=.url
 ContentPath=

src/osdrive/AppData/StartMenu/js-dos.url

@@ -1,5 +1,5 @@
 [InternetShortcut]
-FileName=JS-Dos
+FileName=JS Dos
 IconPath=/osdrive/Cheetah/System/Imageres/js-dos_emulator.png
 FileType=.url
 ContentPath=

src/osdrive/AppData/StartMenu/photoviewer.url

@@ -1,5 +1,5 @@
 [InternetShortcut]
-FileName=PhotoViewer
+FileName=Photos
 IconPath=/osdrive/Cheetah/System/Imageres/photoviewer.png
 FileType=.url
 ContentPath=

src/osdrive/AppData/StartMenu/taskmanager.url

@@ -1,5 +1,5 @@
 [InternetShortcut]
-FileName=Taskmanager
+FileName=Task Manager
 IconPath=/osdrive/Cheetah/System/Imageres/taskmanager.png
 FileType=.url
 ContentPath=

src/osdrive/AppData/StartMenu/videoplayer.url

@@ -1,5 +1,5 @@
 [InternetShortcut]
-FileName=VideoPlayer
+FileName=Video Player
 IconPath=/osdrive/Cheetah/System/Imageres/videoplayer.png
 FileType=.url
 ContentPath=

src/osdrive/Cheetah/System/Fluent Effect/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Phap Dieu Duong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/osdrive/Cheetah/System/Fluent Effect/README.md

@@ -0,0 +1,115 @@
+# Reveal Effect library (Fluent Design System)
+Apply reveal effect to border and background of elements.
+
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect?ref=badge_shield)
+
+![Screenshot](https://github.com/d2phap/fluent-ui/raw/master/docs/screenshot.png)
+
+
+### Demo
+- https://imageglass.org/
+- https://d2phap.github.io/fluent-reveal-effect/
+
+## Install
+Run the command
+```
+npm i fluent-reveal-effect@latest
+```
+
+NPM package: https://www.npmjs.com/package/fluent-reveal-effect
+
+## Usage
+
+### Import the library
+```js
+import { applyEffect } from "fluent-reveal-effect"
+```
+
+
+### Basic CSS
+```css
+.btn {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+  padding: 1rem 2rem;
+  background-color: #333;
+  color: #fff;
+  border: 0;
+
+  transition: all 200ms ease;
+}
+.btn-border {
+  display: inline-block;
+  margin: 5px;
+}
+.btn-border .btn {
+  display: block;
+  margin: 2px;
+}
+```
+
+
+### Apply background effect
+#### HTML mockup
+```html
+<button class="btn">Button 1</button>
+```
+#### JavaScript
+```js
+applyEffect('.btn', {
+  lightColor: 'rgba(255,255,255,0.1)',
+  gradientSize: 150,
+});
+```
+
+#### Enable Ripple click effect
+````js
+applyEffect('.btn', {
+  clickEffect: true,
+});
+````
+
+### Apply border and background effect
+#### HTML mockup
+```html
+<div class="effect-group-container">
+  <div class="btn-border">
+    <button class="btn">Button 2</button>
+  </div>
+  <div class="btn-border">
+    <button class="btn">Button 3</button>
+  </div>
+  <div class="btn-border">
+    <button class="btn">Button 4</button>
+  </div>
+</div>
+```
+
+#### JavaScript
+```js
+applyEffect('.effect-group-container', {
+  clickEffect: true,
+  lightColor: 'rgba(255,255,255,0.6)',
+  gradientSize: 80,
+  isContainer: true,
+  children: {
+    borderSelector: '.btn-border',
+    elementSelector: '.btn',
+    lightColor: 'rgba(255,255,255,0.3)',
+    gradientSize: 150
+  }
+})
+```
+
+## Donate
+If you feel this little library useful to you, it would go a great way to ensuring that I can afford to take the time to continue to develop it.
+
+Thanks for your gratitude and finance help!
+
+<a href="https://www.paypal.me/d2phap" target="_blank" title="Buy me a beer?">
+<img src="https://img.shields.io/badge/PayPal-Donate%20$10%20-009be1.svg?maxAge=3600" height="30" alt="Buy me a beer?">
+</a>
+
+
+
+## License
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect?ref=badge_large)

src/osdrive/Cheetah/System/Fluent Effect/fs-src/LICENSE.txt

@@ -0,0 +1,24 @@
+/*!
+ * MIT License
+ *
+ * Copyright (c) 2018 Phap Dieu Duong
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ */

src/osdrive/Cheetah/System/Fluent Effect/fs-src/fluentRevealEffect.d.ts

@@ -0,0 +1,4 @@
+import { IUserEffectOptions } from './types';
+export declare const applyElementEffect: (element: HTMLElement, userOptions?: IUserEffectOptions) => void;
+export declare const applyElementsEffect: (elements: NodeListOf<HTMLElement>, userOptions?: IUserEffectOptions) => void;
+export declare const applyEffect: (selector: string, userOptions?: IUserEffectOptions) => void;

src/osdrive/Cheetah/System/Fluent Effect/fs-src/helpers/index.d.ts

@@ -0,0 +1,9 @@
+import { IResource, IIsPressed, IEffectOptions } from '../types';
+export declare function enableBorderEffects(resource: IResource, childrenBorders: IResource[], options: IEffectOptions, isPressed: IIsPressed): void;
+export declare function enableNormalBackgroundEffetcs(resource: IResource, options: IEffectOptions, isPressed: IIsPressed): void;
+export declare function enableChildrenBackgroundEffetcs(resource: IResource, options: IEffectOptions, isPressed: IIsPressed): void;
+export declare function enableNormalClickEffects(resource: IResource, options: IEffectOptions, isPressed: IIsPressed): void;
+export declare function enableChildrenClickEffects(resource: IResource, options: IEffectOptions, isPressed: IIsPressed): void;
+export declare function preProcessElement(element: HTMLElement): IResource;
+export declare function preProcessElements(elements: NodeListOf<HTMLElement>): IResource[];
+export declare function preProcessSelector(selector: string): IResource[];

src/osdrive/Cheetah/System/Fluent Effect/fs-src/main.d.ts

@@ -0,0 +1,2 @@
+export * from './fluentRevealEffect';
+export * from './types';

src/osdrive/Cheetah/System/Fluent Effect/fs-src/types.d.ts

@@ -0,0 +1,27 @@
+export interface IResource {
+    oriBg: string;
+    el: HTMLElement;
+}
+export type IIsPressed = [boolean];
+export interface IArea {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface IEffectOptions {
+    lightColor: string | 'rgba(255,255,255,0.1)';
+    gradientSize: number | 200;
+    clickEffect: boolean | false;
+    isContainer: boolean | false;
+    children?: {
+        borderSelector: string | '.eff-reveal-border';
+        elementSelector: string | '.eff-reveal';
+        lightColor: string | 'rgba(255,255,255,0.1)';
+        gradientSize: number | 200;
+    };
+}
+export type IUserEffectOptions = Partial<IEffectOptions>;
+export interface IEnableEffectFunc {
+    (element: IResource, options: IEffectOptions, is_pressed: IIsPressed): void;
+}