mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-26 06:54:48 +08:00
Add image preview to protocol repository [SCI-877]
This commit is contained in:
Oleksii Kriuchykhin
parent
0fe84c4e24
commit
181d981a51
6 changed files with 111 additions and 97 deletions
|
|
@ -212,6 +212,7 @@ function initProtocolPreviewModal() {
|
|||
initHandsOnTable(modalBody);
|
||||
modal.modal("show");
|
||||
initHandsOnTable(modalBody);
|
||||
initPreviewModal();
|
||||
},
|
||||
error: function (error) {
|
||||
// TODO
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ function openPreviewModal(name, url, downloadUrl, description) {
|
|||
modal.modal('hide');
|
||||
});
|
||||
modal.modal();
|
||||
$('.modal-backdrop').last().css('z-index', modal.css('z-index') - 1);
|
||||
},
|
||||
error: function(ev) {
|
||||
// TODO
|
||||
|
|
|
|||
|
|
@ -46,86 +46,3 @@
|
|||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-image-preview {
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
padding-right: 0 !important;
|
||||
|
||||
.preview-close {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
color: $color-white;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
||||
@media (max-height: 520px) {
|
||||
height: 80%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: $color-black;
|
||||
border: 0;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
align-items: center;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
height: calc(100% - 120px);
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background: $color-black;
|
||||
border: 0;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-download-link {
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop.modal-image-preview {
|
||||
background: $color-black;
|
||||
|
||||
.in {
|
||||
filter: alpha(opacity = 99);
|
||||
opacity: .99;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1594,6 +1594,82 @@ html.turbolinks-progress-bar::before {
|
|||
}
|
||||
}
|
||||
|
||||
// Image preview modal
|
||||
.modal-image-preview {
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
padding-right: 0 !important;
|
||||
z-index: 1060;
|
||||
|
||||
.preview-close {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
color: $color-white;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
||||
@media (max-height: 520px) {
|
||||
height: 80%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: $color-black;
|
||||
border: 0;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
align-items: center;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
height: calc(100% - 120px);
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background: $color-black;
|
||||
border: 0;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-download-link {
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable textarea resizing throughout application
|
||||
// (will be done via autosize JS plugin)
|
||||
textarea {
|
||||
|
|
|
|||
|
|
@ -131,6 +131,7 @@
|
|||
<%= render partial: "protocols/index/import_results_modal.html.erb" %>
|
||||
<%= render partial: "protocols/index/linked_children_modal.html.erb" %>
|
||||
<%= render partial: "protocols/index/protocol_preview_modal.html.erb" %>
|
||||
<%= render partial: "shared/image_preview_modal.html.erb" %>
|
||||
|
||||
<%= render partial: "protocols/import_export/import_elements.html.erb" %>
|
||||
|
||||
|
|
|
|||
|
|
@ -113,24 +113,42 @@
|
|||
<% assets.each do |asset| %>
|
||||
<li>
|
||||
<% if can_view_or_download_step_assets(@protocol) %>
|
||||
<% if asset.is_image? %>
|
||||
<%= link_to download_asset_path(asset),
|
||||
class: 'image-preview-link',
|
||||
id: "modal_link#{asset.id}",
|
||||
data: {no_turbolink: true, id: true, status: "asset-present",
|
||||
description: "#{step.position + 1}. #{truncate(step.name, length: Constants::FILENAME_TRUNCATION_LENGTH)}"} do %>
|
||||
<%= image_tag asset.url(:medium), data: {'preview-url': large_image_url_asset_path(asset)} %>
|
||||
<p><%= truncate(asset.file_file_name,
|
||||
length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
|
||||
<% if asset.file_present %>
|
||||
<% if asset.file.processing? %>
|
||||
<span data-status='asset-loading'
|
||||
data-present-url='<%= file_present_asset_path(asset) %>'>
|
||||
<%= image_tag 'medium/processing.gif' %>
|
||||
</span>
|
||||
<% else %>
|
||||
<% if asset.is_image? %>
|
||||
<%= link_to download_asset_path(asset),
|
||||
class: 'image-preview-link',
|
||||
id: "modal_link#{asset.id}",
|
||||
data: {no_turbolink: true, id: true, status: "asset-present",
|
||||
description: "#{step.position + 1}. #{truncate(step.name, length: Constants::FILENAME_TRUNCATION_LENGTH)}"} do %>
|
||||
<%= image_tag asset.url(:medium), data: {'preview-url': large_image_url_asset_path(asset)} %>
|
||||
<p><%= truncate(asset.file_file_name,
|
||||
length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= render partial: 'steps/wopi_controlls.html.erb', locals: { asset: asset } %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= link_to download_asset_path(asset), data: {no_turbolink: true} do %>
|
||||
<p><%= truncate(asset.file_file_name,
|
||||
length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
|
||||
<% end %>
|
||||
<span data-status='asset-loading'
|
||||
data-present-url='<%= file_present_asset_path(asset) %>'>
|
||||
<%= image_tag 'medium/processing.gif' %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= image_tag asset.url(:medium) if asset.is_image? %>
|
||||
<% if asset.file.processing? %>
|
||||
<span data-status='asset-loading'
|
||||
data-present-url='<%= file_present_asset_path(asset) %>'>
|
||||
<%= image_tag 'medium/processing.gif' %>
|
||||
</span>
|
||||
<% else %>
|
||||
<%= image_tag asset.url(:medium) if asset.is_image? %>
|
||||
<% end %>
|
||||
<p><%= truncate(asset.file_file_name,
|
||||
length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue