From 2de2ead723f379d0c71a9e086d965bd232c83a39 Mon Sep 17 00:00:00 2001 From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com> Date: Tue, 21 May 2019 15:19:44 +0200 Subject: [PATCH] Refactor avatar image appearance across Scinote [SCI-3482] (#1787) * Refactor avatar appearance across Scinote --- .../javascripts/shared/inline_editing.js | 6 +- .../javascripts/sitewide/atwho_res.js.erb | 2 +- app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/extend/bootstrap.scss | 16 +++--- app/assets/stylesheets/shared/avatar.scss | 18 ++++++ app/assets/stylesheets/steps.scss | 7 +-- .../stylesheets/themes/main_navigation.scss | 7 --- app/assets/stylesheets/themes/scinote.scss | 36 +++++++----- app/controllers/step_comments_controller.rb | 3 +- app/helpers/application_helper.rb | 55 +++++++++---------- app/views/shared/_navigation.html.erb | 4 +- app/views/steps/comments/_item.html.erb | 9 ++- app/views/user_my_modules/_index.html.erb | 5 +- .../user_my_modules/_index_edit.html.erb | 6 +- .../icons/_recent_changes.html.erb | 4 +- app/views/user_projects/_index.html.erb | 6 +- app/views/user_projects/_index_edit.html.erb | 6 +- config/initializers/constants.rb | 6 +- 18 files changed, 108 insertions(+), 89 deletions(-) create mode 100644 app/assets/stylesheets/shared/avatar.scss diff --git a/app/assets/javascripts/shared/inline_editing.js b/app/assets/javascripts/shared/inline_editing.js index 1177deed6..bbd72ea3f 100644 --- 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, '
'); - } - $.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; diff --git a/app/assets/javascripts/sitewide/atwho_res.js.erb b/app/assets/javascripts/sitewide/atwho_res.js.erb index b2677a9ef..7dd0ebd13 100644 --- 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 += '
  • '; - res += ''; + res += ''; res += ''; res += map.full_name; res += ''; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 929c3e5af..fe5efca0c 100644 --- 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/*"; diff --git a/app/assets/stylesheets/extend/bootstrap.scss b/app/assets/stylesheets/extend/bootstrap.scss index 830422c4d..9248df506 100644 --- 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 diff --git a/app/assets/stylesheets/shared/avatar.scss b/app/assets/stylesheets/shared/avatar.scss new file mode 100644 index 000000000..b442f1d95 --- /dev/null +++ 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%; + } +} diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index dcad6c63b..66f1eb3d5 100644 --- 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 { diff --git a/app/assets/stylesheets/themes/main_navigation.scss b/app/assets/stylesheets/themes/main_navigation.scss index 2ef65ed9d..4d8217a86 100644 --- 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%; diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 2bd7e3cad..1d9157b2c 100644 --- 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 { diff --git a/app/controllers/step_comments_controller.rb b/app/controllers/step_comments_controller.rb index e6f924394..ee47a41c3 100644 --- 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) }, diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index ea7b80302..56ef2b58c 100644 --- 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("
    \ #{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("") + " ref='#{'missing-img' if missing_avatar(user, :icon_small)}'>") end html = @@ -185,36 +188,28 @@ module ApplicationHelper 'data-placement="top" data-toggle="popover" data-content="') + raw(user_description) + raw('" >') + user_name + raw('') - 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 = '' + html + '' 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) diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_navigation.html.erb index b526f230e..3d42fb328 100644 --- a/app/views/shared/_navigation.html.erb +++ b/app/views/shared/_navigation.html.erb @@ -135,8 +135,10 @@ <%= t('nav.user_greeting', full_name: current_user.full_name) %> - <%= image_tag avatar_path(current_user, :icon_small), + + <%= image_tag avatar_path(current_user, :icon_small), class: "avatar" %> +