Finish external protocols screen

Closes SCI-3534

app/assets/stylesheets/protocol_management.scss

@@ -57,6 +57,125 @@
 
   .tab-pane-settings {
     border: 0;
-    padding: 25px 20px;
+  }
+}
+
+.external-protocols-tab {
+
+  .protocols-search-bar-panel {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    padding-right: 0px;
+    justify-content: space-between;
+    margin-bottom: 15px;
+
+    .protocolsio-logo {
+      height: 30px;
+      width: 30px;
+    }
+
+    .protocolsio-title {
+      color: $brand-primary;
+      font-size: 14px;
+      vertical-align: middle;
+    }
+
+    .protocols-search-bar {
+      padding-right: 0px;
+      width: 70%;
+
+      .input-group {
+        margin-bottom: 0;
+        width: 100%;
+
+        .form-control {
+          border-right: 0;
+        }
+
+        .input-group-addon {
+          background: $color-white;
+          color: $color-emperor;
+        }
+      }
+    }
+  }
+
+  .protocol-list-side-panel {
+    background-color: $color-white;
+    border-right: 1px solid $color-silver-chalice;
+    border-top: 1px solid $color-silver-chalice;
+    height: 600px;
+    padding-right: 0px;
+
+    .row {
+      margin-left: 0;
+      margin-right: 0;
+
+      &.protocol-sort {
+        border-bottom: 1px solid $color-silver-chalice;
+
+        span {
+          vertical-align: middle;
+          color: $color-silver-chalice;
+        }
+
+        .btn-group {
+          margin-bottom: 10px;
+          margin-top: 10px;
+
+          label {
+            padding-bottom: 0;
+            padding-top: 0;
+
+            &.active {
+              background: $color-gainsboro;
+              border-radius: 5px;
+              color: $color-emperor;
+            }
+          }
+        }
+      }
+    }
+
+    // When no search result is present
+    .empty-text {
+      color: $color-silver-chalice;
+      font-size: 13px;
+      margin-top: 20px;
+    }
+  }
+
+  .protocol-preview-panel {
+    border-top: 1px solid $color-silver-chalice;
+    background-color: $color-concrete;
+    height: 600px;
+    padding-top: 79px;
+    padding-left: 0px;
+
+    .row {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    // Empty texts on the right
+    .protocol-preview-text {
+      color: $color-silver-chalice;
+      font-size: 24px;
+    }
+
+    .protocol-preview-subtext {
+      color: $color-silver-chalice;
+      font-size: 14px;
+    }
+
+    .text-rows {
+      text-align: center;
+    }
+
+    .text-separator hr {
+      border: 1px solid $color-alto;
+      width: 120px;
+    }
   }
 }

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

@@ -1 +1,71 @@
-External protocols
+<div class='external-protocols-tab'>
+  <div class='row'>
+    <div class='col-md-5 protocols-search-bar-panel'>
+
+      <div>
+        <%= image_tag 'external_protocols/protocolsio_logo.png',
+          class: 'protocolsio-logo' %>
+        <span class='protocolsio-title'><%= t('protocols.index.external_protocols.protocolsio_title') %></span>
+      </div>
+      <%= form_tag '#',
+        method: :get,
+        class: 'protocols-search-bar' do %>
+
+          <div class='input-group'>
+            <input class='form-control'
+            type="text"
+            name="q"
+            placeholder="<%= t('protocols.index.external_protocols.search_bar_placeholder') %>" >
+            </input>
+
+            <span class='input-group-addon'><i class='fas fa-search '></i></span>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+
+    <div class='row main-protocol-panel'>
+      <div class='col-md-5 protocol-list-side-panel'>
+        <div class='row protocol-sort'>
+          <span><%= t('protocols.index.external_protocols.sort_by.title') %></span>
+          <div class='btn-group' data-toggle='buttons' >
+            <label class='btn btn-link active'>
+              <input type='radio' name='sory_by' id='alphabetically' value='alpha'>
+              <%= t('protocols.index.external_protocols.sort_by.alphabetically') %>
+            </label>
+            <label class='btn btn-link'>
+              <input type='radio' name='sory_by' id='newest' value='newest'>
+              <%= t('protocols.index.external_protocols.sort_by.newest') %>
+            </label>
+            <label class='btn btn-link'>
+              <input type='radio' name='sory_by' id='oldest' value='oldest'>
+              <%= t('protocols.index.external_protocols.sort_by.oldest') %>
+            </label>
+          </label>
+        </div>
+      </div>
+
+      <div class='row empty-text'>
+        <%= t('protocols.index.external_protocols.list_panel.empty_text') %>
+      </div>
+    </div>
+
+    <div class='col-md-7 protocol-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') %>
+        </div>
+      </div>
+      </div>
+    </div>
+  </div>
+</div>

config/locales/en.yml

@@ -1733,6 +1733,20 @@ en:
         row_failed: "Failed"
         row_in_repository_public: "%{protocol} - <i>into Team protocols</i>"
         row_in_repository_private: "%{protocol} - <i>into My protocols</i>"
+      external_protocols:
+        search_bar_placeholder: 'Search for protocols'
+        protocolsio_title: 'Protocols.io'
+        sort_by:
+          title: 'Show first:'
+          alphabetically: 'alphabetically'
+          newest: 'newest'
+          oldest: 'oldest'
+        list_panel:
+          empty_text: 'Search for protocols above to list them here'
+        preview_panel:
+          empty_title: 'PROTOCOL PREVIEW'
+          empty_subtext: 'Click on the protocol in the list to preview it here'
+
     steps:
       completed: 'Completed'
       uncompleted: 'Uncompleted'