Skip to content

Commit

Permalink
feat: folder mappings section collapsible in settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisgurney
chrisgurney committed Oct 14, 2024
1 parent 0eedfce commit 9e495ed
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 41 deletions.
27 changes: 16 additions & 11 deletions src/I18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,17 +113,7 @@
"description": "Define which notes to display toolbars on, using a property, mappings, or both.",
"option-property": "Property",
"option-property-description": "If a toolbar name is found in this property, the toolbar will be displayed on the note. This takes precedence over any folder mappings. In a note, set this property to 'none' to hide the toolbar.",
"option-property-placeholder": "Property",
"option-folder-all": "all folders",
"option-folder-root": "root folder only",
"option-folder-mappings": "Folder mappings",
"option-folder-mappings-description": "Notes in folders below will display the toolbar mapped to it. Precedence is top to bottom.",
"option-folder-mappings-empty": "Click the button to create a mapping.",
"placeholder-mapping-folder": "Folder",
"placeholder-mapping-toolbar": "Toolbar",
"button-new-mapping": "+ New mapping",
"button-new-mapping-tooltip": "Add a new mapping",
"error-folder-already-mapped": "This folder already has a toolbar associated with it."
"option-property-placeholder": "Property"
},
"help": {
"title": "Help using Note Toolbar 🛟",
Expand Down Expand Up @@ -224,6 +214,21 @@
"option-edit-item-tooltip": "Edit toolbar item",
"option-edit-item-type-tooltip": "Edit {{itemType}}"
},
"mappings": {
"name": "Folder mappings",
"name-with-count": "Folder mappings ({{count}})",
"description": "Notes in folders below will display the toolbar mapped to it. Precedence is top to bottom.",
"label-empty": "Click the button to create a mapping.",
"placeholder-folder": "Folder",
"placeholder-toolbar": "Toolbar",
"button-collapse-tooltip": "Collapse all mappings",
"button-expand-tooltip": "Expand all mappings",
"button-new": "+ New mapping",
"button-new-tooltip": "Add a new mapping",
"option-folder-all": "all folders",
"option-folder-root": "root folder only",
"error-folder-already-mapped": "This folder already has a toolbar associated with it."
},
"name": {
"name": "Name",
"description": "Give this toolbar a unique name.",
Expand Down
2 changes: 1 addition & 1 deletion src/Settings/UI/Modals/ToolbarSettingsModal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ export default class ToolbarSettingsModal extends Modal {
});
});

