Add preview banner in external protocols

app/assets/javascripts/protocols/external_protocols_tab.js

@@ -6,22 +6,26 @@ function applyClickCallbackOnProtocolCards() {
       $(this).removeClass('active');
     }
     else {
+      var curr_protocol_card = $(this);
       $('.protocol-card').removeClass('active');
-      $(this).addClass('active');
+      curr_protocol_card.addClass('active');
 
       $.ajax({
-        url: $(this).data('show-url'),
+        url: $(curr_protocol_card).data('show-url'),
         type: 'GET',
         dataType: 'json',
         data: {
-          protocol_source: $(this).data('protocol-source'),
-          protocol_id: $(this).data('show-protocol-id')
+          protocol_source: $(curr_protocol_card).data('protocol-source'),
+          protocol_id: $(curr_protocol_card).data('show-protocol-id')
         },
         beforeSend: animateSpinner($('.protocol-preview-panel'), true),
         success: function(data) {
           $('.empty-preview-panel').hide();
           $('.full-preview-panel').show();
+          $('.btn-holder').html($(curr_protocol_card).find('.external-import-btn').clone());
           $('.preview-iframe').contents().find('body').html(data.html);
+
+          initLoadProtocolModalPreview();
           animateSpinner($('.protocol-preview-panel'), false);
         },
         error: function(_error) {

app/assets/stylesheets/protocol_management.scss

@@ -184,13 +184,6 @@
       padding-right: 0px;
     }
 
-    .external-import-btn {
-      background-color: $brand-primary;
-      color: $color-white;
-      font-size: 12px;
-      padding-bottom: 3px;
-      padding-top: 3px;
-    }
   }
 
   .protocol-preview-panel {
@@ -230,10 +223,35 @@
     }
 
     .full-preview-panel {
+      height: 100%;
+    }
+
+    .preview-banner {
+      align-items: center;
+      background-color: $color-white;
+      border-bottom: 1px solid $color-alto;
+      color: $color-dove-gray;
+      display: flex;
+      font-size: 16px;
+      height: 40px;
+      padding-left: 21px;
+
+      .txt-holder {
+        padding-left: 0;
+      }
+
+      .btn-holder {
+        padding-right: 21px;
+      }
+    }
+
+
+    .preview-holder {
       display: flex;
       flex-direction: column;
       height: 100%;
       overflow: hidden;
+      padding-bottom: 40px;
       padding-left: 21px;
       padding-right: 21px;
       width: 100%;
@@ -246,4 +264,12 @@
       }
     }
   }
+
+  .external-import-btn {
+    background-color: $brand-primary;
+    color: $color-white;
+    font-size: 12px;
+    padding-bottom: 3px;
+    padding-top: 3px;
+  }
 }

app/views/protocol_importers/_protocol_card.html.erb

@@ -16,7 +16,7 @@
 				<%= t('protocol_importers.card.views_and_steps', nr_of_views: protocol[:nr_of_views], nr_of_steps: protocol[:nr_of_steps]) %>
 			</div>
 			<div class='col-md-6 info-line'>
-			<button type="button" class="external-import-btn btn btn-primary pull-right"><%= t('protocol_importers.card.import_button_text') %></button>
+			<button type="button" class='external-import-btn btn btn-primary pull-right'><%= t('protocol_importers.card.import_button_text') %></button>
 			</div>
 		</div>
 	</div>

app/views/protocols/index/_external_protocols_tab.html.erb

@@ -58,14 +58,17 @@
 
     <div class='col-md-7 protocol-preview-panel'>
       <div class='empty-preview-panel'>
+
         <div class='row'>
           <div class='text-rows protocol-preview-text'>
             <%= t('protocols.index.external_protocols.preview_panel.empty_title') %>
           </div>
         </div>
+
         <div class='row'>
           <div class='text-separator'> <hr> </div>
         </div>
+
         <div class='row'>
           <div class='text-rows protocol-preview-subtext'>
             <%= t('protocols.index.external_protocols.preview_panel.empty_subtext') %>
@@ -74,7 +77,18 @@
       </div>
 
       <div class='full-preview-panel' style='display: none;'>
-        <iframe class='preview-iframe'></iframe>
+        <div class='row preview-banner'>
+          <div class='col-md-6 txt-holder'>
+            <span>
+              <%= t('protocols.index.external_protocols.preview_panel.banner_text') %>
+            </span>
+          </div>
+          <div class='col-md-6 btn-holder'>
+          </div>
+        </div>
+        <div class='preview-holder'>
+          <iframe class='preview-iframe'></iframe>
+        </div>
       </div>
     </div>
   </div>

config/locales/en.yml

@@ -1749,6 +1749,7 @@ en:
         preview_panel:
           empty_title: 'PROTOCOL PREVIEW'
           empty_subtext: 'Click on the protocol in the list to preview it here'
+          banner_text: 'Protocol Preview'
 
     steps:
       completed: 'Completed'