Skip to content

Commit

Permalink
Menu order refactore in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Sep 21, 2024
1 parent acde7f8 commit 84597fb
Show file tree
Hide file tree
Showing 9 changed files with 125 additions and 48 deletions.
26 changes: 20 additions & 6 deletions src/app/shared/system-component/menu/menu.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<ng-container [ngTemplateOutlet]="menuOption === fileExplrMngrMenuOption ? fileExplrMngrMenu :
menuOption === tskBarMenuOption ? tskBarMenu : nestedMenu0 ">
<ng-container [ngTemplateOutlet]="menuType === fileExplrMngrMenuOption ? fileExplrMngrMenu :
menuType === tskBarMenuOption ? tskBarMenu : nestedMenu0 ">
</ng-container>

<ng-template #fileExplrMngrMenu>
Expand All @@ -13,11 +13,25 @@
<span class="span dm-tail"> <figure class="dm-fig-cntxt-menu"> </figure> </span>
</div>

<div class="dm-empty-line-container" *ngIf="i === 2 || i === 4 || i === 6"></div>
<div class="dm-line-container" *ngIf="i === 2 || i === 4 || i === 6"><div class="dm-line"></div></div>
<div class="dm-empty-line-container" *ngIf="i === 2 || i === 4 || i === 6"></div>
</div>
<ng-container *ngIf="menuOrder === fileExplrUniqueMenuOrder">
<div class="dm-empty-line-container" *ngIf="i === 3 || i === 4 || i === 5 || i === 6"></div>
<div class="dm-line-container" *ngIf="i === 3 || i === 4 || i === 5 || i === 6"><div class="dm-line"></div></div>
<div class="dm-empty-line-container" *ngIf="i === 3 || i === 4 || i === 5 || i === 6"></div>
</ng-container>

<ng-container *ngIf="menuOrder === fileExplrFolderMenuOrder">
<div class="dm-empty-line-container" *ngIf="i === 3 || i === 4 || i === 6 || i === 9"></div>
<div class="dm-line-container" *ngIf="i === 3 || i === 4 || i === 6 || i === 9"><div class="dm-line"></div></div>
<div class="dm-empty-line-container" *ngIf="i === 3 || i === 4 || i === 6 || i === 9"></div>
</ng-container>

<ng-container *ngIf="menuOrder === defaultFileMenuOrder">
<div class="dm-empty-line-container" *ngIf="i === 2 || i === 4 || i === 6"></div>
<div class="dm-line-container" *ngIf="i === 2 || i === 4 || i === 6"><div class="dm-line"></div></div>
<div class="dm-empty-line-container" *ngIf="i === 2 || i === 4 || i === 6"></div>
</ng-container>

</div>
<div class="dm-empty-line-container"></div>
</div>
</ng-template>
Expand Down
21 changes: 14 additions & 7 deletions src/app/shared/system-component/menu/menu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Component, Input, OnChanges, SimpleChanges, OnDestroy } from '@angular/
import {NestedMenu, GeneralMenu } from './menu.item';
import { MenuService } from '../../system-service/menu.services';
import { Subscription } from 'rxjs';
import { Constants } from 'src/app/system-files/constants';

