new gallery look and feel

apps/gallery/appinfo/info.xml

@@ -2,7 +2,7 @@
 <info>
 	<id>gallery</id>
 	<name>Gallery</name>
-	<version>0.2</version>
+	<version>0.3</version>
 	<licence>AGPL</licence>
 	<author>Bartek Przybylski</author>
 	<require>2</require>

apps/gallery/css/styles.css

@@ -1,12 +1,14 @@
-div#gallery_list { margin: 90pt 20pt; }
+div#gallery_list { margin: 70pt 20pt 0 20pt; }
 div#gallery_list.leftcontent { padding-top: 15pt; margin: 0; position: absolute; bottom:0px; text-align: center; overflow: auto; }
-div.gallery_album_box { width: 200px; text-align: center; border: 0; display: inline-block; margin: 5pt; vertical-align: top; padding: 10px; position: relative; overflow: hidden; color: #999; }
-div.gallery_album_box:hover { color: black; }
-.leftcontent div.gallery_album_box { margin: 5px; }
+div.gallery_album_box { width: 200px; position:relative; text-align: center; border: 0; display: inline-block; margin: 5pt; vertical-align: top; padding: 20px 5px 5px 5px; position: relative; -webkit-transition: color 0.5s ease-in-out; -o-transition: color 0.5s ease-in-out; -moz-transition: color 0.5s ease-in-out;color: #BBB;}
 div.gallery_album_box h1 { font-size: 9pt; font-family: Verdana; }
-div.gallery_album_cover { width: 199px; height: 199px; border: solid 1pt #999; padding: 0; }
-div.gallery_control_overlay { border: 0; position:absolute; right: 10pt; background-color: #333; opacity: 0; padding: 0 5pt; }
+div.gallery_album_decoration { width: 200px; position: absolute; border: 0; height: 20px; top: 20px; text-align:right; vertical-align:middle; background-color: #eee; opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft:7px;}
+div.gallery_album_box:hover { color: black; }
+div.gallery_album_box:hover div.gallery_album_decoration { opacity: 0.7;}
+div.gallery_album_decoration a {padding: 0 4pt; cursor: pointer;}
+div.gallery_album_cover { width: 200px; height: 200px; border: 0; padding: 0; position:relative;}
 div.gallery_album_box:hover div.gallery_control_overlay { opacity:0.5 }
 div.gallery_control_overlay a { color:white; }
 #gallery_images.rightcontent { padding:10px 5px; bottom: 0px; overflow: auto; right:0px}
-
+#scan { position:absolute; right:13.5em; top:0em; }
+#scan #scanprogressbar { position:relative; display:inline-block; width:10em; height:1.5em; top:.4em; }

apps/gallery/js/album_cover.js

@@ -10,6 +10,10 @@ $(document).ready(function() {
       if (targetDiv) {
         $(targetDiv).html('');
         Albums.display(targetDiv);
+        $('#gallery_list').sortable({revert:true});
+        $('.gallery_album_box').each(function(i, e) {
+          $(e).draggable({connectToSortable: '#gallery_list', handle: '.dummy'})
+        });
       } else {
         alert('Error occured: no such layer `gallery_list`');
       }
@@ -37,9 +41,6 @@ var totalAlbums = 0;
 function scanForAlbums() {
   var albumCounter = 0;
   var totalAlbums = 0;
-  $('#notification').text(t('gallery',"Scanning directories"));
-  $("#notification").fadeIn();
-  $("#notification").slideDown();
   $.getJSON('ajax/galleryOp.php?operation=filescan', function(r) {
 
     if (r.status == 'success') {
@@ -48,7 +49,7 @@ function scanForAlbums() {
         $('#notification').text(t('gallery', "No photos found")).fadeIn().slideDown().delay(3000).fadeOut().slideUp();
         return;
       }
-	    $('#notification').text(t('gallery',"Creating thumbnails")+' ... ' + Math.floor((albumCounter/totalAlbums)*100) + "%");
+      $('#scanprogressbar').progressbar({ value: (albumCounter/totalAlbums)*100 }).fadeIn();
       for(var a in r.paths) {
         $.getJSON('ajax/galleryOp.php?operation=partial_create&path='+r.paths[a], function(r) {
 
@@ -57,10 +58,9 @@ function scanForAlbums() {
           }
 
           albumCounter++;
-		  $('#notification').text(t('gallery',"Creating thumbnails")+' ... ' + Math.floor((albumCounter/totalAlbums)*100) + "%");
+          $('#scanprogressbar').progressbar({ value: (albumCounter/totalAlbums)*100 });
           if (albumCounter == totalAlbums) {
-            $("#notification").fadeOut();
-            $("#notification").slideUp();
+            $('#scanprogressbar').fadeOut();
             var targetDiv = document.getElementById('gallery_list');
             if (targetDiv) {
               targetDiv.innerHTML = '';
@@ -78,36 +78,71 @@ function scanForAlbums() {
 }
 
 function galleryRemove(albumName) {
-  if (confirm(t('gallery',"Do you wan't to remove album")+' ' + albumName + "?")) {
-	$.getJSON("ajax/galleryOp.php", {operation: "remove", name: albumName}, function(r) {
-	  if (r.status == "success") {
-		$(".gallery_album_box").filterAttr('data-album',albumName).remove();
-		Albums.remove(albumName);
-	  } else {
-		alert("Error: " + r.cause);
-	  }
-	});
-  }
+  // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
+  $( "#dialog:ui-dialog" ).dialog( "destroy" );
+  $('#albumName', $("#dialog-confirm")).text(albumName);
+
+  $( '#dialog-confirm' ).dialog({
+    resizable: false,
+    height:150,
+    buttons: [{
+        text: t('gallery', 'OK'),
+        click: function() {
+          $.getJSON("ajax/galleryOp.php", {operation: "remove", name: albumName}, function(r) {
+            if (r.status == "success") {
+            $(".gallery_album_box").filterAttr('data-album',albumName).remove();
+              Albums.remove(albumName);
+            } else {
+              alert("Error: " + r.cause);
+            }
+            $('#dialog-confirm').dialog('close');
+          });
+        }},
+        {
+          text: t('gallery', 'Cancel'),
+          click: function() {
+            $( this ).dialog( 'close' );
+        }}]
+  });
 }
 
 function galleryRename(name) {
-  var result = window.prompt(t('gallery',"Input new gallery name"), name);
-  if(result=='' || result==name){
-	return;
-  }
-  if (result) {
-	if (Albums.find(result)) {
-	  alert("Album named '" + result + "' already exists");
-	  return;
-	}
-	$.getJSON("ajax/galleryOp.php", {operation: "rename", oldname: name, newname: result}, function(r) {
-	  if (r.status == "success") {
-		  Albums.rename($(".gallery_album_box").filterAttr('data-album',name), result);
-      } else {
-	    alert("Error: " + r.cause);
-      }
-	});
-	
-  }
+  $('#name', $('#dialog-form')).val(name);
+  $( "#dialog-form" ).dialog({
+        height: 140,
+        width: 350,
+        modal: false,
+        buttons: [{
+            text: t('gallery', 'Change name'),
+            click: function() {
+              var newname = $('#name', $('#dialog-form')).val();
+              if (newname == name || newname == '') {
+                $(this).dialog("close");
+                return;
+              }
+              if (Albums.find(newname)) {
+                alert("Album ", newname, " exists");
+                $(this).dialog("close");
+                return;
+              }
+              $.getJSON("ajax/galleryOp.php", {operation: "rename", oldname: name, newname: newname}, function(r) {
+                if (r.status == "success") {
+                  Albums.rename($(".gallery_album_box").filterAttr('data-album',name), newname);
+                } else {
+                  alert("Error: " + r.cause);
+                }
+                $('#dialog-form').dialog("close");
+              });
+
+            }
+          },
+          {
+            text: t('gallery', 'Cancel'),
+            click: function() {
+              $( this ).dialog( "close" );
+            }
+          }
+        ],
+  });
 }
 

apps/gallery/js/albums.js

@@ -41,16 +41,16 @@ Albums={
   // displays gallery in linear representation
   // on given element, and apply default styles for gallery
   display: function(element) {
-    var displayTemplate = '<div class="gallery_album_box"><div class="gallery_control_overlay"><a href="#" class="rename">rename</a> | <a href="#" class="remove">remove</a></div><a class="view"><div class="gallery_album_cover"></div></a><h1></h1></div></div>';
+    var displayTemplate = '<div class="gallery_album_box"><div class="dummy"></div><a class="view"><div class="gallery_album_cover"></div></a><h1></h1><div class="gallery_album_decoration"><a><img src="img/share.png" title="Share"></a><a class="rename"><img src="img/rename.png" title="Rename"></a><a class="remove"><img src="img/delete.png" title="Delete"></a></div></div>';
     for (var i in Albums.albums) {
       var a = Albums.albums[i];
 	  var local=$(displayTemplate);
 	  local.attr('data-album',a.name);
-	  $(".gallery_control_overlay a.rename", local).click(function(name,event){
+	  $(".gallery_album_decoration a.rename", local).click(function(name,event){
 			event.preventDefault();
 			galleryRename(name);
 		}.bind(null,a.name));
-	  $(".gallery_control_overlay a.remove", local).click(function(name,event){
+	  $(".gallery_album_decoration a.remove", local).click(function(name,event){
 		  event.preventDefault();
 		  galleryRemove(name);
 	  }.bind(null,a.name));
@@ -66,8 +66,9 @@ Albums={
         if (albumMetadata == undefined) {
           return;
         }
-        var x = Math.min(Math.floor((e.layerX - this.offsetLeft)/(this.offsetWidth/albumMetadata.numOfCovers)), albumMetadata.numOfCovers-1);
-        x *= this.offsetWidth-1;
+        var x = Math.floor((e.layerX - this.offsetLeft)/(this.offsetWidth/albumMetadata.numOfCovers));
+        x *= this.offsetWidth;
+        if (x < 0) x=0;
         $(this).css('background-position', -x+'px 0');
       });
       $(element).append(local);

apps/gallery/templates/index.php

@@ -7,8 +7,24 @@ $l = new OC_L10N('gallery');
 
 <div id="notification"><div id="gallery_notification_text">Creating thumbnails</div></div>
 <div id="controls">
-  <input type="button" value="<?php echo $l->t('Rescan');?>" onclick="javascript:scanForAlbums();" />
-  <br/>
+  <div id="scan">
+    <div id="scanprogressbar"></div>
+    <input type="button" value="<?php echo $l->t('Rescan');?>" onclick="javascript:scanForAlbums();" />
+  </div>
 </div>
 <div id="gallery_list">
 </div>
+
+<div id="dialog-confirm" title="<?php echo $l->t('Remove confirmation');?>" style="display: none">
+  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo $l->t('Do you want to remove album');?> <span id="albumName"></span>?</p>
+</div>
+
+<div id="dialog-form" title="<?php echo $l->t('Change album name');?>" style="display:none">
+	<form>
+	<fieldset>
+    <label for="name"><?php echo $l->t('New album name');?></label>
+		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
+	</fieldset>
+	</form>
+</div>
+

apps/gallery/templates/view_album.php

@@ -32,3 +32,16 @@ foreach ($_['photos'] as $a) {
   }
 ?>
 </div>
+
+<div id="dialog-confirm" title="<?php echo $l->t('Remove confirmation');?>" style="display: none">
+  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo $l->t('Do you want to remove album');?> <span id="albumName"></span>?</p>
+</div>
+
+<div id="dialog-form" title="<?php echo $l->t('Change album name');?>" style="display:none">
+	<form>
+	<fieldset>
+    <label for="name"><?php echo $l->t('New album name');?></label>
+		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
+	</fieldset>
+	</form>
+</div>