Merge lp:~mttronchetti/novacut/bin into lp:novacut

[Matteo Ronchetti]

I did some improvements related to the ex history menu:
1)Calling it history was a bad idea so I removed history name and I've replaced it with a bin icon.In my opinion is easy to understand what this icon stands for so it is good.The small problem is that I have drawn the icon so it is OK but nothing amazing but easy to understand
2)I have made the bin menu looking like this:
      if there aren't removed projects display a simple description of the menu as suggested in this bug https://bugs.launchpad.net/novacut/+bug/1023766
      if there are less than 5 projects show them
      if there are more than 5 projects show the first 5 and also a real time search bar(really cool)
3)To make more understandable where removed projects go I added an animation
4)The small cross that allows you to remove projects now shows you that it is clickable by changing its transparency on mouse over
5)The menu is already shown by onmouseover but I have improved usability using an invisible div that makes easier to move the mouse from the bin icon to the menu.In my opinion it is better than open the menu with a click

I' m very proud of my work but if you don't agree with something tell it to me so we can talk about this and improve novacut :P

P.S. I have done some usability tests with my sister and they went good

[lp:~mttronchetti/novacut/bin]

283. By Matteo Ronchetti on 2012-07-16

small bugfix

[Jason Gerard DeRose (jderose)]

I love the new feature. You just need to fix the needless chmod changes, please, and then I'll merge this.

just chmod +x on the scripts you see in the diff, and then commit.

review: Needs Fixing

[lp:~mttronchetti/novacut/bin]

284. By Matteo Ronchetti on 2012-07-16

fix execute permissions

[Jason Gerard DeRose (jderose)]

Looks great, thanks!

A lovely feature that I'm sure will be a crowd pleaser :)

review: Approve

=== modified file 'gen-random-project.py' (properties changed: +x to -x)
=== added file 'ui/bin2.png'
Binary files ui/bin2.png	1970-01-01 00:00:00 +0000 and ui/bin2.png	2012-07-16 17:50:27 +0000 differ
=== modified file 'ui/projects.html'
--- ui/projects.html	2012-06-19 16:57:22 +0000
+++ ui/projects.html	2012-07-16 17:50:27 +0000
@@ -15,22 +15,38 @@
 		ev.dataTransfer.effectAllowed = 'move';
 	}
 	function enter(ev){
-		ev.target.setAttribute("style","background-color: rgba(255,255,255,0.15); height: 2000px;width = 2000px;");
+	        ev.preventDefault();
+		//ev.target.setAttribute("style","cursor: ;");
 		return false;
 	}
 	function leave(ev){
-		ev.target.setAttribute("style","height: 2000px;width = 2000px");
 		return false;
 	}
 	function d(ev){
 	        ev.preventDefault();
-		ev.target.setAttribute("style","height: 2000px;width = 2000px;");
 		var data=ev.dataTransfer.getData("Text");
 		Hub.send('sos_project', data);
 		element = document.getElementById(data);
 		element.parentNode.removeChild(element);
 		var doc = novacut.get_sync(data)		
 		UI.add_item(data,doc.title,doc.time,countFiles(data));
+		var old = UI.removed.length;
+		for(var b in UI.removed){//remove the project from the list
+			if(UI.removed[b][0] == data){
+				UI.removed.splice(b,1);
+				break;
+			}
+		}
+		if(UI.removed.length == 0)document.getElementById("cont").innerHTML=UI.binDesc;
+		else if(UI.removed.length > UI.binMax)UI.add_history(UI.removed[UI.binMax-1][0],UI.removed[UI.binMax-1][1],UI.removed[UI.binMax-1][2],UI.removed[UI.binMax-1][3]);
+		if(UI.removed.length == UI.binMax){
+			document.getElementById("cont").innerHTML="";
+			document.getElementById("list").innerHTML="";
+			for(var b = 0;b<UI.binMax;b++){
+				var a = UI.removed[b];
+				UI.add_history(a[0],a[1],a[2],a[3]);
+			}
+		}
 		return false;
 	}
 	function over(ev){
@@ -48,6 +64,15 @@
 	cursor: default;
 }
 
+#menu img{
+width: 31px;
+margin-top: -7px;
+margin-right: -8px;
+-webkit-animation-duration: .8s;
+    -webkit-animation-iteration-count: 1;
+    -webkit-animation-timing-function: linear;
+
+}
 #menu li{
         float: left;
         padding: 0 0 10px 0;
@@ -57,48 +82,79 @@
 #menu li:hover > a{
         color: #fafafa;
 }
