diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-12-29 22:56:11 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-12-29 23:37:37 +1100 |
| commit | 0d27e899cf580a90784a7ac929a027c456ef30b0 (patch) | |
| tree | f6f079db1a56bf52885bbb37a7f2a2d9981fc31b | |
| parent | a3c5a73fae39de296cd05bde1a6853e20f84305a (diff) | |
Adjust event-count-indicator styling
Use solid color, and skip transitions on screen size change
| -rw-r--r-- | src/App.vue | 1 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 7 | ||||
| -rw-r--r-- | src/store.ts | 1 |
3 files changed, 6 insertions, 3 deletions
diff --git a/src/App.vue b/src/App.vue index 31be46d..3de3ac2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -200,6 +200,7 @@ async function onEventDisplay( // Check memory limit displayedEvents.set(timelineId, eventIds); if (eventTree.value.size > EXCESS_EVENTS_THRESHOLD){ + console.log(`INFO: Calling reduceEvents() upon reaching ${eventTree.value.size} events`); reduceEvents(); queriedRanges.forEach((t: DateRangeTree) => t.clear()); } diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index d68cff0..5e52b9c 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -6,7 +6,7 @@ ref="rootRef"> <template v-if="store.showEventCounts"> <div v-for="[tickIdx, count] in tickToCount.entries()" :key="ticks[tickIdx].date.toInt()" - :style="countDivStyles(tickIdx, count)" class="absolute bg-yellow-300/30 animate-fadein"></div> + :style="countDivStyles(tickIdx, count)" class="absolute animate-fadein"></div> </template> <svg :viewBox="`0 0 ${width} ${height}`" class="relative z-10"> <defs> @@ -278,7 +278,7 @@ const ticks = computed((): Tick[] => { let numUnits = getNumDisplayUnits(); let majorUnitSz = availLen.value / numUnits; // Get before-startDate ticks (including start-offset ticks and hidden ticks) - let panUnits = Math.floor(getNumDisplayUnits() * store.scrollRatio); // Potential shift distance upon a pan action + let panUnits = Math.floor(numUnits * store.scrollRatio); // Potential shift distance upon a pan action let date = startDate.value; for (let i = 0; i < panUnits + Math.ceil(startOffset.value); i++){ if (MIN_DATE.equals(date, scale.value)){ @@ -1154,11 +1154,12 @@ function countDivStyles(tickIdx: number, count: number): Record<string,string> { let countLevel = Math.min(Math.ceil(Math.log10(count+1)), 4); let breadth = countLevel * 4 + 4; return { + backgroundColor: store.color.altBg, top: props.vert ? pxOffset + 'px' : (mainlineOffset.value - breadth / 2) + 'px', left: props.vert ? (mainlineOffset.value - breadth / 2) + 'px' : pxOffset + 'px', width: props.vert ? breadth + 'px' : len + 'px', height: props.vert ? len + 'px' : breadth + 'px', - transitionProperty: 'top, left, width, height', + transitionProperty: skipTransition.value ? 'none' : 'top, left, width, height', transitionDuration: store.transitionDuration + 'ms', transitionTimingFunction: 'linear', } diff --git a/src/store.ts b/src/store.ts index d3ece49..8b92c6f 100644 --- a/src/store.ts +++ b/src/store.ts @@ -18,6 +18,7 @@ export const useStore = defineStore('store', { alt: '#fde047', // yellow-300 altDark: '#eab308', // yellow-500 altDark2: '#ca8a04', // yellow-600 + altBg: '#6a5e2e' }; return { tickLen: 16, |