From 50fc47e6e387c3b278526ef773badf63913389d6 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 6 Jan 2023 16:59:54 +1100
Subject: Add settings modal

Add saving, loading, default vals, and device-detection, to store.ts.
Add setting for hiding minor tick labels.
---
 src/App.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index cbd6825..70cd390 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
 		<icon-button :size="45" :style="buttonStyles">
 			<help-icon/>
 		</icon-button>
-		<icon-button :size="45" :style="buttonStyles">
+		<icon-button :size="45" :style="buttonStyles" @click="settingsOpen = true" title="Show settings">
 			<settings-icon/>
 		</icon-button>
 		<icon-button :size="45" :style="buttonStyles" @click="onTimelineAdd" title="Add a timeline">
@@ -37,6 +37,9 @@
 	<transition name="fade">
 		<info-modal v-if="infoModalData != null" :eventInfo="infoModalData" @close="infoModalData = null"/>
 	</transition>
+	<transition name="fade">
+		<settings-modal v-if="settingsOpen" @close="settingsOpen = false"/>
+	</transition>
 </div>
 </template>
 
@@ -47,6 +50,7 @@ import TimeLine from './components/TimeLine.vue';
 import BaseLine from './components/BaseLine.vue';
 import InfoModal from './components/InfoModal.vue';
 import SearchModal from './components/SearchModal.vue';
+import SettingsModal from './components/SettingsModal.vue';
 import IconButton from './components/IconButton.vue';
 // Icons
 import HelpIcon from './components/icon/HelpIcon.vue';
@@ -314,6 +318,9 @@ function onSearch(event: HistEvent){
 	timelineTargets.value.splice(timelineIdx, 1, [event, !oldFlag[1]]);
 }
 
+// For settings modal
+const settingsOpen = ref(false);
+
 // For resize handling
 let lastResizeHdlrTime = 0; // Used to throttle resize handling
 let afterResizeHdlr = 0; // Used to trigger handler after ending a run of resize events
-- 
cgit v1.2.3