@Component({
selector: 'cos-menu',
Expand All @@ -14,18 +15,23 @@ export class MenuComponent implements OnChanges, OnDestroy{
@Input() nestedMenu: NestedMenu[] = [];
@Input() fileExplorerMenu: NestedMenu[] = [];
@Input() menuType = '';
@Input() menuOrder = '';

private _menuService:MenuService;
private _storeDataSub!:Subscription;
isPasteActive!:boolean;
private _consts:Constants = new Constants();

menuOption = '';
tskBarMenuOption = "taskbar-menu";
nestedMenuOption = "nested-menu";
fileExplrMngrMenuOption = "file-explorer-file-manager-menu";
readonly paste = 'Paste';
readonly fileExplrMngrMenuOption = this._consts.FILE_EXPLORER_FILE_MANAGER_MENU_OPTION;
readonly tskBarMenuOption = this._consts.TASK_BAR_MENU_OPTION;
readonly defaultFileMenuOrder = this._consts.DEFAULT_FILE_MENU_ORDER;
readonly defaultFolderMenuOrder = this._consts.DEFAULT_FILE_MENU_ORDER;
readonly fileExplrFolderMenuOrder = this._consts.FILE_EXPLORER_FOLDER_MENU_ORDER;
readonly fileExplrFileMenuOrder = this._consts.FILE_EXPLORER_FILE_MENU_ORDER;
readonly fileExplrUniqueMenuOrder = this._consts.FILE_EXPLORER_UNIQUE_MENU_ORDER;

isPasteActive!:boolean;
keys: string[] = [];
readonly paste = 'Paste';

constructor(menuService:MenuService) {
this._menuService = menuService;
Expand All @@ -46,7 +52,8 @@ export class MenuComponent implements OnChanges, OnDestroy{
}

ngOnChanges(changes: SimpleChanges):void{
this.menuOption = this.menuType;
1
// this.menuOption = this.menuType;
}

onMenuItemClick(action: () => void): void {
Expand Down
2 changes: 1 addition & 1 deletion src/app/system-apps/desktop/desktop.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@

<cos-menu [nestedMenu]="deskTopMenu" *ngIf="showDesktopCntxtMenu" [style]="dskTopCntxtMenuStyle" [menuType]="deskTopMenuOption"> </cos-menu>
<cos-taskbarpreview [fadeState]="tskBarPreviewWindowState" [name]="appToPreview" [icon]="appToPreviewIcon" *ngIf="showTskBarPreviewWindow" [ngStyle]="tskBarPrevWindowStyle"> </cos-taskbarpreview>
<cos-menu [generalMenu]="taskBarMenuData" *ngIf="showTskBarCntxtMenu" [style]="tskBarCntxtMenuStyle" [menuType]="tskBarMenuOption"> </cos-menu>
<cos-menu [generalMenu]="taskBarMenuData" *ngIf="showTskBarCntxtMenu" [style]="tskBarCntxtMenuStyle" [menuType]="tskBarMenuOption" [menuOrder]="menuOrder"> </cos-menu>
<ng-content> </ng-content>
</main>
52 changes: 27 additions & 25 deletions src/app/system-apps/desktop/desktop.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { NestedMenu, NestedMenuItem } from 'src/app/shared/system-component/menu
import * as htmlToImage from 'html-to-image';
import { FileService } from 'src/app/shared/system-service/file.service';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { Constants } from 'src/app/system-files/constants';

declare let VANTA: { HALO: any; BIRDS: any; WAVES: any; GLOBE: any; RINGS: any;};

Expand Down Expand Up @@ -48,6 +49,7 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
private _triggerProcessService:TriggerProcessService;
private _scriptService: ScriptService;
private _menuService: MenuService;
private _consts:Constants = new Constants();

private _timerSubscription!: Subscription;
private _showTaskBarMenuSub!:Subscription;
Expand Down Expand Up @@ -75,7 +77,6 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
isSortByItemType = false;
isSortBySize = false;
isSortByDateModified = false;

isShiftSubMenuLeft = false;

autoAlignIcons = true;
Expand All @@ -88,12 +89,13 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
dskTopCntxtMenuStyle:Record<string, unknown> = {};
tskBarCntxtMenuStyle:Record<string, unknown> = {};
tskBarPrevWindowStyle:Record<string, unknown> = {};
deskTopMenuOption = "nested-menu";
deskTopMenuOption = this._consts.NESTED_MENU_OPTION;
showDesktopCntxtMenu = false;
showTskBarCntxtMenu = false;
showTskBarPreviewWindow = false;
tskBarPreviewWindowState = 'in';
tskBarMenuOption = "taskbar-menu";
tskBarMenuOption = this._consts.TASK_BAR_MENU_OPTION;
menuOrder = this._consts.DEFAULT_MENU_ORDER;
selectedFileFromTaskBar!:FileInfo;
appToPreview = '';
appToPreviewIcon = '';
Expand Down Expand Up @@ -134,7 +136,7 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{


hasWindow = false;
icon = 'osdrive/Cheetah/System/Imageres/generic_program.png';
icon = `${this._consts.IMAGE_BASE_PATH}generic_program.png`;
name = 'desktop';
processId = 0;
type = ComponentType.System;
Expand Down Expand Up @@ -541,22 +543,22 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{

buildViewByMenu():NestedMenuItem[]{

const smallIcon:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/circle.png', label:'Small icons', action: this.viewBySmallIcon.bind(this), variables:this.isSmallIcon,
const smallIcon:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}circle.png`, label:'Small icons', action: this.viewBySmallIcon.bind(this), variables:this.isSmallIcon,
emptyline:false, styleOption:'A' }

const mediumIcon:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/circle.png', label:'Medium icons', action: this.viewByMediumIcon.bind(this), variables:this.isMediumIcon,
const mediumIcon:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}circle.png`, label:'Medium icons', action: this.viewByMediumIcon.bind(this), variables:this.isMediumIcon,
emptyline:false, styleOption:'A' }

const largeIcon:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/circle.png', label:'Large icons', action: this.viewByLargeIcon.bind(this), variables:this.isLargeIcon,
const largeIcon:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}circle.png`, label:'Large icons', action: this.viewByLargeIcon.bind(this), variables:this.isLargeIcon,
emptyline:true, styleOption:'A' }

const autoArrageIcon:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/chkmark32.png', label:'Auto arrange icons', action: this.autoArrangeIcon.bind(this), variables:this.autoArrangeIcons,
const autoArrageIcon:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}chkmark32.png`, label:'Auto arrange icons', action: this.autoArrangeIcon.bind(this), variables:this.autoArrangeIcons,
emptyline:false, styleOption:'B' }

const autoAlign:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/chkmark32.png', label:'Align icons to grid', action: this.autoAlignIcon.bind(this), variables:this.autoAlignIcons,
const autoAlign:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}chkmark32.png`, label:'Align icons to grid', action: this.autoAlignIcon.bind(this), variables:this.autoAlignIcons,
emptyline:true, styleOption:'B' }

const showDesktopIcons:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/chkmark32.png', label:'Show desktop icons', action: this.showDesktopIcon.bind(this), variables:this.showDesktopIcons,
const showDesktopIcons:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}chkmark32.png`, label:'Show desktop icons', action: this.showDesktopIcon.bind(this), variables:this.showDesktopIcons,
emptyline:false, styleOption:'B'}

const viewByMenu = [smallIcon,mediumIcon,largeIcon, autoArrageIcon, autoAlign,showDesktopIcons];
Expand All @@ -566,16 +568,16 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{

buildSortByMenu(): NestedMenuItem[]{

const sortByName:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/circle.png', label:'Name', action: this.sortByNameM.bind(this), variables:this.isSortByName ,
const sortByName:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}circle.png`, label:'Name', action: this.sortByNameM.bind(this), variables:this.isSortByName ,
emptyline:false, styleOption:'A' }

const sortBySize:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/circle.png', label:'Size', action: this.sortBySizeM.bind(this), variables:this.isSortBySize ,
const sortBySize:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}circle.png`, label:'Size', action: this.sortBySizeM.bind(this), variables:this.isSortBySize ,
emptyline:false, styleOption:'A' }

const sortByItemType:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/circle.png', label:'Item type', action: this.sortByItemTypeM.bind(this), variables:this.isSortByItemType,
const sortByItemType:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}circle.png`, label:'Item type', action: this.sortByItemTypeM.bind(this), variables:this.isSortByItemType,
emptyline:false, styleOption:'A' }

const sortByDateModified:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/circle.png', label:'Date modified', action: this.sortByDateModifiedM.bind(this), variables:this.isSortByDateModified,
const sortByDateModified:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}circle.png`, label:'Date modified', action: this.sortByDateModifiedM.bind(this), variables:this.isSortByDateModified,
emptyline:false, styleOption:'A' }

