olivier/waypoint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

feat: chevron on right + tabbed settings + display customization

Browse Source 
View:
- Chevron moved from left side to right side of bookmark rows
- Display settings applied as CSS variables on the view element

Settings:
- Tabbed UI with 4 tabs: Calendar, Periodic Notes, Recent Files, Display
- Display tab: row size, row spacing, indent size, font size, icon size, calendar cell size
- All settings use sliders with live preview and dynamic tooltips
- Reset to defaults button

CSS:
- Bookmark items use CSS variables (--wp-row-size, --wp-row-spacing, etc.)
- Calendar cells use --wp-cal-cell-size for configurable height
- Settings tab styling with active indicator
This commit is contained in:
Olivier Legendre
2026-06-12 12:56:27 -04:00
parent 846726a5c7
commit 765c6f3b47
5 changed files with 281 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/waypoint-view.ts
+19 -16
View File
@@ -51,6 +51,15 @@ export class WaypointView extends ItemView {
this.contentEl.empty();
this.contentEl.addClass('waypoint-view');
// Apply display settings as CSS variables
const d = this.plugin.settings.display;
this.contentEl.style.setProperty('--wp-row-size', d.rowSize + 'px');
this.contentEl.style.setProperty('--wp-row-spacing', d.rowSpacing + 'px');
this.contentEl.style.setProperty('--wp-indent-size', d.indentSize + 'px');
this.contentEl.style.setProperty('--wp-font-size', d.fontSize + 'px');
this.contentEl.style.setProperty('--wp-icon-size', d.iconSize + 'px');
this.contentEl.style.setProperty('--wp-cal-cell-size', d.calendarCellSize + 'px');
this.renderFavorites();
this.renderRecentFiles();
this.renderCalendar();
@@ -646,6 +655,11 @@ export class WaypointView extends ItemView {
// ── Group: chevron + icon + label ──
if (isGroup) {
const iconEl = rowEl.createDiv({ cls: 'waypoint-bm-icon' });
if (item.icon) setIcon(iconEl, item.icon);
const labelEl = rowEl.createDiv({ cls: 'waypoint-bm-label', text: item.label });
const chevron = rowEl.createDiv({ cls: 'waypoint-bm-chevron' });
setIcon(chevron, 'chevron-down');
chevron.addEventListener('click', (event: MouseEvent) => {
@@ -653,11 +667,6 @@ export class WaypointView extends ItemView {
this.plugin.updateBookmark(item.id, { collapsed: !item.collapsed });
});
const iconEl = rowEl.createDiv({ cls: 'waypoint-bm-icon' });
if (item.icon) setIcon(iconEl, item.icon);
const labelEl = rowEl.createDiv({ cls: 'waypoint-bm-label', text: item.label });
// Click group row → open linked file (if any), otherwise toggle collapse
rowEl.addEventListener('click', (event: MouseEvent) => {
if (item.filePath) {
@@ -691,6 +700,11 @@ export class WaypointView extends ItemView {
// ── File: icon + label ──
} else {
const iconEl = rowEl.createDiv({ cls: 'waypoint-bm-icon' });
if (item.icon) setIcon(iconEl, item.icon);
const labelEl = rowEl.createDiv({ cls: 'waypoint-bm-label', text: item.label });
// Chevron for file bookmarks that have children
if (item.children && item.children.length > 0) {
const chevron = rowEl.createDiv({ cls: 'waypoint-bm-chevron' });
@@ -704,11 +718,6 @@ export class WaypointView extends ItemView {
chevron.style.transform = 'rotate(-90deg)';
}
}
const iconEl = rowEl.createDiv({ cls: 'waypoint-bm-icon' });
if (item.icon) setIcon(iconEl, item.icon);
const labelEl = rowEl.createDiv({ cls: 'waypoint-bm-label', text: item.label });
setTooltip(rowEl, item.filePath);
rowEl.addEventListener('click', (event: MouseEvent) => {
@@ -823,12 +832,6 @@ export class WaypointView extends ItemView {
.setIcon('image')
.onClick(() => this.promptIcon(item)),
);
menu.addItem((i) =>
i
.setTitle(item.collapsed ? 'Expand' : 'Collapse')
.setIcon(item.collapsed ? 'chevron-down' : 'chevron-up')
.onClick(() => this.plugin.updateBookmark(item.id, { collapsed: !item.collapsed })),
);
menu.addSeparator();
menu.addItem((i) =>
i