From 644fe81ce1a7963d4e7d6492b33113638988536d Mon Sep 17 00:00:00 2001
From: Bao Nguyen <baonguyen@Baos-MacBook-Air.local>
Date: Wed, 15 Feb 2023 17:57:40 +0700
Subject: [PATCH] context menu for sort options

---
 src/lib/components/xp/ContextMenu.svelte      | 11 +++-
 .../components/xp/context_menu/CMDesktop.js   | 55 ++++++++++++++-----
 .../components/xp/context_menu/CMFSVoid.js    | 55 +++++++++++++------
 src/lib/system.js                             |  2 +-
 src/routes/xp/starting.svelte                 |  6 +-
 5 files changed, 91 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/xp/ContextMenu.svelte b/src/lib/components/xp/ContextMenu.svelte
index 3dd6126..0b4d733 100644
--- a/src/lib/components/xp/ContextMenu.svelte
+++ b/src/lib/components/xp/ContextMenu.svelte
@@ -103,8 +103,9 @@
                 <!-- submenu items -->
                     <div class="absolute {left > screenWidth - 2*required_width ? '-left-full' : 'left-full'} 
                         py-0.5 hidden group-hover:flex flex-col w-[180px] bg-slate-50 border-slate-200 border-2"
-                        style:top="{top > screenHeight - 2*required_height ? `-${(item.items.length-1)*100}%` : '0'}  ">
+                        style:top="{top > screenHeight - 2*required_height ? `-${(item.items.length-2)*100}%` : '0'}  ">
                         {#each item.items as item}
+                            {#if item}
                             <div class="py-1 w-full flex flex-row items-center {item.disabled ? '' : 'hover:bg-blue-600'} relative group-sub 
                                 {item.disabled ? 'pointer-events-none' : ''}" 
                                 on:click={() => {
@@ -113,9 +114,12 @@
                                         item.action();
                                     }
                                 }}>
-                                <div class="w-[20px] ml-1 shrink-0">
+                                <div class="w-[20px] ml-1 shrink-0 flex items-center justify-center">
                                     {#if item.icon}
                                         <img src="{item.icon}" width="17px" height="17px">
+                                    {:else if item.check}
+                                        <svg class="fill-slate-800 w-1.5 h-1.5 group-sub-hover:fill-slate-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"/>
+                                        </svg>
                                     {/if}
                                 </div>
                                 <div class="grow {item.font == 'bold' ? 'font-bold' : ''} {item.disabled ? 'text-slate-400' : 'group-sub-hover:text-slate-50'}">
@@ -124,6 +128,9 @@
                                 <div class="w-[10px]">
                                 </div>
                             </div>
+                            {:else}
+                            <div class="h-0.5 bg-slate-200 mx-1"></div>   
+                            {/if}
                         {/each}
                     </div>
                 {/if}
diff --git a/src/lib/components/xp/context_menu/CMDesktop.js b/src/lib/components/xp/context_menu/CMDesktop.js
index e8a1d41..a684b17 100644
--- a/src/lib/components/xp/context_menu/CMDesktop.js
+++ b/src/lib/components/xp/context_menu/CMDesktop.js
@@ -1,30 +1,55 @@
 import { queueProgram, clipboard, hardDrive } from '../../../store';
 import { get } from 'svelte/store';
-import { recycle_bin_id, protected_items } from '../../../system';
+import { recycle_bin_id, protected_items, SortOptions, SortOrders } from '../../../system';
 import * as fs from '../../../fs';
 
 export let make = ({type, originator}) => {
-    //originator: program
+    
+    let sort_menu_items = [
+        {name: 'None', value: SortOptions.NONE},
+        {name: 'Name', value: SortOptions.NAME},
+        {name: 'Size', value: SortOptions.SIZE},
+        {name: 'Date Created', value: SortOptions.DATE_CREATED},
+        {name: 'Date Modified', value: SortOptions.DATE_MODIFIED}
+    ]
+    let sort_order_menu_items = [
+        {name: 'Ascending', value: SortOrders.ASCENDING},
+        {name: 'Descending', value: SortOrders.DESCENDING}
+    ]
+
     return {
         required_width: 180 + 20,
         required_height: 27*6  + 20,
         menu: [
             [
                 {
-                    name: 'Arrange Icons By',
+                    name: 'Sort By',
                     items: [
-                        {
-                            name: 'Name'
-                        },
-                        {
-                            name: 'Size'
-                        },
-                        {
-                            name: 'Type'
-                        },
-                        {
-                            name: 'Modified'
-                        }
+                        ...sort_menu_items.map(item => {
+                            return {
+                                ...item,
+                                check: item.value == get(hardDrive)[originator.id].sort_option,
+                                action: () => {
+                                    hardDrive.update(data => {
+                                        data[originator.id].sort_option = item.value;
+                                        return data;
+                                    })
+                                }
+                            }
+                        }),
+                        null,
+                        ...sort_order_menu_items.map(item => {
+                            return {
+                                ...item,
+                                check: item.value == get(hardDrive)[originator.id].sort_order,
+                                action: () => {
+                                    hardDrive.update(data => {
+                                        data[originator.id].sort_order = item.value;
+                                        return data;
+                                    })
+                                }
+                            }
+                        }),
                     ]
                 },
                 {
diff --git a/src/lib/components/xp/context_menu/CMFSVoid.js b/src/lib/components/xp/context_menu/CMFSVoid.js
index 0fb5631..a202a89 100644
--- a/src/lib/components/xp/context_menu/CMFSVoid.js
+++ b/src/lib/components/xp/context_menu/CMFSVoid.js
@@ -1,34 +1,55 @@
 import { queueProgram, clipboard, hardDrive } from '../../../store';
-import { recycle_bin_id} from '../../../system';
+import { recycle_bin_id, SortOptions, SortOrders} from '../../../system';
 import { get } from 'svelte/store';
 import * as fs from '../../../fs';
 
 export let make = ({type, originator}) => {
 
-    //originator: viewer
-    
+    let sort_menu_items = [
+        {name: 'None', value: SortOptions.NONE},
+        {name: 'Name', value: SortOptions.NAME},
+        {name: 'Size', value: SortOptions.SIZE},
+        {name: 'Date Created', value: SortOptions.DATE_CREATED},
+        {name: 'Date Modified', value: SortOptions.DATE_MODIFIED}
+    ]
+    let sort_order_menu_items = [
+        {name: 'Ascending', value: SortOrders.ASCENDING},
+        {name: 'Descending', value: SortOrders.DESCENDING}
+    ]
 
-    //originator: program
     return {
         required_width: 180 + 20,
         required_height: 27*6  + 20,
         menu: [
             [
                 {
-                    name: 'Arrange Icons By',
+                    name: 'Sort By',
                     items: [
-                        {
-                            name: 'Name'
-                        },
-                        {
-                            name: 'Size'
-                        },
-                        {
-                            name: 'Type'
-                        },
-                        {
-                            name: 'Modified'
-                        }
+                        ...sort_menu_items.map(item => {
+                            return {
+                                ...item,
+                                check: item.value == get(hardDrive)[originator.id].sort_option,
+                                action: () => {
+                                    hardDrive.update(data => {
+                                        data[originator.id].sort_option = item.value;
+                                        return data;
+                                    })
+                                }
+                            }
+                        }),
+                        null,
+                        ...sort_order_menu_items.map(item => {
+                            return {
+                                ...item,
+                                check: item.value == get(hardDrive)[originator.id].sort_order,
+                                action: () => {
+                                    hardDrive.update(data => {
+                                        data[originator.id].sort_order = item.value;
+                                        return data;
+                                    })
+                                }
+                            }
+                        }),
                     ]
                 },
                 {
diff --git a/src/lib/system.js b/src/lib/system.js
index d9f85bc..9fb10cf 100644
--- a/src/lib/system.js
+++ b/src/lib/system.js
@@ -82,7 +82,7 @@ export let SortOptions = Object.freeze({
   DATE_MODIFIED: 4,
 })
 
-export let SortOptionOrders = Object.freeze({
+export let SortOrders = Object.freeze({
   ASCENDING: 0,
   DESCENDING: 1
 })
diff --git a/src/routes/xp/starting.svelte b/src/routes/xp/starting.svelte
index 5f8d657..3364753 100644
--- a/src/routes/xp/starting.svelte
+++ b/src/routes/xp/starting.svelte
@@ -4,7 +4,7 @@
     import {set, get} from 'idb-keyval';
     import axios from 'axios';
     import { hardDrive, wallpaper, contextMenu } from '../../lib/store';
-    import { bliss_wallpaper, wallpapers_folder, SortOptions, SortOptionOrders } from '../../lib/system';
+    import { bliss_wallpaper, wallpapers_folder, SortOptions, SortOrders } from '../../lib/system';
     let dispatcher = createEventDispatcher();
 
     let assets_loaded = false;
@@ -85,8 +85,8 @@
             if(obj.sort_option == null){
                 obj.sort_option = SortOptions.NONE;
             }
-            if(obj.sort_option_order == null){
-                obj.sort_option_order = SortOptionOrders.ASCENDING;
+            if(obj.sort_order == null){
+                obj.sort_order = SortOrders.ASCENDING;
             }
         }
     }