diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/SettingsModal.vue | 32 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 16 |
2 files changed, 30 insertions, 18 deletions
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index bb82016..3e56373 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -26,17 +26,27 @@ </div> <div class="pb-2" :class="borderBClasses"> <h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Display</h2> - <div class="px-2"> - <label> <input type="checkbox" v-model="store.reqImgs" - @change="onSettingChg('reqImgs')"/> Only show events with images </label> - </div> - <div class="px-2"> - <label> <input type="checkbox" v-model="store.showEventCounts" - @change="onSettingChg('showEventCounts')"/> Show event count indicators </label> - </div> - <div class="px-2"> - <label> <input type="checkbox" v-model="store.showMinorTicks" - @change="onSettingChg('showMinorTicks')"/> Show minor tick labels </label> + <div class="grid grid-cols-2"> + <div class="px-2 col-span-2"> + <label> <input type="checkbox" v-model="store.reqImgs" + @change="onSettingChg('reqImgs')"/> Only events with images </label> + </div> + <div class="px-2"> + <label> <input type="checkbox" v-model="store.showMinorTicks" + @change="onSettingChg('showMinorTicks')"/> Minor tick text </label> + </div> + <div class="px-2"> + <label> <input type="checkbox" v-model="store.showEventLines" + @change="onSettingChg('showEventLines')"/> Event lines </label> + </div> + <div class="px-2"> + <label> <input type="checkbox" v-model="store.showEventCounts" + @change="onSettingChg('showEventCounts')"/> Event density </label> + </div> + <div class="px-2"> + <label> <input type="checkbox" v-model="store.showBaseLine" + @change="onSettingChg('showBaseLine')"/> Baseline </label> + </div> </div> </div> <div v-if="store.touchDevice == false" class="pb-2" :class="borderBClasses"> diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index 56136fd..073261c 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -15,13 +15,15 @@ </linearGradient> </defs> <!-- Event lines (dashed line indicates imprecise start date) --> - <line v-for="id in eventLines.keys()" :key="id" - x1="0" y1="0" :x2="eventLines.get(id)![2]" y2="0.01" - stroke="url('#eventLineGradient')" stroke-width="1px" - :stroke-dasharray="getEventPrecision(idToEvent.get(id)!) <= minorScale ? '' : '16,4'" - :style="eventLineStyles(id)" class="animate-fadein"/> - <!-- Note: With a fully vertical or horizontal line, nothing gets displayed --> - <!-- Note: Can't use :x2="1" with scaling in :style="", as it makes dashed-lines non-uniform --> + <template v-if="store.showEventLines"> + <line v-for="id in eventLines.keys()" :key="id" + x1="0" y1="0" :x2="eventLines.get(id)![2]" y2="0.01" + stroke="url('#eventLineGradient')" stroke-width="1px" + :stroke-dasharray="getEventPrecision(idToEvent.get(id)!) <= minorScale ? '' : '16,4'" + :style="eventLineStyles(id)" class="animate-fadein"/> + <!-- Note: With a fully vertical or horizontal line, nothing gets displayed --> + <!-- Note: Can't use :x2="1" with scaling in :style="", as it makes dashed-lines non-uniform --> + </template> <!-- Main line (unit horizontal line that gets transformed, with extra length to avoid gaps when panning) --> <line :stroke="store.color.alt" stroke-width="2px" x1="-1" y1="0" x2="2" y2="0" :style="mainlineStyles"/> <!-- Tick markers --> |