Added About modal with last commit hash, moved some dialogs to lesionTracker package from viewerbase (OHIF-52)

Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.html

@@ -0,0 +1,16 @@
+<template name="confirmDeleteDialog">
+    <div id="confirmDeleteDialog" tabindex="0">
+        {{ #if title }}
+        <h5>{{title}}</h5>
+        {{ else }}
+        <h5>Remove data from Timepoint?</h5>
+        {{/if}}
+        {{ #if text }}
+        <p>{{text}}</p>
+        {{ else }}
+        <p>Are you sure you would like to remove the measurement data at this timepoint?</p>
+        {{/if}}
+        <button id="cancel" class="btn btn-link" tabindex="1">Cancel</button>
+        <button id="confirm" class="btn btn-primary" tabindex="0">OK</button>
+    </div>
+</template>

Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.js

@@ -0,0 +1,85 @@
+function closeHandler() {
+    // Hide the lesion dialog
+    $('#confirmDeleteDialog').css('display', 'none');
+
+    // Remove the backdrop
+    $('.removableBackdrop').remove();
+
+    // Remove the callback from the template data
+    delete Template.confirmDeleteDialog.doneCallback;
+
+    // Restore the focus to the active viewport
+    setFocusToActiveViewport();
+}
+
+/**
+ * Displays the confirmation dialog template and the removable backdrop element
+ *
+ * @param doneCallback A callback
+ * @param options
+ */
+showConfirmDialog = function(doneCallback, options) {
+    // Show the backdrop
+    options = options || {};
+    UI.renderWithData(Template.removableBackdrop, options, document.body);
+
+    var confirmDeleteDialog = $('#confirmDeleteDialog');
+    confirmDeleteDialog.remove();
+
+    var viewer = document.getElementById('viewer');
+    UI.renderWithData(Template.confirmDeleteDialog, options, viewer);
+
+    // Make sure the context menu is closed when the user clicks away
+    $('.removableBackdrop').one('mousedown touchstart', function() {
+        closeHandler();
+    });
+
+    confirmDeleteDialog = $('#confirmDeleteDialog');
+    confirmDeleteDialog.css('display', 'block');
+    confirmDeleteDialog.focus();
+
+    if (doneCallback && typeof doneCallback === 'function') {
+        Template.confirmDeleteDialog.doneCallback = doneCallback;
+    }
+};
+
+// Global object of key names (TODO: put this somewhere else)
+keys = {
+    ESC: 27,
+    ENTER: 13
+};
+
+Template.confirmDeleteDialog.events({
+    'click #cancel, click #close': function() {
+        closeHandler();
+    },
+    'click #confirm': function() {
+        var doneCallback = Template.confirmDeleteDialog.doneCallback;
+        if (doneCallback && typeof doneCallback === 'function') {
+            doneCallback();
+        }
+
+        closeHandler();
+    },
+    'keydown #confirmDeleteDialog': function(e) {
+        if (e.which === keys.ESC) {
+            closeHandler();
+            return false;
+        }
+
+        if (this.keyPressAllowed === false) {
+            return;
+        }
+
+        var doneCallback = Template.confirmDeleteDialog.doneCallback;
+
+        // If Enter is pressed, close the dialog
+        if (e.which === keys.ENTER) {
+            if (doneCallback && typeof doneCallback === 'function') {
+                doneCallback();
+            }
+
+            closeHandler();
+        }
+    }
+});

Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.styl

@@ -0,0 +1,26 @@
+#confirmDeleteDialog
+  display: none
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  z-index: 100
+  width: 300px
+  min-height: 145px
+  max-height: 300px
+  height: fit-content
+  margin: auto
+  border-radius: 5px
+  padding: 10px 20px 10px 20px
+  background-color: rgba(255,255,255,1)
+  outline: none
+
+  .btn
+    text-decoration: none
+
+  #cancel
+    float: left
+
+  #confirm
+    float: right

Packages/lesiontracker/client/components/emailVerification/emailVerification.html

@@ -0,0 +1,8 @@
+<template name="emailVerification">
+    <div id="emailVerification">
+        <div id="emailVerificationContent">
+            <h3>Verify Your Email Address</h3>
+            <p>We need to verify your email address. We've sent an email to <b>{{emailAddress}}</b> to verify your address. Please click the link in your email to continue.</p>
+        </div>
+    </div>
+</template>

Packages/lesiontracker/client/components/emailVerification/emailVerification.js

@@ -0,0 +1,5 @@
+Template.emailVerification.helpers({
+    emailAddress: function() {
+        return Meteor.user().emails[0].address;
+    }
+});

Packages/lesiontracker/client/components/emailVerification/emailVerification.styl

@@ -0,0 +1,15 @@
+#emailVerification
+  #emailVerificationContent
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    margin: auto
+    width: 60%
+    height: 20%
+    z-index: 100
+    border-radius: 5px
+    padding: 10px 20px 10px 20px
+    background-color: rgba(255,255,255,1)
+    outline: none

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html

@@ -10,9 +10,9 @@
                 </div>
             </a>
             {{ #if studyListToggleText }}
-            <div class="studyListLinkSection pull-left m-x-1 p-x-2 js-toggle-studyList">
+            <a class="btn studyListLinkSection pull-left m-x-1 p-x-2 js-toggle-studyList">
                 {{studyListToggleText}}
-            </div>
+            </a>
             {{ /if }}
             <div class="userAccountSection pull-right">
                 {{>userAccountMenu}}

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl

@@ -31,6 +31,8 @@ $expandedHeight = 160px
 
   .studyListLinkSection
     border-left: $uiBorderThickness solid $uiBorderColor;
+    
+  .btn
     color: $textSecondaryColor
     cursor: pointer
     font-size: 13px