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 | |
| parent | 4025995f4c2ccb8a9a7ea1ff8cec6aa0a42c5f57 (diff) | |
Disable timeline-add button upon reaching max
| -rw-r--r-- | src/App.vue | 12 | ||||
| -rw-r--r-- | 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> |