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

Fix CSS UI issues for shareable links task sharing [SCI-9080] (#6031)

Browse source 
* Fix css UI issues for shareable links task sharing [SCI-9080]
This commit is contained in:
wandji 2023-08-21 15:07:38 +01:00 • committed by GitHub
parent 2e55181510
commit 1d051aeb0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 148 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/shareable_links/repositories.js
View file

@ -80,6 +80,8 @@
<ul class="dropdown-menu" role="menu" aria-labelledby="rowReminders${row.DT_RowId}">
</ul>
</div>` + recordName;
} else {
recordName = `<span class='inline-block my-2'>${recordName}</span>`;
}
return recordName;
}
@ -119,6 +121,12 @@
},
columns: simpleTableColumns(tableContainer),
columnDefs: simpleViewColumnDefs(tableContainer),
language: {
paginate: {
previous: "<span class='hidden'></span>",
next: "<span class='hidden'></span>"
}
},
drawCallback: function() {
var repositoryContainer = $(this).closest('.assigned-repository-container');
repositoryContainer.find('.table.dataTable').removeClass('hidden');

1
app/assets/stylesheets/application.sass.scss
View file

@ -33,6 +33,7 @@
@import "my_modules/repositories";
@import "my_modules/status_flow";
@import "my_modules/stock_consumption_modal";
@import "my_modules/shareable_links";
@import "protocols/index";
@import "protocols/preview_modal";
@import "protocols/protocol";

49
app/assets/stylesheets/my_modules/shareable_links.scss Normal file
View file

@ -0,0 +1,49 @@
// scss-lint:disable IdSelector SelectorDepth NestingDepth
#shareable-link-welcome-modal,
#team-sharing-tasks,
#modalDestroyShareableLink {
.modal-body {
padding: .625rem 1rem;
.text-sm:last-child {
margin-bottom: 0;
}
}
}
.shareable-links {
.module-name {
width: calc(100vw - 27rem);
}
#assigned-items-container .assigned-repository {
border: unset;
.assigned-repository-caret {
padding: 0;
}
}
.dataTables_paginate .paginate_button {
&.next,
&.previous {
cursor: pointer;
a {
display: none;
}
&.disabled {
cursor: not-allowed;
}
}
&.paginate_button.next {
&::after {
padding-left: 12px;
}
}
}
}

34
app/assets/stylesheets/my_modules/shared/layout_overrides.css
View file

@ -4,22 +4,20 @@
.sci--layout-content {
background-color: var(--sn-white);
.content-pane {
.title-row {
background-color: var(--sn-white);
}
.header-actions {
background-color: var(--sn-white);
display: flex;
height: 3rem;
padding: 0rem 1rem;
align-items: center;
gap: 0.5rem;
align-self: stretch;
z-index: 205;
border-bottom: 1px solid var(--sn-light-grey);
}
}
}
.title-row {
background-color: var(--sn-white);
}
.header-actions {
background-color: var(--sn-white);
display: flex;
height: 3rem;
padding: 0 1.125rem;
align-items: center;
gap: 0.5rem;
align-self: stretch;
z-index: 205;
border-bottom: 1px solid var(--sn-light-grey);
}

2
app/javascript/vue/shareable_links/components/delete_shareable_link.vue
View file

@ -9,7 +9,7 @@
</h4>
</div>
<div class="modal-body">
<p>{{ i18n.t('shareable_links.destroy_modal.description')}}</p>
<p class="text-sm">{{ i18n.t('shareable_links.destroy_modal.description')}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" tabindex="0" @click="cancel">{{ i18n.t('general.cancel') }}</button>

2
app/javascript/vue/shareable_links/components/shareable_link_modal.vue
View file

@ -38,7 +38,7 @@
<span class="sci-toggle-checkbox-label"></span>
</span>
</div>
<div>
<div class="text-sm">
<div class="sci-input-container-v2 textarea-lg mb-2">
<textarea ref="textarea"
tabindex="0"

4
app/views/layouts/shareable_links.html.erb
View file

@ -11,6 +11,8 @@
<%= javascript_include_tag 'jquery_bundle' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'application_pack' %>
<%= stylesheet_link_tag 'datatables' %>
<%= stylesheet_link_tag 'my_modules/shared/layout_overrides' %>
<%= favicon_link_tag "favicon.ico" %>
<%= favicon_link_tag "favicon-16.png", type: "image/png", size: "16x16" %>
@ -23,7 +25,7 @@
<%= csrf_meta_tags %>
</head>
<body id="sci-shareable-links" data-datetime-picker-format="YYYY-MM-DD">
<div class="flex">
<div class="flex shareable-links">
<div class="sticky top-0 w-80 h-screen px-6 py-6 flex flex-col
border-0 border-r border-solid border-sn-sleepy-grey">
<%= render "shareable_links/my_modules/left_navigation" %>

8
app/views/my_modules/_header_actions.html.erb
View file

@ -1,13 +1,13 @@
<div class="header-actions">
<div class="flex items-center text-bold">
<% if can_read_experiment?(@my_module.experiment) %>
<a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-grey" %>"
<a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-black" %>"
href="<%= protocols_my_module_url(@my_module) %>"
title="<%= t("nav2.modules.steps") %>"
>
<%=t "nav2.modules.steps" %>
</a>
<a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-grey" %>"
<a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-black" %>"
href="<%= results_my_module_url(@my_module) %>"
title="<%= t("nav2.modules.results") %>"
>
@ -17,7 +17,7 @@
<sup class="navigation-results-counter"><%= @my_module.archived_branch? ? @my_module.results.size : @active_results_size %></sup>
<% end %>
</a>
<a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_activities? ? "text-sn-blue" : "text-sn-grey" %>"
<a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_activities? ? "text-sn-blue" : "text-sn-black" %>"
href="<%= activities_my_module_url(@my_module, view_mode: params[:view_mode]) %>"
title="<%= t("nav2.modules.activities") %>"
>
@ -27,7 +27,7 @@
<div data-hook="secondary-navigation-tabs"></div>
<% if can_read_experiment?(@my_module.experiment) && !@my_module.archived_branch? %>
<a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_archive? ? "text-sn-blue" : "text-sn-grey" %>"
<a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_archive? ? "text-sn-blue" : "text-sn-black" %>"
href="<%= archive_my_module_url(@my_module) %>"
title="<%= t'nav2.modules.archive' %>"
>

2
app/views/shareable_links/my_module_protocol_show.html.erb
View file

@ -2,7 +2,7 @@
<span class="inline-block whitespace-nowrap mr-1">
<%= t "labels.archived" if @my_module.archived? %>
</span>
<span class="inline-block truncate w-[calc(100vw-27rem)]" title="<%= @my_module.name %>">
<span class="inline-block truncate module-name" title="<%= @my_module.name %>">
<%= @my_module.name %>
</span>
</div>

73
app/views/shareable_links/my_module_results_show.html.erb
View file

@ -1,41 +1,48 @@
<div class="text-3xl font-semibold"><%= @my_module.name %></div>
<div class="text-3xl font-semibold flex flex-row flex-nowrap">
<span class="inline-block whitespace-nowrap mr-1">
</span>
<span class="inline-block truncate module-name" title="<%= @my_module.name %>">
<%= @my_module.name %>
</span>
</div>
<div class="px-4 my-5 flex-1 bg-sn-white">
<div class="my-5 flex-1 bg-sn-white">
<div class="content-pane flexible">
<%= render partial: 'shareable_links/my_modules/header_actions' %>
<div class="mt-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>
</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>
<div class="px-4">
<div class="mt-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>
</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>
</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>
</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>
<li><%= link_to t('general.sort_new.ztoa'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'ztoa'), class: (@results_order == 'ztoa' ? 'selected' : '') %></li>
<li><%= link_to t('general.sort_new.old'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'old'), class: (@results_order == 'old' ? 'selected' : '') %></li>
<li><%= link_to t('general.sort_new.new'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'new'), class: (@results_order == 'new' ? 'selected' : '') %></li>
<li><%= link_to t('general.sort_new.old_updated'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'old_updated'), class: (@results_order == 'old_updated' ? 'selected' : '') %></li>
<li><%= link_to t('general.sort_new.new_updated'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'new_updated'), class: (@results_order == 'new_updated' ? 'selected' : '') %></li>
</ul>
</div>
</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>
</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>
<li><%= link_to t('general.sort_new.ztoa'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'ztoa'), class: (@results_order == 'ztoa' ? 'selected' : '') %></li>
<li><%= link_to t('general.sort_new.old'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'old'), class: (@results_order == 'old' ? 'selected' : '') %></li>
<li><%= link_to t('general.sort_new.new'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'new'), class: (@results_order == 'new' ? 'selected' : '') %></li>
<li><%= link_to t('general.sort_new.old_updated'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'old_updated'), class: (@results_order == 'old_updated' ? 'selected' : '') %></li>
<li><%= link_to t('general.sort_new.new_updated'), shared_protocol_results_path(@shareable_link.uuid, page: params[:page], order: 'new_updated'), class: (@results_order == 'new_updated' ? 'selected' : '') %></li>
</ul>
<div id="results">
<% @results.each do |result| %>
<%= render partial: "shareable_links/my_modules/results/result", locals: { result: result, gallery: @gallery } %>
<% end %>
</div>
<div class="kaminari-pagination">
<%= paginate @results, outer_window: 1, window: 1 %>
</div>
</div>
<div id="results">
<% @results.each do |result| %>
<%= render partial: "shareable_links/my_modules/results/result", locals: { result: result, gallery: @gallery } %>
<% end %>
</div>
<div class="kaminari-pagination">
<%= paginate @results, outer_window: 1, window: 1 %>
</div>
</div>

36
app/views/shareable_links/my_modules/_header_actions.html.erb
View file

@ -1,18 +1,20 @@
<div class="flex items-center uppercase">
<a class="p-4 border-b-4 border-transparent hover:no-underline capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-grey" %>"
href="<%= shared_protocol_url(@shareable_link.uuid) %>"
title="<%= t("nav2.modules.steps") %>"
>
<%= t("nav2.modules.steps") %>
</a>
<a class="p-4 border-b-4 border-transparent hover:no-underline capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-grey" %>"
href="<%= shared_protocol_results_path(@shareable_link.uuid) %>"
title="<%= t("nav2.modules.results") %>"
>
<%= t("nav2.modules.results") %>
<% @active_results_size = @my_module.results.where(archived:false).size %>
<% if @active_results_size.positive? %>
<sup class="navigation-results-counter"><%= @my_module.archived_branch? ? @my_module.results.size : @active_results_size %></sup>
<% end %>
</a>
<div class="header-actions">
<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" %>"
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" %>"
href="<%= shared_protocol_results_path(@shareable_link.uuid) %>"
title="<%= t("nav2.modules.results") %>"
>
<%= t("nav2.modules.results") %>
<% @active_results_size = @my_module.results.where(archived:false).size %>
<% if @active_results_size.positive? %>
<sup class="navigation-results-counter"><%= @my_module.archived_branch? ? @my_module.results.size : @active_results_size %></sup>
<% end %>
</a>
</div>
</div>

4
app/views/shareable_links/my_modules/_welcome_modal.html.erb
View file

@ -9,7 +9,9 @@
</div>
<div class="modal-body">
<p class="text-sm"><%= t("shareable_links.welcome_modal.description", my_module: @my_module.name)%></p>
<p class="text-sm"><%= @shareable_link.description %></p>
<% if @shareable_link.description.present? %>
<p class="text-sm"><%= @shareable_link.description %></p>
<% end %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal"><%= t("shareable_links.welcome_modal.view_task_btn")%></button>

4
app/views/users/settings/teams/_destroy_tasks_sharing_modal.html.erb
View file

@ -6,8 +6,8 @@
<h4 class="modal-title" id="team-sharing-tasks-label"><%= t("users.settings.teams.show.tasks_share.disable_modal.title") %></h4>
</div>
<div class="modal-body">
<p><%= t("users.settings.teams.show.tasks_share.disable_modal.description_p1", team_name: @team.name) %></p>
<p><%= t("users.settings.teams.show.tasks_share.disable_modal.description_p2", counter: @team.number_of_task_shared) %></p>
<p class='text-sm'><%= t("users.settings.teams.show.tasks_share.disable_modal.description_p1", team_name: @team.name) %></p>
<p class='text-sm'><%= t("users.settings.teams.show.tasks_share.disable_modal.description_p2", counter: @team.number_of_task_shared) %></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><%= t('general.cancel') %></button>