added ability to delete items from image menu, looked into reworking ipfs

minor css changes too

src/imageadder.tsx

@@ -61,7 +61,7 @@ export class ImageAdder extends React.Component< ImageAddedProps, ImageAdderStat
 	}
 
 	@bind 
-	private async onFileLoad( file: File, result: ArrayBuffer ) //we add the binaries to the ipfs node then convert it into a blob we can display, when accessing this from a remote gadget you'll need to create a blob since we havent uploaded this as one
+	private async onFileLoad( file: File, result: ArrayBuffer ) 
 	{
 		let res = await this.ipfsNode.add( new Uint8Array( result ) );
 		
@@ -70,6 +70,7 @@ export class ImageAdder extends React.Component< ImageAddedProps, ImageAdderStat
 		const blobData: ArrayBuffer[] = [result]; 
 		const imageBlob = new Blob(blobData);
 		this.props.addImageCallback( URL.createObjectURL(imageBlob) );
+		//this.props.addImageCallback("https://ipfs.io/ipfs/" + res.cid) <- this system is more efficient but slower as it relies on waiting for a return from the ipfs server and that server gets alot of requests
 	}
 
 	@bind

src/main.tsx

@@ -6,7 +6,7 @@ import * as ReactDOM from 'react-dom';
 import { ImageAdder } from './imageadder';
 import * as IPFS from 'ipfs';
 
-class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for items on the menu, basically just a button
+class MenuItem extends React.Component< {displayImage, onClick, deleteSelfCallback}, {}> //class for items on the menu, basically just a button
 {
 	constructor(props)
 	{
@@ -16,9 +16,12 @@ class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for
 	public render()
 	{
 		return(
+			<div className = "imageMenuButtonContainer">
 				<button className = "imageMenuButton" onClick = {this.props.onClick}>
 					<img src = {this.props.displayImage} className = "imageMenuImage"/>
 				</button>
+				<button className = "imageMenuDeleteButton" onClick = {this.props.deleteSelfCallback}>X</button>
+			</div>
 		);
 	}
 }
@@ -73,12 +76,18 @@ class ImageMenu extends React.Component< {}, ImageMenuState> //class for the who
 		this.forceUpdate();
 	}
 
+	public deleteListItem(item: string)
+	{
+		this.state.imageUrls.splice(this.state.imageUrls.indexOf(item), 1);
+		this.forceUpdate();
+	}
+
 	public render()
 	{
 		if (this.imageToDisplay){ //if theres an image then show that, and also a back button
 			return(
 				<div>
-					<button className = "imageDisplayButton" onClick = {() => this.removeImage()}>ᐊ</button>
+					<button className = "imageDisplayBackButton" onClick = {() => this.removeImage()}>ᐊ</button>
 					<div style = {{textAlign: "center"}}>
 						<img className = "displayedImage" src = {this.imageToDisplay}/>	
 					</div>
@@ -95,7 +104,7 @@ class ImageMenu extends React.Component< {}, ImageMenuState> //class for the who
 					};
 					return(
 					<div style = {itemStyle}> 
-						<MenuItem displayImage = {image} onClick = {() => this.displayImage(image)}/>
+						<MenuItem displayImage = {image} onClick = {() => this.displayImage(image)} deleteSelfCallback = {() => this.deleteListItem(image)}/>
 					</div> 
 					);
 				});
@@ -183,7 +192,7 @@ renderAardvarkRoot( "root", <MyGadget/> );
 //DONT FORGET TO RUN NPM START AAAAAAAAAAAAAAAAAAAA YOU ALWAYS FORGETTT
 /*
 todo:
-look into using ipfs for images
+add ability for remote users?
 look into using avmodel to create pop-up images
 
 

src/styles.css

@@ -4,9 +4,10 @@ body, html
 	height: 100%;
 	overflow: hidden;
 }
+
 button{
 	background-color: transparent;
-	border: 3px solid black;
+	border: border: 1px solid black;
 }
 
 .Button 
@@ -59,6 +60,7 @@ button{
 
 .imageMenuDeleteButton{
 	font-size: 2rem;
+	background-color: transparent;
 }
 
 .imageMenuImage{
@@ -82,18 +84,32 @@ button{
 	text-align: center;
 }
 
-.imageDisplayButton{
+.imageDisplayBackButton{
 	font-size: 3rem;
+	background-color: transparent;
+}
+
+.imageDisplayBackButton:hover{
+	background-color: rgba(128, 128, 128, 0.234);
+}
+
+.imageMenuDeleteButton:hover{
+	background-color: rgba(128, 128, 128, 0.234);
 }
 
 #noImageText{
 	font-size: 3rem;
-	color: grey;
+	background-color: transparent;
-	background-color: white;
 	margin: 0 auto;
+	border: 1px solid black
 }
 
 #uploadButton{
 	font-size: 3rem;
 	margin-top: 5vh;
+	background-color: transparent;
+}
+
+#uploadButton:hover{
+	background-color: rgba(128, 128, 128, 0.234);
 }