-#menu li:hover > ul{
+#menu li:hover > #bi{
         display: block;
 }
 
-#menu ul{ /*container*/
-    min-width: 320px;
-    min-height: 26px;
-    list-style: none;
-    margin: 0px -269px;
-    padding: 4px;
-    display: none;
-    position: absolute;
-    top: 35px;
-    left: 0;
-    z-index: 99999;
-    background: #444;
-    border-radius: 10px;
-    box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-}
-#menu ul li{ /* projects*/
+#bi{ /*container*/
+	min-width: 320px;
+	min-height: 26px;
+	list-style: none;
+	margin: 0px -302px;
+	padding: 4px;
+	display: none;
+	position: absolute;
+	top: 39px;
+	left: 0;
+	z-index: 99999;
+	background: -webkit-linear-gradient(top,rgb(87,87,87),rgb(65,65,65));
+	border-radius: 10px;
+	box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
+}
+
+#menu input{
+	width: 282px;
+	margin: 6px 3px 2px 5px;
+	border-radius: 15px;
+	background: -webkit-linear-gradient(top,#E6E6E6,#FAFAFA);
+	border: solid 1px rgba(0, 0, 0, 0.72);
+	box-shadow: none;
+	padding-left: 28px;
+	color: black;
+}
+
+#lens{
+margin-left: -313px;
+margin-bottom: -11px;
+}
+#menu ul ul li{ /* projects*/
     float: none;
     margin: 10px;
     padding: 0;
     display: block;
     cursor: move;
 }
-#menu ul:after{
-    content: '';
-    position: absolute;
-    left: 284px;
-    top: -15px;
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 15px solid;
-}
 
 #menu ul:after{
     border-bottom-color: #444;
 }
 
+.project{
+-webkit-animation-duration: 0.3s;
+    -webkit-animation-iteration-count: 1;
+    -webkit-animation-timing-function: cubic-bezier(0.4,0,0.8,1);
+}
+
+.project img{
+opacity: 0.7;
+}
+
+.project img:hover{
+opacity: 1;
+}
+
+#cont p{
+margin: 5px;
+margin-left: 7px;
+text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+}
+
+#inv{/*invisible div used to make bin menu easier to use*/
+height:60px;
+width:300px;
+margin-top:-60px;
+}
+
 	</style>
     </head>
     <body>
@@ -107,11 +163,15 @@
                 <input placeholder="New project name" type="text" class="grid_4" autofocus>
                 <button class="grid_4" disabled>Create Project</button>
                 <ul id="menu"><li>
-                <a>History</a>
+                <img src="bin2.png" class="ico" id="ico"/>
+		<ul id="bi">
+		<div id="inv"></div>
+		<div id="cont"></div>
   		<ul id="list"></ul>
+		</ul>
 		</li></ul>
             </div>
         </form>
-<ul style="height: 200px;width = 200px;" id="projects" ondragenter="enter(event)" ondragleave="leave(event)" ondrop="d(event)" ondragover="over(event);"></ul>
+<ul style="height: 800px;width = 800px;" id="projects" ondragenter="enter(event)" ondragleave="leave(event)" ondrop="d(event)" ondragover="over(event);"></ul>
     </body>
 </html>

=== modified file 'ui/projects.js'
--- ui/projects.js	2012-06-19 16:57:22 +0000
+++ ui/projects.js	2012-07-16 17:50:27 +0000
@@ -1,6 +1,5 @@
 "use strict";
 
-
 function open_project(project_id) {
     window.location.assign('cutter.html#' + project_id); 
 }
@@ -16,24 +15,47 @@
 	return filecount;
 }
 
