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

[Matteo Ronchetti]

In the trash menu I've changed the search bar because it was too different from the other elements of the ui.
I've also fixed a small problem in the representation of projects inside that menu because before the thumbnails didn't have any margin.
In the top bar I've made the first color of the gradient a little bit lighter because the bar was too dark.
I've also changed how input and buttons look

[lp:~mttronchetti/novacut/grafix]

292. By Matteo Ronchetti on 2012-09-20

some graphics improovments

293. By Matteo Ronchetti on 2012-09-21

added shadow to the top bar and a small explainaton in the bin

294. By Matteo Ronchetti on 2012-09-23

fix quantal problems

[Jason Gerard DeRose (jderose)]

Nice work, Matteo, thanks! And thanks for fixing some of the Quantal rendering issues.

review: Approve

=== added file 'ui/common.css'
--- ui/common.css	1970-01-01 00:00:00 +0000
+++ ui/common.css	2012-09-23 10:31:22 +0000
@@ -0,0 +1,169 @@
+* {
+    margin: 0px;
+    padding: 0px;
+    line-height: 1.5;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
+}
+
+body{
+    background:#333;
+    color:white;
+    overflow:hidden;
+}
+
+video{
+    background:black;
+}
+
+.head {
+    height: 39px;
+    background: -webkit-linear-gradient(top, rgb(62, 30, 72), rgb(34, 5, 42));
+    box-shadow: 0 0 40px rgba(0,0,0,0.55);
+    border-bottom:1px solid #222;
+}
+
+.project {
+    margin: 8px;
+    display: inline-block;
+    background: -webkit-linear-gradient(top, #555, #444);
+    color: white;
+    font-size: 0;
+    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
+    border-radius:3px;
+    border-top:1px solid #666;
+    cursor: default;
+    -webkit-user-select: none;
+    padding:3px !important;
+    padding-top:2px !important;
+    -webkit-animation:appear 50ms ease-in-out 1;
+}
+
+.project.selected {
+    background: -webkit-linear-gradient(top, #8c5159, #555);
+    border-top:1px solid #777;
+    box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.3), 0px 0px 1px 0px #e81f3b;
+}
+
+.project .thumbnail {
+    width: 80px;
+    height: 80px;
+    background-position: center center;
+    background-size: cover;
+    background-color: #222;
+    border-radius: 3px;
+}
+
+.project > div {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.project p {
+    font-size: 14px;
+    padding-left: 5px;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 218px;
+    color: #ddd;
+    box-sizing: border-box !important;
+}
+
+.project p.title {
+    font-weight: bold;
+    color: white;
+}
+
+.darkbar{
+    background: -webkit-linear-gradient(top, #222, #111);
+    border-top: 1px solid #333;
+    text-shadow: 0px -1px rgba(0,0,0,0.6);
+}
+
+.bar{
+    background: -webkit-linear-gradient(top, #444, #333);
+    border-top: 1px solid #555;
+    text-shadow: 0px -1px rgba(0,0,0,0.5);
+}
+
+.lightbar{
+    background: -webkit-linear-gradient(top, #666, #555);
+    border-top: 1px solid #777;
+    text-shadow: 0px -1px rgba(0,0,0,0.4);
+}
+
+.lower{
+    background: -webkit-linear-gradient(top, #222, #333);
+    border-top: 1px solid #282828;
+}
+
+input {
+    padding-left: 4px;
+    line-height: 22px;
+    color: #ddd;
+    border-radius: 8px;
+    box-shadow: 0 3px 5px rgba(0,0,0,0.4) inset,0 1px 0 rgba(255,255,255,0.3);
+    border:none 0;
+    background: rgba(68, 68, 68,0.95);
+    padding: 1px 9px 0px;
+    -webkit-transition:background 100ms ease-in-out;
+}
+
+
+button {
+    border:1px solid rgba(0,0,0,0.8);
+    line-height: 24px;
+    color: #ddd;
+    text-shadow:0px -1px 0px rgba(0,0,0,0.5);
+    background:-webkit-linear-gradient(top, rgb(90,90,90), rgb(50,50,50));
+    border-radius: 7px;
+    font-weight: normal;
+    max-width:200px;
+}
+
+button:hover{
+    color:#fff;
+    box-shadow: none;
+    background:-webkit-linear-gradient(top, rgb(80,80,80), rgb(40,40,40));
+}
+
+button:disabled:hover{
+    color:rgba(255,255,255,0.4);
+}
+
+button:disabled {
+    font-weight: normal;
+    font-style:normal;
+    color:rgba(255,255,255,0.3);
+    text-shadow:0px -1px rgba(0,0,0,0.4);
+}
+
+button:active{
+    background:-webkit-linear-gradient(top, #333, #222);
+    text-shadow:0px -1px 1px rgba(0,0,0,0.3);
+    color:#ccc;
+}
+
+button:focus {
+    /*box-shadow: 0px 1px 1px rgba(0,0,0,0.7), 0px 0px 1px #e81f3b;*/
+    outline:none;
+}
+
+input:focus, textarea:focus, .inset:focus{
+    /*box-shadow: inset 0px 1px 5px rgba(0,0,0,0.7), 0px 0px 1px #e81f3b;*/
+    outline:none;
+}
+
+button:focus{
+    /*background:-webkit-linear-gradient(top, #5d2b32, #333);*/
+}
+
+@-webkit-keyframes appear{
+    0% {
+        -webkit-transform: scale(1) translate(0px, -3px);
+        opacity:0;
+    }
+    100% {
+        -webkit-transform: scale(1) translate(0px, 0px);
+        opacity:1;
+    }
+}

=== modified file 'ui/projects.html'
--- ui/projects.html	2012-07-19 10:18:29 +0000
+++ ui/projects.html	2012-09-23 10:31:22 +0000
@@ -2,7 +2,6 @@
 <html>
     <head>
         <link rel="stylesheet" href="/_apps/dmedia/grid.css">
-        <link rel="stylesheet" href="/_apps/dmedia/common.css" />
         <link rel="stylesheet" href="common.css" />
         <script src="/_apps/userwebkit/couch.js"></script>
         <script src="/_apps/userwebkit/base.js"></script>
@@ -53,123 +52,146 @@
            ev.preventDefault();
 	}
 	</script>
-	<style>
-	.el{
-		cursor: move;
-	}
-#menu{
-	float: right;
-	padding: 3px 8px 0 0;
-        list-style: none;
-	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;
-        position: relative;
-}
-
-#menu li:hover > a{
-        color: #fafafa;
-}
-#menu li:hover > #bi{
+<style>
+    .el{
+		    cursor: move;
+	    }
+    #menu{
+	    float: right;
+	    padding: 3px 8px 0 0;
+            list-style: none;
+	    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;
+            position: relative;
+    }
+
+    #menu li:hover > a{
+            color: #fafafa;
+    }
+    #menu li:hover > #bi{
+            display: block;
+    }
+
+    #bi{ /*container*/
+	    min-width: 320px;
+	    min-height: 26px;
+	    list-style: none;
+	    margin: -1px -308px;
+	    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: 0 10px 50px 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;*/
+	    width: 285px;
+        margin: 7px 3px 0px 5px;
+        border-radius: 13px;
+        background: url(search16d.png) no-repeat 8px 5px rgba(0, 0, 0, 0.13);
+        border: none 0;
+        box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 3px rgba(0,0,0,0.35) inset;
+        height: 25px;
+        font-size: 15px;
+        padding-left: 29px;
+    }
+
+    #lens{
+        margin-left: -313px;
+        margin-bottom: -11px;
+    }
+    #menu ul ul li{ /* projects*/
+        float: none;
+        margin: 10px;
+        padding: 0;
         display: block;
