Novacut

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

  1. grafix
  2. Merge into trunk
Proposed by Matteo Ronchetti
Status: Merged
Merged at revision: 290
Proposed branch: lp:~mttronchetti/novacut/grafix
Merge into: lp:novacut
Diff against target: 470 lines (+303/-112)
3 files modified
ui/common.css (+169/-0)
ui/projects.html (+131/-109)
ui/projects.js (+3/-3)
To merge this branch: bzr merge lp:~mttronchetti/novacut/grafix
Reviewer Review Type Date Requested Status
Jason Gerard DeRose Approve
James Raymond Pending
Review via email: mp+123441@code.launchpad.net

Description of the change

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

To post a comment you must log in.
lp:~mttronchetti/novacut/grafix updated
292. By Matteo Ronchetti

some graphics improovments

293. By Matteo Ronchetti

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

294. By Matteo Ronchetti

fix quantal problems

Revision history for this message
Jason Gerard DeRose (jderose) wrote :

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

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== 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 @@
1* {
2 margin: 0px;
3 padding: 0px;
4 line-height: 1.5;
5 text-shadow: 0 1px 2px rgba(0,0,0,0.6);
6}
7
8body{
9 background:#333;
10 color:white;
11 overflow:hidden;
12}
13
14video{
15 background:black;
16}
17
18.head {
19 height: 39px;
20 background: -webkit-linear-gradient(top, rgb(62, 30, 72), rgb(34, 5, 42));
21 box-shadow: 0 0 40px rgba(0,0,0,0.55);
22 border-bottom:1px solid #222;
23}
24
25.project {
26 margin: 8px;
27 display: inline-block;
28 background: -webkit-linear-gradient(top, #555, #444);
29 color: white;
30 font-size: 0;
31 box-shadow: 0 3px 12px rgba(0,0,0,0.3);
32 border-radius:3px;
33 border-top:1px solid #666;
34 cursor: default;
35 -webkit-user-select: none;
36 padding:3px !important;
37 padding-top:2px !important;
38 -webkit-animation:appear 50ms ease-in-out 1;
39}
40
41.project.selected {
42 background: -webkit-linear-gradient(top, #8c5159, #555);
43 border-top:1px solid #777;
44 box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.3), 0px 0px 1px 0px #e81f3b;
45}
46
47.project .thumbnail {
48 width: 80px;
49 height: 80px;
50 background-position: center center;
51 background-size: cover;
52 background-color: #222;
53 border-radius: 3px;
54}
55
56.project > div {
57 display: inline-block;
58 vertical-align: top;
59}
60
61.project p {
62 font-size: 14px;
63 padding-left: 5px;
64 overflow: hidden;
65 white-space: nowrap;
66 width: 218px;
67 color: #ddd;
68 box-sizing: border-box !important;
69}
70
71.project p.title {
72 font-weight: bold;
73 color: white;
74}
75
76.darkbar{
77 background: -webkit-linear-gradient(top, #222, #111);
78 border-top: 1px solid #333;
79 text-shadow: 0px -1px rgba(0,0,0,0.6);
80}
81
82.bar{
83 background: -webkit-linear-gradient(top, #444, #333);
84 border-top: 1px solid #555;
85 text-shadow: 0px -1px rgba(0,0,0,0.5);
86}
87
88.lightbar{
89 background: -webkit-linear-gradient(top, #666, #555);
90 border-top: 1px solid #777;
91 text-shadow: 0px -1px rgba(0,0,0,0.4);
92}
93
94.lower{
95 background: -webkit-linear-gradient(top, #222, #333);
96 border-top: 1px solid #282828;
97}
98
99input {
100 padding-left: 4px;
101 line-height: 22px;
102 color: #ddd;
103 border-radius: 8px;
104 box-shadow: 0 3px 5px rgba(0,0,0,0.4) inset,0 1px 0 rgba(255,255,255,0.3);
105 border:none 0;
106 background: rgba(68, 68, 68,0.95);
107 padding: 1px 9px 0px;
108 -webkit-transition:background 100ms ease-in-out;
109}
110
111
112button {
113 border:1px solid rgba(0,0,0,0.8);
114 line-height: 24px;
115 color: #ddd;
116 text-shadow:0px -1px 0px rgba(0,0,0,0.5);
117 background:-webkit-linear-gradient(top, rgb(90,90,90), rgb(50,50,50));
118 border-radius: 7px;
119 font-weight: normal;
120 max-width:200px;
121}
122
123button:hover{
124 color:#fff;
125 box-shadow: none;
126 background:-webkit-linear-gradient(top, rgb(80,80,80), rgb(40,40,40));
127}
128
129button:disabled:hover{
130 color:rgba(255,255,255,0.4);
131}
132
133button:disabled {
134 font-weight: normal;
135 font-style:normal;
136 color:rgba(255,255,255,0.3);
137 text-shadow:0px -1px rgba(0,0,0,0.4);
138}
139
140button:active{
141 background:-webkit-linear-gradient(top, #333, #222);
142 text-shadow:0px -1px 1px rgba(0,0,0,0.3);
143 color:#ccc;
144}
145
146button:focus {
147 /*box-shadow: 0px 1px 1px rgba(0,0,0,0.7), 0px 0px 1px #e81f3b;*/
148 outline:none;
149}
150
151input:focus, textarea:focus, .inset:focus{
152 /*box-shadow: inset 0px 1px 5px rgba(0,0,0,0.7), 0px 0px 1px #e81f3b;*/
153 outline:none;
154}
155
156button:focus{
157 /*background:-webkit-linear-gradient(top, #5d2b32, #333);*/
158}
159
160@-webkit-keyframes appear{
161 0% {
162 -webkit-transform: scale(1) translate(0px, -3px);
163 opacity:0;
164 }
165 100% {
166 -webkit-transform: scale(1) translate(0px, 0px);
167 opacity:1;
168 }
169}
0170
=== 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 @@
2<html>2<html>
3 <head>3 <head>
4 <link rel="stylesheet" href="/_apps/dmedia/grid.css">4 <link rel="stylesheet" href="/_apps/dmedia/grid.css">
5 <link rel="stylesheet" href="/_apps/dmedia/common.css" />
6 <link rel="stylesheet" href="common.css" />5 <link rel="stylesheet" href="common.css" />
7 <script src="/_apps/userwebkit/couch.js"></script>6 <script src="/_apps/userwebkit/couch.js"></script>
8 <script src="/_apps/userwebkit/base.js"></script>7 <script src="/_apps/userwebkit/base.js"></script>
@@ -53,123 +52,146 @@
53 ev.preventDefault();52 ev.preventDefault();
54 }53 }
55 </script>54 </script>
56 <style>55<style>
57 .el{56 .el{
58 cursor: move;57 cursor: move;
59 }58 }
60#menu{59 #menu{
61 float: right;60 float: right;
62 padding: 3px 8px 0 0;61 padding: 3px 8px 0 0;
63 list-style: none;62 list-style: none;
64 cursor: default;63 cursor: default;
65}64 }
6665
67#menu img{66 #menu img{
68width: 31px;67 width: 31px;
69margin-top: -7px;68 margin-top: -7px;
70margin-right: -8px;69 margin-right: -8px;
71-webkit-animation-duration: .8s;70 -webkit-animation-duration: .8s;
72 -webkit-animation-iteration-count: 1;71 -webkit-animation-iteration-count: 1;
73 -webkit-animation-timing-function: linear;72 -webkit-animation-timing-function: linear;
7473
75}74 }
76#menu li{75 #menu li{
77 float: left;76 float: left;
78 padding: 0 0 10px 0;77 padding: 0 0 10px 0;
79 position: relative;78 position: relative;
80}79 }
8180
82#menu li:hover > a{81 #menu li:hover > a{
83 color: #fafafa;82 color: #fafafa;
84}83 }
85#menu li:hover > #bi{84 #menu li:hover > #bi{
85 display: block;
86 }
87
88 #bi{ /*container*/
89 min-width: 320px;
90 min-height: 26px;
91 list-style: none;
92 margin: -1px -308px;
93 padding: 4px;
94 display: none;
95 position: absolute;
96 top: 39px;
97 left: 0;
98 z-index: 99999;
99 background: -webkit-linear-gradient(top,rgb(87,87,87),rgb(65,65,65));
100 border-radius: 10px;
101 box-shadow: 0 10px 50px rgba(0,0,0,0.5);
102 }
103
104 #menu input{
105 /*width: 282px;
106 margin: 6px 3px 2px 5px;
107 border-radius: 15px;
108 background: -webkit-linear-gradient(top,#E6E6E6,#FAFAFA);
109 border: solid 1px rgba(0, 0, 0, 0.72);
110 box-shadow: none;
111 padding-left: 28px;
112 color: black;*/
113 width: 285px;
114 margin: 7px 3px 0px 5px;
115 border-radius: 13px;
116 background: url(search16d.png) no-repeat 8px 5px rgba(0, 0, 0, 0.13);
117 border: none 0;
118 box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 3px rgba(0,0,0,0.35) inset;
119 height: 25px;
120 font-size: 15px;
121 padding-left: 29px;
122 }
123
124 #lens{
125 margin-left: -313px;
126 margin-bottom: -11px;
127 }
128 #menu ul ul li{ /* projects*/
129 float: none;
130 margin: 10px;
131 padding: 0;
86 display: block;132 display: block;
87}133 cursor: move;
88134 }
89#bi{ /*container*/135
90 min-width: 320px;136 #menu ul:after{
91 min-height: 26px;137 border-bottom-color: #444;
92 list-style: none;138 }
93 margin: 0px -302px;139
94 padding: 4px;140 #menu .project{
95 display: none;141 margin-left: 9px;
96 position: absolute;142 box-shadow: 0 2px 5px rgba(0,0,0,0.4);
97 top: 39px;143 }
98 left: 0;144
99 z-index: 99999;145 .project{
100 background: -webkit-linear-gradient(top,rgb(87,87,87),rgb(65,65,65));146 -webkit-animation-duration: 300ms;
101 border-radius: 10px;147 -webkit-animation-iteration-count: 1;
102 box-shadow: 1px 1px 10px rgba(0,0,0,0.5);148 -webkit-animation-timing-function: cubic-bezier(0.4,0,0.8,1);
103}149 }
104150
105#menu input{151 .project img{
106 width: 282px;152 opacity: 0.6;
107 margin: 6px 3px 2px 5px;153 }
108 border-radius: 15px;154
109 background: -webkit-linear-gradient(top,#E6E6E6,#FAFAFA);155 .project img:hover{
110 border: solid 1px rgba(0, 0, 0, 0.72);156 opacity: 1;
111 box-shadow: none;157 }
112 padding-left: 28px;158
113 color: black;159 #cont p{
114}160 margin: 5px;
115161 text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
116#lens{162 }
117margin-left: -313px;163
118margin-bottom: -11px;164 #inv{/*invisible div used to make bin menu easier to use*/
119}165 height:60px;
120#menu ul ul li{ /* projects*/166 width:330px;
121 float: none;167 margin-top:-60px;
122 margin: 10px;168 }
123 padding: 0;169
124 display: block;170 #help{
125 cursor: move;171 font-size: 12px;
126}172 color: rgba(255,255,255,0.6);
127173 text-shadow: none,0 0 1px rgba(0,0,0,0.1) !important;
128#menu ul:after{174 margin-left: 11px !important;
129 border-bottom-color: #444;175 margin-bottom: -6px !important;
130}176 margin-top: 3px !important;
131177 }
132.project{178</style>
133-webkit-animation-duration: 0.3s;
134 -webkit-animation-iteration-count: 1;
135 -webkit-animation-timing-function: cubic-bezier(0.4,0,0.8,1);
136}
137
138.project img{
139opacity: 0.7;
140}
141
142.project img:hover{
143opacity: 1;
144}
145
146#cont p{
147margin: 5px;
148margin-left: 7px;
149text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
150}
151
152#inv{/*invisible div used to make bin menu easier to use*/
153height:60px;
154width:300px;
155margin-top:-60px;
156}
157
158 </style>
159 </head>179 </head>
160 <body>180 <body>
161 <form id="new_project" class="head">181 <form id="new_project" class="head">
162 <div class="grid_row">182 <div class="grid_row">
163 <input placeholder="New project name" type="text" class="grid_4" autofocus>183 <input placeholder="New project name" type="text" class="grid_4" autofocus>
164 <button class="grid_4" disabled>Create Project</button>184 <button class="grid_4" disabled>Create Project</button>
165 <ul id="menu"><li>185 <ul id="menu">
186 <li>
166 <img src="bin2.png" class="ico" id="ico"/>187 <img src="bin2.png" class="ico" id="ico"/>
167 <ul id="bi">188 <ul id="bi">
168 <div id="inv"></div>189 <div id="inv"></div>
169 <div id="cont"></div>190 <div id="cont"></div>
170 <ul id="list"></ul>191 <ul id="list"></ul>
192 </ul>
193 </li>
171 </ul>194 </ul>
172 </li></ul>
173 </div>195 </div>
174 </form>196 </form>
175<ul style="min-width = 800px;" id="projects" ondragenter="enter(event)" ondragleave="leave(event)" ondrop="d(event)" ondragover="over(event);"></ul>197<ul style="min-width = 800px;" id="projects" ondragenter="enter(event)" ondragleave="leave(event)" ondrop="d(event)" ondragover="over(event);"></ul>
176198
=== 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 @@
48 UI.proj.style.height = window.innerHeight-50+"px";48 UI.proj.style.height = window.innerHeight-50+"px";
4949
5050
51 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>";51 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>";
52 UI.binMax = 5;52 UI.binMax = 5;
53 UI.binSearch = "<input id=\"s\" onkeyup=\"UI.Search()\"><img id=\"lens\" src=\"search.png\"></img></input>";53 UI.binSearch = "<input id=\"s\" onkeyup=\"UI.Search()\" autofocus/><p id='help'>To restore a project drag it out of here</p>";
5454
55 UI.removed = new Array();55 UI.removed = new Array();
56 UI.load_items();56 UI.load_items();
@@ -155,7 +155,7 @@
155 generateAnimation(end.x-pos.x,end.y-pos.y-30);155 generateAnimation(end.x-pos.x,end.y-pos.y-30);
156 this.parentNode.style.webkitAnimationName = "arg";156 this.parentNode.style.webkitAnimationName = "arg";
157 var s = this;157 var s = this;
158 setTimeout(function(){s.parentNode.parentNode.removeChild(s.parentNode)},320,s);158 setTimeout(function(){s.parentNode.parentNode.removeChild(s.parentNode)},300,s);
159 Hub.send('delete_project', id)159 Hub.send('delete_project', id)
160 var doc = novacut.get_sync(id)160 var doc = novacut.get_sync(id)
161 UI.removed.push(Array(id,doc.title,doc.time,countFiles(id)));161 UI.removed.push(Array(id,doc.title,doc.time,countFiles(id)));
162162
=== removed file 'ui/search.png'
163Binary files ui/search.png 2012-07-16 13:34:04 +0000 and ui/search.png 1970-01-01 00:00:00 +0000 differ163Binary 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'
164Binary files ui/search16d.png 1970-01-01 00:00:00 +0000 and ui/search16d.png 2012-09-23 10:31:22 +0000 differ164Binary files ui/search16d.png 1970-01-01 00:00:00 +0000 and ui/search16d.png 2012-09-23 10:31:22 +0000 differ

Subscribers

People subscribed via source and target branches

to all changes:
to status/vote changes: