From 8abf93cc365d0858145280e841e9418fd5d10bfc Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Fri, 16 Nov 2012 17:00:53 -0500
Subject: [PATCH] search and upload button added to widget

---
 cms/static/sass/_assets.scss | 42 ++++++++++++++++++++++++++++++++++--
 cms/templates/unit.html      | 23 +++++++++++++-------
 2 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/cms/static/sass/_assets.scss b/cms/static/sass/_assets.scss
index aacadbdfa7..8436780943 100644
--- a/cms/static/sass/_assets.scss
+++ b/cms/static/sass/_assets.scss
@@ -108,13 +108,44 @@
 
 .asset-library {
   @include clearfix;
+  display: block;
 
   &.widget {
     position: absolute;
     left: 50%;
-    width: 900px;
-    margin-left: -450px;
     z-index: 99999;
+    width: 900px;
+    padding: 20px;
+    margin-left: -450px;
+    border-radius: 3px;
+    background: $lightGrey;
+
+    header {
+      height: 40px;
+      margin-bottom: 20px;
+    }
+
+    .close-button {
+      @include white-button;
+      width: 29px;
+      height: 29px;
+      padding: 0;
+      border-radius: 29px;
+      text-align: center;
+
+      .close-icon {
+        margin-top: 8px;
+      }
+    }
+
+    .search {
+      width: 400px;
+      height: 38px;
+      padding-left: 36px;
+      background-color: #fff;
+      background-position: 12px 10px;
+      font-size: 14px;
+    }
 
     .thumb-col {
       width: 50px;
@@ -124,6 +155,13 @@
       width: 50px;
       max-height: 50px;
     }
+
+    .upload-button {
+      @include blue-button;
+      float: right;
+      padding: 8px 30px 10px;
+      font-size: 12px;
+    }
   }
 
   table {
diff --git a/cms/templates/unit.html b/cms/templates/unit.html
index b52e1e9f53..21db3b208e 100644
--- a/cms/templates/unit.html
+++ b/cms/templates/unit.html
@@ -55,6 +55,13 @@
 
   <script type="text/template" id="asset-library-widget">
     <article class="asset-library widget">
+      <a href="#" class="close-button">
+        <span class="close-icon"></span>
+      </a>
+      <header>
+        <input type="text" class="search">
+        <a href="#" class="upload-button">Upload New File</a>
+      </header>
       <table>
         <thead>
           <tr>
@@ -72,11 +79,11 @@
               </div>
             </td>
             <td class="name-col">
-              <a href="#" class="filename">my-image.jpg</a>
+              <a href="#" class="filename">ut-logo-350-150.png</a>
               <div class="embeddable-xml"></div>
             </td>
             <td class="date-col">
-              date
+              30 October, 2012 at 07:17 PM
             </td>
             <td class="insert-col">
               <a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
@@ -89,14 +96,14 @@
               </div>
             </td>
             <td class="name-col">
-              <a href="#" class="filename">asset name</a>
+              <a href="#" class="filename">ut-logo-350-150.png</a>
               <div class="embeddable-xml"></div>
             </td>
             <td class="date-col">
-              date
+              30 October, 2012 at 07:17 PM
             </td>
             <td class="insert-col">
-              <a href="#" class="insert-asset-button">Insert</a>
+              <a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
             </td>
           </tr>
           <tr data-id="id">
@@ -106,14 +113,14 @@
               </div>
             </td>
             <td class="name-col">
-              <a href="#" class="filename">asset name</a>
+              <a href="#" class="filename">ut-logo-350-150.png</a>
               <div class="embeddable-xml"></div>
             </td>
             <td class="date-col">
-              date
+              30 October, 2012 at 07:17 PM
             </td>
             <td class="insert-col">
-              <a href="#" class="insert-asset-button">Insert</a>
+              <a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
             </td>
           </tr>
         </tbody>