mirror of
https://github.com/guicattani/obsidian-countdown-to.git
synced 2026-07-22 05:42:39 +00:00
Improve settings examples, add specific namespace
Add colorpicker to trail and bar color Add headings Fix error where bar type was set to 'forward' and that wasn't valid on first boot, making setting blank Fix examples using old custom format (parenthesis) Fix container namespaced class
This commit is contained in:
Guilherme Cattani
parent
ccac8c0e2b
commit
0c59c1143e
3 changed files with 54 additions and 53 deletions
|
|
@ -43,7 +43,7 @@ endDate: 2025-04-11T14:00:00
|
|||
type: Circle
|
||||
color: #ff5722
|
||||
trailColor: #f5f5f5
|
||||
infoFormat: {percent}% complete - {remaining} until {end(LLL d, yyyy)}
|
||||
infoFormat: {percent}% complete - {remaining} until {end:LLL d, yyyy}
|
||||
updateInRealTime: true
|
||||
updateInterval: 30
|
||||
```
|
||||
|
|
|
|||
90
main.ts
90
main.ts
|
|
@ -17,7 +17,7 @@ const DEFAULT_SETTINGS: ProgressBarSettings = {
|
|||
defaultBarColor: '#4CAF50',
|
||||
defaultTrailColor: '#e0e0e0',
|
||||
defaultBarType: 'Line',
|
||||
defaultProgressType: 'forward',
|
||||
defaultProgressType: 'Forward',
|
||||
defaultOnCompleteText: '{title} is done!',
|
||||
defaultInfoFormat: '{percent}% - {remaining} remaining',
|
||||
defaultUpdateInRealTime: false,
|
||||
|
|
@ -62,14 +62,14 @@ class LuxonFormatHelpModal extends Modal {
|
|||
contentEl.createEl('a', { href: 'https://moment.github.io/luxon/#/formatting?id=table-of-tokens', text: 'Luxon Formatting Reference' });
|
||||
|
||||
contentEl.createEl('p', { text: 'For durations the only tokens that are supported are for days, hours, minutes and seconds:' });
|
||||
luxonList.createEl('li', { text: '{remaining(format)} - Format remaining time' });
|
||||
luxonList.createEl('li', { text: '{elapsed(format)} - Format elapsed time' });
|
||||
luxonList.createEl('li', { text: '{total(format)} - Format total duration' });
|
||||
luxonList.createEl('li', { text: '{remaining:format} - Format remaining time' });
|
||||
luxonList.createEl('li', { text: '{elapsed:format} - Format elapsed time' });
|
||||
luxonList.createEl('li', { text: '{total:format} - Format total duration' });
|
||||
|
||||
contentEl.createEl('h3', { text: 'Examples' });
|
||||
const examplesList = contentEl.createEl('ul');
|
||||
examplesList.createEl('li', { text: '{percent}% complete - {remaining} left' });
|
||||
examplesList.createEl('li', { text: 'Started on {start(LLL d)}, ends on {end(LLL d, yyyy)}' });
|
||||
examplesList.createEl('li', { text: 'Started on {start:LLL d}, ends on {end:LLL d, yyyy}' });
|
||||
examplesList.createEl('li', { text: '{elapsed} elapsed out of {total} total' });
|
||||
|
||||
contentEl.createEl('h3', { text: 'Common Luxon Formats' });
|
||||
|
|
@ -109,6 +109,7 @@ class ProgressBarSettingTab extends PluginSettingTab {
|
|||
containerEl.empty();
|
||||
containerEl.createEl('h2', { text: 'Countdown To Settings' });
|
||||
|
||||
new Setting(containerEl).setName('Bar types').setHeading();
|
||||
new Setting(containerEl)
|
||||
.setName('Default bar type')
|
||||
.setDesc('Default type of progress bar to display')
|
||||
|
|
@ -135,28 +136,33 @@ class ProgressBarSettingTab extends PluginSettingTab {
|
|||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Update in real-time')
|
||||
.setDesc('Update progress bars according to the update interval')
|
||||
.addToggle(toggle => toggle
|
||||
.setValue(this.plugin.settings.defaultUpdateInRealTime)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultUpdateInRealTime = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
new Setting(containerEl).setName('Real time update').setHeading();
|
||||
new Setting(containerEl)
|
||||
.setName('Update in real-time')
|
||||
.setDesc('Update progress bars according to the update interval')
|
||||
.addToggle(toggle => toggle
|
||||
.setValue(this.plugin.settings.defaultUpdateInRealTime)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultUpdateInRealTime = value;
|
||||
await this.plugin.saveSettings();
|
||||
this.display();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Update interval')
|
||||
.setDesc('How often to update the progress bars (in seconds). This will affect performance.')
|
||||
.addSlider(slider => slider
|
||||
.setLimits(0.5, 20, 0.5)
|
||||
.setValue(this.plugin.settings.defaultUpdateIntervalSeconds)
|
||||
.setDynamicTooltip()
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultUpdateIntervalSeconds = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
if (this.plugin.settings.defaultUpdateInRealTime) {
|
||||
new Setting(containerEl)
|
||||
.setName('Update interval')
|
||||
.setDesc('How often to update the progress bars (in seconds). This will affect performance.')
|
||||
.addSlider(slider => slider
|
||||
.setLimits(0.5, 20, 0.5)
|
||||
.setValue(this.plugin.settings.defaultUpdateIntervalSeconds)
|
||||
.setDynamicTooltip()
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultUpdateIntervalSeconds = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
}
|
||||
|
||||
new Setting(containerEl).setName('Text').setHeading();
|
||||
new Setting(containerEl)
|
||||
.setName('Default info format')
|
||||
.setDesc('Default format for the info text. Uses Luxon formatting (See format help button for a quick reference).')
|
||||
|
|
@ -174,18 +180,7 @@ class ProgressBarSettingTab extends PluginSettingTab {
|
|||
.onClick(() => {
|
||||
new LuxonFormatHelpModal(this.plugin.app).open();
|
||||
});
|
||||
});
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Default bar color')
|
||||
.setDesc('Default color for the progress bar')
|
||||
.addText(text => text
|
||||
.setPlaceholder('#4CAF50')
|
||||
.setValue(this.plugin.settings.defaultBarColor)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultBarColor = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
});
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Default on complete text')
|
||||
|
|
@ -198,16 +193,27 @@ class ProgressBarSettingTab extends PluginSettingTab {
|
|||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
new Setting(containerEl).setName('Colors').setHeading();
|
||||
new Setting(containerEl)
|
||||
.setName('Default bar color')
|
||||
.setDesc('Default color for the progress bar')
|
||||
.addColorPicker(color => color
|
||||
.setValue(this.plugin.settings.defaultBarColor)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultBarColor = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Default trail color')
|
||||
.setDesc('Default trail color for the progress bar (the incomplete part)')
|
||||
.addText(text => text
|
||||
.setPlaceholder('#e0e0e0')
|
||||
.addColorPicker(color => color
|
||||
.setValue(this.plugin.settings.defaultTrailColor)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultTrailColor = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
containerEl.createEl('br');
|
||||
containerEl.createEl('i', { text: 'All settings can be overridden in the markdown code block. If stuck please refer to the ' });
|
||||
containerEl.createEl('a', { href: 'https://github.com/guicattani/countdown-to?tab=readme-ov-file#how-to-use', text: 'how to use guide' });
|
||||
}
|
||||
|
|
@ -232,10 +238,6 @@ export default class ProgressBarPlugin extends Plugin {
|
|||
});
|
||||
}
|
||||
|
||||
onunload() {
|
||||
this.cleanupAllProgressBars();
|
||||
}
|
||||
|
||||
async loadSettings() {
|
||||
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
|
||||
}
|
||||
|
|
@ -280,7 +282,7 @@ export default class ProgressBarPlugin extends Plugin {
|
|||
const params = this.parseProgressBarParams(source);
|
||||
|
||||
el.empty();
|
||||
const containerEl = el.createDiv({ cls: 'countdown-to-container' });
|
||||
const containerEl = el.createDiv({ cls: ['countdown-to-plugin', 'countdown-to-container'] });
|
||||
|
||||
const startDate = DateTime.fromISO(params.startDate);
|
||||
const endDate = DateTime.fromISO(params.endDate);
|
||||
|
|
|
|||
15
styles.css
15
styles.css
|
|
@ -1,18 +1,17 @@
|
|||
.countdown-to-container {
|
||||
position: relative;
|
||||
.countdown-to-plugin.countdown-to-container {
|
||||
margin: 20px 0;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--background-secondary);
|
||||
}
|
||||
|
||||
.progress-bar-title {
|
||||
.countdown-to-plugin .progress-bar-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-bar-info {
|
||||
.countdown-to-plugin .progress-bar-info {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
color: var(--text-muted);
|
||||
|
|
@ -20,13 +19,13 @@
|
|||
}
|
||||
|
||||
/* Circle, SemiCircle and Square need more height */
|
||||
.progress-bar-circle,
|
||||
.progress-bar-semicircle,
|
||||
.progress-bar-square {
|
||||
.countdown-to-plugin .progress-bar-circle,
|
||||
.countdown-to-plugin .progress-bar-semicircle,
|
||||
.countdown-to-plugin .progress-bar-square {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/* Line can stay with the default height */
|
||||
.progress-bar-line {
|
||||
.countdown-to-plugin .progress-bar-line {
|
||||
height: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue