diff options
| author | Terry Truong <terry06890@gmail.com> | 2023-01-16 00:18:27 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2023-01-16 00:18:27 +1100 |
| commit | 3e40591c87ad8dab0447408d2de7b41ab98a4f4d (patch) | |
| tree | 53017526b8df912ae41f98e60ae636379a6124b8 /src/App.vue | |
| parent | 4025995f4c2ccb8a9a7ea1ff8cec6aa0a42c5f57 (diff) | |
Disable timeline-add button upon reaching max
Diffstat (limited to 'src/App.vue')
| -rw-r--r-- | src/App.vue | 12 |
1 files changed, 8 insertions, 4 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(); |