From 24e30867dae05657c2d7a3512c76d6e90ac77cb5 Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Wed, 15 May 2019 14:59:15 +0200
Subject: [PATCH] Add smart annotation to comments [SCI-3458] (#1768)
* Add smart annotation to comments
---
.../javascripts/shared/inline_editing.js | 47 ++++++++++++++-----
.../stylesheets/partials/_inline_editing.scss | 12 ++++-
app/assets/stylesheets/steps.scss | 21 ++++++++-
app/controllers/step_comments_controller.rb | 3 +-
app/views/shared/_inline_editing.html.erb | 3 +-
app/views/steps/comments/_item.html.erb | 10 +++-
6 files changed, 80 insertions(+), 16 deletions(-)
diff --git a/app/assets/javascripts/shared/inline_editing.js b/app/assets/javascripts/shared/inline_editing.js
index 7eb874fc7..1177deed6 100644
--- a/app/assets/javascripts/shared/inline_editing.js
+++ b/app/assets/javascripts/shared/inline_editing.js
@@ -1,7 +1,12 @@
/* eslint no-unused-vars: ["error", { "varsIgnorePattern": "initInlineEditing" }]*/
+/* global SmartAnnotation */
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);
@@ -12,17 +17,14 @@ function initInlineEditing(title) {
$editBlock.addClass('inline-edit-active');
if ($inputString.length === 0) {
$inputString = $editBlock.find('textarea');
- $inputString.off('keydown').on('keydown', function() {
- var el = this;
- setTimeout(() => {
- el.style.cssText = 'height:0px; padding:0';
- el.style.cssText = 'height:' + (el.scrollHeight + 10) + 'px';
- }, 0);
- });
- $inputString.keydown();
}
+
inputString = $inputString[0];
+ if (editBlock.dataset.smartAnnotation === 'true') {
+ SmartAnnotation.init($inputString);
+ }
+
function saveAllEditFields() {
$('.inline-edit-active').find('.save-button').click();
}
@@ -33,6 +35,8 @@ function initInlineEditing(title) {
if (inputString.value === editBlock.dataset.originalName) {
inputString.disabled = true;
editBlock.dataset.editMode = 0;
+ $inputString.addClass('hidden');
+ $editBlock.find('.view-mode').removeClass('hidden');
return false;
}
params[editBlock.dataset.paramsGroup] = {};
@@ -42,9 +46,21 @@ function initInlineEditing(title) {
type: 'PUT',
dataType: 'json',
data: params,
- success: function() {
+ success: function(result) {
+ var viewData;
+ if (editBlock.dataset.responseField) {
+ // If we want to modify preview element on backend
+ // we can use this data field and we will take string from response
+ viewData = result[editBlock.dataset.responseField];
+ } else {
+ // By default we just copy value from input string
+ viewData = inputString.value;
+ }
editBlock.dataset.originalName = inputString.value;
editBlock.dataset.error = false;
+ $inputString.addClass('hidden');
+ $editBlock.find('.view-mode').html(prepareText(viewData)).removeClass('hidden');
+
inputString.disabled = true;
editBlock.dataset.editMode = 0;
},
@@ -63,21 +79,28 @@ function initInlineEditing(title) {
return true;
}
- $editBlock.click(e => {
+ $editBlock.click((e) => {
+ // 'A' mean that, if we click on element we will not go in edit mode
+ if (e.target.tagName === 'A') return true;
if (inputString.disabled) {
saveAllEditFields();
editBlock.dataset.editMode = 1;
inputString.disabled = false;
+ $inputString.removeClass('hidden');
+ $editBlock.find('.view-mode').addClass('hidden');
$inputString.focus();
}
e.stopPropagation();
+ return true;
});
- $(window).click(() => {
+ $(window).click((e) => {
+ if ($(e.target).closest('.atwho-view').length > 0) return false;
if (inputString.disabled === false) {
updateField();
}
editBlock.dataset.editMode = 0;
+ return true;
});
$($editBlock.find('.save-button')).click(e => {
@@ -90,6 +113,8 @@ function initInlineEditing(title) {
editBlock.dataset.editMode = 0;
editBlock.dataset.error = false;
inputString.value = editBlock.dataset.originalName;
+ $inputString.addClass('hidden');
+ $editBlock.find('.view-mode').removeClass('hidden');
$inputString.keydown();
e.stopPropagation();
});
diff --git a/app/assets/stylesheets/partials/_inline_editing.scss b/app/assets/stylesheets/partials/_inline_editing.scss
index 161bcdab7..cc4548349 100644
--- a/app/assets/stylesheets/partials/_inline_editing.scss
+++ b/app/assets/stylesheets/partials/_inline_editing.scss
@@ -54,7 +54,8 @@
}
}
- &:hover input {
+ &:hover input,
+ &:hover .view-mode {
border: 1px solid $color-silver;
&:disabled {
@@ -62,6 +63,15 @@
}
}
+ .view-mode {
+ border: 1px solid transparent;
+ cursor: pointer;
+ line-height: 26px;
+ padding: 8px 5px;
+ padding-right: 36px;
+ width: calc(100% - 36px);
+ }
+
input {
border: 1px solid $color-silver;
border-radius: $border-radius-small;
diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss
index 6fff2773f..40b4f5e9d 100644
--- a/app/assets/stylesheets/steps.scss
+++ b/app/assets/stylesheets/steps.scss
@@ -291,6 +291,17 @@
float: left;
width: 100%;
+ .view-mode {
+ border: 1px solid transparent;
+ border-radius: $border-radius-small;
+ display: inline-block;
+ line-height: 16px;
+ min-height: 20px;
+ overflow: hidden;
+ padding: 2px 5px;
+ width: 100%;
+ }
+
textarea {
border: 1px solid $color-silver;
border-radius: $border-radius-small;
@@ -383,7 +394,8 @@
width: 220px;
}
- textarea:disabled {
+ textarea:disabled,
+ .view-mode {
border: 1px solid $color-gainsboro;
cursor: pointer;
}
@@ -415,6 +427,13 @@
.error-block {
display: block;
}
+
+ .comment-actions {
+
+ .edit-buttons {
+ display: inline !important;
+ }
+ }
}
}
diff --git a/app/controllers/step_comments_controller.rb b/app/controllers/step_comments_controller.rb
index ee47a41c3..e6f924394 100644
--- a/app/controllers/step_comments_controller.rb
+++ b/app/controllers/step_comments_controller.rb
@@ -101,7 +101,8 @@ class StepCommentsController < ApplicationController
# Generate activity
log_activity(:edit_step_comment)
- message = custom_auto_link(@comment.message, team: current_team)
+ message = custom_auto_link(@comment.message, simple_format: false,
+ tags: %w(img), team: current_team)
render json: { comment: message }, status: :ok
else
render json: { errors: @comment.errors.to_hash(true) },
diff --git a/app/views/shared/_inline_editing.html.erb b/app/views/shared/_inline_editing.html.erb
index 45669fca3..dfeb144ee 100644
--- a/app/views/shared/_inline_editing.html.erb
+++ b/app/views/shared/_inline_editing.html.erb
@@ -6,7 +6,8 @@
data-original-name="<%= initial_value %>"
error="false"
>
-
+ <%= initial_value %>
+
').html_safe %>