customize mood rating labels

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "mood-tracker",
 	"name": "Mood Tracker",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"minAppVersion": "1.0.0",
 	"description": "Track your moods & emotions easily. Visualize tracked history and browse the past entries.",
 	"author": "dartungar",

src/settings/emotionGroupDeleteModal.ts → src/settings/emotionGroup/emotionGroupDeleteModal.ts

@@ -1,5 +1,5 @@
 import { App } from "obsidian";
-import { MoodTrackerSettingsTab } from "./settingsTab";
+import { MoodTrackerSettingsTab } from "../settingsTab";
 import { EmotionGroup } from "src/entities/IEmotionGroup";
 import MoodTrackerPlugin from "src/main";
 import { ConfirmationModal } from "src/common/confirmationModal";

src/settings/moodRatingLabel/MoodRatingLabelsEditComponent.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { EmotionGroup } from "src/entities/IEmotionGroup";
+	import MoodTrackerPlugin from "src/main";
+	import store from "src/store";
+
+	export let closeModalFunc: () => void;
+
+	let plugin: MoodTrackerPlugin;
+
+	store.plugin.subscribe((p) => {
+		plugin = p;
+	});
+
+	function save() {
+		plugin.saveSettings();
+		closeModalFunc();
+	}
+</script>
+
+<div class="edit-mood-labels-modal">
+	<div class="labels-aligned">
+		<div>
+			<label for="veryGood">Very Good</label>
+			<input
+				id="veryGood"
+				type="text"
+				bind:value={plugin.settings.moodRatingLabelDict[5]}
+			/>
+		</div>
+		<div>
+			<label for="good">Good</label>
+			<input
+				id="good"
+				type="text"
+				bind:value={plugin.settings.moodRatingLabelDict[4]}
+			/>
+		</div>
+		<div>
+			<label for="ok">Ok</label>
+			<input
+				id="ok"
+				type="text"
+				bind:value={plugin.settings.moodRatingLabelDict[3]}
+			/>
+		</div>
+		<div>
+			<label for="bad">Bad</label>
+			<input
+				id="bad"
+				type="text"
+				bind:value={plugin.settings.moodRatingLabelDict[2]}
+			/>
+		</div>
+		<div>
+			<label for="veryBad">Very bad</label>
+			<input
+				id="veryBad"
+				type="text"
+				bind:value={plugin.settings.moodRatingLabelDict[1]}
+			/>
+		</div>
+		<div style="margin-top: 8px;">
+			<label for="size"
+				>Label size: {plugin.settings.moodRatingLabelSize} rem</label
+			>
+			<input
+				id="size"
+				type="range"
+				min="0.5"
+				max="5"
+				step="0.5"
+				bind:value={plugin.settings.moodRatingLabelSize}
+			/>
+		</div>
+	</div>
+
+	<div>
+		<div>Preview:</div>
+		<div style="font-size: {plugin.settings.moodRatingLabelSize + 'rem'}">
+			{plugin.settings.moodRatingLabelDict[1]}
+			{plugin.settings.moodRatingLabelDict[2]}
+			{plugin.settings.moodRatingLabelDict[3]}
+			{plugin.settings.moodRatingLabelDict[4]}
+			{plugin.settings.moodRatingLabelDict[5]}
+		</div>
+	</div>
+
+	<div>
+		<button on:click={save}>Save</button>
+	</div>
+</div>
+
+<style>
+	.labels-aligned div {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+</style>

src/settings/moodRatingLabel/moodRatingLabelsEditModal.ts

@@ -0,0 +1,31 @@
+import { App, Modal } from "obsidian";
+import MoodRatingLabelsEditComponent from "./MoodRatingLabelsEditComponent.svelte";
+import MoodTrackerPlugin from "src/main";
+import store from "src/store";
+
+
+
+export class MoodRatingLabelsEditModal extends Modal {
+    component: MoodRatingLabelsEditComponent;
+
+    constructor(private _plugin: MoodTrackerPlugin, app: App) {
+        super(app);
+    }
+
+    onOpen(): void {
+        store.plugin.set(this._plugin);
+
+        this.titleEl.innerText = "Edit mood rating labels";
+
+        this.component = new MoodRatingLabelsEditComponent({
+            target: this.contentEl,
+            props: {
+                closeModalFunc: () => this.close()
+            }
+        });
+    }
+
+    onClose() {
+        this.component.$destroy();
+    }
+}

src/settings/moodTrackerSettings.ts

@@ -6,6 +6,7 @@ export class MoodTrackerSettings {
     folderPath = "";
     emotionGroups: EmotionGroup[] = [];
     moodRatingLabelDict: { [key: number]: string };
+    moodRatingLabelSize: number;
     template: string;
     trackerModalTitle: string;
     useEmotions: boolean;
@@ -21,6 +22,7 @@ export const DEFAULT_SETTINGS: MoodTrackerSettings = {
         4: "🙂",
         5: "😊",
     },
+    moodRatingLabelSize: 3,
     template: "- {{ICON}} {{NOTE}}",
     trackerModalTitle: "How are you feeling?",
     useEmotions: true

src/settings/settingsTab.ts

@@ -7,11 +7,12 @@ import {
 	TFolder,
 } from "obsidian";
 import MoodTrackerPlugin from "src/main";
-import { GenericTextSuggester } from "./fileSuggester";
+import { GenericTextSuggester } from "./folderSetting/fileSuggester";
 import { EmotionGroup } from "src/entities/IEmotionGroup";
-import { MoveDataModal } from "./moveDataModal";
-import { EmotionGroupEditModal } from "./emotionGroupEditModal";
-import { EmotionGroupDeleteModal } from "./emotionGroupDeleteModal";
+import { MoveDataModal } from "./folderSetting/moveDataModal";
+import { EmotionGroupEditModal } from "./emotionGroup/emotionGroupEditModal";
+import { EmotionGroupDeleteModal } from "./emotionGroup/emotionGroupDeleteModal";
+import { MoodRatingLabelsEditModal } from "./moodRatingLabel/moodRatingLabelsEditModal";
 
 export class MoodTrackerSettingsTab extends PluginSettingTab {
 	constructor(private _plugin: MoodTrackerPlugin, app: App) {
@@ -24,9 +25,10 @@ export class MoodTrackerSettingsTab extends PluginSettingTab {
 		containerEl.empty();
 
 		this.addTrackerModalTitleSetting();
-		this.addUseEmotionsSetting();
 		this.addFolderPathSetting();
 		this.addTemplateSetting();
+		this.addMoodRatingLabelsSetting();
+		this.addUseEmotionsSetting();
 		if (this._plugin.settings.useEmotions) {
 			this.addEmotionsSetting();
 		}
@@ -47,21 +49,7 @@ export class MoodTrackerSettingsTab extends PluginSettingTab {
 		})
 	}
 
-	private addUseEmotionsSetting() {
-		const setting = new Setting(this.containerEl);
 
-		setting.setName("Use emotions")
-		setting.setDesc("Track more nuanced emotions in addition to simple mood rating");
-
-		setting.addToggle((input) => {
-			input.setValue(this._plugin.settings.useEmotions)
-			.onChange(async (value) => {
-				this._plugin.settings.useEmotions = value;
-				await this._plugin.saveSettings();
-				this.display();
-			});
-		})
-	}
 
 	// by C.Houmann (https://github.com/chhoumann/quickadd)
 	// TODO: try to implement better one, maybe look outside of obsidian plugins
@@ -126,6 +114,36 @@ export class MoodTrackerSettingsTab extends PluginSettingTab {
 		})
 	}
 
+	private addMoodRatingLabelsSetting() {
+		const setting = new Setting(this.containerEl);
+
+		setting.setName("Mood rating labels")
+		setting.setDesc("Labels to use for mood rating. Used in tracker modal and stats.");
+
+		setting.addButton((button) => {
+			button.setButtonText("Edit")
+			.onClick(async () => {
+				new MoodRatingLabelsEditModal(this._plugin, app).open();
+			})
+		})
+	}
+
+	private addUseEmotionsSetting() {
+		const setting = new Setting(this.containerEl);
+
+		setting.setName("Use emotions")
+		setting.setDesc("Track more nuanced emotions in addition to simple mood rating");
+
+		setting.addToggle((input) => {
+			input.setValue(this._plugin.settings.useEmotions)
+			.onChange(async (value) => {
+				this._plugin.settings.useEmotions = value;
+				await this._plugin.saveSettings();
+				this.display();
+			});
+		})
+	}
+
 	private addEmotionsSetting() {
 		const settingGroupEl = this.containerEl.createEl("div");
 		settingGroupEl.createEl("h4", { text: "Emotions" });

src/stats/StatsChart.svelte

@@ -16,10 +16,7 @@
 		ChartData,
 	} from "chart.js";
 	import { IDayStats } from "src/entities/IDayStats";
-	import {
-		DEFAULT_SETTINGS,
-		MoodTrackerSettings,
-	} from "src/settings/moodTrackerSettings";
+	import MoodTrackerPlugin from "src/main";
 
 	ChartJS.register(
 		Title,
@@ -34,6 +31,7 @@
 	);
 
 	export let data: IDayStats[] = [];
+	export let plugin: MoodTrackerPlugin;
 
 	let chartRef: any;
 
@@ -86,7 +84,7 @@
 					stepSize: 1,
 					callback: function (val: number, _: any) {
 						// TODO: use ones from plugin settings!
-						return DEFAULT_SETTINGS.moodRatingLabelDict[val];
+						return plugin.settings.moodRatingLabelDict[val];
 					},
 				},
 			},

