From b18bc3ff50671e7109bde3d1eabb8276d313863e Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 24 Mar 2022 01:10:37 +1100
Subject: Add info icon

---
 src/components/TileImg.vue | 41 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

(limited to 'src/components/TileImg.vue')

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>
-- 
cgit v1.2.3