Expose view few changes:

- Implement download button and locate it in expose view
- Style control icons better
- Give control icons tooltip

etemplate/js/expose.js

@@ -364,7 +364,7 @@ function expose (widget)
 					// Gallery Main DIV container
 					var $expose_node = jQuery(document.createElement('div')).attr({id:"blueimp-gallery", class:"blueimp-gallery"});
 					// Create Gallery DOM NODE
-					$expose_node.append('<div class="slides"></div><h3 class="title"></h3><a class="prev">‹</a><a class="next">›</a><a class="close">×</a><a class="play-pause"></a><a class="fullscreen"></a><ol class="indicator"></ol>');
+					$expose_node.append('<div class="slides"></div><h3 class="title"></h3><a class="prev">‹</a><a class="next">›</a><a title="'+ egw().lang('Close') + '" class="close">×</a><a title="'+ egw().lang('Play/Pause') + '"  class="play-pause"></a><a title="'+ egw().lang('Fullscreen') + '" class="fullscreen"></a><a title="'+ egw().lang('Save') +'" class="download"></a><ol class="indicator"></ol>');
 					// Append the gallery Node to DOM
 					$body.append($expose_node);
 				}

etemplate/templates/default/etemplate2.css

@@ -1885,14 +1885,33 @@ span.et2_egw_action_ddHelper_itemsCnt {
 	background: transparent;
 }
 /*Slideshow Play/Pause button*/
-.blueimp-gallery>.play-pause{
-	right: 42px;
-	top: 23px;
+body:last-child .blueimp-gallery>.play-pause, .blueimp-gallery>.play-pause{
+	right: 50px;
+	top: 20px;
+	background-size: 44px 24px;
+	width:24px;
+	height:24px;
 }
 /*fullScreen button*/
 .blueimp-gallery>.fullscreen{
-	right: 75px;
-	top: 25px;
+	right: 85px;
+	top: 20px;
+	background-size: 24px;
+	width:24px;
+	height:24px;
+}
+/* download button*/
+.blueimp-gallery>.download{
+	right: 120px;
+	top: 20px;
+	background: url(images/download.png) 0 0 no-repeat;
+	background-size: 24px;
+	height:24px;
+	width:24px;
+}
+/*close button*/
+.blueimp-gallery>.close{
+	font-size: 40px;
 }
 /*Give room to Carousel indicator when the gallery controls is on*/
 .blueimp-gallery-controls>.slides {

phpgwapi/js/jquery/blueimp/css/blueimp-gallery.css

@@ -166,7 +166,7 @@
 .blueimp-gallery > .fullscreen {
   position: absolute;
   right: 15px;
-  bottom: 30px;
+  bottom: 15px;
   width: 15px;
   height: 15px;
   background: url(../img/fullscreen.png) 0 0 no-repeat;
@@ -174,12 +174,24 @@
   opacity: 0.5;
   display:none;
 }
+.blueimp-gallery > .download {
+  position: absolute;
+  right: 45px;
+  bottom: 15px;
+  width: 15px;
+  height: 15px;
+  background: url(../img/download.png) 0 0 no-repeat;
+  cursor: pointer;
+  opacity: 0.5;
+  display:none;
+}
 .blueimp-gallery > .prev:hover,
 .blueimp-gallery > .next:hover,
 .blueimp-gallery > .close:hover,
 .blueimp-gallery > .title:hover,
 .blueimp-gallery > .play-pause:hover,
-.blueimp-gallery > .fullscreen:hover{
+.blueimp-gallery > .fullscreen:hover,
+.blueimp-gallery > .download:hover{
   color: #fff;
   opacity: 1;
 }
@@ -188,7 +200,8 @@
 .blueimp-gallery-controls > .close,
 .blueimp-gallery-controls > .title,
 .blueimp-gallery-controls > .play-pause,
-.blueimp-gallery-controls > .fullscreen{
+.blueimp-gallery-controls > .fullscreen,
+.blueimp-gallery-controls > .download{
   display: block;
   /* Fix z-index issues (controls behind slide element) on Android: */
   -webkit-transform: translateZ(0);
@@ -209,7 +222,8 @@
 .blueimp-gallery > .next,
 .blueimp-gallery > .close,
 .blueimp-gallery > .play-pause,
-.blueimp-gallery > .fullscreen{
+.blueimp-gallery > .fullscreen,
+.blueimp-gallery > .download{
   -webkit-user-select: none;
    -khtml-user-select: none;
      -moz-user-select: none;

phpgwapi/js/jquery/blueimp/js/blueimp-gallery.js

@@ -93,6 +93,8 @@
             playPauseClass: 'play-pause',
 			// The class fullscreen button control
 			fullscreenClass:'fullscreen',
+			// The class download button control
+			downloadClass:'download',
             // The list object property (or data attribute) with the object type:
             typeProperty: 'type',
             // The list object property (or data attribute) with the object title:
@@ -876,7 +878,21 @@
                 // Click on "fullscreen" control
                 this.preventDefault(event);
                 this.toggleFullscreen();
-            } else if (parent === this.slidesContainer[0]) {
+            }
+			else if (isTarget(options.downloadClass)) {
+				// Click on "download" control
+				if (typeof event.target.download_href != 'undefined')
+				{
+					event.target.href = this.list[this.getIndex()].download_href;
+				}
+				else
+				{
+					event.target.href = this.list[this.getIndex()].href;
+				}
+				
+				if (typeof event.target.download != 'undefined') event.target.download = this.list[this.getIndex()].title;
+			}
+			else if (parent === this.slidesContainer[0]) {
                 // Click on slide background
                 this.preventDefault(event);
                 if (options.closeOnSlideClick) {