obsidian-plugin/rifts-obsidian-laboratory_anki-integration
1
0
Fork 0
mirror of https://github.com/rifts-obsidian-laboratory/anki-integration.git synced 2026-07-22 05:42:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Features (AddNoteModal as test) - Finished Front-End of tagsBody

Browse source
This commit is contained in:
Noah Boos 2025-04-25 20:41:03 +02:00
parent 73690f125a
commit aad84fe7dd
2 changed files with 82 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/modals/AddNoteModal.ts
View file

@ -94,39 +94,85 @@ export class AddNoteModal extends Modal {
const modelKeys: string[] = Object.keys(ankiData["modelsData"]);
AddOptionsToDropdownFromDataset(modelSelector, modelKeys, "name", "name", ankiData["modelsData"]);
/**
* @type {HTMLDivElement} tagsHeader
* @description A container serving as the head part of the tags section.
*/
const tagsHeader: HTMLDivElement = AddContainer(contentEl, [
"ankiIntegrationModal__container--flex-row",
"ankiIntegrationModal__container--flex-align-center",
"ankiIntegrationModal__container--flex-justify-space-between",
]);
AddSubtitle(tagsHeader, "Tags");
/**
* @type {ButtonComponent} addTagFieldButton
* @description Button used by the user to add a tag field in the pop-up.
*/
let addTagFieldButton: ButtonComponent = AddButton(tagsHeader, "", "circle-plus");
addTagFieldButton.buttonEl.removeClasses([
"ankiIntegrationModal__button--default-width",
"ankiIntegrationModal__button--default-margin",
"ankiIntegrationModal__button--default-padding"
]);
/**
* @type {HTMLDivElement} tagsBody
* @description A container serving as the body of the tags section.
*/
const tagsBody: HTMLDivElement = AddContainer(contentEl);
tagsBody.addClasses([
"ankiIntegrationModal__container--flex-row",
"ankiIntegrationModal__container--flex-wrap",
"ankiIntegrationModal__container--gap-16px"
])
addTagFieldButton.onClick(async (value) => {
const inputGroup: HTMLDivElement = AddContainer(tagsBody);
inputGroup.addClasses([
/**
* @description addTagFieldButton's onClick() event listener used to add a tag input group in tagsBody.
*/
addTagFieldButton.onClick(async () => {
/**
* @type {HTMLDivElement} inputGroup
* @description A container storing the input field and the delete input field button.
*/
const tagInputGroup: HTMLDivElement = AddContainer(tagsBody);
tagInputGroup.addClasses([
"ankiIntegrationModal__container--width-fit-content",
"ankiIntegrationModal__container--flex-row"
]);
const tagsInput: HTMLInputElement = AddInput(inputGroup, "text", "My tag::A super tag", null, [
"ankiIntegrationModal__input--field-sizing-content"
/**
* @type {HTMLInputElement} tagInput
* @description A tag input field.
* @remarks Default width class has to be removed and replaced by a field-sizing width for the great-parent's wrap to work.
*/
const tagInput: HTMLInputElement = AddInput(tagInputGroup, "text", "My tag::Super", null, [
"ankiIntegrationModal__input--field-sizing-content",
"ankiIntegrationModal__tagInput--border",
"ankiIntegrationModal__tagInput--focus"
]);
tagsInput.removeClasses([
tagInput.removeClasses([
"ankiIntegrationModal__input--default-width"
]);
tagsInput.focus();
/**
* @type {ButtonComponent} deleteTagInputButton
* @description A button allowing the user to delete the field group the button belongs to.
* @remarks For the button to look great along with the input, the CTA is disabled, a class is added and all the default classes are removed.
*/
const deleteTagInputButton: ButtonComponent = AddButton(tagInputGroup, "", "x", [
"ankiIntegrationModal__deleteInputButton--border",
"ankiIntegrationModal__icon--color-red"
]);
deleteTagInputButton.removeCta();
deleteTagInputButton.buttonEl.removeClasses([
"ankiIntegrationModal__button--default-width",
"ankiIntegrationModal__button--default-margin",
"ankiIntegrationModal__button--default-padding"
]);
/**
* @description deleteTagInputButton's onClick() event listener used to delete an input group in tagsBody.
*/
deleteTagInputButton.onClick(async () => {
tagInputGroup.remove();
})
tagInput.focus();
});
// Add the "Fields" section subtitle.

31
styles.css
View file

@ -75,7 +75,30 @@
gap: 16px;
}
/*.ankiIntegrationModal__icon--font-size * {*/
/* width: 48px !important;*/
/* color: red;*/
/*}*/
.ankiIntegrationModal__deleteInputButton--border {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.ankiIntegrationModal__tagInput--border {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/*noinspection CssUnresolvedCustomProperty*/
.ankiIntegrationModal__tagInput--focus:focus {
box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus) !important;
border: none;
transition: none !important;
}
/*noinspection CssUnresolvedCustomProperty*/
.ankiIntegrationModal__tagInput--focus:focus + button {
box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus);
transition: none !important;
}
/*noinspection CssUnresolvedCustomProperty*/
.ankiIntegrationModal__icon--color-red svg {
color: var(--color-red);
}