Repository navigation
Allow icon's in CommandList #22
Description
I have this working:
The changes are pretty minimal. I'll link a pull request here in a few.
It is used with a command array like:
{
name: "Toggle Dark/Light Theme",
shortcut: "ctrl+1",
icon: null,
handler: () => {...}
},
{
name: "Change Language",
shortcut: "ctrl+shift+l",
icon: '<span class="icon"> ></span>',
handler: () => {...}
},
{
name: "Goto About",
shortcut: "ctrl+d",
handler: () => (window.location.hash = "about"),
icon: '<img src="../Cjdowner-Cryptocurrency-ICON.512.webp">'
},
{
name: "Destroy Instance",
icon: '<svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 32 32" xml:space="preserve"><path d="M17,9v0.459v1.468l1.401,0.44C21.75,12.419,24,15.487,24,19c0,4.411-3.589,8-8,8s-8-3.589-8-8 c0-3.513,2.25-6.581,5.599-7.633L15,10.927V9.459V9H17 M17.95,2C16.323,2,15,3.323,15,4.95V7h-2v2.459C8.943,10.734,6,14.523,6,19 c0,5.523,4.477,10,10,10s10-4.477,10-10c0-4.477-2.943-8.266-7-9.541V7h-2V4.95C17,4.426,17.426,4,17.956,4 c0.318,0,0.614,0.158,0.791,0.423l0.843,1.265C20.139,6.51,21.057,7,22.05,7C23.677,7,25,5.677,25,4.05V3h-2v1.05 C23,4.574,22.574,5,22.044,5c-0.318,0-0.614-0.158-0.791-0.423L20.41,3.312C19.861,2.49,18.943,2,17.95,2L17.95,2z M15,12.08 c-3.386,0.488-6,3.401-6,6.92h2c0-2.414,1.721-4.434,4-4.899V12.08z"/></svg>',
handler: () => {...}
It supports 5 cases:
- if icon is not defined, it inserts an empty svg that holds 24px of space on the left of the label
- if icon is null, the space is not held and the label smooshes to the left (first item)
- if icon is a character, the character is used. You can pad it with
to add space on the left side. If the string is
longer than 24 px, it's cut off. (second item) - the icon can be an image, css sized to 24x24px. (third item)
- the icon can be an svg, css sized to 24x24px fill set to currentColor. (fourth item)
The icon is separated from the text by .5em of space.
I have one question. For cases 1 and 2, should there be an option for CommandPal that swaps
them. So that a missing icon: doesn't reserve 24px of white space on the left?
In this case setting icon: null would result in an empty 24x24px space.
The reason I bring this up is that a user may not want any icons at all. e.g. for the list of languages, I have
no icons. I could add: icon:null" to each language command. But I think for that case it would be better to have
CommandPal not reserve the icon space.
Thoughts?
Activity
rouilj commentedon Feb 3, 2023
Also while I was looking at the code, I came across:
what's with the
!!?Add support for adding icons to the CommandList.
rouilj commentedon Feb 7, 2023
Hi Ben:
I closed the pull request because something weird is happening.
I changed CommandList.svelte to:
{#each items as item, index} <p class="item" class:selected={index == selectedIndex} on:mousedown={e => clickedIndex(e, index)}> {#if !!item.icon} {@html item.icon} {:else} {#if item.icon !== null} <svg fill="#000000" class="cp-placeholder" height="24" width="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"></svg> {/if} {/if} <span class="command">{item.name}</span> {#if !!item.shortcut} <kyb>{item.shortcut}</kyb> {:else} <span class="cp-placeholder"/> {/if} </p> {/each}to add item.icon. when I first pull up the command palette (1) everything is fine. I see:
the blue blobs are the empty svg and the goldenrod squares are an outline on the span holding the place for the shortcut.
Now I type
d(2) and I get:Again everything is fine. If I type
cinstead I get:Note the icon has moved to the end on the emergency entry. WT.... If I look at the HTML, I see that the img has actually moved in the p:
Now if I type backspace, I get:
Note zot's icon on the right. I should see (1). If I dismiss (using ESC) the window and use the hotkey to reopen it, is still shows the misplaced icon for zot.
If I type d again I get what is displayed above in (2). Backspacing over the d now returns the original display at (1).
My edits to CommandList.svelte included some css changes (see: https://github.com/rouilj/command-pal/blob/add_icons/src/CommandList.svelte).
But I claim no css would re-arrange the order of the html tags. Is this a svelte bug? Is some state not getting cleared?
One thing to note, if I change:
{#if !!item.shortcut}to{#if false && !!item.shortcut}the bug doesn't happen.So it has something to do with
@htmlbeing executed.Any ideas here? I am totally lost and would really like to get icons into command-pal.
rouilj commentedon Feb 11, 2023
I reopened the request. updating svelte fixed it.