const sortByMenu = [sortByName, sortBySize, sortByItemType, sortByDateModified ]
Expand All @@ -585,13 +587,13 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{

buildNewMenu(): NestedMenuItem[]{

const newFolder:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/empty_folder.png', label:'Folder', action: this.createFolder.bind(this), variables:true ,
const newFolder:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}empty_folder.png`, label:'Folder', action: this.createFolder.bind(this), variables:true ,
emptyline:false, styleOption:'C' }

const textEditor:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/text-editor_48.png', label:'Rich Text', action: this.openTextEditor.bind(this), variables:true ,
const textEditor:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}text-editor_48.png`, label:'Rich Text', action: this.openTextEditor.bind(this), variables:true ,
emptyline:false, styleOption:'C' }

const codeEditor:NestedMenuItem={ icon:'osdrive/Cheetah/System/Imageres/vs-code_48.png', label:'Code Editor', action: this.openCodeEditor.bind(this), variables:true ,
const codeEditor:NestedMenuItem={ icon:`${this._consts.IMAGE_BASE_PATH}vs-code_48.png`, label:'Code Editor', action: this.openCodeEditor.bind(this), variables:true ,
emptyline:false, styleOption:'C' }

const sortByMenu = [newFolder, textEditor, codeEditor ]
Expand All @@ -601,15 +603,15 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{

getDesktopMenuData():void{
this.deskTopMenu = [
{icon1:'', icon2: 'osdrive/Cheetah/System/Imageres/arrow_next_1.png', label:'View', nest:this.buildViewByMenu(), action: ()=>'', action1: this.shiftViewSubMenu.bind(this), emptyline:false},
{icon1:'', icon2:'osdrive/Cheetah/System/Imageres/arrow_next_1.png', label:'Sort by', nest:this.buildSortByMenu(), action: ()=>'', action1: this.shiftSortBySubMenu.bind(this), emptyline:false},
{icon1:'', icon2: `${this._consts.IMAGE_BASE_PATH}arrow_next_1.png`, label:'View', nest:this.buildViewByMenu(), action: ()=>'', action1: this.shiftViewSubMenu.bind(this), emptyline:false},
{icon1:'', icon2:`${this._consts.IMAGE_BASE_PATH}arrow_next_1.png`, label:'Sort by', nest:this.buildSortByMenu(), action: ()=>'', action1: this.shiftSortBySubMenu.bind(this), emptyline:false},
{icon1:'', icon2:'', label: 'Refresh', nest:[], action:this.refresh.bind(this), action1: ()=> '', emptyline:true},
{icon1:'', icon2:'', label: 'Paste', nest:[], action:this.onPaste.bind(this), action1: ()=> '', emptyline:false},
{icon1:'/osdrive/Cheetah/System/Imageres/terminal_48.png', icon2:'', label:'Open in Terminal', nest:[], action: this.openTerminal.bind(this), action1: ()=> '', emptyline:false},
{icon1:'/osdrive/Cheetah/System/Imageres/camera_48.png', icon2:'', label:'Screen Shot', nest:[], action: this.captureComponentImg.bind(this), action1: ()=> '', emptyline:false},
{icon1:`${this._consts.IMAGE_BASE_PATH}terminal_48.png`, icon2:'', label:'Open in Terminal', nest:[], action: this.openTerminal.bind(this), action1: ()=> '', emptyline:false},
{icon1:`${this._consts.IMAGE_BASE_PATH}camera_48.png`, icon2:'', label:'Screen Shot', nest:[], action: this.captureComponentImg.bind(this), action1: ()=> '', emptyline:false},
{icon1:'', icon2:'', label:'Next Background', nest:[], action: this.nextBackground.bind(this), action1: ()=> '', emptyline:false},
{icon1:'', icon2:'', label:'Previous Background', nest:[], action: this.previousBackground.bind(this), action1: ()=> '', emptyline:true},
{icon1:'', icon2:'osdrive/Cheetah/System/Imageres/arrow_next_1.png', label:'New', nest:this.buildNewMenu(), action: ()=> '', action1: this.shiftNewSubMenu.bind(this), emptyline:true},
{icon1:'', icon2:`${this._consts.IMAGE_BASE_PATH}arrow_next_1.png`, label:'New', nest:this.buildNewMenu(), action: ()=> '', action1: this.shiftNewSubMenu.bind(this), emptyline:true},
{icon1:'', icon2:'', label:'Many Thanks', nest:[], action: this.openMarkDownViewer.bind(this), action1: ()=> '', emptyline:false}
]
}
Expand Down Expand Up @@ -678,14 +680,14 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{

switchBetweenPinAndUnpin(isAppPinned:boolean):void{
if(isAppPinned){
const menuEntry = {icon:'osdrive/Cheetah/System/Imageres/unpin_24.png', label:'Unpin from taskbar', action: this.unPinApplicationFromTaskBar.bind(this)}
const menuEntry = {icon:`${this._consts.IMAGE_BASE_PATH}unpin_24.png`, label:'Unpin from taskbar', action: this.unPinApplicationFromTaskBar.bind(this)}
const rowOne = this.taskBarMenuData[1];
rowOne.icon = menuEntry.icon;
rowOne.label = menuEntry.label;
rowOne.action = menuEntry.action;
this.taskBarMenuData[1] = rowOne;
}else if(!isAppPinned){
const menuEntry = {icon:'osdrive/Cheetah/System/Imageres/pin_24.png', label:'Pin to taskbar', action: this.pinApplicationFromTaskBar.bind(this)}
const menuEntry = {icon:`${this._consts.IMAGE_BASE_PATH}pin_24.png`, label:'Pin to taskbar', action: this.pinApplicationFromTaskBar.bind(this)}
const rowOne = this.taskBarMenuData[1];
rowOne.icon = menuEntry.icon;
rowOne.label = menuEntry.label;
Expand All @@ -706,7 +708,7 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{

if(processCount == 1){
if(this.taskBarMenuData.length == 2){
const menuEntry = {icon:'osdrive/Cheetah/System/Imageres/x_32.png', label: 'Close window', action:this.closeApplicationFromTaskBar.bind(this)};
const menuEntry = {icon:`${this._consts.IMAGE_BASE_PATH}x_32.png`, label: 'Close window', action:this.closeApplicationFromTaskBar.bind(this)};
this.taskBarMenuData.push(menuEntry);
}else{
const rowTwo = this.taskBarMenuData[2];
Expand Down
2 changes: 1 addition & 1 deletion src/app/system-apps/fileexplorer/fileexplorer.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,7 +409,7 @@
</div>


<cos-menu [generalMenu]="menuData" *ngIf="showIconCntxtMenu" [style]="fileExplrCntxtMenuStyle" [menuType]="fileExplrMngrMenuOption"> </cos-menu>
<cos-menu [generalMenu]="menuData" *ngIf="showIconCntxtMenu" [style]="fileExplrCntxtMenuStyle" [menuType]="fileExplrMngrMenuOption" [menuOrder]="menuOrder"> </cos-menu>
<cos-menu [nestedMenu]="fileExplrMenu" *ngIf="showFileExplrCntxtMenu" [style]="fileExplrCntxtMenuStyle" [menuType]="fileExplrMenuOption"> </cos-menu>

<div class="fx-information-tip-container" id="fx-information-tip-{{this.processId}}" *ngIf="showInformationTip">
Expand Down
Loading

0 comments on commit 84597fb

Please sign in to comment.