condo_interface 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. data/MIT-LICENSE +20 -0
  2. data/README.textile +5 -0
  3. data/Rakefile +40 -0
  4. data/app/assets/images/condo_interface/close.png +0 -0
  5. data/app/assets/images/condo_interface/close.svg +71 -0
  6. data/app/assets/images/condo_interface/document.png +0 -0
  7. data/app/assets/images/condo_interface/document.svg +108 -0
  8. data/app/assets/images/condo_interface/pause.png +0 -0
  9. data/app/assets/images/condo_interface/pause.svg +75 -0
  10. data/app/assets/images/condo_interface/play.png +0 -0
  11. data/app/assets/images/condo_interface/play.svg +79 -0
  12. data/app/assets/javascripts/condo_interface/directives.js +308 -0
  13. data/app/assets/javascripts/condo_interface.js +1 -0
  14. data/app/assets/stylesheets/condo_interface/images.css.erb +51 -0
  15. data/app/assets/stylesheets/condo_interface/uploads.css +475 -0
  16. data/app/assets/stylesheets/condo_interface.css +16 -0
  17. data/app/assets/templates/_upload.html +59 -0
  18. data/app/views/condo_interface/_upload.html +4 -0
  19. data/lib/condo_interface/engine.rb +5 -0
  20. data/lib/condo_interface/version.rb +3 -0
  21. data/lib/condo_interface.rb +4 -0
  22. data/lib/tasks/condo_interface_tasks.rake +4 -0
  23. data/test/condo_interface_test.rb +7 -0
  24. data/test/dummy/README.rdoc +261 -0
  25. data/test/dummy/Rakefile +7 -0
  26. data/test/dummy/app/assets/javascripts/application.js +15 -0
  27. data/test/dummy/app/assets/stylesheets/application.css +13 -0
  28. data/test/dummy/app/controllers/application_controller.rb +3 -0
  29. data/test/dummy/app/helpers/application_helper.rb +2 -0
  30. data/test/dummy/app/views/layouts/application.html.erb +14 -0
  31. data/test/dummy/config/application.rb +59 -0
  32. data/test/dummy/config/boot.rb +10 -0
  33. data/test/dummy/config/database.yml +25 -0
  34. data/test/dummy/config/environment.rb +5 -0
  35. data/test/dummy/config/environments/development.rb +37 -0
  36. data/test/dummy/config/environments/production.rb +67 -0
  37. data/test/dummy/config/environments/test.rb +37 -0
  38. data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
  39. data/test/dummy/config/initializers/inflections.rb +15 -0
  40. data/test/dummy/config/initializers/mime_types.rb +5 -0
  41. data/test/dummy/config/initializers/secret_token.rb +7 -0
  42. data/test/dummy/config/initializers/session_store.rb +8 -0
  43. data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
  44. data/test/dummy/config/locales/en.yml +5 -0
  45. data/test/dummy/config/routes.rb +4 -0
  46. data/test/dummy/config.ru +4 -0
  47. data/test/dummy/public/404.html +26 -0
  48. data/test/dummy/public/422.html +26 -0
  49. data/test/dummy/public/500.html +25 -0
  50. data/test/dummy/public/favicon.ico +0 -0
  51. data/test/dummy/script/rails +6 -0
  52. data/test/integration/navigation_test.rb +10 -0
  53. data/test/test_helper.rb +15 -0
  54. metadata +161 -0
