style tweaks

src/es6/editor.es6

@@ -1,5 +1,7 @@
 import {d3} from "nbpresent-deps";
 
+import {PART} from "./parts";
+
 import {RegionTree} from "./regiontree";
 import {CellManager} from "./cells/notebook";
 
@@ -88,6 +90,10 @@ class Editor{
         }, {}));
   }
 
+  hasContent(part){
+    return (d) => (d.value.content || {}).part === part;
+  }
+
   update(){
     let that = this,
       uibb = this.$ui.node().getBoundingClientRect(),
@@ -151,7 +157,10 @@ class Editor{
 
     $region
       .classed({
-        active: (d) => selected && (d.key == selected.region)
+        active: (d) => selected && (d.key == selected.region),
+        content_source: this.hasContent(PART.source),
+        content_outputs: this.hasContent(PART.outputs),
+        content_widgets: this.hasContent(PART.widgets)
       })
     .select(".region_bg")
       .transition()

src/es6/sorter.es6

@@ -48,9 +48,15 @@ class Sorter {
 
     if(visible) {
       this.draw();
-    }else if(this.editor){
-      this.editor.destroy();
-      this.editor = null;
+    }else {
+      if(this.editor){
+        this.editor.destroy();
+        this.editor = null;
+      }
+      if(this.templates){
+        this.templates.destroy();
+        this.templates = null;
+      }
     }
 
     this.update();
@@ -203,7 +209,7 @@ class Sorter {
 
     let slides = this.tree.get("sortedSlides");
 
-    this.scale.x.range([0, this.slideWidth()]);
+    this.scale.x.range([20, this.slideWidth() + 20]);
 
     let $slide = this.$slides.selectAll(".slide")
       .data(slides, (d) => d.key);
@@ -253,7 +259,7 @@ class Sorter {
       .style({
         opacity: selectedRegion ? 1 : 0,
         display: selectedRegion ? "block" : "none",
-        left: `${selectedSlideLeft}px`
+        left: `${selectedSlideLeft - 30}px`
       });
 
     this.$empty
@@ -314,22 +320,22 @@ class Sorter {
       .classed({deck_toolbar: 1})
       .datum([
         [{
-          icon: "plus-square-o",
+          icon: "plus-square-o fa-2x",
           click: () => this.addSlide(),
           tip: "Add Slide"
         }], [{
-          icon: "edit",
+          icon: "edit fa-2x",
           click: () => this.editSlide(this.selectedSlide.get()),
           tip: "Edit Slide",
           visible: () => this.selectedSlide.get() && !this.editor
         }, {
-          icon: "chevron-circle-down",
+          icon: "chevron-circle-down fa-2x",
           click: () => this.editSlide(this.selectedSlide.get()),
           tip: "Back to Sorter",
           visible: () => this.editor
         }],
         [{
-          icon: "trash",
+          icon: "trash fa-2x",
           click: () => {
             this.removeSlide(this.selectedSlide.get());
             this.selectedSlide.set(null);
@@ -345,21 +351,21 @@ class Sorter {
       .classed({region_toolbar: 1})
       .datum([
         [{
-          icon: "external-link-square",
+          icon: "terminal",
           click: () => this.linkContent(PART.source),
           tip: "Link Region to Cell Input"
         },
         {
-          icon: "external-link",
+          icon: "image",
           click: () => this.linkContent(PART.outputs),
           tip: "Link Region to Cell Output"
         },
         {
           icon: "sliders",
           click: () => this.linkContent(PART.widgets),
           tip: "Link Region to Cell Widgets"
-        }],
-        [{
+        },
+        {
           icon: "unlink",
           click: () => this.linkContent(null),
           tip: "Unlink Region"
@@ -403,20 +409,23 @@ class Sorter {
   }
 
   templatePicked(slide){
-    let last = this.tree.get("sortedSlides").slice(-1),
-      selected = this.selectedSlide.get();
-
-    this.slides.set([slide.key], slide.value);
+    if(slide && this.templates && !this.templates.killed){
+      let last = this.tree.get("sortedSlides").slice(-1),
+        selected = this.selectedSlide.get();
 
-    let appended = this.appendSlide(
-        selected ? selected : last.length ? last[0].key : null,
-        slide.key
-      );
+      this.slides.set([slide.key], slide.value);
 
-    this.selectedSlide.set(appended);
+      let appended = this.appendSlide(
+          selected ? selected : last.length ? last[0].key : null,
+          slide.key
+        );
 
-    this.templates.destroy();
-    this.templates = null;
+      this.selectedSlide.set(appended);
+    }
+    if(this.templates){
+      this.templates.destroy();
+      this.templates = null;
+    }
   }
 
   editSlide(id){

src/es6/templates.es6

@@ -78,7 +78,7 @@ class TemplateLibrary {
 
     this.$ui.append("button")
       .classed({btn: 1, hide_library: 1, "btn-default": 1})
-      .on("click", () => this.destroy())
+      .on("click", () => this.picked(null))
       .append("i")
       .classed({fa: 1, "fa-remove": 1});
 

src/es6/toolbar.es6

@@ -64,7 +64,7 @@ class Toolbar {
       .on("click", (d) => d.click() )
       .select("i")
       .attr({
-        "class": (d) => `fa fa-fw fa-${d.icon}`,
+        "class": (d) => `fa fa-fw fa-2x fa-${d.icon}`,
       });
 
     let clean = function(){

src/less/editor.less

@@ -17,17 +17,33 @@
       fill: transparent;
       opacity: 0.50;
       stroke: grey;
+      stroke-width: 2px;
+      stroke-dasharray: 5,5;
     }
-    .handle {
-      visibility: hidden;
+
+    &.content_source .region_bg{
+      stroke: rgba(0, 0, 128, 0.25);
+      stroke-dasharray: none;
     }
-    &.active {
-      .region_bg{
-        stroke: @jpy-brand;
-        opacity: 0.9;
-        stroke-width: 10px;
-      }
+
+    &.content_outputs .region_bg{
+      stroke: rgba(139, 0, 0, 0.25);
+      stroke-dasharray: none;
+    }
+
+    &.content_widgets .region_bg{
+      stroke: rgba(139, 0, 128, 0.25);
+      stroke-dasharray: none;
     }
+
+
+    &.active .region_bg{
+      stroke: @jpy-brand;
+      opacity: 0.9;
+      stroke-width: 10px;
+      stroke-dasharray: none;
+    }
+
   }
 
 }

src/less/mini.less

@@ -24,23 +24,26 @@
 
     background-color: rgba(255,255,255,0.5);
     background-repeat: no-repeat;
-    border: solid 1px rgba(128,128,128,0.5);
+    border: dashed 3px rgba(128,128,128,0.5);
+    border-radius: 3px;
 
-    &.active{
-      border-color: @jpy-brand;
-      box-shadow: @nbpresent-z-shadow;
-    }
+    transition: border 0.2s;
 
     &.content_source{
-      background-color: rgba(0, 0, 128, 0.25);
+      border: solid 3px rgba(0, 0, 128, 0.25);
     }
 
     &.content_outputs{
-      background-color: rgba(139, 0, 0, 0.25);
+      border: solid 3px rgba(139, 0, 0, 0.25);
     }
 
     &.content_widgets{
-      background-color: rgba(139, 0, 128, 0.25);
+      border: solid 3px rgba(139, 0, 128, 0.25);
+    }
+
+    &.active{
+      transition: border 0.2s;
+      border: solid 3px @jpy-brand;
     }
   }
 }