mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-26 09:42:46 +08:00
change inlane editing css, add shared inventory subtitle and add tooltips to shared inventories icons (#2022)
This commit is contained in:
mlorb
aignatov-bio
parent
6cc38de747
commit
ba5bebedb2
11 changed files with 90 additions and 47 deletions
|
|
@ -25,12 +25,20 @@ function initInlineEditing(title) {
|
|||
$('.inline-edit-active').find('.save-button').click();
|
||||
}
|
||||
|
||||
function appendAfterLabel() {
|
||||
if (editBlock.dataset.labelAfter) {
|
||||
$(editBlock.dataset.labelAfter).appendTo($editBlock.find('.view-mode'));
|
||||
}
|
||||
}
|
||||
appendAfterLabel();
|
||||
|
||||
function updateField() {
|
||||
var params = {};
|
||||
|
||||
if (inputString.value === editBlock.dataset.originalName) {
|
||||
inputString.disabled = true;
|
||||
editBlock.dataset.editMode = 0;
|
||||
editBlock.dataset.error = false;
|
||||
$inputString.addClass('hidden');
|
||||
$editBlock.find('.view-mode').removeClass('hidden');
|
||||
return false;
|
||||
|
|
@ -58,6 +66,7 @@ function initInlineEditing(title) {
|
|||
editBlock.dataset.error = false;
|
||||
$inputString.addClass('hidden');
|
||||
$editBlock.find('.view-mode').html(viewData).removeClass('hidden');
|
||||
appendAfterLabel();
|
||||
|
||||
inputString.disabled = true;
|
||||
editBlock.dataset.editMode = 0;
|
||||
|
|
@ -109,6 +118,12 @@ function initInlineEditing(title) {
|
|||
e.stopPropagation();
|
||||
});
|
||||
|
||||
$inputString.keyup((e) => {
|
||||
if(e.keyCode === 13 && $inputString.is('input')) {
|
||||
updateField();
|
||||
}
|
||||
})
|
||||
|
||||
$($editBlock.find('.cancel-button')).click(e => {
|
||||
inputString.disabled = true;
|
||||
editBlock.dataset.editMode = 0;
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
position: relative;
|
||||
|
||||
.button-container {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -34,9 +34,8 @@
|
|||
bottom: 3px;
|
||||
color: $brand-danger;
|
||||
display: none;
|
||||
font-size: $font-size-small;
|
||||
left: 5px;
|
||||
line-height: 12px;
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
|
@ -48,7 +47,9 @@
|
|||
}
|
||||
|
||||
input {
|
||||
padding-bottom: 16px;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -56,6 +57,7 @@
|
|||
&:hover input,
|
||||
&:hover .view-mode {
|
||||
border: 1px solid $color-silver;
|
||||
border-radius: 3px;
|
||||
|
||||
&:disabled {
|
||||
border: 1px solid $color-gainsboro;
|
||||
|
|
@ -67,22 +69,24 @@
|
|||
cursor: pointer;
|
||||
flex-wrap: nowrap;
|
||||
line-height: 26px;
|
||||
margin-left: -5px;
|
||||
overflow: hidden;
|
||||
padding: 8px 5px;
|
||||
padding: 2px 4px;
|
||||
padding-right: 36px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: calc(100% - 36px);
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $color-silver;
|
||||
border-radius: $border-radius-small;
|
||||
cursor: pointer;
|
||||
line-height: 20px;
|
||||
padding: 8px 5px;
|
||||
line-height: 26px;
|
||||
margin-left: -5px;
|
||||
padding: 2px 4px;
|
||||
padding-right: 36px;
|
||||
width: calc(100% - 36px);
|
||||
width: calc(100% - 32px);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
|
@ -97,19 +101,7 @@
|
|||
|
||||
+ .button-container {
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-name.editable {
|
||||
margin: 0;
|
||||
|
||||
.inline-editing-container {
|
||||
|
||||
input {
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@
|
|||
align-items: center;
|
||||
border-bottom: 1px solid $color-gainsboro;
|
||||
display: flex;
|
||||
height: 55px;
|
||||
margin-left: -20px;
|
||||
padding: 5px 15px;
|
||||
width: calc(100% + 40px);
|
||||
|
|
@ -88,27 +89,36 @@
|
|||
margin-top: -2px;
|
||||
|
||||
.fas-custom {
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.repository-title {
|
||||
.repository-title-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% + 40px);
|
||||
}
|
||||
|
||||
.repository-title-name {
|
||||
flex-grow: 1;
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
line-height: 32px;
|
||||
margin-right: 20px;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.inline-editing-container {
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repository-subtitle {
|
||||
color: $color-silver-chalice;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.datatables-buttons {
|
||||
|
|
|
|||
|
|
@ -320,11 +320,13 @@ a[data-toggle="tooltip"] {
|
|||
}
|
||||
|
||||
.nav-name {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 54px;
|
||||
line-height: 44px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 5px 0;
|
||||
padding: 5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
class RepositoriesController < ApplicationController
|
||||
include InventoriesHelper
|
||||
include ActionView::Helpers::TagHelper
|
||||
include ActionView::Context
|
||||
include IconsHelper
|
||||
|
||||
before_action :load_vars,
|
||||
except: %i(index create create_modal parse_sheet)
|
||||
before_action :load_parent_vars, except:
|
||||
|
|
@ -324,7 +329,8 @@ class RepositoriesController < ApplicationController
|
|||
name: 'title',
|
||||
params_group: 'repository',
|
||||
field_to_udpate: 'name',
|
||||
path_to_update: team_repository_path(@repository)
|
||||
path_to_update: team_repository_path(@repository),
|
||||
label_after: "<span class=\"repository-share-icon\">#{inventory_shared_status_icon(@repository, current_team)}</span>"
|
||||
}
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -2,16 +2,19 @@
|
|||
|
||||
# rubocop:disable Metrics/LineLength
|
||||
module IconsHelper
|
||||
def draw_custom_icon(icon)
|
||||
def draw_custom_icon(icon, team = nil)
|
||||
title = ''
|
||||
case icon
|
||||
when 'i-shared'
|
||||
icon = '<path fill="#A0A0A0" d="M6.6 8.922c-.688 0-1.34-.172-1.925-.515a3.478 3.478 0 0 1-1.41-1.41 3.758 3.758 0 0 1-.515-1.925c0-.687.172-1.306.516-1.925.343-.584.79-1.065 1.409-1.41A3.758 3.758 0 0 1 6.6 1.223a3.85 3.85 0 0 1 1.925.516 3.955 3.955 0 0 1 1.41 1.41 3.85 3.85 0 0 1 .515 1.924c0 .688-.172 1.34-.516 1.925-.343.619-.825 1.066-1.409 1.41a3.85 3.85 0 0 1-1.925.515zm2.647 1.1c.687 0 1.34.207 1.96.55.618.344 1.1.825 1.443 1.444.344.619.55 1.272.55 1.96v.996c0 .482-.172.86-.481 1.169a1.558 1.558 0 0 1-1.169.481h-9.9c-.481 0-.86-.137-1.169-.481-.343-.31-.481-.687-.481-1.169v-.997c0-.687.172-1.34.516-1.959.343-.619.825-1.1 1.443-1.444.62-.343 1.272-.55 1.994-.55h.275a5.22 5.22 0 0 0 2.372.55 5.43 5.43 0 0 0 2.372-.55h.275zm7.253-1.1c-.928 0-1.719-.31-2.338-.962-.653-.619-.962-1.41-.962-2.338 0-.894.31-1.684.963-2.337a3.216 3.216 0 0 1 2.337-.963c.894 0 1.684.344 2.337.963.62.653.963 1.443.963 2.337 0 .928-.344 1.719-.963 2.338a3.193 3.193 0 0 1-2.337.962zm1.65 1.1a3.85 3.85 0 0 1 1.925.516 3.956 3.956 0 0 1 1.41 1.41A3.85 3.85 0 0 1 22 13.871c0 .482-.172.86-.481 1.169a1.558 1.558 0 0 1-1.169.481h-6.084l.034-1.547c0-.618-.138-1.237-.378-1.822a6.034 6.034 0 0 0-.997-1.615 3.85 3.85 0 0 1 1.925-.516h.138a4.034 4.034 0 0 0 1.512.275c.481 0 .962-.069 1.512-.275h.138z"/>'
|
||||
when 'shared-edit'
|
||||
title = "<title>#{t('repositories.icon_title.shared_edit', team_name: team.name)}</title>"
|
||||
icon = '<path fill="#A0A0A0" fill-rule="evenodd" d="M6.6 8.922c-.688 0-1.34-.172-1.925-.515a3.478 3.478 0 0 1-1.41-1.41 3.758 3.758 0 0 1-.515-1.925c0-.687.172-1.306.516-1.925.343-.584.79-1.065 1.409-1.41A3.758 3.758 0 0 1 6.6 1.223a3.85 3.85 0 0 1 1.925.516 3.955 3.955 0 0 1 1.41 1.41 3.85 3.85 0 0 1 .515 1.924c0 .688-.172 1.34-.516 1.925-.343.619-.825 1.066-1.409 1.41a3.85 3.85 0 0 1-1.925.515zm2.647 1.1c.687 0 1.34.207 1.96.55.618.344 1.1.825 1.443 1.444.344.619.55 1.272.55 1.96v.996c0 .482-.172.86-.481 1.169a1.557 1.557 0 0 1-1.169.481h-9.9c-.481 0-.86-.137-1.169-.481-.343-.31-.481-.687-.481-1.169v-.997c0-.687.172-1.34.516-1.959.343-.619.825-1.1 1.443-1.444.62-.343 1.272-.55 1.994-.55h.275c.756.378 1.547.55 2.372.55a5.43 5.43 0 0 0 2.372-.55h.275zm7.253-1.1c-.928 0-1.719-.31-2.338-.962-.653-.619-.962-1.41-.962-2.338 0-.894.31-1.684.963-2.337a3.216 3.216 0 0 1 2.337-.963c.894 0 1.684.344 2.337.963.62.653.963 1.443.963 2.337 0 .928-.344 1.719-.963 2.338a3.193 3.193 0 0 1-2.337.962zm1.65 1.1c.583 0 1.116.124 1.642.37-.71.036-1.328.33-1.799.801l-3.714 3.714.021-.932c0-.618-.138-1.237-.378-1.822a6.032 6.032 0 0 0-.997-1.615 3.849 3.849 0 0 1 1.925-.516h.138a4.034 4.034 0 0 0 1.512.275c.481 0 .962-.069 1.512-.275h.138zm-5.675 9.282l5.307-5.307 2.443 2.444-5.307 5.306-2.176.248c-.152.02-.286-.019-.382-.133-.114-.096-.152-.23-.133-.382l.248-2.176zM22 14.284a.943.943 0 0 0-.267-.65l-1.146-1.145a.943.943 0 0 0-.648-.267.877.877 0 0 0-.65.268l-1.088 1.088 2.444 2.443 1.088-1.088a.877.877 0 0 0 .267-.65z" clip-rule="evenodd"/>'
|
||||
when 'shared-read'
|
||||
title = "<title>#{t('repositories.icon_title.shared_read', team_name: team.name)}</title>"
|
||||
icon = '<path fill="#A0A0A0" fill-rule="evenodd" d="M6.6 8.922c-.688 0-1.34-.172-1.925-.515a3.478 3.478 0 0 1-1.41-1.41 3.758 3.758 0 0 1-.515-1.925c0-.687.172-1.306.516-1.925.343-.584.79-1.065 1.409-1.41A3.758 3.758 0 0 1 6.6 1.223a3.85 3.85 0 0 1 1.925.516 3.955 3.955 0 0 1 1.41 1.41 3.85 3.85 0 0 1 .515 1.924c0 .688-.172 1.34-.516 1.925-.343.619-.825 1.066-1.409 1.41a3.85 3.85 0 0 1-1.925.515zm2.647 1.1c.687 0 1.34.207 1.96.55.618.344 1.1.825 1.443 1.444.281.506.47 1.036.53 1.588a7.217 7.217 0 0 0-2.564 2.568 2.64 2.64 0 0 0-.218.45H1.65c-.481 0-.86-.137-1.169-.481-.343-.31-.481-.687-.481-1.169v-.997c0-.687.172-1.34.516-1.959.343-.619.825-1.1 1.443-1.444.62-.343 1.272-.55 1.994-.55h.275c.756.378 1.547.55 2.372.55a5.43 5.43 0 0 0 2.372-.55h.275zm11.43 3.546c.442.263.85.562 1.22.898.068-.18.103-.376.103-.594a3.85 3.85 0 0 0-.516-1.925 3.955 3.955 0 0 0-1.409-1.41 3.849 3.849 0 0 0-1.925-.515h-.137a4.156 4.156 0 0 1-1.513.275c-.481 0-.997-.069-1.512-.275h-.138c-.688 0-1.306.172-1.925.516.412.481.756 1.031.997 1.615.125.306.223.62.288.94a7.268 7.268 0 0 1 2.748-.527c1.326 0 2.577.34 3.704.994l.014.008zM16.5 8.922c-.928 0-1.719-.31-2.338-.962-.653-.619-.962-1.41-.962-2.338 0-.894.31-1.684.963-2.337a3.216 3.216 0 0 1 2.337-.963c.894 0 1.684.344 2.337.963.62.653.963 1.443.963 2.337 0 .928-.344 1.719-.963 2.338a3.193 3.193 0 0 1-2.337.962zm5.347 8.6a.932.932 0 0 0-.119-.407 5.658 5.658 0 0 0-1.986-1.969 5.473 5.473 0 0 0-2.784-.747 5.428 5.428 0 0 0-2.784.747 5.39 5.39 0 0 0-1.986 1.97.75.75 0 0 0-.119.407c0 .152.034.288.12.407a5.148 5.148 0 0 0 1.985 1.97c.85.509 1.766.746 2.784.746 1.002 0 1.936-.237 2.784-.747a5.39 5.39 0 0 0 1.986-1.969.818.818 0 0 0 .12-.407zm-3.734 2.004a2.303 2.303 0 0 1-1.155.305c-.424 0-.814-.101-1.154-.305a2.264 2.264 0 0 1-.849-.849 2.214 2.214 0 0 1-.305-1.154c0-.408.101-.798.305-1.155.204-.34.492-.628.849-.831.34-.204.73-.323 1.154-.323.408 0 .798.119 1.155.323.34.203.628.492.831.831.204.357.323.747.323 1.155 0 .424-.119.815-.323 1.154a2.346 2.346 0 0 1-.831.849zm.085-3.242c.339.34.526.764.526 1.239 0 .492-.187.916-.526 1.256-.34.34-.764.51-1.24.51-.492 0-.916-.17-1.256-.51-.34-.34-.51-.764-.51-1.256 0-.289.069-.56.205-.832 0 .204.067.39.203.526a.73.73 0 0 0 .527.204.691.691 0 0 0 .509-.204.745.745 0 0 0 .22-.526.706.706 0 0 0-.22-.51.706.706 0 0 0-.51-.22c.255-.136.527-.204.832-.204.476 0 .9.187 1.24.527z" clip-rule="evenodd"/>'
|
||||
end
|
||||
('<svg class="fas-custom" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22">' + icon + '</svg>').html_safe
|
||||
('<svg class="fas-custom" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22">' + title + icon + '</svg>').html_safe
|
||||
end
|
||||
end
|
||||
# rubocop:enable Metrics/LineLength
|
||||
|
|
|
|||
|
|
@ -4,16 +4,17 @@ module InventoriesHelper
|
|||
def inventory_shared_status_icon(inventory, team)
|
||||
if inventory.shared_with?(team)
|
||||
if can_manage_repository_rows?(inventory)
|
||||
draw_custom_icon('shared-edit')
|
||||
draw_custom_icon('shared-edit', inventory.team)
|
||||
else
|
||||
draw_custom_icon('shared-read')
|
||||
draw_custom_icon('shared-read', inventory.team)
|
||||
end
|
||||
else
|
||||
# The icon should be hiden if repo is not shared (we're updating it dinamically)
|
||||
css_classes = ["repository-share-status"]
|
||||
css_classes.push("hidden") unless inventory.i_shared?(current_team)
|
||||
css_title = t('repositories.icon_title.i_shared')
|
||||
|
||||
content_tag :span, class: css_classes.join(" ") do
|
||||
content_tag :span, title: css_title, class: css_classes.join(" ") do
|
||||
draw_custom_icon('i-shared')
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<%= truncate(repository.name) %>
|
||||
<span class="assigned-items-counter"><i class="fas fa-spinner fa-spin"></i></span>
|
||||
<% end %>
|
||||
<%= inventory_shared_status_icon(repository, current_team) %>
|
||||
<%= inventory_shared_status_icon(repository, current_team) %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -11,15 +11,23 @@
|
|||
|
||||
<div class="content-pane repository-show">
|
||||
<div id="repository-toolbar">
|
||||
<span class="repository-share-icon">
|
||||
<%= inventory_shared_status_icon(@repository, current_team) %>
|
||||
</span>
|
||||
<div class="repository-title">
|
||||
<% if @inline_editable_title_config.present? %>
|
||||
<%= render partial: "shared/inline_editing",
|
||||
locals: { initial_value: @repository.name } %>
|
||||
<% else %>
|
||||
<%= @repository.name %>
|
||||
<div class="repository-title-container">
|
||||
|
||||
<div class="repository-title-name">
|
||||
<% if @inline_editable_title_config.present? %>
|
||||
<%= render partial: "shared/inline_editing",
|
||||
locals: { initial_value: @repository.name } %>
|
||||
<% else %>
|
||||
<%= @repository.name %>
|
||||
<span class="repository-share-icon">
|
||||
<%= inventory_shared_status_icon(@repository, current_team) %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if @repository.shared_with_anybody? %>
|
||||
<% team_name = @repository.team == current_team ? 'your Team' : @repository.team.name %>
|
||||
<div class="repository-subtitle"><%= t('repositories.subtitle', team_name: team_name) %></div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
data-params-group="<%= @inline_editable_title_config[:params_group] %>"
|
||||
data-path-to-update="<%= @inline_editable_title_config[:path_to_update] %>"
|
||||
data-original-name="<%= initial_value %>"
|
||||
data-label-after='<%= @inline_editable_title_config[:label_after]&.html_safe %>'
|
||||
error="false"
|
||||
>
|
||||
<div class="view-mode"><%= initial_value %></div>
|
||||
|
|
|
|||
|
|
@ -976,7 +976,12 @@ en:
|
|||
success_flash: "Table result successfully deleted."
|
||||
|
||||
repositories:
|
||||
subtitle: "Owned by %{team_name}"
|
||||
repository: "Inventory: %{name}"
|
||||
icon_title:
|
||||
i_shared: "Shared inventory (owned by your Team)"
|
||||
shared_edit: "Shared inventory (owned by %{team_name}). You can edit."
|
||||
shared_read: "Shared inventory (owned by %{team_name}). You can view."
|
||||
index:
|
||||
head_title: "Inventories"
|
||||
title: "Inventories"
|
||||
|
|
|
|||
Loading…
Reference in a new issue