scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 23:16:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add external preview to External Protocols tab

Browse source 
Closes SCI-3563
This commit is contained in:
Jure Grabnar 2019-06-19 22:54:20 +02:00
parent 3bad945e97
commit b3c3b68dc2
5 changed files with 110 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

55
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 {
@ -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;
}
}
}
}

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)