From 3e40591c87ad8dab0447408d2de7b41ab98a4f4d Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 16 Jan 2023 00:18:27 +1100
Subject: Disable timeline-add button upon reaching max

---
 src/App.vue                   | 12 ++++++++----
 src/components/IconButton.vue |  4 ++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 44b9388..933a36d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,8 @@
 		<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">
+		<icon-button :size="45" :disabled="maxTimelines" :style="buttonStyles"
+			@click="onTimelineAdd" title="Add a timeline">
 			<plus-icon/>
 		</icon-button>
 		<icon-button :size="45" :style="buttonStyles" @click="searchOpen = true" title="Search">
@@ -110,10 +111,13 @@ function onTimelineChg(state: TimelineState, idx: number){
 
 // For timeline addition/removal
 const MIN_TIMELINE_BREADTH = store.mainlineBreadth + store.spacing * 2 + store.eventImgSz + store.eventLabelHeight;
+const maxTimelines = computed(() => {
+	return vert.value && contentWidth.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH
+		|| !vert.value && contentHeight.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH
+});
 function onTimelineAdd(){
-	if (vert.value && contentWidth.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH ||
-		!vert.value && contentHeight.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH){
-		console.log('Reached timeline minimum breadth');
+	if (maxTimelines.value){
+		console.log('Ignored addition of timeline upon reaching max');
 		return;
 	}
 	addTimeline();
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 9357e97..a897c6f 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -1,6 +1,6 @@
 <template>
-<div :style="styles" class="p-2 rounded-full hover:cursor-pointer"
-	:class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}">
+<div :style="styles" class="p-2 rounded-full"
+	:class="{'hover:brightness-125': !disabled, 'brightness-50': disabled, 'hover:cursor-pointer': !disabled}">
 	<slot class="w-full h-full">?</slot>
 </div>
 </template>
-- 
cgit v1.2.3