jay817/win32.run
1
0
Fork 0
mirror of https://github.com/ducbao414/win32.run.git synced 2025-12-15 16:52:49 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

context menu for sort options

Browse Source
This commit is contained in:
Bao Nguyen
2023-02-15 17:57:40 +07:00
parent 72a8b8b3c6
commit 644fe81ce1
5 changed files with 91 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/xp/ContextMenu.svelte
View File

@@ -103,8 +103,9 @@
<!-- submenu items --> <!-- submenu items -->
<div class="absolute {left > screenWidth - 2*required_width ? '-left-full' : 'left-full'} <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" 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} {#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 <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' : ''}" {item.disabled ? 'pointer-events-none' : ''}"
on:click={() => { on:click={() => {
@@ -113,9 +114,12 @@
item.action(); 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} {#if item.icon}
<img src="{item.icon}" width="17px" height="17px"> <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} {/if}
</div> </div>
<div class="grow {item.font == 'bold' ? 'font-bold' : ''} {item.disabled ? 'text-slate-400' : 'group-sub-hover:text-slate-50'}"> <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 class="w-[10px]">
</div> </div>
</div> </div>
{:else}
<div class="h-0.5 bg-slate-200 mx-1"></div>
{/if}
{/each} {/each}
</div> </div>
{/if} {/if}

55
src/lib/components/xp/context_menu/CMDesktop.js
View File

@@ -1,30 +1,55 @@
import { queueProgram, clipboard, hardDrive } from '../../../store'; import { queueProgram, clipboard, hardDrive } from '../../../store';
import { get } from 'svelte/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'; import * as fs from '../../../fs';
export let make = ({type, originator}) => { 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 { return {
required_width: 180 + 20, required_width: 180 + 20,
required_height: 27*6 + 20, required_height: 27*6 + 20,
menu: [ menu: [
[ [
{ {
name: 'Arrange Icons By', name: 'Sort By',
items: [ items: [
{ ...sort_menu_items.map(item => {
name: 'Name' return {
}, ...item,
{ check: item.value == get(hardDrive)[originator.id].sort_option,
name: 'Size' action: () => {
}, hardDrive.update(data => {
{ data[originator.id].sort_option = item.value;
name: 'Type' return data;
}, })
{ }
name: 'Modified' }
} }),
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;
})
}
}
}),
] ]
}, },
{ {

55
src/lib/components/xp/context_menu/CMFSVoid.js
View File

@@ -1,34 +1,55 @@
import { queueProgram, clipboard, hardDrive } from '../../../store'; 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 { get } from 'svelte/store';
import * as fs from '../../../fs'; import * as fs from '../../../fs';
export let make = ({type, originator}) => { 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 { return {
required_width: 180 + 20, required_width: 180 + 20,
required_height: 27*6 + 20, required_height: 27*6 + 20,
menu: [ menu: [
[ [
{ {
name: 'Arrange Icons By', name: 'Sort By',
items: [ items: [
{ ...sort_menu_items.map(item => {
name: 'Name' return {
}, ...item,
{ check: item.value == get(hardDrive)[originator.id].sort_option,
name: 'Size' action: () => {
}, hardDrive.update(data => {
{ data[originator.id].sort_option = item.value;
name: 'Type' return data;
}, })
{ }
name: 'Modified' }
} }),
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;
})
}
}
}),
] ]
}, },
{ {

2
src/lib/system.js
View File

@@ -82,7 +82,7 @@ export let SortOptions = Object.freeze({
DATE_MODIFIED: 4, DATE_MODIFIED: 4,
}) })
export let SortOptionOrders = Object.freeze({ export let SortOrders = Object.freeze({
ASCENDING: 0, ASCENDING: 0,
DESCENDING: 1 DESCENDING: 1
}) })

6
src/routes/xp/starting.svelte
View File

@@ -4,7 +4,7 @@
import {set, get} from 'idb-keyval'; import {set, get} from 'idb-keyval';
import axios from 'axios'; import axios from 'axios';
import { hardDrive, wallpaper, contextMenu } from '../../lib/store'; 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 dispatcher = createEventDispatcher();
let assets_loaded = false; let assets_loaded = false;
@@ -85,8 +85,8 @@
if(obj.sort_option == null){ if(obj.sort_option == null){
obj.sort_option = SortOptions.NONE; obj.sort_option = SortOptions.NONE;
} }
if(obj.sort_option_order == null){ if(obj.sort_order == null){
obj.sort_option_order = SortOptionOrders.ASCENDING; obj.sort_order = SortOrders.ASCENDING;
} }
} }
} }