-}
-
-#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{
-    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>
+        cursor: move;
+    }
+
+    #menu ul:after{
+        border-bottom-color: #444;
+    }
+    
+    #menu .project{
+        margin-left: 9px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.4);
+    }
+    
+    .project{
+        -webkit-animation-duration: 300ms;
+        -webkit-animation-iteration-count: 1;
+        -webkit-animation-timing-function: cubic-bezier(0.4,0,0.8,1);
+    }
+
+    .project img{
+    opacity: 0.6;
+    }
+
+    .project img:hover{
+    opacity: 1;
+    }
+
+    #cont p{
+    margin: 5px;
+    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:330px;
+    margin-top:-60px;
+    }
+    
+    #help{
+        font-size: 12px;
+        color: rgba(255,255,255,0.6);
+        text-shadow: none,0 0 1px rgba(0,0,0,0.1) !important;
+        margin-left: 11px !important;
+        margin-bottom: -6px !important;
+        margin-top: 3px !important;
+    }
+</style>
     </head>
     <body>
         <form id="new_project" class="head">
             <div class="grid_row">
                 <input placeholder="New project name" type="text" class="grid_4" autofocus>
                 <button class="grid_4" disabled>Create Project</button>
-                <ul id="menu"><li>
+        <ul id="menu">
+            <li>
                 <img src="bin2.png" class="ico" id="ico"/>
-		<ul id="bi">
-		<div id="inv"></div>
-		<div id="cont"></div>
-  		<ul id="list"></ul>
+		        <ul id="bi">
+		            <div id="inv"></div>
+		            <div id="cont"></div>
+              		<ul id="list"></ul>
+		        </ul>
+		    </li>
 		</ul>
-		</li></ul>
             </div>
         </form>
 <ul style="min-width = 800px;" id="projects" ondragenter="enter(event)" ondragleave="leave(event)" ondrop="d(event)" ondragover="over(event);"></ul>

=== modified file 'ui/projects.js'
--- ui/projects.js	2012-07-19 10:18:29 +0000
+++ ui/projects.js	2012-09-23 10:31:22 +0000
@@ -48,9 +48,9 @@
 	UI.proj.style.height = window.innerHeight-50+"px";
 
 
-	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.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.binSearch = "<input id=\"s\" onkeyup=\"UI.Search()\" autofocus/><p id='help'>To restore a project drag it out of here</p>";
 
 	UI.removed = new Array();
         UI.load_items();
@@ -155,7 +155,7 @@
 		    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);
+		    setTimeout(function(){s.parentNode.parentNode.removeChild(s.parentNode)},300,s);
  		    Hub.send('delete_project', id)
 		    var doc = novacut.get_sync(id)
 		    UI.removed.push(Array(id,doc.title,doc.time,countFiles(id)));

=== removed file 'ui/search.png'
Binary files ui/search.png	2012-07-16 13:34:04 +0000 and ui/search.png	1970-01-01 00:00:00 +0000 differ
=== added file 'ui/search16d.png'
Binary files ui/search16d.png	1970-01-01 00:00:00 +0000 and ui/search16d.png	2012-09-23 10:31:22 +0000 differ