condo_interface 0.0.1

data/app/assets/stylesheets/condo_interface/uploads.css

@@ -0,0 +1,475 @@
+/**
+*	CoTag Condo Example Uploader
+*	Direct to cloud resumable uploads
+*	
+*   Copyright (c) 2012 CoTag Media.
+*	
+*	@author		Stephen von Takach <steve@cotag.me>
+*	@copyright	2012 cotag.me
+* 
+*	
+*	A responsive and resolution independent upload UI
+*
+**/
+
+
+
+
+
+
+
+/*
+ * 
+ * Upload wrapper styles
+ * 
+ */
+.ng-cloak {
+	display: none;
+}
+
+
+div.condo-uploads-wrapper {
+	position: relative;
+	height: 100%;
+	width: 100%;
+	overflow:hidden;
+}
+
+
+div.condo-uploads-wrapper > div {
+	-webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+    -ms-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+}
+
+
+
+
+
+
+/*
+ * 
+ * Drag and drop indicator styles
+ * 
+ */
+div.condo-uploads-wrapper > div.condo-drop-indicator {
+	opacity: 0;
+	
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	
+	border: 10pt solid yellow;
+	
+	text-align: center;
+}
+
+div.condo-uploads-wrapper > div.condo-drop-indicator > div {
+	display: inline-block;
+	border: 5pt solid yellow;
+	border-top: 0;
+	padding: 1em;
+}
+
+div.condo-uploads-wrapper.drag-hover > div.condo-drop-indicator {
+	opacity: 1;
+}
+
+div.condo-uploads-wrapper.drag-hover > div.condo-file-selection {
+	opacity: 0 !important;
+}
+
+div.condo-uploads-wrapper.drag-hover > div.condo-uploads-container {
+	opacity: 0 !important;
+}
+
+
+
+
+
+/*
+ * 
+ * Build the block that will contain the manual / global controls
+ * 
+ */
+div.condo-uploads-wrapper > div.condo-file-selection {
+	position: absolute;
+	height: 3em;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	
+	box-shadow: 0 0 8pt #888;
+}
+
+div.condo-uploads-wrapper > div.condo-file-selection > form {
+	width: 100%;
+	height: 100%;
+}
+
+div.condo-uploads-wrapper > div.condo-file-selection > form table {
+	width: 100%;
+	height: 100%;
+	
+	table-layout: fixed;
+}
+
+div.condo-uploads-wrapper > div.condo-file-selection table td.file-upload-btn {
+	width: 50%;
+	overflow: hidden;
+}
+
+div.condo-uploads-wrapper > div.condo-file-selection table td {
+	vertical-align:middle;
+	text-align: center;
+}
+
+
+div.condo-file-selection td.file-upload-btn > span {
+    /* Button styles from twitter bootstrap */
+
+	display: block;
+	position: relative;
+	
+	max-width: 10em;
+	font-size: 1.3em;
+	
+	margin: 0 auto;
+	
+	overflow:hidden;
+	
+	
+	
+	border-color: #C5C5C5;
+	border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
+	
+	margin-bottom: 0;
+	color: #333;
+	text-align: center;
+	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+	vertical-align: middle;
+	cursor: pointer;
+	
+	background-color: whiteSmoke;
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6));
+	background-image: -webkit-linear-gradient(top, white, #E6E6E6);
+	background-image: -o-linear-gradient(top, white, #E6E6E6);
+	background-image: linear-gradient(to bottom, white, #E6E6E6);
+	background-image: -moz-linear-gradient(top, white, #E6E6E6);
+	background-image: -ms-linear-gradient(top, white, #E6E6E6);
+	background-repeat: repeat-x;
+	
+	border: 1px solid #BBB;
+	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+	border-color: #E6E6E6 #E6E6E6 #BFBFBF;
+	border-bottom-color: #A2A2A2;
+	
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	-ms-border-radius: 4px;
+	-o-border-radius: 4px;
+	border-radius: 4px;
+	
+	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+	-ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+	-o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+
+div.condo-file-selection td.file-upload-btn > span:hover {
+	color: #333;
+	text-decoration: none;
+	background-color: #E6E6E6;
+	background-position: 0 -15px;
+	
+	-webkit-transition: background-position 0.1s linear;
+	-moz-transition: background-position 0.1s linear;
+	-ms-transition: background-position 0.1s linear;
+	-o-transition: background-position 0.1s linear;
+	transition: background-position 0.1s linear;
+}
+
+div.condo-file-selection td.file-upload-btn > span:active {
+	background-color: #e6e6e6;
+	background-color: #d9d9d9 \9;
+	background-image: none;
+	outline: 0;
+	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+	-ms-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+	-o-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+
+div.condo-file-selection td.file-upload-btn > span > input {
+	position: absolute;
+	top: 0;
+	left: 0;
+	margin: 0;
+	font-size: 3em;
+	opacity: 0;
+}
+
+
+
+/*
+ * 
+ * Build the block that will contain the uploads
+ * 
+ */
+
+div.condo-uploads-wrapper > div.condo-uploads-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 3em;
+	
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+div.condo-uploads {
+	width: 100%;
+	text-align: center;
+}
+
+
+
+
+
+/*
+ * 
+ * Landscape we want to make most of the horizontal space
+ * 
+ */
+@media all and (orientation: landscape) {
+	
+	div.condo-uploads {
+		display:table;
+		table-layout: fixed;
+		border-spacing: 0;
+	}
+	
+	div.condo-upload {
+		height: 2.5em;
+		
+		display:table-row;
+	}
+	
+	div.condo-upload > div {
+		border-bottom: 1pt solid #DDD;
+		
+		display:table-cell;
+		vertical-align:middle;
+	}
+	
+	div.condo-upload > div.description {
+		width: 50%;
+	}
+	
+	div.condo-upload > div.stats {
+		width: 50%;
+	}
+	
+}
+
+/*
+ * 
+ * Portrait the upload is stacked
+ * 
+ */
+@media all and (orientation: portrait) {
+	div.condo-upload {
+		padding-top: 0.3em;
+		padding-bottom: 0.3em;
+		border-bottom: 1pt solid #DDD;
+	}
+	
+	div.condo-upload > div.description {
+		width: 100%;
+	}
+	
+	div.condo-upload > div.stats {
+		width: 100%;
+	}
+}
+
+
+/*
+ * 
+ * Portrait the upload is stacked
+ * 
+ */
+div.condo-upload > div > table {
+	width: 100%;
+	
+	table-layout: fixed;
+	border-spacing: 0;
+}
+
+div.condo-upload > div.description td.icon {
+	width: 1.8em;
+}
+
+div.condo-upload > div.description td.name {
+	text-align: left;
+	
+	white-space: nowrap;
+	overflow: hidden;
+	-webkit-text-overflow: ellipsis;
+	-moz-text-overflow: ellipsis;
+	-ms-text-overflow: ellipsis;
+	-o-text-overflow: ellipsis;
+	text-overflow: ellipsis;
+}
+
+div.condo-upload > div.stats td.controls, div.condo-upload > div.stats td.abort, div.condo-upload > div.stats td.blank {
+	width: 1.8em;
+}
+
+
+
+div.condo-upload > div.stats td.size {
+	font-size: 0.8em;
+	color: #666;
+	
+	width: 5em;
+}
+
+
+
+/*
+ * 
+ * Animated progress bar like twitter bootstrap and google docs
+ * 
+ */
+div.condo-upload > div.stats td.progressbar > div.hide {
+	display: none;
+}
+
+
+div.condo-upload > div.stats td.progressbar > div.progress {
+	position: relative;
+	
+	font-size: 0.8em;
+	line-height: 1em;
+	
+	height: 1.3em;				/* Same as background size below */
+	border: 1pt solid #999;
+	padding: 1px;
+	background: white;
+}
+
+
+div.condo-upload > div.stats td.progressbar > div.progress > div.message {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	margin-top: 0.2em;
+	text-shadow: 1pt 1pt #AAA;
+}
+
+
+div.condo-upload > div.stats td.progressbar > div.progress > div.bar {
+	height: 100%;
+	
+	background-repeat: repeat-x;
+	background-size: 2.3em 1.3em;
+	background-color: #4A97DF;
+}
+
+div.condo-upload > div.stats td.progressbar > div.progress > div.bar.animate {
+	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);
+	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);
+	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);
+	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);
+	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);
+	background-attachment: scroll;
+	
+	-webkit-animation-name: progressBarBG;
+	-moz-animation-name: progressBarBG;
+	-ms-animation-name: progressBarBG;
+	-o-animation-name: progressBarBG;
+	animation-name: progressBarBG;
+	
+	-webkit-animation-duration: .8s;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-timing-function: linear;
+	-moz-animation-duration: .8s;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-timing-function: linear;
+	-ms-animation-duration: .8s;
+	-ms-animation-iteration-count: infinite;
+	-ms-animation-timing-function: linear;
+	-o-animation-duration: .8s;
+	-o-animation-iteration-count: infinite;
+	-o-animation-timing-function: linear;
+	animation-duration: .8s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	
+	-webkit-transition: width 1s;
+	-moz-transition: width 1s;
+	-ms-transition: width 1s;
+	-o-transition: width 1s;
+	transition: width 1s;
+}
+
+@-webkit-keyframes progressBarBG {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 2.3em 0;
+	}
+}
+
+@-moz-keyframes progressBarBG {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 2.3em 0;
+	}
+}
+
+@-ms-keyframes progressBarBG {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 2.3em 0;
+	}
+}
+
+@-o-keyframes progressBarBG {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 2.3em 0;
+	}
+}
+
+@keyframes progressBarBG {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 2.3em 0;
+	}
+}
+
+
+