src/stats/statsCodeblockRenderer.ts

@@ -60,6 +60,7 @@ export class StatsCodeblockRenderer {
 			target: containerEl,
 			props: {
 				data: processedData,
+				plugin: this._plugin
 			},
 		});
 

src/statsModal/SelectedDay.svelte

@@ -6,16 +6,7 @@
     export let data: IMoodTrackerEntry[];
     export let dateString: string;
     export let plugin: MoodTrackerPlugin;
-
-
-    // TODO: get dict from settings
-    export let moodRatingDict: { [key: number]: string } = {
-        1: "😨",
-        2: "☹️",
-        3: "😐",
-        4: "🙂",
-        5: "😊",
-    };
+    export let moodRatingDict: { [key: number]: string } = plugin.settings.moodRatingLabelDict;
 
     function getTimeFromDate(date: Date) {
         const hours = date.getHours().toString().padStart(2, '0');

src/statsModal/StatsComponent.svelte

@@ -64,7 +64,7 @@
 </div>
 
 <!-- chart -->
-<StatsChart data={processedData} on:clickChart={onClickChart}/>
+<StatsChart data={processedData} plugin={plugin} on:clickChart={onClickChart}/>
 
 <!-- total stats -->
 <div class="total-stats-container">

src/trackerModal/MoodRating.svelte

@@ -5,6 +5,7 @@
     export let title = '';
     export let rating;
     export let activeRating;
+    export let fontSize;
     
     $: isActive = activeRating === Number(rating);
 
@@ -14,16 +15,15 @@
 	function setRating() {
         dispatch('setRating', {
             rating: Number(rating)
-		});
+		});1
 	}
 </script>
 
