diff --git a/src/es6/editor.es6 b/src/es6/editor.es6 index da3c486..5589c2e 100644 --- a/src/es6/editor.es6 +++ b/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() diff --git a/src/es6/sorter.es6 b/src/es6/sorter.es6 index 4c8a498..aaeb5b7 100644 --- a/src/es6/sorter.es6 +++ b/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,12 +351,12 @@ 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" }, @@ -358,8 +364,8 @@ class Sorter { 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){ diff --git a/src/es6/templates.es6 b/src/es6/templates.es6 index f517222..0ad00d9 100644 --- a/src/es6/templates.es6 +++ b/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}); diff --git a/src/es6/toolbar.es6 b/src/es6/toolbar.es6 index 5bfbb85..9ec2cd7 100644 --- a/src/es6/toolbar.es6 +++ b/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(){ diff --git a/src/less/editor.less b/src/less/editor.less index ac3aa6b..2b4805b 100644 --- a/src/less/editor.less +++ b/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; + } + } } diff --git a/src/less/mini.less b/src/less/mini.less index 64cb1ad..7882100 100644 --- a/src/less/mini.less +++ b/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; } } }