Style and logic for tall/short completion element

TODO

@@ -52,7 +52,7 @@ DONE Update examples with regard to completion time
 DONE New Model View Interpreter architecture, for OperatorsMenu
 DONE New MVI architecture for Sandbox
 DONE Rename interpreters to intents
-TODO Style and logic for tall/short completion element
+DONE Style and logic for tall/short completion element
 TODO Delete old sandbox models, views and sub views
   - models/input-diagrams
   - models/output-diagram
@@ -63,6 +63,7 @@ TODO Delete old sandbox models, views and sub views
   - rename views/new-sandbox
   - Remove hyperscript everywhere
   - Remove raw DOM manipulation
+TODO Bug: slowly dragging should change marble time
 TODO Bug: some marbles can't be dragged, error 'invalid parent' is shown
 TODO Build scripts to replace gulp (?)
 ## v1.1.0

dist/css/main.css

@@ -114,8 +114,9 @@
 }
 .diagramCompletion-inner {
   width: 2px;
-  height: 100%;
+  height: 50%;
   margin-left: 7px;
+  margin-top: 11px;
   background-color: #323232;
 }
 .diagramCompletion.is-draggable {
@@ -126,6 +127,10 @@
   -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.17);
   box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.17);
 }
+.diagramCompletion.is-tall .diagramCompletion-inner {
+  height: 100%;
+  margin-top: 0;
+}
 .marble {
   width: 32px;
   height: 32px;

src/views/completion.js

@@ -5,6 +5,8 @@ var h = require('hyperscript');
 var vh = require('virtual-hyperscript');
 var Utils = require('rxmarbles/views/utils');
 
+var MARBLE_WIDTH = 5; // estimate of a marble width, in percentages
+
 function render(completionTime) {
   var element = h('div.diagramCompletion.is-draggable.js-completion', {}, [
     h('div.diagramCompletion-inner')
@@ -18,11 +20,19 @@ function render(completionTime) {
   return element;
 }
 
-function vrender(completionData, isDraggable, mouseDown$) {
+function vrender(completionData, isDraggable, diagramData, mouseDown$) {
   if (typeof isDraggable === 'undefined') {
     isDraggable = false;
   }
-  return vh('div.diagramCompletion'+(isDraggable ? '.is-draggable' : ''), {
+  var isDraggableClass = (isDraggable) ? '.is-draggable' : '';
+  var isTall = false;
+  diagramData.forEach(function (marbleData) {
+    if (Math.abs(marbleData.time - completionData.time) <= MARBLE_WIDTH*0.5) {
+      isTall = true;
+    }
+  });
+  var isTallClass = (isTall) ? '.is-tall' : '';
+  return vh('div.diagramCompletion' + isDraggableClass + isTallClass, {
     style: {'left': completionData.time + '%'},
     attributes: {'data-diagram-id': completionData.diagramId},
     'ev-mousedown': function(ev) { if (mouseDown$) { mouseDown$.onNext(ev); } }

src/views/diagram.js

@@ -16,7 +16,7 @@ function vrender(diagramData, isInteractive, marbleMouseDown$, completionMouseDo
     });
   var completionData = {time: diagramData.end, diagramId: diagramData.id};
   var completionVTree = Completion.vrender(
-    completionData, isInteractive, completionMouseDown$
+    completionData, isInteractive, diagramData, completionMouseDown$
   );
   return h('div.diagram', {}, [
     h('div.diagram-arrow'),

styles/components/diagram/diagramCompletion.less

@@ -9,8 +9,9 @@
 
 .diagramCompletion-inner {
   width: @diagram-arrow-thickness;
-  height: 100%;
+  height: 50%;
   margin-left: (3.5*@diagram-arrow-thickness);
+  margin-top: (@diagram-completion-height / 4.0);
   background-color: @diagram-arrow-color;
 }
 
@@ -20,3 +21,10 @@
     .m-z-depth-1();
   }
 }
+
+.diagramCompletion.is-tall {
+  .diagramCompletion-inner {
+    height: 100%;
+    margin-top: 0;
+  }
+}