From 55f9633d1de451317fde99709520a915df9805f9 Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Tue, 8 Nov 2016 13:27:19 +0100 Subject: [PATCH 1/4] Add jQuery.autosize plugin --- Gemfile | 1 + app/assets/javascripts/application.js.erb | 1 + 2 files changed, 2 insertions(+) diff --git a/Gemfile b/Gemfile index 3b638c1c4..358423e7e 100644 --- a/Gemfile +++ b/Gemfile @@ -29,6 +29,7 @@ gem 'hammerjs-rails' gem 'introjs-rails' # Create quick tutorials gem 'js_cookie_rails' # Simple JS API for cookies gem 'spinjs-rails' +gem 'autosize-rails' # jQuery autosize plugin gem 'underscore-rails' gem 'turbolinks' diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb index 1c333cfa8..18b35c71f 100644 --- a/app/assets/javascripts/application.js.erb +++ b/app/assets/javascripts/application.js.erb @@ -6,6 +6,7 @@ //= require jquery.remotipart //= require jquery.mousewheel.min //= require jquery.scrollTo +//= require jquery.autosize //= require jquery-ui/widget //= require jquery-ui/mouse //= require jquery-ui/draggable From b42922d32cba88e22967b71d977dcd873e662e70 Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Tue, 8 Nov 2016 15:48:30 +0100 Subject: [PATCH 2/4] Add autosize functionality to all textareas Closes SCI-637 --- .../javascripts/sitewide/textarea_autosize.js | 19 +++++++++++++++++++ app/assets/stylesheets/themes/scinote.scss | 18 ++++++------------ app/views/comments/_edit.html.erb | 2 +- app/views/my_module_comments/_index.html.erb | 2 +- app/views/project_comments/_index.html.erb | 2 +- app/views/result_comments/_index.html.erb | 2 +- app/views/step_comments/_index.html.erb | 2 +- 7 files changed, 30 insertions(+), 17 deletions(-) create mode 100644 app/assets/javascripts/sitewide/textarea_autosize.js diff --git a/app/assets/javascripts/sitewide/textarea_autosize.js b/app/assets/javascripts/sitewide/textarea_autosize.js new file mode 100644 index 000000000..ce71c31f6 --- /dev/null +++ b/app/assets/javascripts/sitewide/textarea_autosize.js @@ -0,0 +1,19 @@ +$(document).on('focus', 'textarea', function() { + var $this = $(this); + var height = $this.css('height'); + + // Set the nr. of rows to 1 if small textarea + if ($this.hasClass('textarea-sm')) { + $this.attr('rows', '1'); + } + + // Initialize autosize plugin if it's not initialized yet + if (_.isUndefined($this.data('autosize'))) { + $this.autosize({append: ''}); + + // Restore previous height! + $this.css('height', height); + } + + $this.trigger('autosize.resize'); +}); diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 3f3208551..dfd487492 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1497,9 +1497,10 @@ html.turbolinks-progress-bar::before { } } -// Only allow vertical resizing of all text areas +// Disable textarea resizing throughout application +// (will be done via autosize JS plugin) textarea { - resize: vertical; + resize: none; } textarea.textarea-sm { @@ -1511,14 +1512,7 @@ textarea.textarea-sm { } } -.comment-form { - textarea { - height: 34px; - min-height: 34px; - } - - .btn.btn-default { - height: calc(100% + 14px); - min-height: 34px; - } +.comment-form .btn.btn-default { + height: calc(100% + 14px); + min-height: 34px; } diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb index d77b1e5fe..d18b68ae4 100644 --- a/app/views/comments/_edit.html.erb +++ b/app/views/comments/_edit.html.erb @@ -1,7 +1,7 @@ <%= bootstrap_form_for(@comment, url: @update_url, remote: true, html: { method: :put, class: 'comment-form edit-comment-form' }, data: { role: 'edit-comment-message-form' }) do |f| %>
- <%= f.text_area :message, autofocus: true, hide_label: true, data: { role: 'message-input' }, value: @comment.message %> + <%= f.text_area :message, class: 'textarea-sm', autofocus: true, hide_label: true, data: { role: 'message-input' }, value: @comment.message %> diff --git a/app/views/my_module_comments/_index.html.erb b/app/views/my_module_comments/_index.html.erb index f627b474b..653f3fbd9 100644 --- a/app/views/my_module_comments/_index.html.erb +++ b/app/views/my_module_comments/_index.html.erb @@ -19,7 +19,7 @@
  • <%= bootstrap_form_for :comment, url: { format: :json }, method: :post, remote: true, html: { class: 'comment-form' } do |f| %> - <%= f.text_area :message, hide_label: true, placeholder: t("experiments.canvas.popups.comment_placeholder"), append: f.submit("+"), help: '.' %> + <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t("experiments.canvas.popups.comment_placeholder"), append: f.submit("+"), help: '.' %> <% end %>
    • diff --git a/app/views/project_comments/_index.html.erb b/app/views/project_comments/_index.html.erb index 7c822c1eb..68bb12cd4 100644 --- a/app/views/project_comments/_index.html.erb +++ b/app/views/project_comments/_index.html.erb @@ -18,7 +18,7 @@
  • <%= bootstrap_form_for :comment, url: {format: :json}, method: :post, remote: true, html: { class: 'comment-form' } do |f| %> - <%= f.text_area :message, hide_label: true, placeholder: t('projects.index.comment_placeholder'), append: f.submit('+'), help: '.' %> + <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t('projects.index.comment_placeholder'), append: f.submit('+'), help: '.' %> <% end %>
    • diff --git a/app/views/result_comments/_index.html.erb b/app/views/result_comments/_index.html.erb index e5b85e20a..023879156 100644 --- a/app/views/result_comments/_index.html.erb +++ b/app/views/result_comments/_index.html.erb @@ -22,7 +22,7 @@
  • <%= bootstrap_form_for :comment, url: { format: :json }, method: :post, remote: true, html: { class: 'comment-form' } do |f| %> - <%= f.text_area :message, hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+", onclick: "processResult(event, ResultTypeEnum.COMMENT, false);"), help: '.' %> + <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+", onclick: "processResult(event, ResultTypeEnum.COMMENT, false);"), help: '.' %> <% end %>
    • diff --git a/app/views/step_comments/_index.html.erb b/app/views/step_comments/_index.html.erb index f4546e78e..89ee41c76 100644 --- a/app/views/step_comments/_index.html.erb +++ b/app/views/step_comments/_index.html.erb @@ -22,7 +22,7 @@
  • <%= bootstrap_form_for :comment, url: { format: :json }, html: { class: 'comment-form', id: "step-comment-#{@step.id}" }, method: :post, remote: true do |f| %> - <%= f.text_area :message, hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+"), help: '.' %> + <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+"), help: '.' %> <% end %>
    • From 5727158495d57e0ef1e2793eabb13fa44166b3d8 Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Fri, 11 Nov 2016 09:47:37 +0100 Subject: [PATCH 3/4] Hotfix to nicely render comments form on Firefox as well --- app/assets/stylesheets/themes/scinote.scss | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index dfd487492..c82397918 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1512,7 +1512,22 @@ textarea.textarea-sm { } } -.comment-form .btn.btn-default { - height: calc(100% + 14px); - min-height: 34px; +.comment-form .input-group { + height: 100%; + + textarea { + -webkit-margin-before: 1px; + -webkit-margin-after: 1px; + } + + .input-group-btn { + height: 100%; + + .btn.btn-default { + height: 100%; + min-height: 34px; + -webkit-padding-before: 0; + -webkit-padding-after: 0; + } + } } From a3bbf94643c00420241e931981fcb4838a04439b Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Wed, 16 Nov 2016 17:57:01 +0100 Subject: [PATCH 4/4] Add a smart_text_area tag & implement it throughout application This fixes the mentioned issues @mlorb mentioned. Closes SCI-637. --- .../javascripts/sitewide/textarea_autosize.js | 45 ++++++++++++------- app/helpers/bootstrap_form_helper.rb | 25 ++++++++++- app/views/comments/_edit.html.erb | 2 +- app/views/experiments/_form.html.erb | 6 +-- app/views/my_module_comments/_index.html.erb | 2 +- app/views/my_modules/_description.html.erb | 2 +- app/views/project_comments/_index.html.erb | 2 +- .../header/_edit_authors_modal_body.html.erb | 2 +- .../_edit_description_modal_body.html.erb | 2 +- app/views/reports/new/modal/_save.html.erb | 2 +- app/views/result_comments/_index.html.erb | 2 +- app/views/step_comments/_index.html.erb | 2 +- app/views/steps/_form_checklists.html.erb | 4 +- .../_description_modal_body.html.erb | 2 +- 14 files changed, 67 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/sitewide/textarea_autosize.js b/app/assets/javascripts/sitewide/textarea_autosize.js index ce71c31f6..7e97d4edf 100644 --- a/app/assets/javascripts/sitewide/textarea_autosize.js +++ b/app/assets/javascripts/sitewide/textarea_autosize.js @@ -1,19 +1,30 @@ -$(document).on('focus', 'textarea', function() { - var $this = $(this); - var height = $this.css('height'); +$(document).on( + 'focus', + 'textarea.smart-text-area:not([readonly]):not([disabled])', + function() { + var $this = $(this); + var height = $this.css('height'); - // Set the nr. of rows to 1 if small textarea - if ($this.hasClass('textarea-sm')) { - $this.attr('rows', '1'); + if ($this.hasClass('textarea-sm-present')) { + $this + .removeClass('textarea-sm-present') + .addClass('textarea-sm'); + $this.attr('rows', '1'); + } else if ($this.hasClass('textarea-sm')) { + // Set the nr. of rows to 1 if small textarea + $this.attr('rows', '1'); + } else { + $this.removeAttr('rows'); + } + + // Initialize autosize plugin if it's not initialized yet + if (_.isUndefined($this.data('autosize'))) { + $this.autosize({append: ''}); + + // Restore previous height! + $this.css('height', height); + } + + $this.trigger('autosize.resize'); } - - // Initialize autosize plugin if it's not initialized yet - if (_.isUndefined($this.data('autosize'))) { - $this.autosize({append: ''}); - - // Restore previous height! - $this.css('height', height); - } - - $this.trigger('autosize.resize'); -}); +); diff --git a/app/helpers/bootstrap_form_helper.rb b/app/helpers/bootstrap_form_helper.rb index c6134ddaf..f707c4740 100644 --- a/app/helpers/bootstrap_form_helper.rb +++ b/app/helpers/bootstrap_form_helper.rb @@ -237,5 +237,28 @@ module BootstrapFormHelper res << "
    " res.html_safe end + + # Returns smart