From a59095b8f87b470872a692b913e6bc2a8cca759b Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 27 Jun 2022 02:24:27 +1000
Subject: Clean up code in HelpModal and AncestryBar

---
 src/README.md                    |  2 +-
 src/components/AncestryBar.vue   | 17 ++++++++++-------
 src/components/HelpModal.vue     | 26 +++++++++++++++++---------
 src/components/SettingsModal.vue | 10 +++++-----
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/README.md b/src/README.md
index 6bf764c..fe2b055 100644
--- a/src/README.md
+++ b/src/README.md
@@ -4,7 +4,7 @@
 -   components:
     -   Tile.vue:          Displays a tree-of-life node.
     -   TileInfoModal.vue: Modal displaying info about a Tile's node.
-    -   SearchModal.vue:   Modal with a search bar.
+    -   SearchModal.vue:   Modal providing a search bar.
     -   SettingsModal:     Modal displaying configurable settings.
     -   HelpModal.vue:     Modal displaying help info.
     -   AncestryBar.vue:   Displays ancestors of the top-level Tile.
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 0f95d00..7e5e74c 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -1,24 +1,24 @@
 <script lang="ts">
+
 import {defineComponent, PropType} from 'vue';
 import Tile from './Tile.vue'
 import {TolMap, UiOptions} from '../lib';
 import {LayoutNode, LayoutOptions} from '../layout';
 
-// Displays a sequence of nodes, representing ancestors from a tree-of-life root to a currently-active root
 export default defineComponent({
 	props: {
 		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 as PropType<UiOptions>, required: true},
+		tolMap: {type: Object as PropType<TolMap>, required: true},
 	},
 	computed: {
 		imgSz(){
 			return this.uiOpts.ancestryBarBreadth - this.lytOpts.tileSpacing*2 - this.uiOpts.scrollGap;
 		},
-		usedNodes(){ // Childless versions of 'nodes' used to parameterise <tile>
+		dummyNodes(){ // Childless versions of 'nodes' used to parameterise <tile>s
 			return this.nodes.map(n => {
 				let newNode = new LayoutNode(n.name, []);
 				newNode.dims = [this.imgSz, this.imgSz];
@@ -27,13 +27,13 @@ export default defineComponent({
 		},
 		styles(): Record<string,string> {
 			return {
-				overflowX: this.vert ? 'hidden' : 'scroll',
-				overflowY: this.vert ? 'scroll' : 'hidden',
 				// For child layout
 				display: 'flex',
 				flexDirection: this.vert ? 'column' : 'row',
 				gap: this.lytOpts.tileSpacing + 'px',
 				padding: this.lytOpts.tileSpacing + 'px',
+				overflowX: this.vert ? 'hidden' : 'scroll',
+				overflowY: this.vert ? 'scroll' : 'hidden',
 				// Other
 				backgroundColor: this.uiOpts.ancestryBarBgColor,
 				boxShadow: this.uiOpts.shadowNormal,
@@ -41,6 +41,7 @@ export default defineComponent({
 		},
 	},
 	watch: {
+		// Used to scroll to end of bar upon node/screen changes
 		nodes(){
 			setTimeout(() => this.scrollToEnd(), 0); // Without timeout, seems to run before new tiles are added
 		},
@@ -49,18 +50,20 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		// Click events
 		onTileClick(node: LayoutNode){
 			this.$emit('ancestor-click', node);
 		},
 		onInfoIconClick(data: string){
 			this.$emit('info-click', data);
 		},
+		// For converting vertical scroll to horizontal
 		onWheelEvt(evt: WheelEvent){
-			// Possibly convert vertical scroll to horizontal
 			if (!this.vert && Math.abs(evt.deltaX) < Math.abs(evt.deltaY)){
 				this.$el.scrollLeft -= (evt.deltaY > 0 ? -30 : 30);
 			}
 		},
+		// Other
 		scrollToEnd(){
 			if (this.vert){
 				this.$el.scrollTop = this.$el.scrollHeight;
@@ -79,7 +82,7 @@ export default defineComponent({
 
 <template>
 <div :style="styles" @wheel.stop="onWheelEvt">
-	<tile v-for="(node, idx) in usedNodes" :key="node.name" class="shrink-0"
+	<tile v-for="(node, idx) in dummyNodes" :key="node.name" class="shrink-0"
 		:layoutNode="node" :tolMap="tolMap" :nonAbsPos="true" :lytOpts="lytOpts" :uiOpts="uiOpts"
 		@leaf-click="onTileClick(nodes[idx])" @info-click="onInfoIconClick"/>
 </div>
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 8644a26..0c536bc 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -1,16 +1,25 @@
 <script lang="ts">
+
 import {defineComponent, PropType} from 'vue';
-import CloseIcon from './icon/CloseIcon.vue';
 import RButton from './RButton.vue';
+import CloseIcon from './icon/CloseIcon.vue';
 import {UiOptions} from '../lib';
 
-// Displays help information
 export default defineComponent({
 	props: {
 		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
+	computed: {
+		styles(): Record<string,string> {
+			return {
+				backgroundColor: this.uiOpts.bgColorAlt,
+				borderRadius: this.uiOpts.borderRadius + 'px',
+				boxShadow: this.uiOpts.shadowNormal,
+			};
+		},
+	},
 	methods: {
-		onCloseClick(evt: Event){
+		onClose(evt: Event){
 			if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
 				this.$emit('close');
 			}
@@ -20,16 +29,15 @@ export default defineComponent({
 			this.$emit('close');
 		},
 	},
-	components: {CloseIcon, RButton, },
+	components: {RButton, CloseIcon, },
 	emits: ['close', 'start-tutorial', ],
 });
 </script>
 
 <template>
-<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onCloseClick">
-	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
-		bg-stone-50 rounded-md shadow shadow-black">
-		<close-icon @click.stop="onCloseClick" ref="closeIcon"
+<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
+	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-4/5 p-4" :style="styles">
+		<close-icon @click.stop="onClose" ref="closeIcon"
 			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
 		<h1 class="text-center text-xl font-bold mb-2">Help Info</h1>
 		<hr class="mb-4 border-stone-400"/>
@@ -52,7 +60,7 @@ export default defineComponent({
 			in culpa qui officia deserunt mollit anim id
 			est laborum.
 		</div>
-		<r-button class="bg-stone-800 text-white" @click.stop="onStartTutorial">
+		<r-button :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial">
 			Start Tutorial
 		</r-button>
 	</div>
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index f505c99..b09af07 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -26,6 +26,11 @@ export default defineComponent({
 			};
 		},
 	},
+	watch: {
+		sweepLeaves(newVal, oldVal){
+			this.lytOpts.layoutType = newVal ? 'sweep' : 'rect';
+		},
+	},
 	methods: {
 		onClose(evt: Event){
 			if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
@@ -47,11 +52,6 @@ export default defineComponent({
 			this.$emit('setting-chg', setting);
 		},
 	},
-	watch: {
-		sweepLeaves(newVal, oldVal){
-			this.lytOpts.layoutType = newVal ? 'sweep' : 'rect';
-		},
-	},
 	components: {RButton, CloseIcon, },
 	emits: ['close', 'setting-chg', 'reset', ],
 });
-- 
cgit v1.2.3