Refactor avatar image appearance across Scinote [SCI-3482] (#1787)

* Refactor avatar appearance across Scinote
2024-12-26 09:42:46 +08:00 · 2019-05-21 15:19:44 +02:00 · 2019-05-21 15:19:44 +02:00 · 2de2ead723
commit 2de2ead723
parent 64c31a6418
18 changed files with 108 additions and 89 deletions
--- a/app/assets/javascripts/shared/inline_editing.js
+++ b/app/assets/javascripts/shared/inline_editing.js
@ -3,10 +3,6 @@
 function initInlineEditing(title) {
  var editBlocks = $('.' + title + '-editable-field');

-  function prepareText(text) {
-    return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
-  }
-
  $.each(editBlocks, function(i, element) {
    var editBlock = element;
    var $editBlock = $(editBlock);
@ -59,7 +55,7 @@ function initInlineEditing(title) {
          editBlock.dataset.originalName = inputString.value;
          editBlock.dataset.error = false;
          $inputString.addClass('hidden');
-          $editBlock.find('.view-mode').html(prepareText(viewData)).removeClass('hidden');
+          $editBlock.find('.view-mode').html(viewData).removeClass('hidden');

          inputString.disabled = true;
          editBlock.dataset.editMode = 0;
--- a/app/assets/javascripts/sitewide/atwho_res.js.erb
+++ b/app/assets/javascripts/sitewide/atwho_res.js.erb
@ -411,7 +411,7 @@ var SmartAnnotation = (function() {
                res += '<li class="atwho-li atwho-li-user" ';
                res += 'data-id="' + map.id + '" ';
                res += 'data-full-name="' + map.full_name + '">';
-                res += '<img src="' + map.img_url + '" class="avatar" />';
+                res += '<span class="global-avatar-container"><img src="' + map.img_url + '" class="avatar" /></span>';
                res += '<span data-val="full-name">';
                res += map.full_name;
                res += '</span>';
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@ -25,3 +25,4 @@
@import "my_modules/protocols/*";
@import "protocols/*";
@import "hooks/*";
+@import "shared/*";
--- a/app/assets/stylesheets/extend/bootstrap.scss
+++ b/app/assets/stylesheets/extend/bootstrap.scss
@ -3,13 +3,15 @@
@import 'constants';

 /* navbar avatar image */
-.navbar-nav .avatar {
-  border-radius: 30px;
-  height: 30px;
-  margin-top: -14px;
-  position: relative;
-  width: 30px;
-  top: 5px;
+.navbar-nav .dropdown-toggle[title="Account"] {
+  align-items: center;
+  display: inline-flex;
+  height: 50px;
+  padding: 10px 15px;
+
+  .global-avatar-container {
+    margin-left: 5px;
+  }
 }

 // Active tab with error should retain error color if clicked on again
--- a/app/assets/stylesheets/shared/avatar.scss
+++ b/app/assets/stylesheets/shared/avatar.scss
@ -0,0 +1,18 @@
+@import "constants";
+@import "mixins";
+
+.global-avatar-container {
+  border-radius: 15px;
+  display: inline-block;
+  height: 30px;
+  overflow: hidden;
+  position: relative;
+  width: 30px;
+
+  img {
+    border-radius: 15px;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+}
--- a/app/assets/stylesheets/steps.scss
+++ b/app/assets/stylesheets/steps.scss
@ -264,13 +264,8 @@

  .avatar-placehodler {
    height: 30px;
+    margin: 13px 0;
    width: 30px;
-
-    img {
-      border-radius: 30px;
-      position: relative;
-      top: 7px;
-    }
  }

  .content-placeholder {
--- a/app/assets/stylesheets/themes/main_navigation.scss
+++ b/app/assets/stylesheets/themes/main_navigation.scss
@ -76,13 +76,6 @@
    margin-left: 12px;
  }

-  .avatar {
-    top: 0px;
-    margin-top: 5px;
-    height: 45px;
-    width: 45px;
-  }
-
  .assignment {
    background-color: $brand-primary;
    border-radius: 50%;
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@ -1822,10 +1822,15 @@ th.custom-field .modal-tooltiptext {
    margin: auto;

    li {
-      display: block;
-      padding: 5px 10px;
+      align-items: center;
      border-bottom: 1px solid $color-emperor;
      cursor: pointer;
+      display: flex;
+      padding: 5px 10px;
+
+      .global-avatar-container {
+        margin-right: 5px;
+      }
    }
  }
 }
@ -1883,16 +1888,6 @@ th.custom-field .modal-tooltiptext {
  }
 }

-.atwho-li-user {
-
-  .avatar {
-    border-radius: 50%;
-    margin-left: 5px;
-    margin-right: 10px;
-    height: 20px;
-    width: 20px;
-  }
-}

 .atwho-li-res {

@ -1935,9 +1930,24 @@ th.custom-field .modal-tooltiptext {
  }
 }

+.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;
-  padding-left: 5px;
+  display: inline-block;
 }

 .atwho-user-img-popover {
--- a/app/controllers/step_comments_controller.rb
+++ b/app/controllers/step_comments_controller.rb
@ -101,8 +101,7 @@ class StepCommentsController < ApplicationController
          # Generate activity
          log_activity(:edit_step_comment)

-          message = custom_auto_link(@comment.message, simple_format: false,
-              tags: %w(img), team: current_team)
+          message = custom_auto_link(@comment.message, team: current_team)
          render json: { comment: message }, status: :ok
        else
          render json: { errors: @comment.errors.to_hash(true) },
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module ApplicationHelper
  include ActionView::Helpers::AssetTagHelper
  include ActionView::Helpers::UrlHelper
@ -22,6 +24,7 @@ module ApplicationHelper

  def display_tooltip(message, len = Constants::NAME_TRUNCATION_LENGTH)
    return '' unless message
+
    if message.strip.length > len
      sanitize_input("<div class='modal-tooltip'> \
      #{truncate(message.strip, length: len)} \
@ -95,6 +98,7 @@ module ApplicationHelper
    annotated_users.uniq.each do |user_id|
      target_user = User.find_by_id(user_id)
      next unless target_user
+
      generate_annotation_notification(target_user, title, message)
    end
  end
@ -105,9 +109,7 @@ module ApplicationHelper
      title: sanitize_input(title),
      message: sanitize_input(message)
    )
-    if target_user.assignments_notification
-      UserNotification.create(notification: notification, user: target_user)
-    end
+    UserNotification.create(notification: notification, user: target_user) if target_user.assignments_notification
  end

  def smart_annotation_parser(text, team = nil)
@ -133,6 +135,7 @@ module ApplicationHelper
      match = el.match(sa_user)
      user = User.find_by_id(match[2].base62_decode)
      next unless user
+
      popover_for_user_name(user, team)
    end
    new_text
@ -172,9 +175,9 @@ module ApplicationHelper
    html = if skip_avatar
             ''
           else
-             raw("<img src='#{user_avatar_absolute_url(user, :icon_small)}'" \
+             raw("<span class=\"global-avatar-container smart-annotation\"><img src='#{user_avatar_absolute_url(user, :icon_small)}'" \
             "alt='avatar' class='atwho-user-img-popover'" \
-             " ref='#{'missing-img' if missing_avatar(user, :icon_small)}'>")
+             " ref='#{'missing-img' if missing_avatar(user, :icon_small)}'></span>")
           end

    html =
@ -185,36 +188,28 @@ module ApplicationHelper
        'data-placement="top" data-toggle="popover" data-content="') +
      raw(user_description) + raw('" >') + user_name + raw('</a>')

-    unless skip_user_status || user_still_in_team
-      html << " #{I18n.t('atwho.res.removed')}"
-    end
+    html << " #{I18n.t('atwho.res.removed')}" unless skip_user_status || user_still_in_team
+    html = '<span class="atwho-user-container">' + html + '</span>'
    html
  end

-  # Dirty, dirty hack for displaying images in reports
+  # No more dirty hack
  def user_avatar_absolute_url(user, style)
-    prefix = ''
-    if ENV['PAPERCLIP_STORAGE'].present? &&
-       ENV['MAIL_SERVER_URL'].present? &&
-       ENV['PAPERCLIP_STORAGE'] != 'filesystem'
-      prefix = ENV['MAIL_SERVER_URL']
+    begin
+      unless missing_avatar(user, style)
+        image = if user.avatar.options[:storage].to_sym == :s3
+                  URI.parse(user.avatar.url(style)).open.to_a.join
+                else
+                  File.open(user.avatar.path(style)).to_a.join
+                end
+        encoded_data = Base64.strict_encode64(image)
+        avatar_base64 = "data:#{user.avatar_content_type};base64,#{encoded_data}"
+        return avatar_base64
+      end
+    rescue StandardError => e
+      Rails.logger.error e.message
    end
-    # for development
-    prefix = 'localhost:3000' if ENV['MAIL_SERVER_URL'] == 'localhost'
-    if !prefix.empty? &&
-       !prefix.include?('http://') &&
-       !prefix.include?('https://')
-      prefix = if respond_to?(:request) && request.ssl?
-                 "https://#{prefix}"
-               else
-                 "http://#{prefix}"
-               end
-    end
-
-    unless missing_avatar(user, style)
-      return user.avatar(style, timeout: Constants::URL_LONG_EXPIRE_TIME)
-    end
-    url_for(prefix + "/images/#{style}/missing.png")
+    url_for("/images/#{style}/missing.png")
  end

  def missing_avatar(user, style)
--- a/app/views/shared/_navigation.html.erb
+++ b/app/views/shared/_navigation.html.erb
@ -135,8 +135,10 @@
            <span>
              <%= t('nav.user_greeting', full_name: current_user.full_name) %>
            </span>
-            <%= image_tag avatar_path(current_user, :icon_small),
+            <span class='global-avatar-container'>
+              <%= image_tag avatar_path(current_user, :icon_small),
                          class: "avatar" %>
+            </span>
          </a>
          <ul class="dropdown-menu" data-hook="navigation-user-menu">
            <li>
--- a/app/views/steps/comments/_item.html.erb
+++ b/app/views/steps/comments/_item.html.erb
@ -10,7 +10,9 @@
    error="false"
  >
    <div class="avatar-placehodler">
-      <%= image_tag avatar_path(comment.user, :icon_small), class: 'avatar' %>
+      <span class='global-avatar-container'> 
+        <%= image_tag avatar_path(comment.user, :icon_small), class: 'avatar' %>
+      </span>
    </div>
    <div class="content-placeholder">
      <div class="comment-name"><%= comment.user.full_name %></div>
@ -36,10 +38,7 @@
        <% end %>
      </div>
      <div class="comment-message">
-           <div class="view-mode"><%= custom_auto_link(comment.message,
-                                                          simple_format: false,
-                                                          tags: %w(img br), 
-                                                          team: current_team).gsub(/\n/, '<br/>').html_safe %></div>
+           <div class="view-mode"><%= custom_auto_link(comment.message, team: current_team).html_safe %></div>
            <% if user_comment %>
              <%= text_area_tag 'message', comment.message, disabled: true, class: 'smart-text-area hidden' %>
            <% end %>
--- a/app/views/user_my_modules/_index.html.erb
+++ b/app/views/user_my_modules/_index.html.erb
@ -10,9 +10,10 @@
        <% if i > 0 %><hr><% end %>
        <div class="row">
          <div class="col-xs-2">
-            <%= image_tag avatar_path(user, :icon_small), class: "img-circle pull-left" %>
+            <span class='global-avatar-container'>
+              <%= image_tag avatar_path(user, :icon_small), class: "img-circle pull-left" %>
          </div>
-          <div class="col-xs-10">
+          <div class="col-xs-10" style="line-height: 15px">
            <span><%= user.full_name %></span><br>
            <span class="text-muted" title="<%=t "experiments.canvas.popups.module_user_join_full", user: user.full_name, date: l(user_my_module.created_at, format: :full_date), time: l(user_my_module.created_at, format: :time) %>">
              <em>
--- a/app/views/user_my_modules/_index_edit.html.erb
+++ b/app/views/user_my_modules/_index_edit.html.erb
@ -9,10 +9,12 @@
    <div class="row">

      <div class="col-xs-2">
-        <%= image_tag avatar_path(user, :icon_small), class: 'img-circle pull-left' %>
+        <span class='global-avatar-container'>
+          <%= image_tag avatar_path(user, :icon_small), class: 'img-circle pull-left' %>
+        </span>
      </div>

-      <div class="col-xs-4">
+      <div class="col-xs-4" style="line-height: 15px">
        <span><%= user.full_name %></span>
        <br><span class="text-muted" title="<%=t "experiments.canvas.full_zoom.modal_manage_users.user_join_full", user: user.full_name, date: l(umm.created_at, format: :full_date), time: l(umm.created_at, format: :time) %>">
          <em><%=t "experiments.canvas.full_zoom.modal_manage_users.user_join", date: l(umm.created_at, format: :full_date) %></em>
--- a/app/views/user_notifications/icons/_recent_changes.html.erb
+++ b/app/views/user_notifications/icons/_recent_changes.html.erb
@ -1,3 +1,5 @@
 <div class="text-center">
-  <%= image_tag avatar_path(notification.generator_user, :icon_small), class: 'avatar img-circle' %>
+  <span class='global-avatar-container'>
+    <%= image_tag avatar_path(notification.generator_user, :icon_small), class: 'avatar img-circle' %>
+  <span>
 </div>
--- a/app/views/user_projects/_index.html.erb
+++ b/app/views/user_projects/_index.html.erb
@ -9,9 +9,11 @@
        <% if i > 0 %><hr><% end %>
        <div class="row">
          <div class="col-xs-2">
-            <%= image_tag avatar_path(user, :icon_small), class: 'img-circle pull-left' %>
+            <span class='global-avatar-container'>
+              <%= image_tag avatar_path(user, :icon_small), class: 'img-circle pull-left' %>
+            </span>
          </div>
-          <div class="col-xs-10">
+          <div class="col-xs-10" style="line-height: 15px">
            <span><%= user.full_name %></span>
            <br><span class="text-muted"><%= t('user_projects.enums.role.'<< user_proj.role.to_s) %></span>
          </div>
--- a/app/views/user_projects/_index_edit.html.erb
+++ b/app/views/user_projects/_index_edit.html.erb
@ -9,10 +9,12 @@
    <div class="row">

      <div class="col-xs-2">
-        <%= image_tag avatar_path(user, :icon_small), class: 'img-circle pull-left' %>
+        <span class='global-avatar-container'>
+          <%= image_tag avatar_path(user, :icon_small), class: 'img-circle pull-left' %>
+        </span>
      </div>

-      <div class="col-xs-10 col-sm-4">
+      <div class="col-xs-10 col-sm-4" style="line-height: 15px">
        <span><%= user.full_name %></span>
        <br><span class="text-muted"><%= t('user_projects.enums.role.'<< user_proj.role) %></span>
      </div>
--- a/config/initializers/constants.rb
+++ b/config/initializers/constants.rb
@ -90,9 +90,9 @@ class Constants
  # Picture size formats
  LARGE_PIC_FORMAT = '800x600>'.freeze
  MEDIUM_PIC_FORMAT = '300x300>'.freeze
-  THUMB_PIC_FORMAT = '100x100>'.freeze
-  ICON_PIC_FORMAT = '40x40>'.freeze
-  ICON_SMALL_PIC_FORMAT = '30x30>'.freeze
+  THUMB_PIC_FORMAT = '100x100#'.freeze
+  ICON_PIC_FORMAT = '40x40#'.freeze
+  ICON_SMALL_PIC_FORMAT = '30x30#'.freeze

  # Hands-on-table number of starting columns and rows
  HANDSONTABLE_INIT_COLS_CNT = 5