From a903772de8f5e3be9e4188315dcd096423eadca9 Mon Sep 17 00:00:00 2001 From: zmagod Date: Tue, 10 Jan 2017 17:05:32 +0100 Subject: [PATCH] style dropdown --- .../{atwho_res.js => atwho_res.js.erb} | 238 +++++++++++++----- .../javascripts/sitewide/atwho_users.js.erb | 110 -------- app/assets/stylesheets/themes/scinote.scss | 49 +++- app/helpers/application_helper.rb | 47 ++-- app/views/layouts/application.html.erb | 5 + app/views/project_comments/_comment.html.erb | 10 +- app/views/step_comments/_comment.html.erb | 10 +- 7 files changed, 261 insertions(+), 208 deletions(-) rename app/assets/javascripts/sitewide/{atwho_res.js => atwho_res.js.erb} (64%) delete mode 100644 app/assets/javascripts/sitewide/atwho_users.js.erb diff --git a/app/assets/javascripts/sitewide/atwho_res.js b/app/assets/javascripts/sitewide/atwho_res.js.erb similarity index 64% rename from app/assets/javascripts/sitewide/atwho_res.js rename to app/assets/javascripts/sitewide/atwho_res.js.erb index 838333c2d..18aa86d96 100644 --- a/app/assets/javascripts/sitewide/atwho_res.js +++ b/app/assets/javascripts/sitewide/atwho_res.js.erb @@ -22,6 +22,19 @@ var SmartAnnotation = (function() { })(); function setAtWho(field) { + var dataUserUrl, + dataTaskUrl, + dataProjectUrl, + dataExperimentUrl, + dataSampleUrl, + dataMenuItemsUrl; + + dataUserUrl = $(document.body).attr('data-atwho-users-url'); + dataTaskUrl = $(document.body).attr('data-atwho-task-url'); + dataProjectUrl = $(document.body).attr('data-atwho-project-url'); + dataExperimentUrl = $(document.body).attr('data-atwho-experiment-url'); + dataSampleUrl = $(document.body).attr('data-atwho-sample-url'); + dataMenuItemsUrl = $(document.body).attr('data-atwho-menu-items').freeze; // helper methods for AtWho callback function _templateEval(_tpl, map) { @@ -84,11 +97,11 @@ var SmartAnnotation = (function() { break; } $.getJSON( - '/organizations/1/atwho_menu_items', + dataMenuItemsUrl, {query: query}, function(data){ if(data) { - _.each($('.atwho-header .btn'), function(el) { + _.each($('.atwho-header-res .title .btn'), function(el) { $element = $(el); if(data[$element.data('filter')].length === 0) { $element.prop('disabled', true); @@ -130,45 +143,42 @@ var SmartAnnotation = (function() { // Initialize filter buttons function initButtons(query, search_filter) { - $('.atwho-header button').off(); + $('.atwho-header-res query_obj button').off(); + $('.atwho-header-res .dismiss').off('click'); + + $('.atwho-header-res .dismiss').on('click', function() { + $(field).atwho('destroy'); + init(); + }); resourcesChecker(query, search_filter); - $('.atwho-header button').on('click', function(e) { + $('.atwho-header-res .title button').on('click', function(e) { var $button, $prevButton; e.stopPropagation(); - $('.atwho-header button').off(); $button = $(this); - $prevButton = $button.closest('.atwho-header').children('.btn-primary'); + $prevButton = $button.closest('.title').children('.btn-primary'); switch ($button.attr('data-filter')) { case 'prj': - setTimeout(function() { - generateNewQuery('/organizations/1/atwho_projects.json', + generateNewQuery(dataProjectUrl, $prevButton, $button); - }, 300); break; case 'exp': - setTimeout(function() { - generateNewQuery('/organizations/1/atwho_experiments.json', + generateNewQuery(dataExperimentUrl, $prevButton, $button); - }, 300); break; case 'tsk': - setTimeout(function() { - generateNewQuery('/organizations/1/atwho_my_modules.json', + generateNewQuery(dataTaskUrl, $prevButton, $button); - }, 300); break; case 'sam': - setTimeout(function() { - generateNewQuery('/organizations/1/atwho_samples.json', + generateNewQuery(dataSampleUrl, $prevButton, $button); - }, 300); break; } }); @@ -190,50 +200,49 @@ var SmartAnnotation = (function() { if(field_selected) { query_obj = regexp.exec($(field_selected).val()); - new_query = query_obj.input.replace(query_obj[1], ''); - } else { - query_obj = ['']; - new_query = ''; + + if(query_obj) { + $.getJSON( + link, + {query: query_obj[2]}, + function(data) { + if(data.res.length > 0 && field_selected) { + $(field_selected) + .atwho('load', query_obj[0], data.res) + .atwho('run'); + + prevBtn + .removeClass('btn-primary') + .addClass('btn-default'); + selectedBtn + .removeClass('btn-default') + .addClass('btn-primary'); + + reinitializeOnListHide(); + initButtons(query_obj[2], + selectedBtn.html()); + } else { + $(field).atwho('destroy'); + init(); + } + }); + } } - - - $.getJSON( - link, - {query: new_query}, - function(data) { - if(data.res.length > 0 && field_selected) { - $(field_selected) - .atwho('load', query_obj[0], data.res) - .atwho('run'); - - prevBtn - .removeClass('btn-primary') - .addClass('btn-default'); - selectedBtn - .removeClass('btn-default') - .addClass('btn-primary'); - - reinitializeOnListHide(); - initButtons(new_query, - selectedBtn.html()); - } else { - $(field).atwho('destroy'); - init(); - } - }); } // Generates suggestion dropdown filter function generateFilterMenu(active, res_data) { - var header = '
' + - '' + - '' + - '' + - '' + + '
' + '
' + '
' + '<%= I18n.t("atwho.users.navigate_1") %> ' + @@ -277,25 +286,27 @@ var SmartAnnotation = (function() { } res += ' '; - res += ''; + res += ''; res += map.name; res += ''; if(map.archived) { - res += '(archived)'; + res += '(archived)'; + } else { + res += ''; } res += ' '; switch (map.type) { case 'tsk': - res += '< ' + map.experimentName + + res += '< ' + map.experimentName + ' < ' + map.projectName + ''; break; case 'exp': - res += '< ' + map.projectName + ''; + res += '< ' + map.projectName + ''; break; case 'sam': - res += '' + map.description + ''; + res += '' + map.description + ''; break; default: break; @@ -307,12 +318,103 @@ var SmartAnnotation = (function() { function init() { $(field) + .atwho({ + at: '@', + callbacks: { + remoteFilter: function(query, callback) { + $.getJSON( + dataUserUrl, + {query: query}, + function(data) { + callback(data.users); + } + ); + }, + sorter: function(query, items, _searchKey) { + // Sorting is already done on server-side + return items; + }, + tplEval: function(_tpl, map) { + var res; + try { + res = ''; + res += '
  • '; + res += ''; + res += ''; + res += map.full_name; + res += ''; + res += ''; + res += ' '; + res += '·'; + res += ' '; + res += ''; + res += map.email; + res += ''; + res += ''; + res += '
    • '; + } catch (_error) { + res = ''; + } + return res; + }, + highlighter: function(li, query) { + function highlight(el, sel, re) { + var prevVal = el.find(sel).html(); + var newVal = prevVal.replace(re, '$&'); + el.find(sel).html(newVal); + } + + if (!query) { + return li; + } + + var $li = $(li); + var re = new RegExp(query, 'gi'); + highlight($li, '[data-val=full-name]', re); + highlight($li, '[data-val=email]', re); + return $li[0].outerHTML; + }, + beforeInsert: function(value, li) { + var res = ''; + res += '[@' + li.attr('data-full-name'); + res += '~' + li.attr('data-id') + ']'; + return res; + } + }, + headerTpl: + '
    ' + + '
    <%= I18n.t("atwho.users.title") %>
    ' + + '
    ' + + '
    ' + + '<%= I18n.t("atwho.users.navigate_1") %> ' + + '<%= I18n.t("atwho.users.navigate_2") %>' + + '
    ' + + '
    ' + + '<%= I18n.t("atwho.users.confirm_1") %> ' + + '<%= I18n.t("atwho.users.confirm_2") %>' + + '
    ' + + '
    ' + + '<%= I18n.t("atwho.users.dismiss_1") %> ' + + '<%= I18n.t("atwho.users.dismiss_2") %>' + + '
    ' + + '
    ' + + '' + + '
    ' + + '
    ' + + '
    ', + limit: <%= Constants::ATWHO_SEARCH_LIMIT %>, + startsWithSpace: true, + acceptSpaceBar: true, + displayTimeout: 120000 + }) .atwho({ at: '#', callbacks: { remoteFilter: function(query, callback) { $.getJSON( - '/organizations/1/atwho_samples.json', + dataSampleUrl, {query: query}, function(data) { callback(data.res); @@ -331,7 +433,7 @@ var SmartAnnotation = (function() { } }, headerTpl: generateFilterMenu('sam'), - limit: 5, + limit: <%= Constants::ATWHO_SEARCH_LIMIT %>, startWithSpace: true, acceptSpaceBar: true, displayTimeout: 120000 @@ -341,7 +443,7 @@ var SmartAnnotation = (function() { callbacks: { remoteFilter: function(query, callback) { $.getJSON( - '/organizations/1/atwho_my_modules.json', + dataTaskUrl, {query: query}, function(data) { callback(data.res); @@ -360,7 +462,7 @@ var SmartAnnotation = (function() { } }, headerTpl: generateFilterMenu('tsk'), - limit: 5, + limit: <%= Constants::ATWHO_SEARCH_LIMIT %>, startWithSpace: true, acceptSpaceBar: true, displayTimeout: 120000 @@ -370,7 +472,7 @@ var SmartAnnotation = (function() { callbacks: { remoteFilter: function(query, callback) { $.getJSON( - '/organizations/1/atwho_projects.json', + dataProjectUrl, {query: query}, function(data) { callback(data.res); @@ -389,7 +491,7 @@ var SmartAnnotation = (function() { } }, headerTpl: generateFilterMenu('prj'), - limit: 5, + limit: <%= Constants::ATWHO_SEARCH_LIMIT %>, startWithSpace: true, acceptSpaceBar: true, displayTimeout: 120000 @@ -399,7 +501,7 @@ var SmartAnnotation = (function() { callbacks: { remoteFilter: function(query, callback) { $.getJSON( - '/organizations/1/atwho_experiments.json', + dataExperimentUrl, {query: query}, function(data) { callback(data.res); @@ -418,7 +520,7 @@ var SmartAnnotation = (function() { } }, headerTpl: generateFilterMenu('exp'), - limit: 5, + limit: <%= Constants::ATWHO_SEARCH_LIMIT %>, startWithSpace: true, acceptSpaceBar: true, displayTimeout: 120000 @@ -428,7 +530,7 @@ var SmartAnnotation = (function() { callbacks: { remoteFilter: function(query, callback) { $.getJSON( - '/organizations/1/atwho_samples.json', + dataSampleUrl, {query: query}, function(data) { callback(data.res); @@ -447,7 +549,7 @@ var SmartAnnotation = (function() { } }, headerTpl: generateFilterMenu('sam'), - limit: 5, + limit: <%= Constants::ATWHO_SEARCH_LIMIT %>, startWithSpace: true, acceptSpaceBar: true, displayTimeout: 120000 diff --git a/app/assets/javascripts/sitewide/atwho_users.js.erb b/app/assets/javascripts/sitewide/atwho_users.js.erb deleted file mode 100644 index 91adb1838..000000000 --- a/app/assets/javascripts/sitewide/atwho_users.js.erb +++ /dev/null @@ -1,110 +0,0 @@ -(function() { - 'use strict'; - - $(document).on( - 'focus', - '[data-atwho-users-edit]', - function() { - // Only initialize if URL is present and - // atwho is not initialized yet - if ( - $(document.body).is('[data-atwho-users-url]') && - _.isUndefined($(this).data('atwho')) - ) { - var dataUrl = $(document.body).attr('data-atwho-users-url'); - - $(this) - .atwho({ - at: '@', - callbacks: { - remoteFilter: function(query, callback) { - $.getJSON( - dataUrl, - {query: query}, - function(data) { - callback(data.users); - } - ); - }, - sorter: function(query, items, _searchKey) { - // Sorting is already done on server-side - return items; - }, - tplEval: function(_tpl, map) { - var res; - try { - res = ''; - res += '
  • '; - res += ''; - res += ''; - res += map.full_name; - res += ''; - res += ''; - res += ' '; - res += '·'; - res += ' '; - res += ''; - res += map.email; - res += ''; - res += ''; - res += '
    • '; - } catch (_error) { - res = ''; - } - return res; - }, - highlighter: function(li, query) { - function highlight(el, sel, re) { - var prevVal = el.find(sel).html(); - var newVal = prevVal.replace(re, '$&'); - el.find(sel).html(newVal); - } - - if (!query) { - return li; - } - - var $li = $(li); - var re = new RegExp(query, 'gi'); - highlight($li, '[data-val=full-name]', re); - highlight($li, '[data-val=email]', re); - return $li[0].outerHTML; - }, - beforeInsert: function(value, li) { - var res = ''; - res += '[@' + li.attr('data-full-name'); - res += '~' + li.attr('data-id') + ']'; - return res; - } - }, - headerTpl: - '
    ' + - '
    <%= I18n.t("atwho.users.title") %>
    ' + - '
    ' + - '
    ' + - '<%= I18n.t("atwho.users.navigate_1") %> ' + - '<%= I18n.t("atwho.users.navigate_2") %>' + - '
    ' + - '
    ' + - '<%= I18n.t("atwho.users.confirm_1") %> ' + - '<%= I18n.t("atwho.users.confirm_2") %>' + - '
    ' + - '
    ' + - '<%= I18n.t("atwho.users.dismiss_1") %> ' + - '<%= I18n.t("atwho.users.dismiss_2") %>' + - '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + - '
    ', - limit: <%= Constants::ATWHO_SEARCH_LIMIT %>, - startsWithSpace: true, - acceptSpaceBar: true - }); - } - } - ); -})(); diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 9e4e8ae6f..23b3f2c3f 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1763,8 +1763,8 @@ th.custom-field .modal-tooltiptext { } // -.atwho-header-user { - padding-top: 7px; +.atwho-header-res { + padding-top: 3px; padding-bottom: 7px; height: 34px; background-color: $color-gallery; @@ -1778,10 +1778,25 @@ th.custom-field .modal-tooltiptext { .title { float: left; margin-left: 15px; + + .btn { + border-radius: 4px; + margin-right: 5px; + padding: 3px; + } + + .btn:last-child { + margin-right: 20px; + } + + .btn-default { + background-color: transparent; + } } .help { float: right; + padding-top: 4px; div { display: inline; @@ -1813,4 +1828,32 @@ th.custom-field .modal-tooltiptext { height: 20px; width: 20px; } -} \ No newline at end of file +} + +.atwho-li-res { + + .glyphicon-tint { + margin-left: 5px; + margin-right: 5px; + } + + .res-type { + border: 1px solid $color-black; + border-radius: 4px; + font-weight: 600; + margin-left: 5px; + margin-right: 5px; + padding: 0 2px; + text-transform: capitalize; + } + + .res-name { + font-weight: 600; + margin-right: 5px; + } + + .res-description { + color: $color-emperor; + font-size: 10px; + } +} diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 887651a18..d0817ba4a 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -54,30 +54,35 @@ module ApplicationHelper end def smart_annotation_parser(text) - sa_reg = /\[(#|@)(.*?)~(prj|exp|tsk|sam)~([0-9]+)\]/ - text.gsub(sa_reg) do |el| + sa_reg = /\[\#(.*?)~(prj|exp|tsk|sam)~([0-9]+)\]/ + new_text = text.gsub(sa_reg) do |el| match = el.match(sa_reg) - if match[1] == '#' - case match[3] - when 'prj' - link_to match[2], project_path(match[4].to_i) - when 'exp' - link_to match[2], canvas_experiment_path(match[4].to_i) - when 'tsk' - link_to match[2], protocols_my_module_path(match[4].to_i) - when 'sam' - sample = Sample.find_by_id(match[4]) - if sample - link_to match[2], - samples_project_path(sample - .organization - .projects - .first) - end + case match[2] + when 'prj' + link_to match[1], project_path(match[3].to_i) + when 'exp' + link_to match[1], canvas_experiment_path(match[3].to_i) + when 'tsk' + link_to match[1], protocols_my_module_path(match[3].to_i) + when 'sam' + sample = Sample.find_by_id(match[3]) + if sample + link_to match[1], + samples_project_path(sample + .organization + .projects + .first) end - else - # TODO end end + + sa_user = /\[\@(.*?)~([0-9]+)\]/ + new_text = new_text.gsub(sa_user) do |el| + match = el.match(sa_user) + user = User.find_by_id(match[2].to_i) + "#{image_tag avatar_path(user, :icon_small)} " \ + "#{user.full_name}" if user + end + new_text end end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 61fbf0c6d..822b4a927 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -18,6 +18,11 @@ class="<%= yield :body_class %>" <% if user_signed_in? && current_organization.present? %> data-atwho-users-url="<%= atwho_users_organization_path(current_organization) %>" + data-atwho-task-url="<%= atwho_my_modules_organization_path(current_organization) %>" + data-atwho-project-url="<%= atwho_projects_organization_path(current_organization) %>" + data-atwho-experiment-url="<%= atwho_experiments_organization_path(current_organization) %>" + data-atwho-sample-url="<%= atwho_samples_organization_path(current_organization) %>" + data-atwho-menu-items="<%= atwho_menu_items_organization_path(current_organization) %>" <% end %> > diff --git a/app/views/project_comments/_comment.html.erb b/app/views/project_comments/_comment.html.erb index eada9c8e6..c6047cba9 100644 --- a/app/views/project_comments/_comment.html.erb +++ b/app/views/project_comments/_comment.html.erb @@ -39,7 +39,11 @@
    <%= comment.user.full_name %>:
    -

    <%= auto_link(simple_format(comment.message), - link: :urls, - html: { target: '_blank' }) %>

    +

    <%= auto_link( + simple_format( + smart_annotation_parser(comment.message) + ), + link: :urls, + html: { target: '_blank' } + ) %>

    diff --git a/app/views/step_comments/_comment.html.erb b/app/views/step_comments/_comment.html.erb index e5aced7aa..dda7fa8c6 100644 --- a/app/views/step_comments/_comment.html.erb +++ b/app/views/step_comments/_comment.html.erb @@ -40,7 +40,11 @@ <% end %>
    -

    <%= auto_link(simple_format(comment.message), - link: :urls, - html: { target: '_blank' }) %>

    +

    <%= auto_link( + simple_format( + smart_annotation_parser(comment.message) + ), + link: :urls, + html: { target: '_blank' } + ) %>