Attachment Viewer on Steroids

Ok, maybe not steroids but Dojo and CSS!

Lots of work on the attachment viewer.  Using Dojo, CSS and JavaScript I was able to give the viewer two new view modes with some eye candy in each.  I use CSS to have shadows and a tile mode.  Check out the three screen shots below, I will most likely be posting a video to show how the new views can be used.  Just remember, this is a 100% web based component in the Notes client.  You will notice I have three actions on the attachments – Open, View, and Share – which use the BrowserFunction to provide a custom experience in the rich client – otherwise it just uses the normal web semantics for launching.

I used Dojo for the slide show view.  I use the dijit.layout.StackContainer and then each attachment is placed into a dijit.layout.ContentPane.

For the thumbnail view I use basic CSS to accomplish this.  The two classes, border and thumb, give the experience of them being “thumbnails” and as the mouse moves over the div block it “selects” it with a new background color using the hover tag.

div.border {
    border: 1px solid #A0ACC0;
    height: auto;
    float: left;
    overflow:hidden;
}
div.thumb:hover {
   background-color: #ADD8E6;
   border: 1px solid #FFACC0;
}

Here are some screen shots of the three support view modes:

Film Strip

Slide Show

Thumbnails

Short URL: http://bit.ly/12dsfsW