aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/AncestryBar.vue50
-rw-r--r--src/components/SearchModal.vue2
-rw-r--r--src/components/TutorialPane.vue25
3 files changed, 22 insertions, 55 deletions
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 66c1b13..8f31900 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -8,57 +8,29 @@ import type {TolMap} from '../tol';
// Displays a sequence of nodes, representing ancestors from a tree-of-life root to a currently-active root
export default defineComponent({
props: {
- // For absolute positioning
- pos: {type: Array as unknown as PropType<[number,number]>, required: true},
- dims: {type: Array as unknown as PropType<[number,number]>, required: true},
- // The ancestors to display
nodes: {type: Array as PropType<LayoutNode[]>, required: true},
+ vert: {type: Boolean, default: false},
// Other
tolMap: {type: Object as PropType<TolMap>, required: true},
lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
uiOpts: {type: Object, required: true},
},
computed: {
- wideArea(){
- return this.dims[0] >= this.dims[1];
- },
- tileSz(){
- return (this.wideArea ? this.dims[1] : this.dims[0]) -
- (this.uiOpts.ancestryTileMargin * 2) - this.uiOpts.scrollGap;
- },
usedNodes(){ // Childless versions of 'nodes' used to parameterise <tile>
return this.nodes.map(n => {
let newNode = new LayoutNode(n.name, []);
- newNode.dims = [this.tileSz, this.tileSz];
+ newNode.dims = [this.uiOpts.ancestryBarImgSz, this.uiOpts.ancestryBarImgSz];
return newNode;
});
},
- overflowing(){
- let len = this.uiOpts.ancestryTileMargin +
- (this.tileSz + this.uiOpts.ancestryTileMargin) * this.nodes.length;
- return len > (this.wideArea ? this.dims[0] : this.dims[1]);
- },
- width(){
- return this.dims[0] + (this.wideArea || this.overflowing ? 0 : -this.uiOpts.scrollGap);
- },
- height(){
- return this.dims[1] + (!this.wideArea || this.overflowing ? 0 : -this.uiOpts.scrollGap);
- },
styles(): Record<string,string> {
return {
- position: 'absolute',
- left: this.pos[0] + 'px',
- top: this.pos[1] + 'px',
- width: this.width + 'px',
- height: this.height + 'px',
- overflowX: this.wideArea ? 'auto' : 'hidden',
- overflowY: this.wideArea ? 'hidden' : 'auto',
- // Extra padding for scrollbar inclusion
- paddingRight: (this.overflowing && !this.wideArea ? this.uiOpts.scrollGap : 0) + 'px',
- paddingBottom: (this.overflowing && this.wideArea ? this.uiOpts.scrollGap : 0) + 'px',
+ overflowX: this.vert ? 'hidden' : 'auto',
+ overflowY: this.vert ? 'auto' : 'hidden',
+ maxHeight: '100vh',
// For child layout
display: 'flex',
- flexDirection: this.wideArea ? 'row' : 'column',
+ flexDirection: this.vert ? 'column' : 'row',
gap: this.uiOpts.ancestryTileMargin + 'px',
padding: this.uiOpts.ancestryTileMargin + 'px',
// Other
@@ -71,7 +43,7 @@ export default defineComponent({
nodes(){
setTimeout(() => this.scrollToEnd(), 0); // Without timeout, seems to run before new tiles are added
},
- wideArea(){
+ vert(){
setTimeout(() => this.scrollToEnd(), 0);
},
},
@@ -84,15 +56,15 @@ export default defineComponent({
},
onWheelEvt(evt: WheelEvent){
// Possibly convert vertical scroll to horizontal
- if (this.wideArea && Math.abs(evt.deltaX) < Math.abs(evt.deltaY)){
+ if (!this.vert && Math.abs(evt.deltaX) < Math.abs(evt.deltaY)){
this.$el.scrollLeft -= (evt.deltaY > 0 ? 30 : -30);
}
},
scrollToEnd(){
- if (this.wideArea){
- this.$el.scrollLeft = this.$el.scrollWidth;
- } else {
+ if (this.vert){
this.$el.scrollTop = this.$el.scrollHeight;
+ } else {
+ this.$el.scrollLeft = this.$el.scrollWidth;
}
},
},
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 35efb55..e5e8596 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -16,7 +16,7 @@ export default defineComponent({
searchHasMoreSuggs: false,
focusedSuggIdx: null as null | number, // Denotes a search-suggestion selected using the arrow keys
pendingSuggReq: 0, // Set via setTimeout() upon a search-suggestion request
- pendingSuggReqUrl: null, // Used by a pendingSuggReq callback to use the latest user input
+ pendingSuggReqUrl: '', // Used by a pendingSuggReq callback to use the latest user input
};
},
props: {
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index c04aeee..d5f681c 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -5,11 +5,10 @@ import {Action} from '../lib';
export default defineComponent({
props: {
- pos: {type: Array as unknown as PropType<[number,number]>, required: true},
- dims: {type: Array as unknown as PropType<[number,number]>, required: true},
uiOpts: {type: Object, required: true},
triggerFlag: {type: Boolean, required: true},
skipWelcome: {type: Boolean, default: false},
+ height: {type: String, default: 'auto'},
},
data(){
return {
@@ -20,13 +19,9 @@ export default defineComponent({
computed: {
styles(): Record<string,string> {
return {
- position: 'absolute',
- left: this.pos[0] + 'px',
- top: this.pos[1] + 'px',
- width: this.dims[0] + 'px',
- height: this.dims[1] + 'px',
backgroundColor: this.uiOpts.tutorialPaneBgColor,
color: this.uiOpts.tutorialPaneTextColor,
+ height: this.height,
};
},
contentStyles(): Record<string,string> {
@@ -98,18 +93,20 @@ export default defineComponent({
</script>
<template>
-<div :style="styles" class="flex flex-col justify-evenly">
- <close-icon @click.stop="onClose"
- class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
+<div :style="styles" class="p-2 flex flex-col justify-between">
+ <div class="flex">
+ <h2 class="text-center mb-2">{{stage == 0 ? 'Welcome' : 'Tutorial'}}</h2>
+ <close-icon @click.stop="onClose"
+ class="block ml-auto w-6 h-6 hover:cursor-pointer"/>
+ </div>
<template v-if="stage == 0">
- <h2 class="text-center">Welcome</h2>
<div :style="contentStyles">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.
</div>
- <div class="w-full flex justify-evenly">
+ <div class="w-full flex justify-evenly mt-2">
<button :style="buttonStyles" class="hover:brightness-125" @click="onStartTutorial">
Start Tutorial
</button>
@@ -119,8 +116,6 @@ export default defineComponent({
</div>
</template>
<template v-else>
- <h2 class="text-center">Tutorial</h2>
- <!-- Text content -->
<div v-if="stage == 1" :style="contentStyles">
Click/touch on the tile to expand it and see it's children. <br/>
A green title means the tile has children. Orange and red mean 100+ or 1000+ children.
@@ -170,7 +165,7 @@ export default defineComponent({
And finally, the help icon provides summarised usage information.
</div>
<!-- Buttons -->
- <div class="w-full flex justify-evenly">
+ <div class="w-full flex justify-evenly mt-2">
<button :style="buttonStyles"
:disabled="stage == 1" :class="stage == 1 ? ['brightness-75'] : ['hover:brightness-125']"
@click="onPrevClick">
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 02:39:31 +0000