Use different icon for strictly locked notes

Signed-off-by: Felvesthe <23108389+Felvesthe@users.noreply.github.com>
This commit is contained in:
Felvesthe 2025-12-05 12:40:04 +01:00
parent 7d377dc99d
commit 1bbbb63f90
3 changed files with 32 additions and 15 deletions

View file

@ -8,6 +8,7 @@ import {
WorkspaceLeaf,
TAbstractFile,
TFolder,
setIcon,
} from "obsidian";
import { NoteLockerSettings, DEFAULT_SETTINGS } from "./models/types";
@ -549,12 +550,13 @@ export default class NoteLockerPlugin extends Plugin {
private addStrictLockButton(view: MarkdownView, path: string) {
const container = view.containerEl;
let lockBtn = container.querySelector('.note-locker-strict-btn');
let lockBtn = container.querySelector('.note-locker-strict-btn') as HTMLElement;
if (!lockBtn) {
lockBtn = document.createElement('div');
lockBtn.addClass('view-action', 'clickable-icon', 'note-locker-strict-btn');
lockBtn.addClass('view-action', 'clickable-icon', 'note-locker-strict-btn');
lockBtn.setAttribute('aria-label', 'Strictly locked');
lockBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>';
setIcon(lockBtn, 'lock-keyhole');
lockBtn.addEventListener('click', () => {
new StrictUnlockModal(this.app, () => {

View file

@ -141,14 +141,20 @@ export class FileExplorerUI {
const path = titleEl.getAttribute('data-path');
if (!path) return;
let shouldHaveIcon = false;
let iconName: string | null = null;
if (item.classList.contains('nav-file')) {
shouldHaveIcon = this.plugin.settings.lockedNotes.has(path) || this.plugin.settings.strictLockedNotes.has(path);
if (this.plugin.settings.strictLockedNotes.has(path)) {
iconName = 'lock-keyhole';
} else if (this.plugin.settings.lockedNotes.has(path)) {
iconName = 'lock';
}
} else if (item.classList.contains('nav-folder')) {
shouldHaveIcon = this.plugin.settings.lockedFolders.has(path);
if (this.plugin.settings.lockedFolders.has(path)) {
iconName = 'lock';
}
}
this.updateIconState(titleEl, shouldHaveIcon);
this.updateIconState(titleEl, iconName);
}
public updateFileExplorerIcons(): void {
@ -166,8 +172,13 @@ export class FileExplorerUI {
const filePath = titleEl.getAttribute('data-path');
if (!filePath) return;
const shouldHaveIcon = this.plugin.settings.lockedNotes.has(filePath) || this.plugin.settings.strictLockedNotes.has(filePath);
this.updateIconState(titleEl, shouldHaveIcon);
let iconName: string | null = null;
if (this.plugin.settings.strictLockedNotes.has(filePath)) {
iconName = 'lock-keyhole';
} else if (this.plugin.settings.lockedNotes.has(filePath)) {
iconName = 'lock';
}
this.updateIconState(titleEl, iconName);
});
// Handle folders
@ -179,20 +190,25 @@ export class FileExplorerUI {
const folderPath = titleEl.getAttribute('data-path');
if (!folderPath) return;
const shouldHaveIcon = this.plugin.settings.lockedFolders.has(folderPath);
this.updateIconState(titleEl, shouldHaveIcon);
let iconName: string | null = null;
if (this.plugin.settings.lockedFolders.has(folderPath)) {
iconName = 'lock';
}
this.updateIconState(titleEl, iconName);
});
}
private updateIconState(targetEl: Element, shouldHaveIcon: boolean): void {
private updateIconState(targetEl: Element, iconName: string | null): void {
const existingIcon = targetEl.querySelector('.note-locker-icon');
if (shouldHaveIcon) {
if (iconName) {
if (!existingIcon) {
const iconEl = document.createElement('div');
iconEl.addClass('note-locker-icon');
setIcon(iconEl, 'lock');
setIcon(iconEl, iconName);
targetEl.appendChild(iconEl);
} else {
setIcon(existingIcon as HTMLElement, iconName);
}
} else {
if (existingIcon) {

View file

@ -56,8 +56,7 @@ export class StatusBarUI {
const iconSpan = this.statusBarItemEl.createSpan({ cls: 'locker-icon' });
if (isStrictLocked) {
setIcon(iconSpan, 'lock');
iconSpan.setText('🔓');
setIcon(iconSpan, 'lock-keyhole');
this.statusBarItemEl.createSpan({ text: ' Strictly locked' });
this.statusBarItemEl.setAttribute('aria-label', 'Strictly locked. Click to unlock.');
} else {