-<span class:active="{isActive === true}" title={title} on:click={setRating} on:keypress={setRating}>{emoji}</span>
+<span style="font-size: {fontSize + 'rem'}" class:active="{isActive === true}" title={title} on:click={setRating} on:keypress={setRating}>{emoji}</span>
 
 <style>
     span {
         margin: 5px;
-        font-size: 3rem;
         transition: border 0.2s;
         border-radius: var(--radius-s);
         border: 1px solid;

src/trackerModal/TrackerModal.svelte

@@ -65,34 +65,39 @@
 	<div class="mood-rating-container">
 		<MoodRating
 			emoji={moodRatingLabelDict[1]}
+			fontSize={plugin.settings.moodRatingLabelSize}
 			title="very bad"
 			rating="1"
 			on:setRating={handleSetRating}
 			bind:activeRating={entry.moodRating}
 		/>
 		<MoodRating
 			emoji={moodRatingLabelDict[2]}
+			fontSize={plugin.settings.moodRatingLabelSize}
 			title="bad"
 			rating="2"
 			on:setRating={handleSetRating}
 			bind:activeRating={entry.moodRating}
 		/>
 		<MoodRating
 			emoji={moodRatingLabelDict[3]}
+			fontSize={plugin.settings.moodRatingLabelSize}
 			title="ok"
 			rating="3"
 			on:setRating={handleSetRating}
 			bind:activeRating={entry.moodRating}
 		/>
 		<MoodRating
 			emoji={moodRatingLabelDict[4]}
+			fontSize={plugin.settings.moodRatingLabelSize}
 			title="good"
 			rating="4"
 			on:setRating={handleSetRating}
 			bind:activeRating={entry.moodRating}
 		/>
 		<MoodRating
 			emoji={moodRatingLabelDict[5]}
+			fontSize={plugin.settings.moodRatingLabelSize}
 			title="very good"
 			rating="5"
 			on:setRating={handleSetRating}