Merge pull request #2856 from mlorb/ml-sci-5009

Update empty states for smart annotation results and dismiss button [SCI-5009]
2024-09-20 23:16:15 +08:00 · 2020-09-22 15:31:22 +02:00 · 2020-09-22 15:31:22 +02:00 · 547af538b3
parent e288a1f911 8b3fce9656
commit 547af538b3
11 changed files with 59 additions and 39 deletions
--- a/app/assets/javascripts/sitewide/atwho_res.js
+++ b/app/assets/javascripts/sitewide/atwho_res.js
@ -230,4 +230,8 @@ var SmartAnnotation = (function() {
      SmartAnnotation.init(this);
    }
  });
+
+  $(document).on('click', '.atwho-view .dismiss', function() {
+    $(this).closest('.atwho-view').hide();
+  });
 }());
--- a/app/assets/stylesheets/shared/smart_annotation.scss
+++ b/app/assets/stylesheets/shared/smart_annotation.scss
@ -14,6 +14,7 @@

  .atwho-header-res {
    .nav-tabs {
+      align-items: center;
      margin-bottom: 0;
    }

@ -23,6 +24,14 @@
      padding: .25em;
    }

+    .dismiss {
+      @include font-button;
+      color: $color-silver-chalice;
+      cursor: pointer;
+      margin-left: auto;
+      padding: .5em .75em;
+    }
+
    .repository-object {
      max-width: 250px;
      overflow: hidden;
@ -36,6 +45,32 @@
    padding: 0;
  }

