Add "Remove" button to Event and Campaign Admin Edit UI to remove an existing image via client side code

[mgmccarthy]

Please read Issue #338 for the back story on this Issue:

The button should be placed by the image:

The mechanisam for removel should use "javascript magic" to make an async request to the respective controller (Admin.Controllers.EventController or Admin.Controllers.CampaignCotroller) that will in turn invoke a call to IImageService's DeleteImageAsync method to delete the image.

A new controller action method will need to written for each controller and then invoked by the client side code.

[HamidMosalla]

Working on it.

[tonysurma]

Thank you @HamidMosalla. If you accept our invitation to the repository I can assign it to you for tracking. Thanks again.

[HamidMosalla]

@tonysurma Sure, @mgmccarthy The user interface is a little dry in my opinion, I want to add three components to the project if it's allright, spin.js for AJAX loading stuff, BlockUI that I use in conjunction with spinjs and pnotify for handling notifications, if we have something like this in the project and I'm not aware of it, please let me know.

[mgmccarthy]

@HamidMosalla I know nothing about javascript nor am I versed in any of the myriad of frameworks out there that are built on top of it. I do know there is some use of knockout.js on pages where we need to dynamically load things (an example would be loading a list skills required for a task). So I'm not too sure if we can do what this Issue asks for by using knockout or not.

before I say ok to adding these frameworks...

cc @MisterJames @tonysurma @dpaquette @BillWagner @stevejgordon

I know we want to at least have an idea of what other frameworks are before we add them to the project. Does anyone know of/have experience with any of the the frameworks @HamidMosalla mentioned?

[HamidMosalla]

@mgmccarthy @tonysurma I implemented delete image but I don't know if that's exactly what you want: I've changed the place of the image label and put it in a panel header instead, also the button for delete image will appear when user hovered on the image, with the image overlayed:

The CSS codes are temporarily placed on the page, I change it once I know how should I continue with this, I also wanted to discuss my use of JavaScript modules, please refer me to a contributor who is an authority on JavaScript, I use JavaScript revealing module pattern, and I separate my js files based on Area/Controller/Action that it has been used, this way I know where to look for when I want to change something, and we can use module loaders (system.js) which we have in the project, also I polish the UI some more once we reached a decision on the proposed components.

[tonysurma]

@HamidMosalla functionality and ux wise this looks great to me! I worry a little bit about there being no affordance to know the delete will appear when you mouse over but that is super minor.

@dpaquette @MisterJames can you take a look at this PR? Thanks again @HamidMosalla

[HamidMosalla]

@tonysurma Regarding the visual clue for the delete button, if you have any suggestion tell me and I implement it, @dpaquette @MisterJames I'm waiting on your opinion about the UI components.

[tonysurma]

@HamidMosalla I will look for other examples but have no ideas for now :(

From my perspective we are good to merge this in after you get thoughts from @dpaquette or @MisterJames . Thanks again