PWV-1: Fixing modal incrementing body padding issues

Packages/ohif-core/client/components/bootstrap/dialog/form.html

@@ -1,19 +1,28 @@
 <template name="dialogForm">
     <div id="{{this.id}}" class="modal fade" tabindex="-1" role="dialog">
         <div class="modal-dialog {{this.dialogClass}}" role="document">
-            {{#form class='modal-content' api=instance.api schema=this.schema hideValidationBox=true}}
+            {{#form class='modal-content' hideValidationBox=true
+                api=instance.api schema=this.schema
+            }}
                 <div class="modal-header">
-                    {{#button class='close' action='cancel' tagAttributes=(extend this.tagAttributes aria-label='Close')}}
+                    {{#button class='close' action='cancel'
-                        <span aria-hidden="true">&times;</span>
+                        tagAttributes=(extend this.tagAttributes
-                    {{/button}}
+                            data-dismiss='modal' aria-label='Close'
+                        )
+                    }}<span aria-hidden="true">&times;</span>{{/button}}
                     <h4 class="modal-title">{{this.title}}</h4>
                 </div>
                 <div class="modal-body">
                     {{>UI.contentBlock}}
                 </div>
                 <div class="modal-footer">
-                    {{#button class='btn btn-default' action='cancel'}}{{choose this.cancelLabel 'Cancel'}}{{/button}}
+                    {{#button class='btn btn-default'
-                    {{#button class='btn btn-primary' action='confirm'}}{{choose this.confirmLabel 'Confirm'}}{{/button}}
+                        action='cancel'
+                        tagAttributes=(extend this.tagAttributes data-dismiss='modal')
+                    }}{{choose this.cancelLabel 'Cancel'}}{{/button}}
+                    {{#button class='btn btn-primary'
+                        action='confirm'
+                    }}{{choose this.confirmLabel 'Confirm'}}{{/button}}
                 </div>
             {{/form}}
         </div>

Packages/ohif-core/client/components/bootstrap/dialog/form.js

@@ -1,9 +1,11 @@
 import { Template } from 'meteor/templating';
 import { _ } from 'meteor/underscore';
 
-Template.dialogForm.onCreated(() => {
+Template.dialogForm.onRendered(() => {
     const instance = Template.instance();
 
+    const $modal = instance.$('.modal');
+
     instance.api = {
 
         confirm() {
@@ -13,6 +15,9 @@ Template.dialogForm.onCreated(() => {
                 return;
             }
 
+            // Hide the modal, removing the backdrop
+            $modal.modal('hide');
+
             // Get the form value and call the confirm callback or resolve the promise
             const formData = form.value();
             if (_.isFunction(instance.data.confirmCallback)) {
@@ -23,6 +28,9 @@ Template.dialogForm.onCreated(() => {
         },
 
         cancel() {
+            // Hide the modal, removing the backdrop
+            $modal.modal('hide');
+
             // Call the cancel callback or resolve the promise
             if (_.isFunction(instance.data.cancelCallback)) {
                 instance.data.cancelCallback(instance.data.promiseReject);
@@ -43,10 +51,4 @@ Template.dialogForm.onRendered(() => {
         backdrop: 'static',
         keyboard: false
     });
-
-    // Remove the created modal backdrop from DOM after promise is done
-    const $backdrop = $modal.next('.modal-backdrop');
-    const dismissDialogBackdrop = () => $backdrop.remove();
-    instance.data.promise.then(dismissDialogBackdrop, dismissDialogBackdrop);
-
 });

Packages/ohif-lesiontracker/server/methods.js

@@ -1,65 +1,67 @@
 import { Meteor } from 'meteor/meteor';
 import { Mongo } from 'meteor/mongo';
+import { OHIF } from 'meteor/ohif:core';
 import { measurementTools } from 'meteor/ohif:lesiontracker/both/configuration/measurementTools';
 
 let MeasurementCollections = {};
 measurementTools.forEach(tool => {
-	MeasurementCollections[tool.id] = new Mongo.Collection(tool.id);
+    MeasurementCollections[tool.id] = new Mongo.Collection(tool.id);
 });
 
-
-
 Timepoints = new Mongo.Collection('timepoints');
 
 // Drop our collections for testing purposes
 Meteor.startup(() => {
-	Timepoints.remove({});
+    Timepoints.remove({});
-	measurementTools.forEach(tool => {
+    measurementTools.forEach(tool => {
-		MeasurementCollections[tool.id].remove({});
+        MeasurementCollections[tool.id].remove({});
-	});
+    });
-})
+});
 
-
+// TODO: Make storage use update instead of clearing the entire collection and
-// TODO: Make storage use update instead of clearing the entire collection and 
 // re-inserting everything.
 Meteor.methods({
-	storeTimepoints(timepoints) {
+    storeTimepoints(timepoints) {
-		console.log('Storing Timepoints on the Server')
+        OHIF.log.info('Storing Timepoints on the Server');
-		console.log(JSON.stringify(timepoints, null, 2));
+        OHIF.log.info(JSON.stringify(timepoints, null, 2));
-		Timepoints.remove({});
+        Timepoints.remove({});
-		timepoints.forEach(timepoint => {
+        timepoints.forEach(timepoint => {
-			delete timepoint._id;
+            delete timepoint._id;
-			Timepoints.insert(timepoint);
+            Timepoints.insert(timepoint);
-		});
+        });
-	},
+    },
 
-	retrieveTimepoints() {
+    retrieveTimepoints() {
-		console.log('Retrieving Timepoints from the Server');
+        OHIF.log.info('Retrieving Timepoints from the Server');
-		return Timepoints.find().fetch();
+        return Timepoints.find().fetch();
-	},
+    },
 
-	storeMeasurements(measurementData) {
+    storeMeasurements(measurementData) {
-		console.log('Storing Measurements on the Server')
+        OHIF.log.info('Storing Measurements on the Server');
-		console.log(JSON.stringify(measurementData, null, 2));
+        OHIF.log.info(JSON.stringify(measurementData, null, 2));
 
-		Object.keys(measurementData).forEach(toolId => {
+        Object.keys(measurementData).forEach(toolId => {
-			MeasurementCollections[toolId].remove({});
+            if (!MeasurementCollections[toolId]) {
+                return;
+            }
 
-			const measurements = measurementData[toolId];
+            MeasurementCollections[toolId].remove({});
-			measurements.forEach(measurement => {
-				MeasurementCollections[toolId].insert(measurement);
-			})
-		});
-	},
 
-	retrieveMeasurements() {
+            const measurements = measurementData[toolId];
-		console.log('Retrieving Measurements from the Server');
+            measurements.forEach(measurement => {
-		let measurementData = {};
+                MeasurementCollections[toolId].insert(measurement);
+            });
+        });
+    },
 
-		measurementTools.forEach(tool => {
+    retrieveMeasurements() {
-			measurementData[tool.id] = MeasurementCollections[tool.id].find().fetch();
+        OHIF.log.info('Retrieving Measurements from the Server');
-		});
+        let measurementData = {};
 
-		return measurementData;
+        measurementTools.forEach(tool => {
-	}
+            measurementData[tool.id] = MeasurementCollections[tool.id].find().fetch();
-});
+        });
+
+        return measurementData;
+    }
+});

Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.styl

@@ -107,7 +107,7 @@ $spacerY = 12px
     &
     &:before
     &:after
-      theme('border', '$borderThickness solid $primaryBackgroundColor')
+      theme('border', '%s solid $primaryBackgroundColor' % $borderThickness)
       theme('background-color', '$boxBackgroundColor')
       border-radius: $boxBorderRadius
       height: $boxWidth + ($borderThickness * 2)