feat(tray): use icons for tray items

This commit is contained in:
Elian Doran 2025-02-01 10:18:41 +02:00
parent 4bd9d32c74
commit 736f329857
No known key found for this signature in database
12 changed files with 31 additions and 2 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bookmark"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4z" /></svg>

After

Width:  |  Height:  |  Size: 383 B

View File

@ -0,0 +1,14 @@
#!/usr/bin/env bash
if ! command -v inkscape &> /dev/null; then
echo "This tool requires Inkscape to be render sharper SVGs than ImageMagick."
exit 1
fi
script_dir=$(realpath $(dirname $0))
output_dir="$script_dir/../../images/app-icons/tray"
for file in *.svg; do
name=$(basename $file .svg)
inkscape -w 16 -h 16 "$file" -o "$output_dir/$name-16.png"
done

1
bin/tray-icons/close.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>

After

Width:  |  Height:  |  Size: 356 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>

After

Width:  |  Height:  |  Size: 357 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-history"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 8l0 4l2 2" /><path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" /></svg>

After

Width:  |  Height:  |  Size: 387 B

1
bin/tray-icons/today.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-calendar-star"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 21h-5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v3.5" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h11" /><path d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138z" /></svg>

After

Width:  |  Height:  |  Size: 734 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 449 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 379 B

View File

@ -27,12 +27,17 @@ function getIconSize() {
}
}
function getIconPath() {
function getTrayIconPath() {
const iconSize = getIconSize();
return path.join(path.dirname(fileURLToPath(import.meta.url)), "../..", "images", "app-icons", "png", `${iconSize}x${iconSize}.png`);
}
function getIconPath(name: string) {
const size = 16;
return path.join(path.dirname(fileURLToPath(import.meta.url)), "../..", "images", "app-icons", "tray", `${name}-${size}.png`);
}
function registerVisibilityListener() {
const mainWindow = windowService.getMainWindow();
if (!mainWindow) {
@ -127,27 +132,32 @@ function updateTrayMenu() {
{
label: "New note",
type: "normal",
icon: getIconPath("new-note"),
click: () => triggerKeyboardAction("createNoteIntoInbox")
},
{
label: "Open today's journal note",
type: "normal",
icon: getIconPath("today"),
click: () => openInSameTab(date_notes.getTodayNote())
},
{
label: "Bookmarks",
type: "submenu",
icon: getIconPath("bookmarks"),
submenu: buildBookmarksMenu()
},
{
label: "Recent notes",
type: "submenu",
icon: getIconPath("recents"),
submenu: buildRecentNotesMenu()
},
{ type: "separator" },
{
label: "Quit Trilium",
type: "normal",
icon: getIconPath("close"),
click: () => {
mainWindow.close();
}
@ -176,7 +186,7 @@ function createTray() {
return;
}
tray = new Tray(getIconPath());
tray = new Tray(getTrayIconPath());
tray.setToolTip("TriliumNext Notes");
// Restore focus
tray.on("click", changeVisibility);