adding dropbox file-picker to new template and to the add_note partial

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index a327042361ea731961ce0f85726e28826188cdcc..9c47b8021b92ffa2e80bff926889f54bff4054d8 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -785,7 +785,14 @@ legend
   margin-bottom:12px;
 }
 
+/* Turning font awesome icons into buttons */
 .awesome-action:hover {
+  /* For awesome icons with clickstates */
   color: #f05a28;
   cursor: pointer;
 }
+
+#drpbx-btn {
+  color: #3d9ae8;
+  cursor: pointer;
+}

diff --git a/karmaworld/templates/base.html b/karmaworld/templates/base.html
index 55ad24e25204af24f3abf4b9e36b39860638ce6b..549b0366d1173119b112740141f4aaddde5a0ee2 100644 (file)
--- a/karmaworld/templates/base.html
+++ b/karmaworld/templates/base.html
@@ -15,7 +15,7 @@
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}ajaxuploader/css/fileuploader.css">
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
   <!-- include Font Awesome -->
-  <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
+  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
@@ -67,6 +67,10 @@
 {% include 'footer.html' %}
 <!-- end include footer-->
 
+{% block opentip %}
+<!-- Conditionally include opentip -->
+{% endblock opentip %}
+
 
 </body>
 </html>

diff --git a/karmaworld/templates/partial/add_note.html b/karmaworld/templates/partial/add_note.html
index c367448287f91d60870c39255585d284693f7fcf..134e39bc09ead3e0535e4ddf7e172b81dca4df2e 100644 (file)
--- a/karmaworld/templates/partial/add_note.html
+++ b/karmaworld/templates/partial/add_note.html
@@ -1,12 +1,12 @@
 {% load url from future %}
+{% include 'partial/opentip.html' %}
 <section id=add-note-form class="extend-form">
   <script>
     var ajax_upload_url = "{% url 'ajax_upload' %}";
     //var csrf_token = "{{ csrf_token }}";
   </script>
 
-
-  <form id=add-note method="POST">
+  <form id=add-note class="dropzone" method="POST">
     {% csrf_token %}
 
     <div class="row">
@@ -16,10 +16,26 @@
       </div>
       <div id=file-uploader class="small-8 small-offset-1  columns large-4 large-offset-1">
         <!-- the upload button gets attached here -->
-      </div> 
-      <div class="small-2 columns large-1 end">
+      </div>
+
+      <div class="small-2 columns large-1">
+        <!-- TODO: only show after file selected-->
         <i class="icon-remove-sign awesome-action"></i>
       </div>
+
+      <div id="drpbx-btn" class="small-2 columns large-1 end"
+          data-ot="Upload directly from Dropbox"
+          data-ot-target="true"
+          data-ot-tip-joint="top center"
+          data-ot-target-joint="bottom center"
+          data-ot-background="white"
+          data-ot-border-color="black" >
+        <i class="icon-dropbox icon-2x"></i>
+
+        <input type="text" class="hidden" id="id_drpbxURL" name="dropbxURL" style="display: none"/>
+      </div>
+
+
     </div>
     <div class="row">
       <div class="small-10 small-offset-1 columns large-8 large-offset-1">
@@ -51,4 +67,5 @@
 
 
     </form> <!-- #upload_form -->
+  {% include 'partial/dropbox_support.html' %}
 </section>

diff --git a/karmaworld/templates/partial/dropbox_support.html b/karmaworld/templates/partial/dropbox_support.html
new file mode 100644 (file)
index 0000000..94e45f8
--- /dev/null
+++ b/karmaworld/templates/partial/dropbox_support.html
@@ -0,0 +1,19 @@
+{% comment %}
+  
+{% endcomment %}
+<!-- TODO: add to head-->
+<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="n1wj0fd5nszev45"></script>
+<!-- log what file was chosen by dropbox -->
+<script type="text/javascript">
+  var options = {
+      linkType: "direct",
+      success: function(file) {
+                console.log("Here is the file selected " + file[0].link);
+                console.log(file);
+              },
+      }
+
+  $('#drpbx-btn').on('click', function(ev){
+    Dropbox.choose(options);
+  });
+</script>