Alternative Style for the Selection Menu

[albertocubeddu]

Is your feature request related to a problem? Please describe.
The current Selection Menu appears too bulky and may not provide the optimal user experience.

Describe the solution you'd like
It would be ideal to align the look and feel of the Selection Menu with the default Chrome context menu, enhancing user familiarity and ensuring a more seamless interaction.

Additional context
Desired design:

You can see this design selecting some text and pressing the right-click. What we would like to achieve is to have this design:

for the selectionMenuItem

vs what is at the moment (when you just select a text):

Scope of work

Modify the design on the SelectionMenu to be as similar as the google menu (right-click).

The menu uses shadcn command https://ui.shadcn.com/docs/components/command and its defined at:

extensionOS/contents/SelectionMenu.tsx

Line 173 in f0ac08a

<Command className="rounded-2xl shadow-lg p-0 bg-[#161616] border border-[#505050] dark:border-[#fff] translate-x-1 translate-y-1" style={{

Hopefully adding and adjusting the className in this file, we should be able to provide the same look and feel of the (right-click chrome menu).

[ankitjha420]

Hi, here's what I understand about resolving this issue:

1. Removed the emojis
2. Fix font size and weights to match the chrome context menu
3. Adjust the layout (vertical spacing) and add white border lines to separate menu items that are not related to each other

The menu item text itself should remain as is tho right?

[albertocubeddu]

Update the original ticket and adding:

Context

Starting from a default installation, the menu(s) must display the title defined by the final-user or loaded for first time reading the values at

extensionOS/background/init.ts

Line 30 in f0ac08a

const contextMenuItems: IContextConfigItems[] = [

and therefore displaying the emoji or any other character in the "title" property.

IContextConfigItems

This interface is used to populate both menus;

export interface IContextConfigItems {
   id: string; //Internal ID
   title?: string; //The display title
   contexts?: string[]; //Chrome Context e.g. page, select, etc.
   prompt?: string; //The actionable prompt (e.g. fix this text: )
   functionType?: string; //The functionality when used (copy to clipboard, etc)
   type?: string; //Used for **separator**
   extraArgs?: any; //Extensible for the future
}

Customisable menu(s)

The user has the ability to customise the Display Name, and therefore we must display the same "characters" he/she will save.

Menus

Extension | OS works with one configuration interface for both menus (
) defined and loaded at:

extensionOS/background/init.ts

Line 24 in f0ac08a

const initState = await storage.get("contextMenuItems");

Chrome Default Menu (Right Click)

loaded at:

extensionOS/background/index.ts

Line 46 in f0ac08a

cleanedContextMenuItems.forEach((item) => {

Selection Menu (the one we want to change)

Created at:
https://github.com/albertocubeddu/extensionOS/blob/main/contents/SelectionMenu.tsx

[albertocubeddu]

Hi, here's what I understand about resolving this issue:

1. Removed the emojis
2. Fix font size and weights to match the chrome context menu
3. Adjust the layout (vertical spacing) and add white border lines to separate menu items that are not related to each other

The menu item text itself should remain as is tho right?

1. Emoji are defined by the init.ts and the user, therefore we must display them. As the user can add/remove them when is configuring the application.
2. Correct
3. Spot on, the selectionMenu is already showing a separator, however the design is so bad, that is impossible to see. if you hover the mouse in this area you will see:

[ankitjha420]

Thank you the context info is really helpful. Can I give this a shot? I'm new to open source

[albertocubeddu]

I would glad if you can help me out :)
Fork the repo, create a new branch, therefore if we both need to modify it it's easier. If you have any question, i'm happy to help

[mdabir1203]

Is the above done ?

[albertocubeddu]

I haven't received any PR, however Ankit may have started working on it

…

On Sun, 1 Sept 2024, 8:56 am uknowWho, ***@***.***> wrote: Is the above done ? — Reply to this email directly, view it on GitHub <#38 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACODEJO3OYHH2RGPBQJHRY3ZUMMKTAVCNFSM6AAAAABM5JT4GGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRTGM2TCMBRGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>