data/app/assets/stylesheets/condo_interface.css

@@ -0,0 +1,16 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require condo_interface/uploads
+ *= require condo_interface/images
+ *= require_tree .
+ */
+

data/app/assets/templates/_upload.html

@@ -0,0 +1,59 @@
+<div class="condo-uploads-wrapper" data-co-uploads data-ng-controller="UploadsCtrl">
+	<div class="condo-drop-indicator">
+		<div>Drop Files Here</div>
+	</div>
+	<div class="condo-uploads-container">
+		<div class="condo-uploads">		<!-- NOTE:: Controller Name: UploadsCtrl -->
+			<div class="condo-upload ng-cloak" co-upload data-ng-repeat="upload in uploads">
+				<div class="description">
+					<table>
+						<tr>
+							<td class="icon image"></td>
+							<td class="name">{{upload.name}}</td>
+						</tr>
+					</table>
+				</div>
+				<div class="stats">
+					<table>
+						<tr>
+							<td class="size">{{size}}</td>
+							<td class="controls image" ng-class="{'paused':paused, 'uploading':!paused}" co-tap="playpause(upload)"></td>
+							<td class="progressbar">
+								<div class="progress " role="progressbar" aria-live="polite" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100">
+									<div class="bar" ng-style="{ 'width': progress + '%' }" ></div>
+									<div class="message">
+										{{upload.message}}
+									</div>
+								</div>
+							</td>
+							<td co-tap="animate_remove(upload, 900)" class="abort image"></td>
+						</tr>
+					</table>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="condo-file-selection">
+		<form>
+			<table>
+				<tr>
+					<td class="file-upload-btn">
+						<span>
+							<table>
+								<tr>
+									<td>
+										<label for="file-upload_{{$id}}">Select files</label>
+									</td>
+								</tr>
+							</table>
+							<input id="file-upload_{{$id}}" type="file" multiple />
+						</span>
+					</td>
+					<td>
+						<input class="autostart" data-ng-model="autostart" id="autostart_{{$id}}" type="checkbox"> <label for="autostart_{{$id}}">Autostart</label>
+					</td>
+				</tr>
+			</table>
+		</form>
+	</div>
+</div>

data/app/views/condo_interface/_upload.html

@@ -0,0 +1,4 @@
+
+
+<%= render :partial => "../assets/templates/upload" %>
+

data/lib/condo_interface/engine.rb

@@ -0,0 +1,5 @@
+module CondoInterface
+	class Engine < ::Rails::Engine
+		isolate_namespace CondoInterface
+	end
+end

data/lib/condo_interface/version.rb

@@ -0,0 +1,3 @@
+module CondoInterface
+	VERSION = "0.0.1"
+end

data/lib/condo_interface.rb

@@ -0,0 +1,4 @@
+require "condo_interface/engine"
+
+module CondoInterface
+end

data/lib/tasks/condo_interface_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :condo_interface do
+#   # Task goes here
+# end

data/test/condo_interface_test.rb

@@ -0,0 +1,7 @@
+require 'test_helper'
+
+class CondoInterfaceTest < ActiveSupport::TestCase
+  test "truth" do
+    assert_kind_of Module, CondoInterface
+  end
+end