Reduce degrees-of-variance in options set

Also add size prop to IconButton

6 files changed, 33 insertions, 26 deletions

diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index a5bb1c0..0f95d00 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -15,10 +15,13 @@ export default defineComponent({
 		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	computed: {
+		imgSz(){
+			return this.uiOpts.ancestryBarBreadth - this.lytOpts.tileSpacing*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.uiOpts.ancestryBarImgSz, this.uiOpts.ancestryBarImgSz];
+				newNode.dims = [this.imgSz, this.imgSz];
 				return newNode;
 			});
 		},
@@ -29,8 +32,8 @@ export default defineComponent({
 				// For child layout
 				display: 'flex',
 				flexDirection: this.vert ? 'column' : 'row',
-				gap: this.uiOpts.ancestryTileGap + 'px',
-				padding: this.uiOpts.ancestryTileGap + 'px',
+				gap: this.lytOpts.tileSpacing + 'px',
+				padding: this.lytOpts.tileSpacing + 'px',
 				// Other
 				backgroundColor: this.uiOpts.ancestryBarBgColor,
 				boxShadow: this.uiOpts.shadowNormal,
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 7ce5da4..71dddc3 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -3,14 +3,16 @@ import {defineComponent, PropType} from 'vue';
 
 export default defineComponent({
 	props: {
+		size: {type: Number, default: 36},
 		disabled: {type: Boolean, default: false},
 	},
 });
 </script>
 
 <template>
-<div class="w-9 h-9 p-2 rounded-full hover:cursor-pointer"
-	:class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}">
+<div class="p-2 rounded-full hover:cursor-pointer"
+	:class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}"
+	:style="{width: size + 'px', height: size + 'px', padding: (size / 5) + 'px'}">
 	<slot class="w-full h-full">?</slot>
 </div>
 </template>
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 1a3ef27..a3fbd14 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -24,13 +24,13 @@ export default defineComponent({
 	},
 	computed: {
 		infoIconStyles(): Record<string,string> {
-			let size = this.uiOpts.infoIconSz + 'px';
+			let size = '18px';
 			return {
 				width: size,
 				height: size,
 				minWidth: size,
 				minHeight: size,
-				margin: this.uiOpts.infoIconMargin + 'px',
+				margin: '2px',
 			};
 		},
 		suggDisplayStrings(): [string, string, string][] {
@@ -71,8 +71,8 @@ export default defineComponent({
 			}
 		},
 		onSearchModeChg(){
-			this.uiOpts.jumpToSearchedNode = !this.uiOpts.jumpToSearchedNode;
-			this.$emit('settings-chg', [], ['jumpToSearchedNode']);
+			this.uiOpts.searchJumpMode = !this.uiOpts.searchJumpMode;
+			this.$emit('settings-chg', [], ['searchJumpMode']);
 		},
 		resolveSearch(tolNodeName: string){
 			if (tolNodeName == ''){
@@ -223,7 +223,7 @@ export default defineComponent({
 		</div>
 		<div class="my-auto mx-2 hover:cursor-pointer hover:brightness-75 rounded">
 			<log-in-icon @click.stop="onSearchModeChg" class="block w-8 h-8"
-				:class="uiOpts.jumpToSearchedNode ? 'text-stone-500' : 'text-stone-300'"/>
+				:class="uiOpts.searchJumpMode ? 'text-stone-500' : 'text-stone-300'"/>
 		</div>
 	</div>
 </div>
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 92f4dce..8cebf7c 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -151,7 +151,7 @@ export default defineComponent({
 		<hr class="border-stone-400"/>
 		<div>
 			<label>
-				<input type="checkbox" v-model="uiOpts.jumpToSearchedNode" @change="onUiOptChg('jumpToSearchedNode')"/>
+				<input type="checkbox" v-model="uiOpts.searchJumpMode" @change="onUiOptChg('searchJumpMode')"/>
 				Jump to search result
 			</label>
 		</div>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index df281f5..1559f06 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -102,6 +102,9 @@ export default defineComponent({
 				return this.uiOpts.shadowNormal;
 			}
 		},
+		fontSz(): number {
+			return 0.7 * this.lytOpts.headerSz;
+		},
 		styles(): Record<string,string> {
 			let layoutStyles = {
 				position: 'absolute',
@@ -151,7 +154,7 @@ export default defineComponent({
 				return {
 					// Image (and scrims)
 					backgroundImage: this.tolNode.imgName != null ?
-						'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' +
+						'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%),' +
 							'url(\'/img/' + (this.tolNode.imgName as string).replaceAll('\'', '\\\'') + '\')' :
 						'none',
 					backgroundColor: '#1c1917',
@@ -183,10 +186,10 @@ export default defineComponent({
 				}
 			}
 			return {
-				height: (this.uiOpts.leafHeaderFontSz + this.uiOpts.leafPadding * 2) + 'px',
-				padding: this.uiOpts.leafPadding + 'px',
-				lineHeight: this.uiOpts.leafHeaderFontSz + 'px',
-				fontSize: this.uiOpts.leafHeaderFontSz + 'px',
+				height: (this.fontSz * 1.3) + 'px',
+				padding: this.fontSz * 0.3 + 'px',
+				lineHeight: this.fontSz + 'px',
+				fontSize: this.fontSz + 'px',
 				color: textColor,
 				// For ellipsis
 				overflow: 'hidden',
@@ -220,7 +223,7 @@ export default defineComponent({
 				height: this.lytOpts.headerSz + 'px',
 				borderTopLeftRadius: 'inherit',
 				borderTopRightRadius: 'inherit',
-				backgroundColor: this.uiOpts.bgColorDark,
+				backgroundColor: this.uiOpts.nonleafHeaderColor,
 			};
 			if (this.isOverflownRoot){
 				styles = {
@@ -238,7 +241,7 @@ export default defineComponent({
 		nonleafHeaderTextStyles(): Record<string,string> {
 			return {
 				lineHeight: this.lytOpts.headerSz + 'px',
-				fontSize: this.uiOpts.nonleafHeaderFontSz + 'px',
+				fontSize: this.fontSz + 'px',
 				textAlign: 'center',
 				color: this.uiOpts.textColor,
 				paddingLeft: '5px',
@@ -249,15 +252,14 @@ export default defineComponent({
 			};
 		},
 		infoIconStyles(): Record<string,string> {
-			let size = this.uiOpts.infoIconSz + 'px';
+			let size = (this.lytOpts.headerSz * 0.8) + 'px';
+			let marginSz = (this.lytOpts.headerSz * 0.2) + 'px';
 			return {
 				width: size,
 				height: size,
 				minWidth: size,
 				minHeight: size,
-				margin: this.uiOpts.infoIconMargin + 'px',
-				marginTop: 'auto',
-				marginLeft: 'auto',
+				margin: this.isLeaf ? `auto ${marginSz} ${marginSz} auto` : `auto ${marginSz}`,
 			};
 		},
 		sepSweptAreaStyles(): Record<string,string> {
@@ -446,7 +448,7 @@ export default defineComponent({
 				height: '100%',
 				// Image (and scrims)
 				backgroundImage: (this.tolNode.imgName![idx]! != null) ?
-					'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' +
+					'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%),' +
 						'url(\'/img/' + this.tolNode.imgName![idx]!.replaceAll('\'', '\\\'') + '\')' :
 					'none',
 				backgroundColor: '#1c1917',
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 423a2f5..90ad9a7 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -50,7 +50,7 @@ export default defineComponent({
 		},
 		dummyNode(): LayoutNode {
 			let newNode = new LayoutNode(this.nodeName, []);
-			newNode.dims = [this.uiOpts.infoModalImgSz, this.uiOpts.infoModalImgSz];
+			newNode.dims = [this.lytOpts.maxTileSz, this.lytOpts.maxTileSz];
 			return newNode;
 		},
 	},
@@ -69,8 +69,8 @@ export default defineComponent({
 					'none',
 				backgroundColor: '#1c1917',
 				backgroundSize: 'cover',
-				width: this.uiOpts.infoModalImgSz + 'px',
-				height: this.uiOpts.infoModalImgSz + 'px',
+				width: this.lytOpts.maxTileSz + 'px',
+				height: this.lytOpts.maxTileSz + 'px',
 			};
 		},
 		licenseToUrl(license: string){