Skip to content

Commit

Permalink
fix: arrows in note review panel don't move (#962)
Browse files Browse the repository at this point in the history 
* Add "tree" classes

* Change nav-folder Folding to match obsidians

* Fix linting

* Fix missing statement

* Delete main.js data.json
  • Loading branch information
@4Source
4Source authored Aug 18, 2024
1 parent b7f2153 commit 9f511ad
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 35 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
docs/changelog.md
docs/changelog.md
2 changes: 1 addition & 1 deletion src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const AUDIO_FORMATS = ["mp3", "webm", "m4a", "wav", "ogg"];
export const VIDEO_FORMATS = ["mp4", "mkv", "avi", "mov"];

export const COLLAPSE_ICON =
'<svg viewBox="0 0 100 100" width="8" height="8" class="right-triangle"><path fill="currentColor" stroke="currentColor" d="M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z"></path></svg>';
'<svg viewBox="0 0 100 100" width="8" height="8" class="svg-icon right-triangle"><path fill="currentColor" stroke="currentColor" d="M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z"></path></svg>';

export const TICKS_PER_DAY = 24 * 3600 * 1000;

Expand Down
69 changes: 36 additions & 33 deletions src/gui/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ export class ReviewQueueListView extends ItemView {
public redraw(): void {
const activeFile: TFile | null = this.app.workspace.getActiveFile();

const rootEl: HTMLElement = createDiv();
const childrenEl: HTMLElement = rootEl;
const rootEl: HTMLElement = createDiv("tree-item nav-folder mod-root");
const childrenEl: HTMLElement = rootEl.createDiv("tree-item-children nav-folder-children");

for (const deckKey in this.plugin.reviewDecks) {
const deck: ReviewDeck = this.plugin.reviewDecks[deckKey];
Expand All @@ -57,7 +57,7 @@ export class ReviewQueueListView extends ItemView {
deckCollapsed,
false,
deck,
).getElementsByClassName("tree-item-children")[0] as HTMLElement;
).getElementsByClassName("tree-item-children nav-folder-children")[0] as HTMLElement;

if (deck.newNotes.length > 0) {
const newNotesFolderEl: HTMLElement = this.createRightPaneFolder(
Expand All @@ -73,8 +73,8 @@ export class ReviewQueueListView extends ItemView {
if (fileIsOpen) {
deck.activeFolders.add(deck.deckName);
deck.activeFolders.add(t("NEW"));
this.changeFolderIconToExpanded(newNotesFolderEl);
this.changeFolderIconToExpanded(deckFolderEl);
this.changeFolderFolding(newNotesFolderEl);
this.changeFolderFolding(deckFolderEl);
}
this.createRightPaneFile(
newNotesFolderEl,
Expand Down Expand Up @@ -126,8 +126,8 @@ export class ReviewQueueListView extends ItemView {
if (fileIsOpen) {
deck.activeFolders.add(deck.deckName);
deck.activeFolders.add(folderTitle);
this.changeFolderIconToExpanded(schedFolderEl);
this.changeFolderIconToExpanded(deckFolderEl);
this.changeFolderFolding(schedFolderEl);
this.changeFolderFolding(deckFolderEl);
}

this.createRightPaneFile(
Expand All @@ -154,36 +154,32 @@ export class ReviewQueueListView extends ItemView {
hidden: boolean,
deck: ReviewDeck,
): HTMLElement {
const folderEl: HTMLDivElement = parentEl.createDiv("tree-item");
const folderTitleEl: HTMLDivElement = folderEl.createDiv("tree-item-self");
const childrenEl: HTMLDivElement = folderEl.createDiv("tree-item-children");
const folderEl: HTMLDivElement = parentEl.createDiv("tree-item nav-folder");
const folderTitleEl: HTMLDivElement = folderEl.createDiv("tree-item-self nav-folder-title");
const childrenEl: HTMLDivElement = folderEl.createDiv(
"tree-item-children nav-folder-children",
);
const collapseIconEl: HTMLDivElement = folderTitleEl.createDiv(
"tree-item-collapse-indicator collapse-icon",
"tree-item-icon collapse-icon nav-folder-collapse-indicator",
);

collapseIconEl.innerHTML = COLLAPSE_ICON;
if (collapsed) {
(collapseIconEl.childNodes[0] as HTMLElement).style.transform = "rotate(-90deg)";
}
this.changeFolderFolding(folderEl, collapsed);

folderTitleEl.createDiv("tree-item-content").setText(folderTitle);
folderTitleEl.createDiv("tree-item-inner nav-folder-title-content").setText(folderTitle);

if (hidden) {
folderEl.style.display = "none";
}

folderTitleEl.onClickEvent(() => {
for (const child of childrenEl.childNodes as NodeListOf<HTMLElement>) {
if (child.style.display === "block" || child.style.display === "") {
child.style.display = "none";
(collapseIconEl.childNodes[0] as HTMLElement).style.transform =
"rotate(-90deg)";
deck.activeFolders.delete(folderTitle);
} else {
child.style.display = "block";
(collapseIconEl.childNodes[0] as HTMLElement).style.transform = "";
deck.activeFolders.add(folderTitle);
}
this.changeFolderFolding(folderEl, !folderEl.hasClass("is-collapsed"));
childrenEl.style.display = !folderEl.hasClass("is-collapsed") ? "block" : "none";

if (!folderEl.hasClass("is-collapsed")) {
deck.activeFolders.delete(folderTitle);
} else {
deck.activeFolders.add(folderTitle);
}
});

Expand All @@ -199,18 +195,18 @@ export class ReviewQueueListView extends ItemView {
plugin: SRPlugin,
): void {
const navFileEl: HTMLElement = folderEl
.getElementsByClassName("tree-item-children")[0]
.createDiv("tree-item");
.getElementsByClassName("tree-item-children nav-folder-children")[0]
.createDiv("nav-file");
if (hidden) {
navFileEl.style.display = "none";
}

const navFileTitle: HTMLElement = navFileEl.createDiv("tree-item-self");
const navFileTitle: HTMLElement = navFileEl.createDiv("tree-item-self nav-file-title");
if (fileElActive) {
navFileTitle.addClass("is-active");
}

navFileTitle.createDiv("tree-item-content").setText(file.basename);
navFileTitle.createDiv("tree-item-inner nav-file-title-content").setText(file.basename);
navFileTitle.addEventListener(
"click",
async (event: MouseEvent) => {
Expand Down Expand Up @@ -238,8 +234,15 @@ export class ReviewQueueListView extends ItemView {
);
}

private changeFolderIconToExpanded(folderEl: HTMLElement): void {
const collapseIconEl = folderEl.find("div.tree-item-collapse-indicator");
(collapseIconEl.childNodes[0] as HTMLElement).style.transform = "";
private changeFolderFolding(folderEl: HTMLElement, collapsed = false): void {
if (collapsed) {
folderEl.addClass("is-collapsed");
const collapseIconEl = folderEl.find("div.nav-folder-collapse-indicator");
collapseIconEl.addClass("is-collapsed");
} else {
folderEl.removeClass("is-collapsed");
const collapseIconEl = folderEl.find("div.nav-folder-collapse-indicator");
collapseIconEl.removeClass("is-collapsed");
}
}
}

0 comments on commit 9f511ad

Please sign in to comment.