diff options
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 7 | ||||
| -rw-r--r-- | src/components/icon/CloseIcon.vue (renamed from src/components/icon/MinusIcon.vue) | 3 |
3 files changed, 7 insertions, 5 deletions
diff --git a/src/App.vue b/src/App.vue index d3fbd69..f0eb9bb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -19,7 +19,7 @@ <div class="grow min-h-0 flex" :class="{'flex-col': !vert}" :style="{backgroundColor: store.color.bg}" ref="contentAreaRef"> <time-line v-for="(state, idx) in timelines" :key="state.id" - :vert="vert" :initialState="state" :eventTree="eventTree" + :vert="vert" :initialState="state" :closeable="timelines.length > 1" :eventTree="eventTree" class="grow basis-full min-h-0 outline outline-1" @remove="onTimelineRemove(idx)" @state-chg="onTimelineChg($event, idx)" @event-req="onEventReq" @event-display="onEventDisplay($event, idx)"/> diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index fd119be..7d37ca8 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -48,10 +48,10 @@ </div> </div> <!-- Buttons --> - <icon-button :size="30" class="absolute top-2 right-2" + <icon-button v-if="closeable" :size="30" class="absolute top-2 right-2" :style="{color: store.color.text, backgroundColor: store.color.altDark2}" @click="emit('remove')" title="Remove timeline"> - <minus-icon/> + <close-icon/> </icon-button> </div> </template> @@ -61,7 +61,7 @@ import {ref, onMounted, computed, watch, watchEffect, PropType, Ref, shallowRef, // Components import IconButton from './IconButton.vue'; // Icons -import MinusIcon from './icon/MinusIcon.vue'; +import CloseIcon from './icon/CloseIcon.vue'; // Other import {WRITING_MODE_HORZ, MIN_DATE, MAX_DATE, MONTH_SCALE, DAY_SCALE, SCALES, MIN_CAL_YEAR, HistDate, CalDate, stepDate, inDateScale, getScaleRatio, getUnitDiff, getDaysInMonth, @@ -78,6 +78,7 @@ const store = useStore(); // Props + events const props = defineProps({ vert: {type: Boolean, required: true}, + closeable: {type: Boolean, default: true}, initialState: {type: Object as PropType<TimelineState>, required: true}, eventTree: {type: Object as PropType<RBTree<HistEvent>>, required: true}, }); diff --git a/src/components/icon/MinusIcon.vue b/src/components/icon/CloseIcon.vue index d316073..dd68c29 100644 --- a/src/components/icon/MinusIcon.vue +++ b/src/components/icon/CloseIcon.vue @@ -1,6 +1,7 @@ <template> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> - <line x1="5" y1="12" x2="19" y2="12"/> + <line x1="18" y1="6" x2="6" y2="18"/> + <line x1="6" y1="6" x2="18" y2="18"/> </svg> </template> |