You should avoid assigning styles via JavaScript or in HTML and instead move all these styles into CSS so that they are more easily adaptable by themes and snippets.

This commit is contained in:
caffae 2024-03-26 18:27:47 +08:00
parent 931b40a4fa
commit 298f024f1f
2 changed files with 22 additions and 22 deletions

23
main.ts
View file

@ -271,31 +271,20 @@ export class CurrentFolderNotesDisplayView extends ItemView {
a.innerText = a.innerText.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
// make the items similar to file explorer
// a.style.display = 'block';
a.style.margin = '0px';
a.style.padding = '0px';
a.style.cursor = 'pointer';
a.style.color = 'var(--text-normal)';
a.style.textDecoration = 'none';
a.style.fontSize = 'var(--font-small)';
// a.style.textDecoration = 'underline';
// for current file, give it a different color
a.className = 'anchor-style';
// If the file path matches the current file path, assign the 'current-file' class
if (file.path === currentFilePath) {
a.style.color = 'var(--text-muted)';
// a.style.backgroundColor = 'var(--color-base-40)';
// background style is highlighter
// a.style.fontWeight = 'bold';
// add an indicator that this is the current file with a > symbol
a.className += ' current-file';
a.innerText = '> ' + a.innerText;
}
// make pretty when hover
a.onmouseover = () => {
a.style.backgroundColor = 'var(--interactive-hover)';
a.classList.add('hover-style');
}
// and remove when not hovering
a.onmouseout = () => {
a.style.backgroundColor = 'transparent';
a.classList.remove('hover-style');
}
// When a note is clicked, open it in the workspace

View file

@ -1,8 +1,19 @@
/*
/* styles.css */
This CSS file will be included with your plugin, and
available in the app when your plugin is enabled.
.anchor-style {
display: 'block';
margin: 0px;
padding: 0px;
cursor: 'pointer';
color: var(--text-normal);
text-decoration: 'none';
font-size: var(--font-small);
}
If your plugin does not need CSS, delete this file.
.current-file {
color: var(--text-muted);
}
*/
.hover-style {
background-color: var(--interactive-hover);
}