if (this.toolbar.items.length > 4) {
if (this.toolbar.items.length > 8) {
itemsSetting
.addExtraButton((cb) => {
cb.setIcon('right-triangle')
Expand Down
77 changes: 52 additions & 25 deletions src/Settings/UI/NoteToolbarSettingTab.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export class NoteToolbarSettingTab extends PluginSettingTab {

private itemListOpen: boolean = true;
private itemListIdCounter: number = 0;
private mappingListOpen: boolean = true;

constructor(app: App, plugin: NoteToolbarPlugin) {
super(app, plugin);
Expand Down Expand Up @@ -343,14 +344,50 @@ export class NoteToolbarSettingTab extends PluginSettingTab {
*/
displayFolderMap(containerEl: HTMLElement): void {

new Setting(containerEl)
.setName(t('setting.display-rules.option-folder-mappings'))
.setDesc(t('setting.display-rules.option-folder-mappings-description'))
let mappingsContainer = createDiv();
mappingsContainer.addClass('note-toolbar-setting-mappings-container');
mappingsContainer.setAttribute('data-active', this.mappingListOpen.toString());

let toolbarMapSetting = new Setting(mappingsContainer)
.setName(t('setting.mappings.name'))
.setDesc(t('setting.mappings.description'))
.setClass("note-toolbar-setting-no-border");

if (this.plugin.settings.folderMappings.length > 4) {
toolbarMapSetting
.addExtraButton((cb) => {
cb.setIcon('right-triangle')
.setTooltip("Collapse all mappings")
.onClick(async () => {
let mappingsContainer = containerEl.querySelector('.note-toolbar-setting-mappings-container');
if (mappingsContainer) {
this.mappingListOpen = !this.mappingListOpen;
mappingsContainer.setAttribute('data-active', this.mappingListOpen.toString());
let heading = mappingsContainer.querySelector('.setting-item-info .setting-item-name');
this.mappingListOpen ? heading?.setText(t('setting.mappings.name')) : heading?.setText(t('setting.mappings.name-with-count', { count: this.plugin.settings.folderMappings.length }));
cb.setTooltip(this.mappingListOpen ? t('setting.mappings.button-collapse-tooltip') : t('setting.mappings.button-expand-tooltip'));
}
})
.extraSettingsEl.tabIndex = 0;
cb.extraSettingsEl.addClass('note-toolbar-setting-item-expand');
this.plugin.registerDomEvent(
cb.extraSettingsEl, 'keydown', (e) => {
switch (e.key) {
case "Enter":
case " ":
e.preventDefault();
cb.extraSettingsEl.click();
}
});
});
}

let collapsibleContainer = createDiv();
collapsibleContainer.addClass('note-toolbar-setting-items-list-container');

if (this.plugin.settings.folderMappings.length == 0) {
containerEl
.createEl("div", { text: emptyMessageFr(t('setting.display-rules.option-folder-mappings-empty')) })
mappingsContainer
.createEl("div", { text: emptyMessageFr(t('setting.mappings.label-empty')) })
.className = "note-toolbar-setting-empty-message";
}
else {
Expand Down Expand Up @@ -379,20 +416,20 @@ export class NoteToolbarSettingTab extends PluginSettingTab {
}
});

containerEl.append(toolbarFolderListDiv);
collapsibleContainer.appendChild(toolbarFolderListDiv)

}

//
// "Add a new mapping" button
//

new Setting(containerEl)
new Setting(collapsibleContainer)
.setClass("note-toolbar-setting-button")
.addButton((button: ButtonComponent) => {
button
.setTooltip(t('setting.display-rules.button-new-mapping-tooltip'))
.setButtonText(t('setting.display-rules.button-new-mapping'))
.setButtonText(t('setting.mappings.button-new'))
.setTooltip(t('setting.mappings.button-new-tooltip'))
.setCta()
.onClick(async () => {
let newMapping = {
Expand All @@ -408,6 +445,9 @@ export class NoteToolbarSettingTab extends PluginSettingTab {
});
});

mappingsContainer.appendChild(collapsibleContainer);
containerEl.append(mappingsContainer);

}

/**
Expand Down Expand Up @@ -437,24 +477,11 @@ export class NoteToolbarSettingTab extends PluginSettingTab {
cb.buttonEl.setAttribute('data-row-id', rowId);
});

// FUTURE: dropdown for mapping types, such as for tags and file patterns
//
// new Setting(textFieldsDiv)
// .setClass("note-toolbar-setting-mapping-field")
// .addDropdown((dropdown) =>
// dropdown
// .addOptions({folder: "Folder"})
// .setValue('folder')
// .onChange(async (value) => {

// })
// );

const fs = new Setting(textFieldsDiv)
.setClass("note-toolbar-setting-mapping-field")
.addSearch((cb) => {
new FolderSuggester(this.app, cb.inputEl);
cb.setPlaceholder(t('setting.display-rules.placeholder-mapping-folder'))
cb.setPlaceholder(t('setting.mappings.placeholder-folder'))
.setValue(mapping.folder)
.onChange(debounce(async (newFolder) => {
if (
Expand All @@ -467,7 +494,7 @@ export class NoteToolbarSettingTab extends PluginSettingTab {
) {
if (document.getElementById("note-toolbar-name-error") === null) {
let errorDiv = createEl("div", {
text: t('setting.display-rules.error-folder-already-mapped'),
text: t('setting.mappings.error-folder-already-mapped'),
attr: { id: "note-toolbar-name-error" }, cls: "note-toolbar-setting-error-message" });
toolbarFolderListItemDiv.insertAdjacentElement('afterend', errorDiv);
toolbarFolderListItemDiv.children[0].addClass("note-toolbar-setting-error");
Expand All @@ -485,7 +512,7 @@ export class NoteToolbarSettingTab extends PluginSettingTab {
.setClass("note-toolbar-setting-mapping-field")
.addSearch((cb) => {
new ToolbarSuggester(this.app, this.plugin, cb.inputEl);
cb.setPlaceholder(t('setting.display-rules.placeholder-mapping-toolbar'))
cb.setPlaceholder(t('setting.mappings.placeholder-toolbar'))
.setValue(this.plugin.settingsManager.getToolbarName(mapping.toolbar))
.onChange(debounce(async (name) => {
let mappedToolbar = this.plugin.settingsManager.getToolbarByName(name);
Expand Down
4 changes: 2 additions & 2 deletions src/Settings/UI/Suggesters/FolderSuggester.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export class FolderSuggester extends AbstractInputSuggest<string> {

private inputEl: HTMLInputElement;

private PATTERN_ALL_FILES: FolderSuggester.Pattern = { pattern: '*', label: '*', desc: t('setting.display-rules.option-folder-all') };
private PATTERN_ROOT_ONLY: FolderSuggester.Pattern = { pattern: '/', label: '/', desc: t('setting.display-rules.option-folder-root') };
private PATTERN_ALL_FILES: FolderSuggester.Pattern = { pattern: '*', label: '*', desc: t('setting.mappings.option-folder-all') };
private PATTERN_ROOT_ONLY: FolderSuggester.Pattern = { pattern: '/', label: '/', desc: t('setting.mappings.option-folder-root') };

constructor(app: App, inputEl: HTMLInputElement) {
super(app, inputEl);
Expand Down
3 changes: 2 additions & 1 deletion src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -910,7 +910,8 @@ input[type="text"].note-toolbar-setting-error {
margin-bottom: 1em;
}

.note-toolbar-setting-items-container {
.note-toolbar-setting-items-container,
.note-toolbar-setting-mappings-container {
padding-top: 0.75em;
&[data-active="true"] {
& .note-toolbar-setting-items-list-container {
Expand Down
3 changes: 2 additions & 1 deletion styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1715,7 +1715,8 @@ input[type="text"].note-toolbar-setting-error {
margin-bottom: 1em;
}

.note-toolbar-setting-items-container {
.note-toolbar-setting-items-container,
.note-toolbar-setting-mappings-container {
padding-top: 0.75em;
&[data-active="true"] {
& .note-toolbar-setting-items-list-container {
Expand Down

0 comments on commit 9e495ed

Please sign in to comment.