scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-27 02:04:33 +08:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* Refactor avatar appearance across Scinote
This commit is contained in:
aignatov-bio 2019-05-21 15:19:44 +02:00 committed by GitHub
parent 64c31a6418
commit 2de2ead723
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 108 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/shared/inline_editing.js
View file

@ -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;

2
app/assets/javascripts/sitewide/atwho_res.js.erb
View file

@ -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>';

1
app/assets/stylesheets/application.scss
View file

@ -25,3 +25,4 @@
@import "my_modules/protocols/*";
@import "protocols/*";
@import "hooks/*";
@import "shared/*";

16
app/assets/stylesheets/extend/bootstrap.scss vendored
View file

@ -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

18
app/assets/stylesheets/shared/avatar.scss Normal file
View file

@ -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%;
}
}

7
app/assets/stylesheets/steps.scss
View file

@ -264,13 +264,8 @@
.avatar-placehodler {
height: 30px;
margin: 13px 0;
width: 30px;
img {
border-radius: 30px;
position: relative;
top: 7px;
}
}
.content-placeholder {

7
app/assets/stylesheets/themes/main_navigation.scss
View file

@ -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%;

36
app/assets/stylesheets/themes/scinote.scss
View file

@ -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 {

3
app/controllers/step_comments_controller.rb
View file

@ -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) },

53
app/helpers/application_helper.rb
View file

@ -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']
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
begin
unless missing_avatar(user, style)
return user.avatar(style, timeout: Constants::URL_LONG_EXPIRE_TIME)
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
url_for(prefix + "/images/#{style}/missing.png")
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
url_for("/images/#{style}/missing.png")
end
def missing_avatar(user, style)

2
app/views/shared/_navigation.html.erb
View file

@ -135,8 +135,10 @@
<span>
<%= t('nav.user_greeting', full_name: current_user.full_name) %>
</span>
<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>

7
app/views/steps/comments/_item.html.erb
View file

@ -10,7 +10,9 @@
error="false"
>
<div class="avatar-placehodler">
<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 %>

3
app/views/user_my_modules/_index.html.erb
View file

@ -10,9 +10,10 @@
<% if i > 0 %><hr><% end %>
<div class="row">
<div class="col-xs-2">
<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>

4
app/views/user_my_modules/_index_edit.html.erb
View file

@ -9,10 +9,12 @@
<div class="row">
<div class="col-xs-2">
<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>

2
app/views/user_notifications/icons/_recent_changes.html.erb
View file

@ -1,3 +1,5 @@
<div class="text-center">
<span class='global-avatar-container'>
<%= image_tag avatar_path(notification.generator_user, :icon_small), class: 'avatar img-circle' %>
<span>
</div>

4
app/views/user_projects/_index.html.erb
View file

@ -9,9 +9,11 @@
<% if i > 0 %><hr><% end %>
<div class="row">
<div class="col-xs-2">
<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>

4
app/views/user_projects/_index_edit.html.erb
View file

@ -9,10 +9,12 @@
<div class="row">
<div class="col-xs-2">
<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>

6
config/initializers/constants.rb
View file

@ -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