obsidian-plugin/lutu-gl_Obsidian-Minimal-Quiz
1
0
Fork 0
mirror of https://github.com/lutu-gl/Obsidian-Minimal-Quiz.git synced 2026-07-22 05:42:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rename plugin settings class, add styles in css instead of inline

Browse source
This commit is contained in:
Lutu-gl 2025-03-29 19:10:07 +01:00
parent 9c5166871b
commit 8f0f5fe3df
2 changed files with 40 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
main.ts
View file

@ -1,17 +1,17 @@
import { App, Component, Editor, MarkdownRenderer, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
interface MyPluginSettings {
interface MinimalQuizSettings {
alignment: 'left' | 'center';
blurBackground: boolean;
}
const DEFAULT_SETTINGS: MyPluginSettings = {
const DEFAULT_SETTINGS: MinimalQuizSettings = {
alignment: 'center',
blurBackground: true
};
export default class MinimalQuizPlugin extends Plugin {
settings: MyPluginSettings;
settings: MinimalQuizSettings;
async onload() {
await this.loadSettings();
@ -77,10 +77,10 @@ class QuestionsModal extends Modal {
entries: [string, string][];
answerVisible = false;
currentIndex = 0;
settings: MyPluginSettings;
settings: MinimalQuizSettings;
component: Component;
constructor(app: App, questions: [string, string][], settings: MyPluginSettings) {
constructor(app: App, questions: [string, string][], settings: MinimalQuizSettings) {
super(app);
this.entries = questions;
this.settings = settings;
@ -93,11 +93,11 @@ class QuestionsModal extends Modal {
// blur of the background
const bgEl = modalEl.parentElement;
if (bgEl && this.settings.blurBackground) {
bgEl.style.backdropFilter = "blur(10px)";
bgEl.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
bgEl.classList.remove("quiz-no-blur");
bgEl.classList.add("quiz-blur");
} else if (bgEl) {
bgEl.style.backdropFilter = "none";
bgEl.style.backgroundColor = "";
bgEl.classList.remove("quiz-blur");
bgEl.classList.add("quiz-no-blur");
}
this.registerKeys();
this.render();
@ -129,7 +129,7 @@ class QuestionsModal extends Modal {
const progressEl = contentEl.createEl('div', {
text: `Progress: ${progressText}`,
});
progressEl.style.marginBottom = '20px';
progressEl.classList.add('quiz-progress');
const [question, answer] = this.entries[this.currentIndex];
@ -148,14 +148,16 @@ class QuestionsModal extends Modal {
const button = contentEl.createEl('button', {
text: buttonText,
});
button.style.marginTop = '20px';
button.classList.add('quiz-button');
button.addEventListener('click', () => this.toggleAnswer());
if (this.settings.alignment === 'center') {
contentEl.style.textAlign = 'center';
} else {
contentEl.style.textAlign = 'left';
}
contentEl.classList.remove('quiz-align-left', 'quiz-align-center');
contentEl.classList.add(
this.settings.alignment === 'center' ? 'quiz-align-center' : 'quiz-align-left'
);
}
renderQuestion(question: string, questionContainer: HTMLElement) {
this.component.load();

27
styles.css
View file

@ -1,8 +1,25 @@
/*
.quiz-blur {
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.3);
}
This CSS file will be included with your plugin, and
available in the app when your plugin is enabled.
.quiz-no-blur {
backdrop-filter: none;
background-color: transparent;
}
If your plugin does not need CSS, delete this file.
.quiz-progress {
margin-bottom: 20px;
}
*/
.quiz-button {
margin-top: 20px;
}
.quiz-align-left {
text-align: left;
}
.quiz-align-center {
text-align: center;
}