diff --git a/app/assets/javascripts/shared/inline_editing.js b/app/assets/javascripts/shared/inline_editing.js index 650ac64cc..aa9de0266 100644 --- a/app/assets/javascripts/shared/inline_editing.js +++ b/app/assets/javascripts/shared/inline_editing.js @@ -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; diff --git a/app/assets/stylesheets/partials/_inline_editing.scss b/app/assets/stylesheets/partials/_inline_editing.scss index c5e4d9f01..6f19a0a07 100644 --- a/app/assets/stylesheets/partials/_inline_editing.scss +++ b/app/assets/stylesheets/partials/_inline_editing.scss @@ -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; - } - } -} diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index a217ceea0..bbc4188df 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -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 { diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 491a2177a..c2cb9f281 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -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; } diff --git a/app/controllers/repositories_controller.rb b/app/controllers/repositories_controller.rb index 578b71089..df8805727 100644 --- a/app/controllers/repositories_controller.rb +++ b/app/controllers/repositories_controller.rb @@ -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: "#{inventory_shared_status_icon(@repository, current_team)}" } end diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb index f4b4b82af..b0bd9cd07 100644 --- a/app/helpers/icons_helper.rb +++ b/app/helpers/icons_helper.rb @@ -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 = '' when 'shared-edit' + title = "#{t('repositories.icon_title.shared_edit', team_name: team.name)}" icon = '' when 'shared-read' + title = "#{t('repositories.icon_title.shared_read', team_name: team.name)}" icon = '' end - ('' + icon + '').html_safe + ('' + title + icon + '').html_safe end end # rubocop:enable Metrics/LineLength diff --git a/app/helpers/inventories_helper.rb b/app/helpers/inventories_helper.rb index 0dc540d40..c1a02fb2b 100644 --- a/app/helpers/inventories_helper.rb +++ b/app/helpers/inventories_helper.rb @@ -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 diff --git a/app/views/my_modules/_repositories_dropdown.html.erb b/app/views/my_modules/_repositories_dropdown.html.erb index e0d2a08f5..2af29c4d8 100644 --- a/app/views/my_modules/_repositories_dropdown.html.erb +++ b/app/views/my_modules/_repositories_dropdown.html.erb @@ -14,7 +14,7 @@ <%= truncate(repository.name) %> <% end %> - <%= inventory_shared_status_icon(repository, current_team) %> + <%= inventory_shared_status_icon(repository, current_team) %> <% end %> diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb index 9f3366fc6..0ae6e9cbd 100644 --- a/app/views/repositories/show.html.erb +++ b/app/views/repositories/show.html.erb @@ -11,15 +11,23 @@
- - <%= inventory_shared_status_icon(@repository, current_team) %> - -
- <% if @inline_editable_title_config.present? %> - <%= render partial: "shared/inline_editing", - locals: { initial_value: @repository.name } %> - <% else %> - <%= @repository.name %> +
+ +
+ <% if @inline_editable_title_config.present? %> + <%= render partial: "shared/inline_editing", + locals: { initial_value: @repository.name } %> + <% else %> + <%= @repository.name %> + + <%= inventory_shared_status_icon(@repository, current_team) %> + + <% end %> +
+ + <% if @repository.shared_with_anybody? %> + <% team_name = @repository.team == current_team ? 'your Team' : @repository.team.name %> +
<%= t('repositories.subtitle', team_name: team_name) %>
<% end %>
diff --git a/app/views/shared/_inline_editing.html.erb b/app/views/shared/_inline_editing.html.erb index 1fb212739..fd1c187a4 100644 --- a/app/views/shared/_inline_editing.html.erb +++ b/app/views/shared/_inline_editing.html.erb @@ -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" >
<%= initial_value %>
diff --git a/config/locales/en.yml b/config/locales/en.yml index 779f8d0e8..2ae8107c9 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -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"