lms styles; asset icon and style cleanups

cms/static/js/html-editor.js

@@ -3,6 +3,7 @@ var $htmlPreview;
 var $htmlEditor;
 var $visualEditor;
 var $assetWidget;
+var $linkDialog;
 var visualEditor;
 var htmlEditor;
 
@@ -18,7 +19,7 @@ function initHTMLEditor($editor, $prev) {
       skin: 'studio',      
       
       // we may want to add "styleselect" when we collect all styles used throughout the lms
-      theme_advanced_buttons1 : "formatselect,bold,italic,underline,bullist,numlist,outdent,indent,blockquote,studio.asset,link,unlink",
+      theme_advanced_buttons1 : "formatselect,bold,italic,underline,studio.asset,bullist,numlist,outdent,indent,blockquote,link,unlink",
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       theme_advanced_statusbar_location : "none",
@@ -42,6 +43,20 @@ function initHTMLEditor($editor, $prev) {
               $body.append($assetWidget);
             }
         });
+        ed.addButton('studio.link', {
+            title : 'Add Link',
+            image : '/static/img/visual-editor-image-icon.png',
+            onclick : function() {
+              $linkDialog = $($('#tiny-link-dialog').html());
+              $modalCover.unbind('click');
+              $modalCover.bind('click', closeLinkDialog);
+              $modalCover.css('z-index', '99999');
+              // $('.upload-button', $assetWidget).bind('click', uploadFromWidget);
+              // $('.close-button', $assetWidget).bind('click', closeAssetWidget);
+              // $('.insert-asset-button', $assetWidget).bind('click', { editor: ed }, insertAsset);
+              $body.append($linkDialog);
+            }
+        });
       }
     });
   }, 100);
@@ -55,6 +70,10 @@ function initHTMLEditor($editor, $prev) {
   $editor.find('.save-button, .cancel-button').bind('click', updateHTMLPreview);
 }
 
+function closeLinkDialog(e) {
+
+}
+
 function uploadFromWidget(e) {
   $('.library', $assetWidget).hide();
   $('.upload-form', $assetWidget).show();

cms/static/sass/_lms.scss

@@ -14,12 +14,17 @@
     line-height: 1.6;
   }
 
+  h1 {
+    float: none;
+  }
+
   h2 {
     color: #646464;
     font-size: 19px;
     font-weight: 300;
     letter-spacing: 1px;
     margin-bottom: 15px;
+    margin-left: 0;
     text-transform: uppercase;
   }
 
@@ -28,6 +33,15 @@
     font-weight: 400;
   }
 
+  h4 {
+    background: none;
+    padding: 0;
+    border: none;
+    @include box-shadow(none);
+    font-size: 16px;
+    font-weight: 400;
+  }
+
   code {  
     margin: 0 2px;
     padding: 0px 5px;

cms/static/sass/_unit.scss

@@ -40,15 +40,6 @@
     }
   }
 
-  // h2 {
-  //   margin: 30px 0;
-  //   color: #646464;
-  //   font-size: 19px;
-  //   font-weight: 300;
-  //   letter-spacing: 1px;
-  //   text-transform: uppercase;
-  // }
-
   .components {
     > li {
       position: relative;
@@ -802,4 +793,27 @@
     padding: 0;
     background: none;
   }
+}
+
+.tiny-link-dialog {
+  position: fixed;
+  top: 40px;
+  left: 50%;
+  z-index: 99999;
+  width: 600px;
+  margin-left: -300px;
+  background: #fff;
+
+  .close-button {
+    @include white-button;
+    position: absolute;
+    top: 0;
+    right: 15px;
+    width: 29px;
+    height: 29px;
+    padding: 0 !important;
+    border-radius: 17px !important;
+    line-height: 29px;
+    text-align: center;
+  }
 }
\ No newline at end of file

cms/templates/unit.html

@@ -58,12 +58,25 @@
   <script src="/static/js/tiny_mce/tiny_mce.js"></script>
   <script src="/static/js/tiny_mce/jquery.tinymce.js"></script>
 
+  <script type="text/template" id="tiny-link-dialog">
+    <article class="tiny-link-dialog">
+      <a href="#" class="close-button">
+        <span class="close-icon"></span>
+      </a>
+      <h1>Link to</h1>
+      <form class="link-to">
+        <input type="text" class="link-to-input">
+        <a href="#" class="browse-button">Browse Courseware</a>
+        <input type="submit" value="Add Link">
+      </form>
+    </article>
+  </script>
+
   <script type="text/template" id="asset-library-widget">
     <article class="asset-library widget">
       <a href="#" class="close-button">
         <span class="close-icon"></span>
       </a>
-
       <div class="upload-form upload-modal">
         <h1>Upload New File</h1>
         <p class="file-name"></p>