From b3c3b68dc2afc3a043d7314b84ec26448aaf8517 Mon Sep 17 00:00:00 2001 From: Jure Grabnar Date: Wed, 19 Jun 2019 22:54:20 +0200 Subject: [PATCH 1/4] Add external preview to External Protocols tab Closes SCI-3563 --- .../protocols/external_protocols_tab.js | 27 +++++++++ .../stylesheets/protocol_management.scss | 55 ++++++++++++++----- app/views/protocols/index.html.erb | 2 +- .../index/_external_protocols_tab.html.erb | 52 ++++++++++++++---- config/initializers/assets.rb | 1 + 5 files changed, 110 insertions(+), 27 deletions(-) create mode 100644 app/assets/javascripts/protocols/external_protocols_tab.js diff --git a/app/assets/javascripts/protocols/external_protocols_tab.js b/app/assets/javascripts/protocols/external_protocols_tab.js new file mode 100644 index 000000000..d48684cac --- /dev/null +++ b/app/assets/javascripts/protocols/external_protocols_tab.js @@ -0,0 +1,27 @@ +function applyClickCallbackOnProtocolCards() { + $('.protocol-card').off('click').on('click', function(e) { + $.ajax({ + url: $(this).data('show-url'), + type: 'GET', + dataType: 'json', + data: { + protocol_source: $(this).data('protocol-source'), + protocol_id: $(this).data('show-protocol-id') + }, + success: function (data) { + $('.empty-preview-panel').hide(); + $('.full-preview-panel').show(); + $('.preview-iframe').contents().find('body').html(data.html); + }, + error: function (error) { + // TODO: we should probably show some alert bubble + $('.empty-preview-panel').show(); + $('.full-preview-panel').hide(); + } + }); + e.preventDefault(); + return false; + }); +} + +applyClickCallbackOnProtocolCards(); diff --git a/app/assets/stylesheets/protocol_management.scss b/app/assets/stylesheets/protocol_management.scss index bfa9ac1c5..d829d0936 100644 --- a/app/assets/stylesheets/protocol_management.scss +++ b/app/assets/stylesheets/protocol_management.scss @@ -60,6 +60,10 @@ } } +.tab-pane.external_protocols { + padding-bottom: 0; +} + .external-protocols-tab { .protocols-search-bar-panel { @@ -153,7 +157,7 @@ border-top: 1px solid $color-silver-chalice; height: 600px; padding-left: 0; - padding-top: 79px; + padding-right: 0; .row { margin-left: 0; @@ -161,23 +165,44 @@ } // Empty texts on the right - .protocol-preview-text { - color: $color-silver-chalice; - font-size: 24px; + .empty-preview-panel { + padding-top: 79px; + + .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; + } } - .protocol-preview-subtext { - color: $color-silver-chalice; - font-size: 14px; - } + .full-preview-panel { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + padding-left: 21px; + padding-right: 21px; + width: 100%; - .text-rows { - text-align: center; - } - - .text-separator hr { - border: 1px solid $color-alto; - width: 120px; + .preview-iframe { + border: none; + flex-grow: 1; + margin: 0; + padding: 0; + } } } } diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb index 3caec8c30..e4bd1ded1 100644 --- a/app/views/protocols/index.html.erb +++ b/app/views/protocols/index.html.erb @@ -22,7 +22,7 @@
-
+
<% if @type.in? [:public, :private] %>
diff --git a/app/views/protocols/index/_external_protocols_tab.html.erb b/app/views/protocols/index/_external_protocols_tab.html.erb index 5b64b40e4..1984518ab 100644 --- a/app/views/protocols/index/_external_protocols_tab.html.erb +++ b/app/views/protocols/index/_external_protocols_tab.html.erb @@ -51,23 +51,53 @@
<%= t('protocols.index.external_protocols.list_panel.empty_text') %>
+ +
+ Banana protocol (click me) +
+ +
+ Cut run targeted protocol (click me) +
+ +
+ Error protocol (click me, should default to default screen) +
+
-
-
- <%= t('protocols.index.external_protocols.preview_panel.empty_title') %> -
-
-
-
-
-
-
- <%= t('protocols.index.external_protocols.preview_panel.empty_subtext') %> +
+
+
+ <%= t('protocols.index.external_protocols.preview_panel.empty_title') %> +
+
+
+
+
+
+
+ <%= t('protocols.index.external_protocols.preview_panel.empty_subtext') %> +
+ +
+
+ +<%= javascript_include_tag "protocols/external_protocols_tab.js" %> diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index c88708404..18aa71fa0 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -56,6 +56,7 @@ Rails.application.config.assets.precompile += %w(experiments/dropdown_actions.js) Rails.application.config.assets.precompile += %w(reports/new.js) Rails.application.config.assets.precompile += %w(protocols/index.js) +Rails.application.config.assets.precompile += %w(protocols/external_protocols_tab.js) Rails.application.config.assets.precompile += %w(protocols/header.js) Rails.application.config.assets.precompile += %w(protocols/steps.js) Rails.application.config.assets.precompile += %w(protocols/edit.js) From fcd42a417873ed0bffb474caf0df6855344bfbff Mon Sep 17 00:00:00 2001 From: Jure Grabnar Date: Wed, 19 Jun 2019 22:59:30 +0200 Subject: [PATCH 2/4] Fix border radius around active sort button --- app/assets/stylesheets/protocol_management.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/stylesheets/protocol_management.scss b/app/assets/stylesheets/protocol_management.scss index d829d0936..55b873f34 100644 --- a/app/assets/stylesheets/protocol_management.scss +++ b/app/assets/stylesheets/protocol_management.scss @@ -124,7 +124,7 @@ &.active { background: $color-gainsboro; - border-radius: 5px; + border-radius: 5px !important; color: $color-emperor; } } @@ -141,7 +141,6 @@ .row { margin-left: 0; margin-right: 0; - } // When no search result is present From b2b752fcf8dfa522349c2908be5ca67e9c4ce797 Mon Sep 17 00:00:00 2001 From: Jure Grabnar Date: Wed, 19 Jun 2019 23:37:04 +0200 Subject: [PATCH 3/4] Fix hound complaints --- app/assets/javascripts/protocols/external_protocols_tab.js | 4 ++-- app/assets/stylesheets/protocol_management.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/protocols/external_protocols_tab.js b/app/assets/javascripts/protocols/external_protocols_tab.js index d48684cac..222371ebe 100644 --- a/app/assets/javascripts/protocols/external_protocols_tab.js +++ b/app/assets/javascripts/protocols/external_protocols_tab.js @@ -8,12 +8,12 @@ function applyClickCallbackOnProtocolCards() { protocol_source: $(this).data('protocol-source'), protocol_id: $(this).data('show-protocol-id') }, - success: function (data) { + success: function(data) { $('.empty-preview-panel').hide(); $('.full-preview-panel').show(); $('.preview-iframe').contents().find('body').html(data.html); }, - error: function (error) { + error: function(_error) { // TODO: we should probably show some alert bubble $('.empty-preview-panel').show(); $('.full-preview-panel').hide(); diff --git a/app/assets/stylesheets/protocol_management.scss b/app/assets/stylesheets/protocol_management.scss index 55b873f34..0ea1094d3 100644 --- a/app/assets/stylesheets/protocol_management.scss +++ b/app/assets/stylesheets/protocol_management.scss @@ -197,7 +197,7 @@ width: 100%; .preview-iframe { - border: none; + border: 0; flex-grow: 1; margin: 0; padding: 0; From 7d7160816695c99e31e494cec64e86580028e0e7 Mon Sep 17 00:00:00 2001 From: Jure Grabnar Date: Wed, 26 Jun 2019 19:43:35 +0200 Subject: [PATCH 4/4] Add spinner to external preview --- app/assets/javascripts/protocols/external_protocols_tab.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/javascripts/protocols/external_protocols_tab.js b/app/assets/javascripts/protocols/external_protocols_tab.js index 222371ebe..eebabc86c 100644 --- a/app/assets/javascripts/protocols/external_protocols_tab.js +++ b/app/assets/javascripts/protocols/external_protocols_tab.js @@ -8,15 +8,18 @@ function applyClickCallbackOnProtocolCards() { protocol_source: $(this).data('protocol-source'), protocol_id: $(this).data('show-protocol-id') }, + beforeSend: animateSpinner($('.protocol-preview-panel'), true), success: function(data) { $('.empty-preview-panel').hide(); $('.full-preview-panel').show(); $('.preview-iframe').contents().find('body').html(data.html); + animateSpinner($('.protocol-preview-panel'), false); }, error: function(_error) { // TODO: we should probably show some alert bubble $('.empty-preview-panel').show(); $('.full-preview-panel').hide(); + animateSpinner($('.protocol-preview-panel'), false); } }); e.preventDefault();