2 files changed, 42 insertions, 3 deletions
diff --git a/src/components/TileImg.vue b/src/components/TileImg.vue
index be6704c..5a3a2f8 100644
--- a/src/components/TileImg.vue
+++ b/src/components/TileImg.vue
@@ -11,6 +11,7 @@ export default defineComponent({
 	data(){
 		return {
 			highlight: false,
+			infoMouseOver: false,
 		};
 	},
 	computed: {
@@ -19,15 +20,20 @@ export default defineComponent({
 		},
 		styles(): Record<string,string> {
 			return {
-				border: '1px black solid',
+				// Sizing
 				width: this.tileSz + 'px',
 				height: this.tileSz + 'px',
 				minWidth: this.tileSz + 'px',
 				minHeight: this.tileSz + 'px',
+				// Image
 				backgroundImage:
-					'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 40%),' +
+					'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%),' +
 					'url(\'/img/' + this.layoutNode.tolNode.name.replaceAll('\'', '\\\'') + '.png\')',
 				backgroundSize: 'cover',
+				// Child layout
+				display: 'flex',
+				flexDirection: 'column',
+				// Other
 				borderRadius: this.options.borderRadius + 'px',
 				boxShadow: this.highlight ? this.options.shadowHighlight : this.options.shadowNormal,
 			};
@@ -45,6 +51,17 @@ export default defineComponent({
 				whiteSpace: 'nowrap',
 			};
 		},
+		infoIconStyles(): Record<string,string> {
+			return {
+				width: this.options.infoIconSz + 'px',
+				height: this.options.infoIconSz + 'px',
+				marginTop: 'auto',
+				marginBottom: this.options.infoIconPadding + 'px',
+				marginRight: this.options.infoIconPadding + 'px',
+				alignSelf: 'flex-end',
+				color: this.infoMouseOver ? this.options.infoIconHoverColor : this.options.infoIconColor,
+			};
+		},
 	},
 	methods: {
 		onMouseEnter(evt: Event){
@@ -54,13 +71,23 @@ export default defineComponent({
 		},
 		onMouseLeave(evt: Event){
 			if (this.isExpandable){
-				this.highlight = false; }
+				this.highlight = false;
+			}
 		},
 		onClick(evt: Event){
 			if (this.isExpandable){
 				this.highlight = false;
 			}
 		},
+		onInfoMouseEnter(evt: Event){
+			this.infoMouseOver = true;
+		},
+		onInfoMouseLeave(evt: Event){
+			this.infoMouseOver = false;
+		},
+		onInfoClick(evt: Event){
+			console.log('Clicked on info icon: ' + this.layoutNode.tolNode.name);
+		},
 	},
 });
 </script>
@@ -69,5 +96,13 @@ export default defineComponent({
 <div :style="styles" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @click="onClick"
 	:class="isExpandable ? ['hover:cursor-pointer'] : []">
 	<h1 :style="headerStyles">{{layoutNode.tolNode.name}}</h1>
+	<svg :style="infoIconStyles" class="hover:cursor-pointer"
+		@mouseenter="onInfoMouseEnter" @mouseleave="onInfoMouseLeave" @click.stop="onInfoClick"
+		xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		<circle cx="12" cy="12" r="10"/>
+		<line x1="12" y1="16" x2="12" y2="12"/>
+		<line x1="12" y1="8" x2="12.01" y2="8"/>
+	</svg>
 </div>
 </template>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index ed7eb87..d42dd24 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -41,6 +41,10 @@ const defaultComponentOptions = {
 	imgTileFontSz: 15, //px
 	imgTileColor: '#fafaf9',
 	expandableImgTileColor: 'greenyellow', //yellow, greenyellow, turquoise,
+	infoIconSz: 18, //px
+	infoIconPadding: 2, //px
+	infoIconColor: 'rgba(250,250,250,0.3)',
+	infoIconHoverColor: 'white',
 	// For non-leaf tile-group components
 	nonLeafBgColors: ['#44403c', '#57534e'], //tiles at depth N use the Nth color, repeating from the start as needed
 	nonLeafHeaderFontSz: 15, //px