Cleaned up dialog styles (OHIF-49) and duplicate calls to Worklist Search (credit to @mdg583)

Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.html

@@ -1,7 +1,4 @@
 <template name="protocolEditor">
-    {{ >ruleEntryDialog }}
-    {{ >settingEntryDialog }}
-    {{ >textEntryDialog }}
     <div id='protocolEditor'>
         <div class="row">
             <div class="navigationButtons col-xs-12">

Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl

@@ -8,7 +8,7 @@ $height = 20px
   padding: 10px
   position: absolute
   top: 0
-  background: $primaryBackgroundCOlor
+  background: $primaryBackgroundColor
 
   .navigationButtons
     ul

Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.js

@@ -211,13 +211,16 @@ Template.ruleEntryDialog.onCreated(function() {
 
 Template.ruleEntryDialog.onRendered(function() {
     // Initialize the Comparators Select2 box
-    var template = this;
+    var template = Template.instance();
     template.$('.comparators').select2();
 
     // Get the default Comparator from the Select2 box and use it to
     // initialize the comparatorId ReactiveVar
     var comparatorId = template.$('.comparators').val();
     template.comparatorId.set(comparatorId);
+
+    const dialog = template.$('.ruleEntryDialog');
+    dialog.draggable();
 });
 
 Template.ruleEntryDialog.helpers({

Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl

@@ -1,3 +1,5 @@
+@import "{design}/app.styl"
+
 .ruleEntryDialog
   display: none
   position: absolute
@@ -6,15 +8,19 @@
   left: 0
   right: 0
   z-index: 100
-  width: 50%
-  max-width: 400px
+  width: 350px
   height: 230px
   margin: auto
-  border-radius: 5px
-  padding: 10px 20px 10px 20px
+  padding: 10px
   background-color: rgba(255,255,255,1)
   outline: none
 
+  opacity: 0.95
+  border-radius: 8px
+  border: 1px solid $uiBorderColor
+  background: $uiGrayDarkest
+  color: $textSecondaryColor
+
   .dialogContent
     text-align: center
     margin-bottom: 10px
@@ -33,4 +39,9 @@
 
   input.currentValue
     width: 95%
-    text-align: center
+    text-align: center
+    padding: 4px
+    color: black
+    height: 30px
+    border-radius: 2px
+    border: 0

Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.js

@@ -113,6 +113,12 @@ Template.settingEntryDialog.onCreated(function() {
     template.setting = new ReactiveVar();
 });
 
+Template.settingEntryDialog.onRendered(function() {
+    const template = this;
+    const dialog = template.$('.settingEntryDialog');
+    dialog.draggable();
+});
+
 Template.settingEntryDialog.events({
     /**
      * Save a setting that is being edited

Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl

@@ -1,3 +1,5 @@
+@import "{design}/app.styl"
+
 .settingEntryDialog
   display: none
   position: absolute
@@ -6,15 +8,18 @@
   left: 0
   right: 0
   z-index: 100
-  width: 50%
-  max-width: 400px
-  height: 230px
+  width: 300px
+  height: 200px
   margin: auto
-  border-radius: 5px
-  padding: 10px 20px 10px 20px
-  background-color: rgba(255,255,255,1)
+  padding: 10px
   outline: none
 
+  opacity: 0.95
+  border-radius: 8px
+  border: 1px solid $uiBorderColor
+  background: $uiGrayDarkest
+  color: $textSecondaryColor
+
   .dialogContent
     text-align: center
     margin-bottom: 10px
@@ -33,4 +38,9 @@
 
   input.currentValue
     width: 95%
-    text-align: center
+    text-align: center
+    padding: 4px
+    color: black
+    height: 30px
+    border-radius: 2px
+    border: 0

Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl

@@ -46,6 +46,7 @@
   .addStage
     margin: 10px 0
     text-align: center
+    color: $defaultColor
 
     #addStage
       transition(all 0.1s ease)

Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.js

@@ -57,6 +57,12 @@ openTextEntryDialog = function(title, instructions, currentValue, doneCallback)
     });
 };
 
+Template.textEntryDialog.onRendered(() => {
+    const instance = Template.instance();
+    const dialog = instance.$('.settingEntryDialog');
+    dialog.draggable();
+});
+
 Template.textEntryDialog.events({
     /**
      * Save the user-specified text

Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl

@@ -1,3 +1,5 @@
+@import "{design}/app.styl"
+
 .textEntryDialog
   display: none
   position: absolute
@@ -6,15 +8,18 @@
   left: 0
   right: 0
   z-index: 100
-  width: 50%
-  max-width: 400px
+  width: 300px
   height: 170px
   margin: auto
-  border-radius: 5px
-  padding: 10px 20px 10px 20px
-  background-color: rgba(255,255,255,1)
+  padding: 10px
   outline: none
 
+  opacity: 0.95
+  border-radius: 8px
+  border: 1px solid $uiBorderColor
+  background: $uiGrayDarkest
+  color: $textSecondaryColor
+
   .dialogContent
     margin-bottom: 10px
 
@@ -26,4 +31,9 @@
 
   input.currentValue
     width: 95%
-    text-align: left
+    text-align: left
+    padding: 4px
+    color: black
+    height: 30px
+    border-radius: 2px
+    border: 0