@@ -0,0 +1,475 @@
1
+ /**
2
+ * CoTag Condo Example Uploader
3
+ * Direct to cloud resumable uploads
4
+ *
5
+ * Copyright (c) 2012 CoTag Media.
6
+ *
7
+ * @author Stephen von Takach <steve@cotag.me>
8
+ * @copyright 2012 cotag.me
9
+ *
10
+ *
11
+ * A responsive and resolution independent upload UI
12
+ *
13
+ **/
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+ /*
22
+ *
23
+ * Upload wrapper styles
24
+ *
25
+ */
26
+ .ng-cloak {
27
+ display: none;
28
+ }
29
+
30
+
31
+ div.condo-uploads-wrapper {
32
+ position: relative;
33
+ height: 100%;
34
+ width: 100%;
35
+ overflow:hidden;
36
+ }
37
+
38
+
39
+ div.condo-uploads-wrapper > div {
40
+ -webkit-transition: all 0.3s ease-in-out;
41
+ -moz-transition: all 0.3s ease-in-out;
42
+ -o-transition: all 0.3s ease-in-out;
43
+ -ms-transition: all 0.3s ease-in-out;
44
+ transition: all 0.3s ease-in-out;
45
+ }
46
+
47
+
48
+
49
+
50
+
51
+
52
+ /*
53
+ *
54
+ * Drag and drop indicator styles
55
+ *
56
+ */
57
+ div.condo-uploads-wrapper > div.condo-drop-indicator {
58
+ opacity: 0;
59
+
60
+ position: absolute;
61
+ top: 0;
62
+ left: 0;
63
+ right: 0;
64
+ bottom: 0;
65
+
66
+ border: 10pt solid yellow;
67
+
68
+ text-align: center;
69
+ }
70
+
71
+ div.condo-uploads-wrapper > div.condo-drop-indicator > div {
72
+ display: inline-block;
73
+ border: 5pt solid yellow;
74
+ border-top: 0;
75
+ padding: 1em;
76
+ }
77
+
78
+ div.condo-uploads-wrapper.drag-hover > div.condo-drop-indicator {
79
+ opacity: 1;
80
+ }
81
+
82
+ div.condo-uploads-wrapper.drag-hover > div.condo-file-selection {
83
+ opacity: 0 !important;
84
+ }
85
+
86
+ div.condo-uploads-wrapper.drag-hover > div.condo-uploads-container {
87
+ opacity: 0 !important;
88
+ }
89
+
90
+
91
+
92
+
93
+
94
+ /*
95
+ *
96
+ * Build the block that will contain the manual / global controls
97
+ *
98
+ */
99
+ div.condo-uploads-wrapper > div.condo-file-selection {
100
+ position: absolute;
101
+ height: 3em;
102
+ left: 0;
103
+ right: 0;
104
+ bottom: 0;
105
+
106
+ box-shadow: 0 0 8pt #888;
107
+ }
108
+
109
+ div.condo-uploads-wrapper > div.condo-file-selection > form {
110
+ width: 100%;
111
+ height: 100%;
112
+ }
113
+
114
+ div.condo-uploads-wrapper > div.condo-file-selection > form table {
115
+ width: 100%;
116
+ height: 100%;
117
+
118
+ table-layout: fixed;
119
+ }
120
+
121
+ div.condo-uploads-wrapper > div.condo-file-selection table td.file-upload-btn {
122
+ width: 50%;
123
+ overflow: hidden;
124
+ }
125
+
126
+ div.condo-uploads-wrapper > div.condo-file-selection table td {
127
+ vertical-align:middle;
128
+ text-align: center;
129
+ }
130
+
131
+
132
+ div.condo-file-selection td.file-upload-btn > span {
133
+ /* Button styles from twitter bootstrap */
134
+
135
+ display: block;
136
+ position: relative;
137
+
138
+ max-width: 10em;
139
+ font-size: 1.3em;
140
+
141
+ margin: 0 auto;
142
+
143
+ overflow:hidden;
144
+
145
+
146
+
147
+ border-color: #C5C5C5;
148
+ border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
149
+
150
+ margin-bottom: 0;
151
+ color: #333;
152
+ text-align: center;
153
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
154
+ vertical-align: middle;
155
+ cursor: pointer;
156
+
157
+ background-color: whiteSmoke;
158
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6));
159
+ background-image: -webkit-linear-gradient(top, white, #E6E6E6);
160
+ background-image: -o-linear-gradient(top, white, #E6E6E6);
161
+ background-image: linear-gradient(to bottom, white, #E6E6E6);
162
+ background-image: -moz-linear-gradient(top, white, #E6E6E6);
163
+ background-image: -ms-linear-gradient(top, white, #E6E6E6);
164
+ background-repeat: repeat-x;
165
+
166
+ border: 1px solid #BBB;
167
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
168
+ border-color: #E6E6E6 #E6E6E6 #BFBFBF;
169
+ border-bottom-color: #A2A2A2;
170
+
171
+ -webkit-border-radius: 4px;
172
+ -moz-border-radius: 4px;
173
+ -ms-border-radius: 4px;
174
+ -o-border-radius: 4px;
175
+ border-radius: 4px;
176
+
177
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
178
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
179
+ -ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
180
+ -o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
181
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
182
+ }
183
+
184
+
185
+ div.condo-file-selection td.file-upload-btn > span:hover {
186
+ color: #333;
187
+ text-decoration: none;
188
+ background-color: #E6E6E6;
189
+ background-position: 0 -15px;
190
+
191
+ -webkit-transition: background-position 0.1s linear;
192
+ -moz-transition: background-position 0.1s linear;
193
+ -ms-transition: background-position 0.1s linear;
194
+ -o-transition: background-position 0.1s linear;
195
+ transition: background-position 0.1s linear;
196
+ }
197
+
198
+ div.condo-file-selection td.file-upload-btn > span:active {
199
+ background-color: #e6e6e6;
200
+ background-color: #d9d9d9 \9;
201
+ background-image: none;
202
+ outline: 0;
203
+ -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
204
+ -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
205
+ -ms-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
206
+ -o-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
207
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
208
+ }
209
+
210
+
211
+ div.condo-file-selection td.file-upload-btn > span > input {
212
+ position: absolute;
213
+ top: 0;
214
+ left: 0;
215
+ margin: 0;
216
+ font-size: 3em;
217
+ opacity: 0;
218
+ }
219
+
220
+
221
+
222
+ /*
223
+ *
224
+ * Build the block that will contain the uploads
225
+ *
226
+ */
227
+
228
+ div.condo-uploads-wrapper > div.condo-uploads-container {
229
+ position: absolute;
230
+ top: 0;
231
+ left: 0;
232
+ right: 0;
233
+ bottom: 3em;
234
+
235
+ overflow: auto;
236
+ overflow-x: hidden;
237
+ }
238
+
239
+
240
+ div.condo-uploads {
241
+ width: 100%;
242
+ text-align: center;
243
+ }
244
+
245
+
246
+
247
+
248
+
249
+ /*
250
+ *
251
+ * Landscape we want to make most of the horizontal space
252
+ *
253
+ */
254
+ @media all and (orientation: landscape) {
255
+
256
+ div.condo-uploads {
257
+ display:table;
258
+ table-layout: fixed;
259
+ border-spacing: 0;
260
+ }
261
+
262
+ div.condo-upload {
263
+ height: 2.5em;
264
+
265
+ display:table-row;
266
+ }
267
+
268
+ div.condo-upload > div {
269
+ border-bottom: 1pt solid #DDD;
270
+
271
+ display:table-cell;
272
+ vertical-align:middle;
273
+ }
274
+
275
+ div.condo-upload > div.description {
276
+ width: 50%;
277
+ }
278
+
279
+ div.condo-upload > div.stats {
280
+ width: 50%;
281
+ }
282
+
283
+ }
284
+
285
+ /*
286
+ *
287
+ * Portrait the upload is stacked
288
+ *
289
+ */
290
+ @media all and (orientation: portrait) {
291
+ div.condo-upload {
292
+ padding-top: 0.3em;
293
+ padding-bottom: 0.3em;
294
+ border-bottom: 1pt solid #DDD;
295
+ }
296
+
297
+ div.condo-upload > div.description {
298
+ width: 100%;
299
+ }
300
+
301
+ div.condo-upload > div.stats {
302
+ width: 100%;
303
+ }
304
+ }
305
+
306
+
307
+ /*
308
+ *
309
+ * Portrait the upload is stacked
310
+ *
311
+ */
312
+ div.condo-upload > div > table {
313
+ width: 100%;
314
+
315
+ table-layout: fixed;
316
+ border-spacing: 0;
317
+ }
318
+
319
+ div.condo-upload > div.description td.icon {
320
+ width: 1.8em;
321
+ }
322
+
323
+ div.condo-upload > div.description td.name {
324
+ text-align: left;
325
+
326
+ white-space: nowrap;
327
+ overflow: hidden;
328
+ -webkit-text-overflow: ellipsis;
329
+ -moz-text-overflow: ellipsis;
330
+ -ms-text-overflow: ellipsis;
331
+ -o-text-overflow: ellipsis;
332
+ text-overflow: ellipsis;
333
+ }
334
+
335
+ div.condo-upload > div.stats td.controls, div.condo-upload > div.stats td.abort, div.condo-upload > div.stats td.blank {
336
+ width: 1.8em;
337
+ }
338
+
339
+
340
+
341
+ div.condo-upload > div.stats td.size {
342
+ font-size: 0.8em;
343
+ color: #666;
344
+
345
+ width: 5em;
346
+ }
347
+
348
+
349
+
350
+ /*
351
+ *
352
+ * Animated progress bar like twitter bootstrap and google docs
353
+ *
354
+ */
355
+ div.condo-upload > div.stats td.progressbar > div.hide {
356
+ display: none;
357
+ }
358
+
359
+
360
+ div.condo-upload > div.stats td.progressbar > div.progress {
361
+ position: relative;
362
+
363
+ font-size: 0.8em;
364
+ line-height: 1em;
365
+
366
+ height: 1.3em; /* Same as background size below */
367
+ border: 1pt solid #999;
368
+ padding: 1px;
369
+ background: white;
370
+ }
371
+
372
+
373
+ div.condo-upload > div.stats td.progressbar > div.progress > div.message {
374
+ position: absolute;
375
+ top: 0;
376
+ left: 0;
377
+ width: 100%;
378
+ height: 100%;
379
+ margin-top: 0.2em;
380
+ text-shadow: 1pt 1pt #AAA;
381
+ }
382
+
383
+
384
+ div.condo-upload > div.stats td.progressbar > div.progress > div.bar {
385
+ height: 100%;
386
+
387
+ background-repeat: repeat-x;
388
+ background-size: 2.3em 1.3em;
389
+ background-color: #4A97DF;
390
+ }
391
+
392
+ div.condo-upload > div.stats td.progressbar > div.progress > div.bar.animate {
393
+ background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
394
+ background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
395
+ background-image: -ms-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
396
+ background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
397
+ background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
398
+ background-attachment: scroll;
399
+
400
+ -webkit-animation-name: progressBarBG;
401
+ -moz-animation-name: progressBarBG;
402
+ -ms-animation-name: progressBarBG;
403
+ -o-animation-name: progressBarBG;
404
+ animation-name: progressBarBG;
405
+
406
+ -webkit-animation-duration: .8s;
407
+ -webkit-animation-iteration-count: infinite;
408
+ -webkit-animation-timing-function: linear;
409
+ -moz-animation-duration: .8s;
410
+ -moz-animation-iteration-count: infinite;
411
+ -moz-animation-timing-function: linear;
412
+ -ms-animation-duration: .8s;
413
+ -ms-animation-iteration-count: infinite;
414
+ -ms-animation-timing-function: linear;
415
+ -o-animation-duration: .8s;
416
+ -o-animation-iteration-count: infinite;
417
+ -o-animation-timing-function: linear;
418
+ animation-duration: .8s;
419
+ animation-iteration-count: infinite;
420
+ animation-timing-function: linear;
421
+
422
+ -webkit-transition: width 1s;
423
+ -moz-transition: width 1s;
424
+ -ms-transition: width 1s;
425
+ -o-transition: width 1s;
426
+ transition: width 1s;
427
+ }
428
+
429
+ @-webkit-keyframes progressBarBG {
430
+ 0% {
431
+ background-position: 0 0;
432
+ }
433
+ 100% {
434
+ background-position: 2.3em 0;
435
+ }
436
+ }
437
+
438
+ @-moz-keyframes progressBarBG {
439
+ 0% {
440
+ background-position: 0 0;
441
+ }
442
+ 100% {
443
+ background-position: 2.3em 0;
444
+ }
445
+ }
446
+
447
+ @-ms-keyframes progressBarBG {
448
+ 0% {
449
+ background-position: 0 0;
450
+ }
451
+ 100% {
452
+ background-position: 2.3em 0;
453
+ }
454
+ }
455
+
456
+ @-o-keyframes progressBarBG {
457
+ 0% {
458
+ background-position: 0 0;
459
+ }
460
+ 100% {
461
+ background-position: 2.3em 0;
462
+ }
463
+ }
464
+
465
+ @keyframes progressBarBG {
466
+ 0% {
467
+ background-position: 0 0;
468
+ }
469
+ 100% {
470
+ background-position: 2.3em 0;
471
+ }
472
+ }
473
+
474
+
475
+
@@ -0,0 +1,16 @@
1
+ /*
2
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
3
+ * listed below.
4
+ *
5
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
7
+ *
8
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
9
+ * compiled file, but it's generally better to create a new file per style scope.
10
+ *
11
+ *= require_self
12
+ *= require condo_interface/uploads
13
+ *= require condo_interface/images
14
+ *= require_tree .
15
+ */
16
+
@@ -0,0 +1,59 @@
1
+ <div class="condo-uploads-wrapper" data-co-uploads data-ng-controller="UploadsCtrl">
2
+ <div class="condo-drop-indicator">
3
+ <div>Drop Files Here</div>
4
+ </div>
5
+ <div class="condo-uploads-container">
6
+ <div class="condo-uploads"> <!-- NOTE:: Controller Name: UploadsCtrl -->
7
+ <div class="condo-upload ng-cloak" co-upload data-ng-repeat="upload in uploads">
8
+ <div class="description">
9
+ <table>
10
+ <tr>
11
+ <td class="icon image"></td>
12
+ <td class="name">{{upload.name}}</td>
13
+ </tr>
14
+ </table>
15
+ </div>
16
+ <div class="stats">
17
+ <table>
18
+ <tr>
19
+ <td class="size">{{size}}</td>
20
+ <td class="controls image" ng-class="{'paused':paused, 'uploading':!paused}" co-tap="playpause(upload)"></td>
21
+ <td class="progressbar">
22
+ <div class="progress " role="progressbar" aria-live="polite" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100">
23
+ <div class="bar" ng-style="{ 'width': progress + '%' }" ></div>
24
+ <div class="message">
25
+ {{upload.message}}
26
+ </div>
27
+ </div>
28
+ </td>
29
+ <td co-tap="animate_remove(upload, 900)" class="abort image"></td>
30
+ </tr>
31
+ </table>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ <div class="condo-file-selection">
37
+ <form>
38
+ <table>
39
+ <tr>
40
+ <td class="file-upload-btn">
41
+ <span>
42
+ <table>
43
+ <tr>
44
+ <td>
45
+ <label for="file-upload_{{$id}}">Select files</label>
46
+ </td>
47
+ </tr>
48
+ </table>
49
+ <input id="file-upload_{{$id}}" type="file" multiple />
50
+ </span>
51
+ </td>
52
+ <td>
53
+ <input class="autostart" data-ng-model="autostart" id="autostart_{{$id}}" type="checkbox"> <label for="autostart_{{$id}}">Autostart</label>
54
+ </td>
55
+ </tr>
56
+ </table>
57
+ </form>
58
+ </div>
59
+ </div>
@@ -0,0 +1,4 @@
1
+
2
+
3
+ <%= render :partial => "../assets/templates/upload" %>
4
+
@@ -0,0 +1,5 @@
1
+ module CondoInterface
2
+ class Engine < ::Rails::Engine
3
+ isolate_namespace CondoInterface
4
+ end
5
+ end
@@ -0,0 +1,3 @@
1
+ module CondoInterface
2
+ VERSION = "0.0.1"
3
+ end
@@ -0,0 +1,4 @@
1
+ require "condo_interface/engine"
2
+
3
+ module CondoInterface
4
+ end
@@ -0,0 +1,4 @@
1
+ # desc "Explaining what the task does"
2
+ # task :condo_interface do
3
+ # # Task goes here
4
+ # end
@@ -0,0 +1,7 @@
1
+ require 'test_helper'
2
+
3
+ class CondoInterfaceTest < ActiveSupport::TestCase
4
+ test "truth" do
5
+ assert_kind_of Module, CondoInterface
6
+ end
7
+ end