scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-02-05 22:44:22 +08:00
Code Issues Projects Releases Packages Wiki Activity

When a user clicks on a protocol, protocol preview should be re… (#1850)

Browse source 
When a user clicks on a protocol, protocol preview should be rendered in the main pane [SCI-3563]
This commit is contained in:
Jure Grabnar 2019-06-26 20:06:49 +02:00 committed by GitHub
commit 69d53ac90a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 114 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/assets/javascripts/protocols/external_protocols_tab.js Normal file
View file

@ -0,0 +1,30 @@
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')
},
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();
return false;
});
}
applyClickCallbackOnProtocolCards();

58
app/assets/stylesheets/protocol_management.scss
View file

@ -60,6 +60,10 @@
}
}
.tab-pane.external_protocols {
padding-bottom: 0;
}
.external-protocols-tab {
.protocols-search-bar-panel {
@ -120,7 +124,7 @@
&.active {
background: $color-gainsboro;
border-radius: 5px;
border-radius: 5px !important;
color: $color-emperor;
}
}
@ -137,7 +141,6 @@
.row {
margin-left: 0;
margin-right: 0;
}
// When no search result is present
@ -153,7 +156,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 +164,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: 0;
flex-grow: 1;
margin: 0;
padding: 0;
}
}
}
}

2
app/views/protocols/index.html.erb
View file

@ -22,7 +22,7 @@
</li>
</ul>
<div class="tab-content">
<div class="tab-pane tab-pane-settings tab-pane-protocols active" role="tabpanel">
<div class="tab-pane tab-pane-settings tab-pane-protocols active <%= @type %>" role="tabpanel">
<!-- Buttons container -->
<% if @type.in? [:public, :private] %>
<div class="protocols-description">

52
app/views/protocols/index/_external_protocols_tab.html.erb
View file

@ -51,23 +51,53 @@
<div class='row empty-text'>
<%= t('protocols.index.external_protocols.list_panel.empty_text') %>
</div>
<div class='protocol-card'
data-protocol-source='protocolsio/v3'
data-show-url='<%= team_show_external_protocol_path(current_team.id) %>'
data-show-protocol-id='Extracting-DNA-from-bananas-esvbee6'>
Banana protocol (click me)
</div>
<div class='protocol-card'
data-protocol-source='protocolsio/v3'
data-show-url='<%= team_show_external_protocol_path(current_team.id) %>'
data-show-protocol-id='cut-run-targeted-in-situ-genome-wide-profiling-wit-mgjc3un'>
Cut run targeted protocol (click me)
</div>
<div class='protocol-card'
data-protocol-source='protocolsio/3'
data-show-url='<%= team_show_external_protocol_path(current_team.id) %>'
data-show-protocol-id='errorr'>
Error protocol (click me, should default to default screen)
</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 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') %>
</div>
</div>
</div>
<div class='full-preview-panel' style='display: none;'>
<iframe class='preview-iframe'></iframe>
</div>
</div>
</div>
</div>
</div>
<%= javascript_include_tag "protocols/external_protocols_tab.js" %>

1
config/initializers/assets.rb
View file

@ -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)