+function getOffset( el ) {//get the coordinates of an element
+    var _x = 0;
+    var _y = 0;
+    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
+        _x += el.offsetLeft - el.scrollLeft;
+        _y += el.offsetTop - el.scrollTop;
+        el = el.offsetParent;
+    }
+    return { y: _y, x: _x };
+}
+
+function generateAnimation(x,y){//generate the animation for the elimination of a project
+	var keyframeprefix = "-webkit-";
+	var keyframes = '@' + keyframeprefix + 'keyframes arg { '+'0% {' + keyframeprefix + 'transform:scale(1)}'+'100% {' + keyframeprefix + 'transform:translatex('+x+'px) translatey('+y+'px) scale(0.001)}'+'}';
+	var s = document.createElement( 'style' );
+	s.innerHTML = keyframes;
+	document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+}
+
 var UI = {
     init: function() {
         UI.form = $('new_project');
         UI.input = UI.form.getElementsByTagName('input')[0];
         UI.button = UI.form.getElementsByTagName('button')[0];
-        //UI.project = new Project(novacut);
-        //UI.items = new Items('projects');
         
         UI.form.onsubmit = UI.on_submit;
         UI.input.oninput = UI.on_input;
         
 	UI.hist = document.getElementById('list');
 	UI.proj = document.getElementById('projects');
+
+
+	UI.binDesc ="<p>Here you can find your removed projects<br>Click on <img style=\"width:13px;\" src=\"delete.png\"></img>&nbsp;&nbsp;&nbsp;to remove a project<br>Drag a project out of here to restore it</p>";
+	UI.binMax = 5;
+	UI.binSearch = "<input id=\"s\" onkeyup=\"UI.Search()\"><img id=\"lens\" src=\"search.png\"></img></input>";
+
+	UI.removed = new Array();
         UI.load_items();
     },
 
     load_items: function() {
-	//UI.add_history("qwe","nome",3333,3);
         console.log('load_items');
         novacut.view(UI.on_items, 'project', 'title');
     },
@@ -42,18 +64,41 @@
         var rows = req.read().rows;
         console.log(rows.length);
 	for(var b in rows){
-		var a = rows[b]
-		var pdb = new couch.Database("novacut-0-" + a.id.toLowerCase());
-		try{
-		    var filecount = pdb.view_sync('doc', 'type', {key: 'dmedia/file'}).rows[0].value;
-		}
-		catch(e){
-		    var filecount = 0;
-		}
-		var doc = novacut.get_sync(a.id)
+		var a = rows[b];
+		var filecount = countFiles(a.id);
+		var doc = novacut.get_sync(a.id);
 		if(!doc.isdeleted) UI.add_item(a.id,a.key,a.value,filecount);
-		else UI.add_history(a.id,a.key,a.value,filecount);
+		else UI.removed.push(Array(a.id,a.key,a.value,filecount));
 	}
+	if(UI.removed.length == 0){
+		document.getElementById("cont").innerHTML=UI.binDesc;	
+	}else if(UI.removed.length <= UI.binMax){
+		for(var b in UI.removed){
+			var a = UI.removed[b];
+			UI.add_history(a[0],a[1],a[2],a[3]);
+		}
+
+	}else{
+		document.getElementById("cont").innerHTML = UI.binSearch;
+		for(var b = 0;b<UI.binMax;b++){
+			var a = UI.removed[b];
+			UI.add_history(a[0],a[1],a[2],a[3]);
+		}
+	} 
+    },
+
+    Search: function(){
+	var text = document.getElementById("s").value;
+	UI.hist.innerHTML = "";
+	var count = 0;
+	for(var b in UI.removed){
+		var a = UI.removed[b];
+		if(a[1].indexOf(text) != -1){
+			count++;
+			UI.add_history(a[0],a[1],a[2],a[3]);
+			if(count == UI.binMax)break;
+		}
+	} 
     },
 
     add_history: function(id,name,date,filecount){
@@ -80,7 +125,6 @@
                 li.appendChild(info);
 		UI.hist.appendChild(li);
     },
-
     add_item: function(id,name,date,filecount) {
                 var li = $el('li', {'class': 'project', 'id': id});
                 var thumb = $el('div', {'class': 'thumbnail'});
@@ -105,10 +149,18 @@
 		del.setAttribute('src', 'delete.png');
 		del.setAttribute('align', 'right');
 		del.onclick = function(){
-		    this.parentNode.parentNode.removeChild(this.parentNode);
+   		    var pos = getOffset(this.parentNode);
+		    var end = getOffset( document.getElementById("ico"));
+		    generateAnimation(end.x-pos.x,end.y-pos.y-30);
+		    this.parentNode.style.webkitAnimationName = "arg";
+		    var s = this;
+		    setTimeout(function(){s.parentNode.parentNode.removeChild(s.parentNode)},320,s);
  		    Hub.send('delete_project', id)
 		    var doc = novacut.get_sync(id)
-		    UI.add_history(id,doc.title,doc.time,countFiles(id));
+		    UI.removed.push(Array(id,doc.title,doc.time,countFiles(id)));
+		    document.getElementById("cont").innerHTML = "";
+		    if (UI.removed.length > UI.binMax) document.getElementById("cont").innerHTML = UI.binSearch;
+		    else UI.add_history(id,doc.title,doc.time,countFiles(id));
 		}
 		li.appendChild(del);
                 thumb.onclick = function() {

=== added file 'ui/search.png'
Binary files ui/search.png	1970-01-01 00:00:00 +0000 and ui/search.png	2012-07-16 17:50:27 +0000 differ