Update css for shared protocol [SCI-9476]

This commit is contained in:
Anton 2023-10-10 14:22:48 +02:00
parent 3cf3d799f6
commit 84477cad43
22 changed files with 186 additions and 199 deletions

View file

@ -31,6 +31,15 @@
});
}
function initResultComments() {
$(document).on('click', '.shareable-link-open-comments-sidebar', function(e) {
e.preventDefault();
$('.comments-sidebar').removeClass('open');
$($(this).data('objectTarget')).addClass('open');
});
}
function initResultsExpandCollapse() {
$(document).on('click', '#results-collapse-btn', function() {
$('.result .panel-collapse').collapse('hide');
@ -44,6 +53,7 @@
function initMyModuleResultsShow() {
initAttachments();
initResultsExpandCollapse();
initResultComments();
$('.hot-table-container').each(function() {
initializeHandsonTable($(this));

View file

@ -103,14 +103,3 @@
color: var(--sn-grey);
}
}
@media screen and (max-width: 1395px) {
.task-section-header {
height: 7.44rem;
}
.protocol-buttons-group {
flex-wrap: wrap;
margin: 1rem;
}
}

View file

@ -288,9 +288,6 @@
.dropdown-menu {
@include font-button;
min-width: 200px;
padding: .5em 0;
z-index: 102;
.divider-label {
@include font-small;

View file

@ -2,16 +2,6 @@
// scss-lint:disable NestingDepth
.step-checklist-items {
.sci-inline-edit {
margin-top: 5px;
.sci-inline-edit__content {
margin-bottom: 7px;
margin-left: 0;
margin-right: .5em;
}
}
.step-checklist-item {
padding-left: 5px;
}
@ -59,14 +49,6 @@
.step-checklist-item-ghost {
border: 1px solid $brand-primary;
}
.sci-checkbox-container {
margin: 11px 0;
&.disabled {
pointer-events: none;
}
}
}
.step-checklist-container {

View file

@ -7,7 +7,7 @@
</span>
</div>
<div class="my-5 max-w-4xl flex-1 bg-sn-white">
<div class="my-5 flex-1">
<div class="my-module-position-container">
<!-- Header Actions -->
<%= render partial: 'shareable_links/my_modules/header_actions' %>
@ -27,10 +27,6 @@
<%= @my_module.code %>
</span>
</div>
<div class="flex items-center gap-3">
<%= render partial: 'shareable_links/my_modules/task_flow_button', locals: { my_module: @my_module } if @my_module.my_module_status_flow %>
</div>
</div>
<div id="details-container" class="task-details" data-shareable-link=<%= @shareable_link.uuid %>>
<%= render partial: 'shareable_links/my_modules/my_module_details' %>

View file

@ -6,24 +6,22 @@
</span>
</div>
<div class="my-5 max-w-4xl flex-1 bg-sn-white">
<div class="content-pane flexible">
<div class="my-5 flex-1">
<div class="content-pane with-grey-background flexible">
<%= render partial: 'shareable_links/my_modules/header_actions' %>
<div class="px-4">
<div class="my-5" id="results-toolbar">
<div class="sci-btn-group collapse-expand-result">
<button class="btn btn-light" id="results-collapse-btn">
<span class="sn-icon sn-icon-up"></span>
<span class="hidden-xs-custom"><%= t'my_modules.results.collapse_label' %></span>
<div>
<div class="my-4 p-3 bg-sn-white" id="results-toolbar">
<div class="flex items-center gap-4 collapse-expand-result">
<button class="btn btn-secondary" id="results-collapse-btn">
<span><%= t'my_modules.results.collapse_label' %></span>
</button>
<button class="btn btn-light" id="results-expand-btn">
<span class="sn-icon sn-icon-down"></span>
<span class="hidden-xs-custom"><%= t'my_modules.results.expand_label' %></span>
<button class="btn btn-secondary" id="results-expand-btn">
<span><%= t'my_modules.results.expand_label' %></span>
</button>
</div>
<div class="sort-result-dropdown dropdown">
<button id="sort-result-button" class="btn btn-light icon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="sn-icon sn-icon-sort-up"></i>
<i class="sn-icon sn-icon-sort"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="sort-result-button">
<li><%= link_to t('general.sort_new.atoz'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'atoz'), class: (@results_order == 'atoz' ? 'selected' : '') %></li>
@ -38,6 +36,7 @@
<div id="results">
<% @results.each do |result| %>
<%= render partial: "shareable_links/my_modules/results/result", locals: { result: result, gallery: @gallery } %>
<%= render partial: "shareable_links/my_modules/result_comments_sidebar", locals: { result: result } %>
<% end %>
</div>
<div class="kaminari-pagination">

View file

@ -1,4 +1,5 @@
<div class="step-attachments">
<div class="sci-divider my-6"></div>
<div class="attachments-actions">
<div class="title">
<h3> <%= t('protocols.steps.files', count: attachments.length) %> </h3>

View file

@ -1,5 +1,5 @@
<% user= nil %>
<% step.comments.order(created_at: :asc).each do |comment| %>
<% oject.comments.order(created_at: :asc).each do |comment| %>
<div class="comment-container" data-comment-id="<%= comment.id %>">
<% unless user == comment.user%>
<div class="comment-header">

View file

@ -1,12 +1,12 @@
<div class="header-actions px-5 border-solid border-0 border-b border-sn-light-grey">
<div class="flex items-center uppercase">
<a class="px-4 py-3 border-b-4 border-transparent hover:no-underline capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-black" %>"
<div class="sticky-header-element bg-sn-white border-b border-solid border-0 border-sn-sleepy-grey rounded-t px-4 py-2 top-0 sticky flex items-center flex-wrap z-[106]">
<div class="flex items-center gap-4 mr-auto w-full">
<a class="p-3 border-b-4 border-transparent hover:no-underline uppercase text-bold capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-black" %>"
href="<%= shared_protocol_url(@shareable_link.uuid) %>"
title="<%= t("nav2.modules.steps") %>"
>
<%= t("nav2.modules.steps") %>
</a>
<a class="px-4 py-3 border-b-4 border-transparent hover:no-underline capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-black" %>"
<a class="p-3 border-b-4 border-transparent hover:no-underline uppercase text-bold capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-black" %>"
href="<%= shared_protocol_results_path(@shareable_link.uuid) %>"
title="<%= t("nav2.modules.results") %>"
>
@ -16,5 +16,9 @@
<sup class="navigation-results-counter"><%= @my_module.archived_branch? ? @my_module.results.size : @active_results_size %></sup>
<% end %>
</a>
<div class="flex items-center gap-3 ml-auto">
<%= render partial: 'shareable_links/my_modules/task_flow_button', locals: { my_module: @my_module } if @my_module.my_module_status_flow %>
</div>
</div>
</div>

View file

@ -19,49 +19,47 @@
<% end %>
</div>
</div>
<div class="actions-block gap-4">
<% if protocol.steps.length > 0 %>
<button class="btn btn-secondary" id="steps-collapse-btn" tabindex="0">
<%= t("protocols.steps.collapse_label") %>
</button>
<button class="btn btn-secondary" id="steps-expand-btn" tabindex="0">
<%= t("protocols.steps.expand_label") %>
</button>
<% end %>
</div>
</div>
<div id="protocol-content" class="protocol-content collapse in" aria-expanded="true">
<div class="protocol-description">
<div class="protocol-name">
<span>
<%= protocol.name %>
</span>
</div>
<div>
<div id="protocol-description-container" >
<% if protocol.description.present? %>
<div>
<%= smart_annotation_text(protocol.shareable_tinymce_render(:description)) %>
</div>
<% else %>
<div class="empty-protocol-description">
<%= t("protocols.no_text_placeholder") %>
</div>
<% end %>
</div>
</div>
<div id="protocol-content" class="protocol-content collapse in " aria-expanded="true">
<div class="sci-divider my-4"></div>
<div class="protocol-name">
<span>
<%= protocol.name %>
</span>
</div>
<div>
<div id="protocol-steps-container">
<% if protocol.steps.length > 0 %>
<div class="protocol-step-actions">
<button class="btn btn-light" id="steps-collapse-btn" tabindex="0">
<span class="sn-icon sn-icon-collapse"></span>
<%= t("protocols.steps.collapse_label") %>
</button>
<button class="btn btn-light" id="steps-expand-btn" tabindex="0">
<span class="sn-icon sn-icon-expand"></span>
<%= t("protocols.steps.expand_label") %>
</button>
<div id="protocol-description-container" >
<% if protocol.description.present? %>
<div>
<%= smart_annotation_text(protocol.shareable_tinymce_render(:description)) %>
</div>
<% else %>
<div class="empty-protocol-description">
<%= t("protocols.no_text_placeholder") %>
</div>
<% end %>
</div>
</div>
<div class="sci-divider my-4"></div>
<div>
<div id="protocol-steps-container">
<div class="protocol-steps">
<% protocol.steps.sort_by(&:position).each do |step| %>
<div class="step-block">
<%= render partial: "shareable_links/my_modules/step", locals: { step: step } %>
<%= render partial: "shareable_links/my_modules/comments_sidebar", locals: { step: step } %>
<%= render partial: "shareable_links/my_modules/step_comments_sidebar", locals: { step: step } %>
</div>
<% end %>
</div>

View file

@ -0,0 +1,26 @@
<div class="comments-sidebar !top-0 !h-screen" id="Result<%= result.id %>">
<div class="sidebar-content">
<div class="sidebar-header">
<div class="comments-subject-title">
<%= "#{result.name}" %>
</div>
<div class="btn btn-light icon-btn close-btn">
<i class="sn-icon sn-icon-close"></i>
</div>
</div>
<div class="sidebar-body">
<% if result.comments.present? %>
<div class="comments-list">
<%= render partial: "shareable_links/my_modules/comments_list", locals: { object: result } %>
</div>
<% else %>
<div class="no-comments-placeholder !block">
<%= image_tag 'comments/placeholder.svg', class: 'no-comments-image' %>
<h1><%= t('comments.empty_state.title') %></h1>
<p class="description"><%= t('comments.empty_state.description') %></p>
</div>
<% end %>
</div>
<div class="sidebar-footer"></div>
</div>
</div>

View file

@ -1,26 +1,26 @@
<div class="step-container mt-[6px] mr-0 mb-6 ml-[-1em] pt-[8px] pr-[24px] pb-[8px] pl-0 border-solid border-[1px] border-[#fff]" id="stepContainer<%= step.id %>" >
<div class="step-container" id="stepContainer<%= step.id %>" >
<div class="step-header">
<div class="step-element-header no-hover">
<div class="step-controls flex items-center">
<div class="step-element-grip-placeholder"></div>
<div class="flex items-center gap-4">
<a class="step-collapse-link hover:no-underline focus:no-underline"
href="#stepBody<%= step.id %>"
data-toggle="collapse"
data-remote="true">
<span class="sn-icon sn-icon-right "></span>
</a>
<div class="step-complete-container mx-2 step-element--locked">
<div class="step-complete-container step-element--locked">
<div class="step-state <%= step.completed ? 'completed' : '' %>"
tabindex="0"
></div>
</div>
<div class="step-position">
<%= step.position + 1 %> .
<%= step.position + 1 %>.
</div>
</div>
<div class="step-name-container">
<div class="step-name-container basis-[calc(100%_-_100px)] relative">
<%= render partial: "shareable_links/my_modules/inline_view", locals: { text: step.name, smart_annotation_enabled: false } %>
<span class="mt-2 whitespace-nowrap truncate text-xs font-normal w-full absolute -bottom-5"><%= t('protocols.steps.timestamp_iso_html', date: step.created_at.iso8601, user: step.user.full_name) %></span>
</div>
</div>
<div class="elements-actions-container">
@ -41,10 +41,7 @@
</div>
<div class="collapse in" id="stepBody<%= step.id %>">
<div class="step-elements !pl-[4.5rem]">
<div class="step-timestamp !m-0">
<%= t('protocols.steps.timestamp_iso_html', date: step.created_at.iso8601, user: step.user.full_name) %>
</div>
<div class="step-elements">
<% step.step_orderable_elements.sort_by(&:position).each do |element| %>
<% if element.orderable_type == 'StepText' %>
<%= render partial: "shareable_links/my_modules/step_elements/text", locals: { element: element.orderable } %>
@ -59,4 +56,5 @@
<% end %>
</div>
</div>
<div class="sci-divider my-6"></div>
</div>

View file

@ -1,14 +0,0 @@
<hr>
<div class="col-xs-12 comments-title">
<h4>
<%=t('my_modules.results.comments_tab') %>
(<span><%= comments.count %></span>)
</h4>
</div>
<div class="comments-container">
<div class="content-comments inline_scroll_block">
<div class="comments-list">
<%= render partial: "shareable_links/my_modules/results/comments_list", locals: { comments: comments } %>
</div>
</div>
</div>

View file

@ -1,18 +0,0 @@
<% comments.order(created_at: :asc).each do |comment| %>
<div class="comment-container">
<div class="avatar-placehodler">
<span class='global-avatar-container'>
<%= image_tag user_avatar_absolute_url(comment.user, :icon_small, true), class: 'user-avatar' %>
</span>
</div>
<div class="content-placeholder">
<div class="comment-name"><%= comment.user.full_name %></div>
<div class="comment-right !w-fit">
<div class="comment-datetime !w-fit"><%= l(comment.created_at, format: :full) %></div>
</div>
<div class="comment-message">
<div class="view-mode"><%= smart_annotation_text(comment.message) %></div>
</div>
</div>
</div>
<% end %>

View file

@ -1,37 +1,40 @@
<div class="result">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-options pull-right">
</div>
<a class="result-panel-collapse-link" href="#result-panel-<%= result.id %>" data-toggle="collapse">
<div class="bg-white p-4 mb-4 rounded">
<div class="result-header flex justify-between">
<div class="result-head-left flex items-start flex-grow gap-4">
<a class="result-collapse-link hover:no-underline focus:no-underline text-sn-black" href="#result-panel-<%= result.id %>" data-toggle="collapse">
<span class="sn-icon sn-icon-right"></span>
<strong><%= result.name %></strong> |
<span><%= t('my_modules.results.published_on_iso_html', timestamp: result.created_at.iso8601, user: h(result.user.full_name)) %></span>
</a>
</div>
<div class="panel-collapse collapse in" id="result-panel-<%= result.id %>" role="tabpanel">
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<% result.result_orderable_elements.sort_by(&:position).each do |element| %>
<% if element.orderable_type == 'ResultText' %>
<%= render partial: "shareable_links/my_modules/step_elements/text", locals: { element: element.orderable } %>
<% elsif element.orderable_type == 'ResultTable'%>
<%= render partial: "shareable_links/my_modules/step_elements/table", locals: { element: element.orderable.table } %>
<% end %>
<% end %>
<% if result.result_assets.present? %>
<%= render partial: "shareable_links/my_modules/attachments", locals: { attachments: result.assets, step: result } %>
<% end %>
</div>
</div>
<div class="row">
<div class="result-comment"
id="result-comments-<%= result.id %>">
<%= render partial: "shareable_links/my_modules/results/comments", locals: { comments: result.comments } %>
</div>
</div>
<div class="w-full relative flex flex-grow font-bold text-base">
<strong><%= result.name %></strong>
<span class="mt-2 whitespace-nowrap truncate text-xs font-normal absolute bottom-[-1rem] w-full"><%= t('my_modules.results.published_on_iso_html', timestamp: result.created_at.iso8601, user: h(result.user.full_name)) %></span>
</div>
<div class="elements-actions-container">
<a href="#"
class="shareable-link-open-comments-sidebar btn icon-btn btn-light"
data-turbolinks="false"
data-object-type="Result"
data-object-id="<%= result.id %>"
data-object-target="#Result<%= result.id %>">
<i class="sn-icon sn-icon-comments"></i>
<span class="comments-counter"
id="comment-count-<%= result.id %>"
>
<%= result.comments.count %>
</span>
</a>
</div>
</div>
</div>
<div class="panel-collapse collapse in pl-10" id="result-panel-<%= result.id %>" role="tabpanel">
<% result.result_orderable_elements.sort_by(&:position).each do |element| %>
<% if element.orderable_type == 'ResultText' %>
<%= render partial: "shareable_links/my_modules/step_elements/text", locals: { element: element.orderable } %>
<% elsif element.orderable_type == 'ResultTable'%>
<%= render partial: "shareable_links/my_modules/step_elements/table", locals: { element: element.orderable.table } %>
<% end %>
<% end %>
<% if result.result_assets.present? %>
<%= render partial: "shareable_links/my_modules/attachments", locals: { attachments: result.assets, step: result } %>
<% end %>
</div>
</div>

View file

@ -3,10 +3,9 @@
<i class="sn-icon sn-icon-more-hori"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownAssetContextMenu">
<ul class="dropdown-menu dropdown-menu-right rounded !p-2.5 sn-shadow-menu-sm" aria-labelledby="dropdownAssetContextMenu">
<li>
<%= link_to shared_protocol_asset_download_path(@shareable_link.uuid, asset), data: { turbolinks: false } do %>
<span class="sn-icon sn-icon-export"></span>
<%= link_to shared_protocol_asset_download_path(@shareable_link.uuid, asset), data: { turbolinks: false }, class: "!px-3 !py-2.5 hover:!bg-sn-super-light-blue !text-sn-blue" do %>
<%= t('Download') %>
<% end %>
</li>

View file

@ -1,18 +1,17 @@
<div class="attachment-container asset">
<div class="attachment-container asset group">
<%= link_to '#',
class: "shareable-file-preview-link",
id: "modal_link#{asset.id}",
data: {
no_turbolink: true,
id: asset.id
} do %>
class: "file-preview-link group-hover:hidden",
id: "modal_link#{asset.id}",
data: {
no_turbolink: true,
id: asset.id
} do %>
<div class="attachment-preview <%= asset.file.attached? ? asset.file.metadata['asset_type'] : '' %>">
<% if asset.previewable? && asset.medium_preview&.image&.attached? %>
<%= image_tag asset.medium_preview.url(expires_in: Constants::URL_SHORT_EXPIRE_TIME.minutes),
class: 'asset-preview-image',
style: 'opacity: 0' %>
class: 'rounded-sm' %>
<% else %>
<i class="fas <%= file_fa_icon_class(asset) if asset.file_name %>"></i>
<div class="w-[186px] h-[186px] bg-sn-super-light-grey rounded-sm"></div>
<% end %>
</div>
<div class="attachment-label"
@ -21,12 +20,28 @@
title="<%= asset.render_file_name %>">
<%= asset.render_file_name %>
</div>
<div class="attachment-metadata">
<%= t('assets.placeholder.modified_label') %> <span class="iso-formatted-date"><%= asset.updated_at.iso8601 if asset.updated_at %></span><br>
<% end %>
<div class="tw-hidden group-hover:block hovered-thumbnail h-full">
<a
href="#"
class="shareable-file-preview-link"
id="modal_link<%= asset.id %>"
data-no-turbolink="true"
data-id="<%= asset.id %>"
>
<%= asset.render_file_name %>
</a>
<div class="absolute bottom-16 text-sn-grey">
<%= number_to_human_size(asset.file_size) %>
</div>
<% end %>
<% if defined?(show_context) && show_context %>
<%= render partial: "shareable_links/my_modules/step_attachments/context_menu", locals: { asset: asset } %>
<% end %>
<div class="absolute bottom-4 w-[184px] grid grid-cols-[repeat(4,_2.5rem)] justify-between">
<%= link_to shared_protocol_asset_download_path(@shareable_link.uuid, asset), class: "btn btn-light icon-btn thumbnail-action-btn",data: { turbolinks: false } do %>
<span class="sn-icon sn-icon-export"></span>
<% end %>
</div>
<% if defined?(show_context) && show_context %>
<%= render partial: "shareable_links/my_modules/step_attachments/context_menu", locals: { asset: asset } %>
<% end %>
</div>
</div>

View file

@ -1,7 +1,7 @@
<div class="step-checklist-container" >
<div class="step-element-header no-hover">
<div class="step-element-grip-placeholder"></div>
<div class="step-element-name font-bold">
<div class="content__checklist-container" >
<div class="sci-divider my-6"></div>
<div class="checklist-header flex rounded mb-1 items-center relative w-full group/checklist-header">
<div class="grow-1 text-ellipsis whitespace-nowrap grow my-1 font-bold">
<%= render partial: "shareable_links/my_modules/inline_view", locals: { text: element.name, smart_annotation_enabled: true } %>
</div>
</div>

View file

@ -1,14 +1,14 @@
<div class="step-checklist-item step-element--locked">
<div class="step-element-header locked">
<div class="step-element-grip-placeholder"></div>
<div class="step-element-name <%= 'done' if checklist_item.checked %>">
<div class="sci-checkbox-container disabled">
<div class="content__checklist-item step-element--locked my-2">
<div class="checklist-item-header flex rounded pl-10 ml-[-2.325rem] items-center relative w-full group/checklist-item-header locked">
<div class="absolute cursor-grab justify-center left-0 px-2 tw-hidden text-sn-grey step-element-grip-placeholder"></div>
<div class="flex items-start gap-2 grow <%= 'done' if checklist_item.checked %>">
<div class="sci-checkbox-container disabled my-0.5">
<input type="checkbox"
class="sci-checkbox"
<%= 'checked' if checklist_item.checked %> />
<span class="sci-checkbox-label" ></span>
</div>
<div class="step-checklist-text !mt-1 step-element--locked">
<div class="pr-24 relative flex items-start max-w-[90ch] step-element--locked">
<%= render partial: "shareable_links/my_modules/inline_view", locals: { text: checklist_item.text, smart_annotation_enabled: true } %>
</div>
</div>

View file

@ -1,12 +1,13 @@
<div class="step-table-container">
<div class="step-element-header step-element--locked">
<div class="content__table-container">
<div class="sci-divider my-6"></div>
<div class="table-header h-9 flex rounded mb-3 items-center relative w-full group/table-header step-element--locked">
<% if element.name.present? %>
<div class="step-element-name font-bold">
<div class="grow-1 text-ellipsis whitespace-nowrap grow my-1 font-bold">
<%= render partial: "shareable_links/my_modules/inline_view", locals: { text: element.name, smart_annotation_enabled: false } %>
</div>
<% end %>
</div>
<div class="step-table view locked" tabindex="0">
<div class="table-body group/table-body relative border-solid border-transparent view locked" tabindex="0">
<input type="hidden" class="hot-table-contents" value="<%= element.contents_utf_8 %>" />
<input type="hidden" class="hot-table-metadata" value="<%= element.metadata ? element.metadata.to_json : nil %>" />
<div class="hot-table-container"></div>

View file

@ -1,13 +1,14 @@
<div class="step-text-container step-element--locked locked" tabindex="0">
<div class="content__text-container locked" tabindex="0">
<div class="sci-divider my-6"></div>
<% if element.name.present? %>
<div class="step-element-header step-element--locked mt-4">
<div class="step-element-name font-bold">
<%= render partial: "shareable_links/my_modules/inline_view", locals: { text: element.name, smart_annotation_enabled: false } %>
</div>
<div class="text-header h-9 flex rounded mb-1 items-center relative w-full group/text-header">
<div class="grow-1 text-ellipsis whitespace-nowrap grow my-1 font-bold">
<%= render partial: "shareable_links/my_modules/inline_view", locals: { text: element.name, smart_annotation_enabled: false } %>
</div>
</div>
<% end %>
<% if element.text.present? %>
<div class="view-text-element">
<div class="flex rounded min-h-[2.25rem] mb-4 relative group/text_container content__text-body max-w-[90ch]">
<%= smart_annotation_text(element.shareable_tinymce_render(:text)) %>
</div>
<% else %>