Add "handles" to note section edit bar

Dragging is now the only way to create new sections- clicking on the new
section elements like buttons no longer works. This adds little grip
handles to make clear that the elements are draggable, and adds a little
help text towards the same end.

Same done for topic citation editing.

Author: ptgolden

editorsnotes/main/templates/citation.include

@@ -2,7 +2,7 @@
 
 <div class="note-section">
 	<div class="citation-side">
-		<i class="fa fa-file"></i>
+		<i class="fa fa-file-text-o"></i>
 	</div>
 	<div class="citation-main">
 		<div class="citation-document">

editorsnotes/main/templates/includes/note_sections/citationns.html

@@ -3,7 +3,7 @@
 <div class="note-section note-section-citation" id="citation-{{ section.document_id }}-{{ section.note_section_id }}">
 
   <div class="citation-side">
-    <a href="#citation-{{ section.document_id }}-{{ section.note_section_id }}"><i class="fa fa-file"></i></a>
+    <a href="#citation-{{ section.document_id }}-{{ section.note_section_id }}"><i class="fa fa-file-text-o"></i></a>
   </div>
 
   <div class="citation-main">

editorsnotes/static/style/components.less

@@ -9,7 +9,7 @@
     width: 16px;
     margin-left: 0;
     line-height: 19px;
-    i { font-size: 24px; color: #333; }
+    i { font-size: 18px; color: #333; }
   }
 
   > div[class*='-main'] {

editorsnotes/static/style/layouts.less

@@ -552,6 +552,9 @@ a.license-link {
       border: 1px solid #999;
       background: #fff;
       text-align: center;
+      padding-left: 20px;
+      padding-right: 20px;
+      .section-drag-handle { display: none; }
     }
 
   }
@@ -569,18 +572,53 @@ a.license-link {
       left: 0;
       width: 100%;
       z-index: 100;
+      box-shadow: 0px 1px 2px #bbb;
+    }
+
+    i.section-drag-handle {
+      box-sizing: border-box;
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 34px;
+      padding: 10px 8px;
+
+      color: #777;
+      border-left: 1px solid black;
     }
 
-    i { vertical-align: middle; font-size: 22px; color: #333; }
+    i.section-icon {
+      vertical-align: baseline;
+      margin-right: 3px;
+      font-size: 16px;
+      color: #333;
+    }
 
-    h4 { display: inline-block; margin: 0 12px 0 0; }
+    h4 {
+      display: inline-block;
+      margin: 0 20px 0 0;
+      a {
+        font-size: 18px;
+        vertical-align: middle;
+      }
+    }
     .add-section {
-      .btn;
+      position: relative;
+
+      display: inline-block;
+      padding: 4px 34px 4px 20px;
+      border: 1px solid #333;
+      border-radius: 2px;
+      background: white;
+      box-shadow: 2px 2px 3px #bbb;
+      cursor: pointer;
+
       margin-right: 18px;
       line-height: 26px;
-      padding-left: 20px;
-      padding-right: 20px;
       min-width: 100px;
+
+      &:hover { background: #f8f8f8; }
     }
     img.loader {
       display: none;
@@ -618,7 +656,7 @@ a.license-link {
     .note-section-text .btn-toolbar { margin-top: 0px; }
 
     // Include some whitespace at the bottom of the note section container
-    .note-section-list { padding-bottom: 200px; }
+    .note-section-list, .citation-list { padding-bottom: 200px; }
 
   }
 

editorsnotes_app/js/templates/citation_list.html

@@ -1,5 +1,14 @@
 <h3>Citations</h3>
-<div id="citation-edit-bar">
-  <a class="add-citation btn"><i class="fa fa-file"></i> Add citation</a>
+<div id="section-add-bar-container">
+  <div id="citation-edit-bar">
+      <h4>Add citation
+      <a title="Drag handle to the area below to add a new citation."
+        data-toggle="tooltip" href="#"><i class="fa fa-question-circle"></i></a>
+     </h4>
+    <div class="add-section">
+      <i class="section-drag-handle fa fa-ellipsis-v"></i>
+      <i class="section-icon fa fa-file-text-o"></i> Add citation
+    </div>
+  </div>
 </div>
 <div class="citation-list"></div>

editorsnotes_app/js/templates/note_section_citation.html

@@ -1,4 +1,4 @@
-<div class="citation-side"><i class="fa fa-file"></i></div>
+<div class="citation-side"><i class="fa fa-file-text-o"></i></div>
 
 <div class="citation-main">
   <div class="citation-document">

editorsnotes_app/js/templates/note_section_list.html

@@ -1,13 +1,21 @@
 <div id="section-add-bar-container">
   <div id="citation-edit-bar">
-    <h4>Add section: </h4>
-    <a class="add-section" data-section-type="citation">
-      <i class="fa fa-file"></i> Citation
-    </a>
-    <a class="add-section" data-section-type="text">Text</a>
-    <a class="add-section" data-section-type="note_reference">
-      <i class="fa fa-pencil"></i> Note reference
-    </a>
+    <h4>Add section
+    <a title="Drag new sections to the area below in order to add to this note."
+      data-toggle="tooltip" href="#"><i class="fa fa-question-circle"></i></a>
+   </h4>
+    <div class="add-section" data-section-type="citation">
+      <i class="section-drag-handle fa fa-ellipsis-v"></i>
+      <i class="section-icon fa fa-file-text-o"></i> Citation
+    </div>
+    <div class="add-section" data-section-type="text">
+      <i class="section-drag-handle fa fa-ellipsis-v"></i>
+      Text
+    </div>
+    <div class="add-section" data-section-type="note_reference">
+      <i class="section-drag-handle fa fa-ellipsis-v"></i>
+      <i class="section-icon fa fa-pencil"></i> Note reference
+    </div>
     <span class="status-message">All changes saved.</span>
     <img class="loader" src="/static/style/icons/ajax-loader.gif">
   </div>

editorsnotes_app/js/views/citations.js

@@ -6,26 +6,25 @@ var OrderedCollectionView = require('./generic/ordered_collection_base')
 
 module.exports = OrderedCollectionView.extend({
   itemViewConstructor: CitationView,
-  events: {
-    'click .add-citation': 'handleAddCitationButton'
-  },
   render: function () {
     var that = this
       , template = require('../templates/citation_list.html')
 
     this.$el.empty().html( template() );
     this.$itemsEl = this.$('.citation-list');
     this.renderItems();
-    this.initDrag();
+    this.$el.closest('body').addClass('editing');
     this.initSort({
       stop: function (event, ui) {
         $(this).removeClass('sort-active');
-        if (ui.item.hasClass('add-citation')) {
+        if (ui.item.hasClass('add-section')) {
           that.collection.add({}, { at: ui.item.index() });
           ui.item.remove();
         }
       }
     });
+    this.initDrag();
+    this.initStickyBar();
   },
   onAddItemView: function (view) {
     if (view.model.isNew()) {
@@ -36,26 +35,53 @@ module.exports = OrderedCollectionView.extend({
     e.preventDefault();
     this.collection.add({});
   },
+
+  initStickyBar: function () {
+    var $window = $(window)
+      , $barContainer = this.$('#section-add-bar-container')
+      , $bar = $barContainer.find('#citation-edit-bar')
+
+    $window
+      .off('scroll.citation-list')
+      .on('scroll.citation-list', function () {
+        var scrollTop = $window.scrollTop()
+          , offsetTop = $barContainer.offset().top
+
+        if (scrollTop > offsetTop) {
+          $bar.addClass('sticky');
+        } else {
+          $bar.removeClass('sticky');
+        }
+      });
+  },
+
   initDrag: function () {
     var that = this
       , $addBar = this.$('#citation-edit-bar').css('overflow', 'auto')
-      , st
+      , threshold
 
-    $('.add-citation', $addBar).draggable({
+    $('.add-section', $addBar).draggable({
       axis: 'y',
-      distance: 10,
-      appendTo: $addBar,
+      distance: 2,
+      appendTo: $addBar.parent(),
+      cursor: 'move',
       connectToSortable: that.$itemsEl,
       helper: function () {
         return $('<div class="drag-placeholder">')
           .html( $(this).html() )
           .css('width', that.$itemsEl.innerWidth() - 22)
       },
       start: function () {
-        st = $(this).offsetParent().scrollTop();
+        threshold = $('.citation-list').offset().top;
       },
       drag: function (e, ui) {
-        ui.position.top -= st;
+        ui.position.top = null;
+
+        if (e.pageY < threshold) {
+          ui.helper.css('top', e.pageY - 10);
+        } else {
+          ui.helper.show();
+        }
       }
     });
   }

editorsnotes_app/js/views/note_section_list.js

@@ -4,9 +4,6 @@ var OrderedCollectionView = require('./generic/ordered_collection_base')
   , $ = require('../jquery')
 
 module.exports = OrderedCollectionView.extend({
-  events: {
-    'click .add-section': 'handleAddSectionButton'
-  },
   initialize: function () {
     $('body').addClass('editing');
     OrderedCollectionView.prototype.initialize.apply(this, arguments);
@@ -83,8 +80,9 @@ module.exports = OrderedCollectionView.extend({
 
     $('.add-section', $addBar).draggable({
       axis: 'y',
-      distance: 5,
+      distance: 2,
       appendTo: $addBar.parent(),
+      cursor: 'move',
       connectToSortable: that.$itemsEl,
       helper: function () {
         return $('<div class="drag-placeholder">')