Work-in-progress on study/timepoint association modal and multi-study selection (LT-60, LT-116)

2016-01-12 21:56:40 +01:00
1 parent 10be1b0336
commit 41b75de814
@@ -0,0 +1,28 @@
+<template name="studyContextMenu">
+    <div id="studyContextMenu" class="studyContextMenu noselect"
+         oncontextmenu='return false;'
+         unselectable='on'
+         onselectstart='return false;'>
+        <ul>
+            <li>
+                <!--<a id="deleteTool">Delete</a>-->
+                <!-- TODO: Make this dynamically accept options-->
+                <a id="launchStudyAssociation" type="button"
+                   data-toggle="modal"
+                   data-target="#associationModal"
+                   title="Launch Study Association">
+                    <i class="fa fa-calendar-plus-o fa-lg"></i>
+                    Associate
+                </a>
+                <a><span class="fa-stack fa-lg">
+                      <i class="fa fa-user fa-stack-1x"></i>
+                      <i class="fa fa-ban fa-stack-2x text-danger"></i>
+                    </span> Anonymize
+                </a>
+                <a><i class="fa fa-trash fa-lg"></i> Delete</a>
+                <a><i class="fa fa-share fa-lg"></i> Share</a>
+                <a><i class="fa fa-download fa-lg"></i> Download</a>
+            </li>
+        </ul>
+    </div>
+</template>
@@ -0,0 +1,79 @@
+function closeHandler(dialog) {
+    // Hide the dialog
+    $(dialog).css('display', 'none');
+
+    // Remove the backdrop
+    $('.removableBackdrop').remove();
+}
+
+/**
+ * This function is used inside the Worklist package to define a right click callback
+ *
+ * @param e
+ * @param template
+ */
+openStudyContextMenu = function(e, template) {
+    var study = $(e.currentTarget);
+    Template.studyContextMenu.study = study;
+
+    var dialog = $('#studyContextMenu');
+
+    // Show the nonTargetLesion dialog above
+    var dialogProperty = {
+        display: 'block'
+    };
+
+    // Device is touch device or not
+    // If device is touch device, set position center of screen vertically and horizontally
+    if (isTouchDevice()) {
+        // add dialogMobile class to provide a black, transparent background
+        dialog.addClass('dialogMobile');
+        dialogProperty.top = 0;
+        dialogProperty.left = 0;
+        dialogProperty.right = 0;
+        dialogProperty.bottom = 0;
+    } else {
+        dialogProperty.top = e.pageY;// - dialog.outerHeight() - 40;
+        dialogProperty.left = e.pageX;// - dialog.outerWidth() / 2;
+
+        var pageHeight = $(window).height();
+        dialogProperty.top = Math.max(dialogProperty.top, 0);
+        dialogProperty.top = Math.min(dialogProperty.top, pageHeight - dialog.outerHeight());
+
+        var pageWidth = $(window).width();
+        dialogProperty.left = Math.max(dialogProperty.left, 0);
+        dialogProperty.left = Math.min(dialogProperty.left, pageWidth - dialog.outerWidth());
+    }
+
+    dialog.css(dialogProperty);
+    dialog.focus();
+
+    log.info(e);
+    log.info(template);
+
+    // Show the backdrop
+    UI.render(Template.removableBackdrop, document.body);
+
+    // Make sure the context menu is closed when the user clicks away
+    $('.removableBackdrop').one('mousedown touchstart', function() {
+        closeHandler(dialog);
+    });
+};
+
+// Temporary for now
+functionList = {};
+
+Template.studyContextMenu.events({
+    'click a': function(e) {
+        var study = Template.studyContextMenu.study;
+        var id = $(e.currentTarget).attr('id');
+
+        var fn = functionList[id];
+        if (fn && typeof(fn) === 'function') {
+            fn(study);
+        }
+
+        var dialog = $('#studyContextMenu');
+        closeHandler(dialog);
+    }
+});
@@ -0,0 +1,51 @@
+.studyContextMenu
+  z-index: 10000
+  display: none
+  position: absolute
+  color: whitesmoke
+  background-color: #2d2d2d
+
+  width: -moz-fit-content
+  width: -webkit-fit-content
+  width: fit-content
+
+  height: -moz-fit-content
+  height: -webkit-fit-content
+  height: fit-content
+
+  min-width: 100px
+  font-size: 14px
+  text-align: left
+  -webkit-background-clip: padding-box
+  background-clip: padding-box
+  border: 1px solid rgba(0, 0, 0, .15)
+  border-radius: 4px
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
+  box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
+
+  ul
+    width: 100%
+    margin: 5px 0
+    list-style: none
+    padding: 0
+
+    li
+      clear: both
+      white-space: nowrap
+
+      a
+        padding: 3px 15px
+        display: block
+        text-decoration: none
+        cursor: pointer
+        line-height: 25px
+        color: #808080
+
+        &:hover
+          color: #439193
+          text-decoration: none
+          background-color: #1d1d1d
+
+  .fa-lg
+    width: 40px
+    text-align: center