+  .atwho-no-results {
+    color: $color-silver-chalice;
+    padding: 1.5em 7em;
+    text-align: center;
+
+    .description {
+      @include font-main;
+      padding: 0 4em 2.5em;
+    }
+  }
+
+  .atwho-header {
+    @include font-small;
+    border-bottom: $border-default;
+    color: $color-silver-chalice;
+    padding: .5em;
+
+    .dismiss {
+      @include font-button;
+      cursor: pointer;
+      float: right;
+      padding: 0 .25em;
+      position: relative;
+    }
+  }
+
  .atwho-footer {
    @include font-small;
    border-top: $border-default;
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@ -1709,38 +1709,6 @@ th.custom-field .modal-tooltiptext {
  pointer-events: none;
 }

-// AtWho (smart annotations)
-
-// <Custom atwho style>
-
-.atwho-user-container {
-  align-items: center;
-  display: inline-flex;
-
-  .global-avatar-container {
-    line-height: 30px;
-    margin: 0 2px 0 4px;
-
-    img {
-      position: relative;
-      top: -2px;
-    }
-  }
-}
-
-.atwho-user-popover {
-  cursor: pointer;
-  display: inline-block;
-}
-
-.atwho-user-img-popover {
-  cursor: default;
-}
-
-.atwho-no-results {
-  padding: 5px 10px;
-}
-
 .popover {
  border-radius: 3px;
  min-width: 450px;
--- a/app/views/shared/smart_annotation/_experiment_items.html.erb
+++ b/app/views/shared/smart_annotation/_experiment_items.html.erb
@ -19,7 +19,7 @@
    <div class="more-results"><%= t('atwho.more_results') %></div>
  <% end %>
  <% if experiments.empty? %>
-    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb', locals: { object_type: 'experiments' } %>
  <% end %>
 </div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>
--- a/app/views/shared/smart_annotation/_menu.html.erb
+++ b/app/views/shared/smart_annotation/_menu.html.erb
@ -5,6 +5,7 @@
    <a class="tab-button sa-experiments" href="#exp-tab-<%= at_who_key %>" data-toggle="tab"><%= t('atwho.experiments') %></a>
    <a class="tab-button sa-tasks" href="#tsk-tab-<%= at_who_key %>" data-toggle="tab"><%= t('atwho.tasks') %></a>
    <a class="tab-button sa-repositories" href="#rep-tab-<%= at_who_key %>" data-toggle="tab"><%= t('atwho.inventories') %></a>
+    <div class="dismiss"><span class="fas fa-times"></span></div>
  </div>
  <div class="tab-content">
    <div class="tab-pane" role="tabpanel" id="prj-tab-<%= at_who_key %>" data-object-type="PROJECT"></div>
--- a/app/views/shared/smart_annotation/_my_module_items.html.erb
+++ b/app/views/shared/smart_annotation/_my_module_items.html.erb
@ -21,7 +21,7 @@
    <div class="more-results"><%= t('atwho.more_results') %></div>
  <% end %>
  <% if my_modules.empty? %>
-    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb', locals: { object_type: 'my_modules' } %>
  <% end %>
 </div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>
--- a/app/views/shared/smart_annotation/_no_results.html.erb
+++ b/app/views/shared/smart_annotation/_no_results.html.erb
@ -1,5 +1,6 @@
 <div class="atwho-no-results">
-  <span><%= t("atwho.no_results") %></span>
+  <h1><%= t("atwho.no_results.#{object_type}") %></h1>
+  <div class="description"><%= t("atwho.no_results.description") %></div>
  <!-- "No results" hack for at.js -->
  <span style="display: none"><%= @query %></span>
 </div>
--- a/app/views/shared/smart_annotation/_project_items.html.erb
+++ b/app/views/shared/smart_annotation/_project_items.html.erb
@ -10,7 +10,7 @@
    <div class="more-results"><%= t('atwho.more_results') %></div>
  <% end %>
  <% if projects.empty? %>
-    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb', locals: { object_type: 'projects' } %>
  <% end %>
 </div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>
--- a/app/views/shared/smart_annotation/_repository_items.html.erb
+++ b/app/views/shared/smart_annotation/_repository_items.html.erb
@ -10,7 +10,7 @@
    <div class="more-results"><%= t('atwho.more_results') %></div>
  <% end %>
  <% if repository_rows.empty? %>
-    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb', locals: { object_type: 'repository_rows' } %>
  <% end %>
 </div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>
--- a/app/views/shared/smart_annotation/_users.html.erb
+++ b/app/views/shared/smart_annotation/_users.html.erb
@ -1,4 +1,8 @@
 <% limit_reached = users.length == Constants::ATWHO_SEARCH_LIMIT + 1 %>
+<div class="atwho-header">
+  <span><%= t("atwho.users.header") %></span>
+  <div class="dismiss"><span class="fas fa-times"></span></div>
+</div>
 <div class="atwho-scroll-container">
  <% users.limit(Constants::ATWHO_SEARCH_LIMIT).each do |user| %>
    <li class="atwho-user" data-full-name="<%= user.full_name %>" data-id="<%= user.id.base62_encode %>" data-type="rep_item">
@ -13,7 +17,7 @@
    <div class="more-results"><%= t('atwho.more_results') %></div>
  <% end %>
  <% if users.empty? %>
-    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb', locals: { object_type: 'users' } %>
  <% end %>
 </div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -2279,7 +2279,13 @@ en:
        forbidden: 'You do not have permission to add files.'
        not_found: 'Element not found.'
  atwho:
-    no_results: "No results found"
+    no_results:
+      projects: "Projects with this name were not found"
+      experiments: "Experiments with this name were not found"
+      my_modules: "Tasks with this name were not found"
+      repository_rows: "Items with this name were not found"
+      users: "Users with this name were not found"
+      description: "Please make sure there are no typos, or erase letters one by one unless you see some results"
    projects: PROJECTS
    experiments: EXPERIMENTS
    tasks: TASKS
@ -2287,6 +2293,7 @@ en:
    more_results: To get other results, please type more
    users:
      title: "People"
+      header: "Type the name or email of the user you want to mention (they will be notified)"
      help: "Navigate: ↑ ↓    •    Submit: Enter / Tab    •    Dismiss: Esc"
      popover_html: "<span class='silver'>Team:</span>&nbsp;%{team} <br> <span class='silver'>Role:</span>&nbsp;%{role} <br> <span class='silver'>Joined:</span>&nbsp;%{time}"
    res: