From 925921d605c09eed5d3842cddaade386b227c0bc Mon Sep 17 00:00:00 2001 From: David Gil Date: Wed, 12 Aug 2015 17:25:13 +0200 Subject: [PATCH 01/10] adding initial.js to show Gmail-like user avatars; adding avatar_image helper to abstract from plugin options adding the two currently used styles, profile and small --- app/assets/images/user_default.jpg | Bin 1631 -> 0 bytes app/assets/images/user_default_2.jpg | Bin 1703 -> 0 bytes app/assets/images/user_default_big.jpg | Bin 2084 -> 0 bytes app/assets/javascripts/application.js | 2 + app/assets/javascripts/users.js.coffee | 5 ++ app/assets/stylesheets/debates.scss | 12 +--- app/assets/stylesheets/participacion.scss | 2 +- app/helpers/users_helper.rb | 24 ++++++++ app/views/account/show.html.erb | 6 +- app/views/comments/_comment.html.erb | 2 +- app/views/debates/show.html.erb | 4 +- vendor/assets/javascripts/initial.js | 64 ++++++++++++++++++++++ 12 files changed, 104 insertions(+), 17 deletions(-) delete mode 100644 app/assets/images/user_default.jpg delete mode 100644 app/assets/images/user_default_2.jpg delete mode 100644 app/assets/images/user_default_big.jpg create mode 100644 app/assets/javascripts/users.js.coffee create mode 100644 app/helpers/users_helper.rb create mode 100644 vendor/assets/javascripts/initial.js diff --git a/app/assets/images/user_default.jpg b/app/assets/images/user_default.jpg deleted file mode 100644 index c67f27f555328b4ed9e886516eceec1f92446ea2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1631 zcmex=G?WUP)qwZeFo6%mkOz;^d;tf|AVqJOz-6iAnjTCALaHmqNUdTL3o}Ygi#E^!3HB zG&dI%0AOQ_OM+4n?!{_waY$uBs(w&vaeir0aw<@{GDvfQm2**QVo82cNPd0}EEEGW z@=NlIGx7@*oSng;rl8@Qn4Fmh64V6i^7Xay%quQQ%u7!7bg@+enxmJQnPO#VV&H6O zX<%;TYUpHW=xXZdVrJ^>yn>bnwy$e0@Is<&})HHFDOCe765H_ zNiE7OOHFYr%Fk5*d)z7$w_8kcng`XJg4-=-IQ8lS9itD5UZm)T2?5g(hzU=;Kn^_l zr{)3Ed=W5l|9{882TrmKDF=X=i1Ghzh86}!;sFx^Fv9^c62vn8A7BvV zU{GLCU}h9#U=n0x7G(T?grN!OK2}CV2>^006DtQN7b7DB6El!N07e#8b`Ca90R|>U z76uj;c9;w!6Egz~E1RIA5WAAF7>8ltL1ht9PC*7nW@biqW>&Z|20=xNcW(%BWt};*pEWdqGfm|a zQ{NJo6AjFhre1th-se*Bq_@k;YD!6|iqWR+Y+)?L>@yZGS(KJI}K^`|{G+*Xo|9)_i-epc8tW?G%ssoaBd(1Ufr@UbQ*3Gw$yBt$FjC zZ9K1jdj0bCuFR6JwePf-_fHQlxOOV}7oREPUEi8S*A=(+n%JiP*sJhkIsf|EUwcaa zow#ArGVOQUjf2MzUkq%G*V%vRx9I+PHvV6(vB}E$FZxW1@qS;hj_Qcf=OndV7D{@44TuCa!t1DZTs`Jk2?9=;pTDY=2?OLS8 z(!Ng?*FKpf^GCJ?F_a{pnxPxrc4;gWas7W202ogM@c;k- diff --git a/app/assets/images/user_default_2.jpg b/app/assets/images/user_default_2.jpg deleted file mode 100644 index ed164ab57972249d6818780b7683a44a04e3c4f1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1703 zcma)64NMbf82+v;P{qN@j}zCp^D2u9?ez+!wxcj;>BOZ1r9{F^Txkz`Lhs7;x)#uh z&S?Z8TjH{0E+bpwV3;wK1qy;cQ3?CWRAQI|lrb_leq?hPP;}g`9X~FS#W%U+``-6? zp7;IU@BNOw$qs`x8D63YfXvLzKnRwMod6=e+ge-(ARyq}HUQXRK4xbarv^nym&{_L z3UQg0a-d#|6UAh56eOp5ofc~`&cKEEZi3Vzf1Ev!z=TbU>`)rzMyC$96I;t^Jhyzi z*;-y~Rojr%6gb(d@j9FioUy=OM+xcDc(q7CT*IyXZWMt75T;m*r1`VL`NnKmN6|Q} zlqE^6@+1|kQp+%qQDfG z%Ai(c=nNQ^p-jgz(lg}pq=a;}JW;JnTHxv_tJ{H-%mUZ8#7$e4>mLY*lgq5fY2q#1 zW}qnt95}d!SiTn3vU>Ae+w!$+S(b}(#i0J{ed4+oT-*%#my5&8Z5GELC%KuYx#4Cf zL0Dj9f$akKh#+Lth)S~{g^@uyr6x&qa0uHER&kklBEATug8pb;RdQv0 zr8z6D=~RvcsTl0}#abu1eO+8aR8$WcPS-rQkvPWFJ@@X%rq2~1XVAZ{ z`=CcheIGYCYqKX5KbQYLxNGf;BkE+Gdv#yu-rBCVb>ep-;*N-E;Z$Gs?7FsLN&UW5 zv-^$SD|H`6raayl#e&(d<)T}@meS#iF&8i8HnZShfq3oY>$|Et#%`t&oh-;7t*-9P zz2u46SC^Has_uJi+j@or_ZuWkZ;RJcMDjO~+ zd%FV}3!NBh>d5_SR(DFV({%Mn|C!FVFPq2jU*hacSVz~{n}wuo@Luf`wD$Z3?B~d9&c@_IfVSW|3*&s-3QcZ^N+fQO5PXk z>E^n3!}<|@T=Pt?>7>2)KoCzh-gvYprKmBPxA{hnc@Oe!L!)%7GDS}ryZaILr+)y9 C7$`~r diff --git a/app/assets/images/user_default_big.jpg b/app/assets/images/user_default_big.jpg deleted file mode 100644 index d1c5bcea2fbe94ebf3f33971870ae2590cb7609b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2084 zcmex=G?WUP)qwZeFo6%mkOz;^d;tf|AVqJOz-6iAnjTCALaHmqNUdTL3o}Ygi#E^!3HB zG&dI%0AOQ_OM+4n?!{_waY$uBs(w&vaeir0aw<@{GDvfQm2**QVo82cNPd0}EEEGW z@=NlIGx7@*oSng;rl8@Qn4Fmh64V6i^7Xay%quQQ%u7!7bg@+enxmJQnPO#T=IG{T zXkct?VdiFN=xXX@U}EHAXk=(;W@u<`Vrm4_>yn>bnwy$e0@Is<&})KIFDOCe765H_ zNiE7OOHFYr%Fk5*d)z7$w_6Nxng`XJg4-=dIQ8lS9itD5UZm)T2?5g(hzU=;Kn^_l zr{)3Ed=W5l|9{882TrmKDF=X=i1Ghzh86}k78Vv(7B*H^HcmDm=H_5yEDnV4Bw zIboU@nV4Bv1=$pZ*bN;M8-)WGDs46|bSj#(=+GtQVsSyBL5z&d?A)wK>IEBFSU)Hl zZagSt~TfWlgpxzB`7 z>&BaBCwu*xwbD=Yy56ksSx+XX7*F@S?ApxF^#1YM=PKcQ<>If-EvdV@W!lT*Wz{AFX1eCu zzjd+e#NM5Icj{5u^^)}bLf@A`Q$2Qg=^wRInP|1gXU1F4cehNY3F|^#Eb{j2m-QJx zYqmN1%dENM|EA#0D<99R)BY*j&O98W-4pvX+H2*jzm_#de*)`yrngM&T;uP(nCr#eYty{`*>@wA8DR9`95xyOBee7^N8^U4EYt5~gTYqf9L#p_N8KCW#p z{9DG_YO+vi3iHyJTRFq-M`XBfjnVuW+&%ld%VqVpxal10c3-uv?VYzKv^Q?S)2DJr zwG2MDauwEnNfvLD{C)F zX}aV&e_r>4sIu(~*`l-0a+@>V-8Uz?V!vs&%-zj5<~-eGx~bB8Pj8-R-fO=t*LJ;l z<$2om!PX12lszuSpPyBfvi13QzqQU94q%(PO>5Mwi%UM|Md+NJ+na5bwbV6gN%UiJ zxwyEL%a*(E-u8N$du#W(mtAvzUCS1{@}d4o#E<1#vp36f6+YH1c5jOPlcik0_C-M* z+s4bY_H5g9;r3j$1DS=>&e^=Js@icYO8@oj*z=c*zhCj}-1>ZxN!sjX51XHzoczjv zmX+;&Svk2MuXLY1TJA5O>6pBs?3b3A$(NWrdz7A^n)L9l=)sEF!E*Dqiwi#5c29X{ Z#Jk7+>c<~E?v#VL91?Iuk<9;Z0st%4&z=AP diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index d6dedd05c..0f9e4b9b0 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -16,11 +16,13 @@ //= require turbolinks //= require ckeditor/init //= require social-share-button +//= require initial //= require app //= require_tree . var initialize_modules = function() { App.Comments.initialize(); + App.Users.initialize(); App.Votes.initialize(); }; diff --git a/app/assets/javascripts/users.js.coffee b/app/assets/javascripts/users.js.coffee new file mode 100644 index 000000000..839b87fce --- /dev/null +++ b/app/assets/javascripts/users.js.coffee @@ -0,0 +1,5 @@ +App.Users = + + initialize: -> + $('.avatar').initial(); + false diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index a97764583..3faf62632 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -524,16 +524,6 @@ } } - .user-photo { - border-radius: 2px; - display: inline-block; - height: 32px; - line-height: $line-height*2; - margin-right: rem-calc(6); - vertical-align: top; - width: 32px; - } - .comment-body { margin-left: $line-height*1.6; @@ -569,4 +559,4 @@ } } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/participacion.scss b/app/assets/stylesheets/participacion.scss index 60ffc337d..cbd95ada8 100644 --- a/app/assets/stylesheets/participacion.scss +++ b/app/assets/stylesheets/participacion.scss @@ -522,4 +522,4 @@ form { } } } -} \ No newline at end of file +} diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb new file mode 100644 index 000000000..3fb4c0f67 --- /dev/null +++ b/app/helpers/users_helper.rb @@ -0,0 +1,24 @@ +module UsersHelper + def avatar_image(user, options = {}) + style = options.fetch(:style) { :small } + klass = options.fetch(:class) { '' } + round_corners = options.fetch(:round_corners) { true } + + data_attributes = case style + when :profile + { height: 100, width: 100 } + when :small + { height: 32, width: 32, "font-size" => 20 } + else + {} + end + + if round_corners + radius = (data_attributes[:height].to_i * 0.13).round + data_attributes.merge!(radius: radius) + end + data_attributes.merge!(name: user.name) + + content_tag :img, nil, class: "avatar #{klass}", data: data_attributes + end +end diff --git a/app/views/account/show.html.erb b/app/views/account/show.html.erb index ecfb17209..68274654d 100644 --- a/app/views/account/show.html.erb +++ b/app/views/account/show.html.erb @@ -36,13 +36,15 @@

<%= t("account.show.avatar")%>

- <%= image_tag('user_default_big.jpg', class: "avatar", size: "100x100") %> + <%= avatar_image(@account, style: :profile) %>

<%= t("account.show.notifications")%>

+ <%= f.label :email_on_debate_comment do %> <%= f.check_box :email_on_debate_comment %> <%= t("account.show.email_on_debate_comment_label") %> <% end %> + <%= f.label :email_on_comment_reply do %> <%= f.check_box :email_on_comment_reply %> <%= t("account.show.email_on_comment_reply_label") %> @@ -55,4 +57,4 @@
<% end %> - \ No newline at end of file + diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 466752044..468681fec 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -1,7 +1,7 @@
- <%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %> + <%= avatar_image(comment.user, style: :small, class: 'left') %>
diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb index 782ecb040..3c2a53674 100644 --- a/app/views/debates/show.html.erb +++ b/app/views/debates/show.html.erb @@ -14,7 +14,7 @@

<%= @debate.title %>

- <%= image_tag('user_default.jpg', class: 'author-photo', size: '32x32') %> + <%= avatar_image(@debate.author, style: :small) %> <%= @debate.author.name %> @@ -62,4 +62,4 @@ <%= render @debate.root_comments.recent %>
- \ No newline at end of file + diff --git a/vendor/assets/javascripts/initial.js b/vendor/assets/javascripts/initial.js new file mode 100644 index 000000000..fde754dea --- /dev/null +++ b/vendor/assets/javascripts/initial.js @@ -0,0 +1,64 @@ +(function ($) { + $.fn.initial = function (options) { + + // Defining Colors + var colors = ["#1abc9c", "#16a085", "#f1c40f", "#f39c12", "#2ecc71", "#27ae60", "#e67e22", "#d35400", "#3498db", "#2980b9", "#e74c3c", "#c0392b", "#9b59b6", "#8e44ad", "#bdc3c7", "#34495e", "#2c3e50", "#95a5a6", "#7f8c8d", "#ec87bf", "#d870ad", "#f69785", "#9ba37e", "#b49255", "#b49255", "#a94136"]; + + return this.each(function () { + + var e = $(this); + var settings = $.extend({ + // Default settings + name: 'Name', + charCount: 1, + textColor: '#ffffff', + height: 100, + width: 100, + fontSize: 60, + fontWeight: 400, + fontFamily: 'HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif', + radius: 0 + }, options); + + // overriding from data attributes + settings = $.extend(settings, e.data()); + + // making the text object + var c = settings.name.substr(0, settings.charCount).toUpperCase(); + var cobj = $('').attr({ + 'y': '50%', + 'x': '50%', + 'dy' : '0.35em', + 'pointer-events':'auto', + 'fill': settings.textColor, + 'font-family': settings.fontFamily + }).html(c).css({ + 'font-weight': settings.fontWeight, + 'font-size': settings.fontSize+'px', + }); + + var colorIndex = Math.floor((c.charCodeAt(0) - 65) % colors.length); + + var svg = $('').attr({ + 'xmlns': 'http://www.w3.org/2000/svg', + 'pointer-events':'none', + 'width': settings.width, + 'height': settings.height + }).css({ + 'background-color': colors[colorIndex], + 'width': settings.width+'px', + 'height': settings.height+'px', + 'border-radius': settings.radius+'px', + '-moz-border-radius': settings.radius+'px' + }); + + svg.append(cobj); + // svg.append(group); + var svgHtml = window.btoa(unescape(encodeURIComponent($('
').append(svg.clone()).html()))); + + e.attr("src", 'data:image/svg+xml;base64,' + svgHtml); + + }) + }; + +}(jQuery)); \ No newline at end of file From bf95e553455f644b237b0e1fdcb8f34528362f3c Mon Sep 17 00:00:00 2001 From: David Gil Date: Wed, 12 Aug 2015 18:27:40 +0200 Subject: [PATCH 02/10] more explicit and versatile usage of avatar_image, changing style option by a direct size - asuming we will always use square images --- app/helpers/users_helper.rb | 17 +++-------------- app/views/account/show.html.erb | 2 +- app/views/comments/_comment.html.erb | 2 +- app/views/debates/show.html.erb | 2 +- 4 files changed, 6 insertions(+), 17 deletions(-) diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb index 3fb4c0f67..7df527f89 100644 --- a/app/helpers/users_helper.rb +++ b/app/helpers/users_helper.rb @@ -1,22 +1,11 @@ module UsersHelper def avatar_image(user, options = {}) - style = options.fetch(:style) { :small } + size = options.fetch(:size) { 100 } klass = options.fetch(:class) { '' } round_corners = options.fetch(:round_corners) { true } - data_attributes = case style - when :profile - { height: 100, width: 100 } - when :small - { height: 32, width: 32, "font-size" => 20 } - else - {} - end - - if round_corners - radius = (data_attributes[:height].to_i * 0.13).round - data_attributes.merge!(radius: radius) - end + data_attributes = { height: size, width: size, "font-size" => (size * 0.6) } + data_attributes.merge!(radius: (size * 0.13).round) if round_corners data_attributes.merge!(name: user.name) content_tag :img, nil, class: "avatar #{klass}", data: data_attributes diff --git a/app/views/account/show.html.erb b/app/views/account/show.html.erb index 68274654d..2cb792dc7 100644 --- a/app/views/account/show.html.erb +++ b/app/views/account/show.html.erb @@ -36,7 +36,7 @@

<%= t("account.show.avatar")%>

- <%= avatar_image(@account, style: :profile) %> + <%= avatar_image(@account, size: 100) %>

<%= t("account.show.notifications")%>

diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 468681fec..af5a41897 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -1,7 +1,7 @@
- <%= avatar_image(comment.user, style: :small, class: 'left') %> + <%= avatar_image(comment.user, size: 32, class: 'left') %>
diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb index 3c2a53674..57d8140da 100644 --- a/app/views/debates/show.html.erb +++ b/app/views/debates/show.html.erb @@ -14,7 +14,7 @@

<%= @debate.title %>

- <%= avatar_image(@debate.author, style: :small) %> + <%= avatar_image(@debate.author, size: 32) %> <%= @debate.author.name %> From 2f41341ca89fdefccd8e3512f57ce578ea11ba8a Mon Sep 17 00:00:00 2001 From: David Gil Date: Wed, 12 Aug 2015 18:31:44 +0200 Subject: [PATCH 03/10] cleanup --- app/helpers/users_helper.rb | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb index 7df527f89..5e8987032 100644 --- a/app/helpers/users_helper.rb +++ b/app/helpers/users_helper.rb @@ -4,9 +4,8 @@ module UsersHelper klass = options.fetch(:class) { '' } round_corners = options.fetch(:round_corners) { true } - data_attributes = { height: size, width: size, "font-size" => (size * 0.6) } + data_attributes = { name: user.name, height: size, width: size, "font-size" => (size * 0.6) } data_attributes.merge!(radius: (size * 0.13).round) if round_corners - data_attributes.merge!(name: user.name) content_tag :img, nil, class: "avatar #{klass}", data: data_attributes end From 65998070cce379d302a20ffe977229282cbcc0e5 Mon Sep 17 00:00:00 2001 From: David Gil Date: Wed, 12 Aug 2015 18:42:04 +0200 Subject: [PATCH 04/10] initialize user avatars on ajax:complete for comments to show correctly after create --- app/assets/javascripts/application.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 0f9e4b9b0..34f0ece62 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -29,6 +29,9 @@ var initialize_modules = function() { $(function(){ $(document).foundation(); - $(document).ready(initialize_modules) - $(document).on('page:load', initialize_modules) + $(document).ready(initialize_modules); + $(document).on('page:load', initialize_modules); + $(document).on('ajax:complete', function(){ + App.Users.initialize(); + }); }); From 9d4a3b08d7653862b3f72bb2cc9bf1acc9579bb9 Mon Sep 17 00:00:00 2001 From: David Gil Date: Wed, 12 Aug 2015 18:45:10 +0200 Subject: [PATCH 05/10] use initialjs-rails instead our own copy of initial.js and view helper --- Gemfile | 2 +- Gemfile.lock | 3 ++ app/assets/javascripts/users.js.coffee | 2 +- app/helpers/users_helper.rb | 12 ----- vendor/assets/javascripts/initial.js | 64 -------------------------- 5 files changed, 5 insertions(+), 78 deletions(-) delete mode 100644 app/helpers/users_helper.rb delete mode 100644 vendor/assets/javascripts/initial.js diff --git a/Gemfile b/Gemfile index edb2e190b..b52642871 100644 --- a/Gemfile +++ b/Gemfile @@ -30,6 +30,7 @@ gem 'simple_captcha2', require: 'simple_captcha' gem 'ckeditor' gem 'cancancan' gem 'social-share-button' +gem 'initialjs-rails' gem 'unicorn' group :development, :test do @@ -61,4 +62,3 @@ end group :test do gem 'email_spec' end - diff --git a/Gemfile.lock b/Gemfile.lock index a6a269d2e..f95d14855 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -140,6 +140,8 @@ GEM i18n term-ansicolor (>= 1.3.2) terminal-table (>= 1.5.1) + initialjs-rails (0.1.0) + railties (>= 3.1, < 5.0) jquery-rails (4.0.4) rails-dom-testing (~> 1.0) railties (>= 4.2.0) @@ -314,6 +316,7 @@ DEPENDENCIES factory_girl_rails foundation-rails i18n-tasks + initialjs-rails jquery-rails launchy letter_opener_web (~> 1.2.0) diff --git a/app/assets/javascripts/users.js.coffee b/app/assets/javascripts/users.js.coffee index 839b87fce..9c4fa42b0 100644 --- a/app/assets/javascripts/users.js.coffee +++ b/app/assets/javascripts/users.js.coffee @@ -1,5 +1,5 @@ App.Users = initialize: -> - $('.avatar').initial(); + $('.initialjs-avatar').initial(); false diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb deleted file mode 100644 index 5e8987032..000000000 --- a/app/helpers/users_helper.rb +++ /dev/null @@ -1,12 +0,0 @@ -module UsersHelper - def avatar_image(user, options = {}) - size = options.fetch(:size) { 100 } - klass = options.fetch(:class) { '' } - round_corners = options.fetch(:round_corners) { true } - - data_attributes = { name: user.name, height: size, width: size, "font-size" => (size * 0.6) } - data_attributes.merge!(radius: (size * 0.13).round) if round_corners - - content_tag :img, nil, class: "avatar #{klass}", data: data_attributes - end -end diff --git a/vendor/assets/javascripts/initial.js b/vendor/assets/javascripts/initial.js deleted file mode 100644 index fde754dea..000000000 --- a/vendor/assets/javascripts/initial.js +++ /dev/null @@ -1,64 +0,0 @@ -(function ($) { - $.fn.initial = function (options) { - - // Defining Colors - var colors = ["#1abc9c", "#16a085", "#f1c40f", "#f39c12", "#2ecc71", "#27ae60", "#e67e22", "#d35400", "#3498db", "#2980b9", "#e74c3c", "#c0392b", "#9b59b6", "#8e44ad", "#bdc3c7", "#34495e", "#2c3e50", "#95a5a6", "#7f8c8d", "#ec87bf", "#d870ad", "#f69785", "#9ba37e", "#b49255", "#b49255", "#a94136"]; - - return this.each(function () { - - var e = $(this); - var settings = $.extend({ - // Default settings - name: 'Name', - charCount: 1, - textColor: '#ffffff', - height: 100, - width: 100, - fontSize: 60, - fontWeight: 400, - fontFamily: 'HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif', - radius: 0 - }, options); - - // overriding from data attributes - settings = $.extend(settings, e.data()); - - // making the text object - var c = settings.name.substr(0, settings.charCount).toUpperCase(); - var cobj = $('').attr({ - 'y': '50%', - 'x': '50%', - 'dy' : '0.35em', - 'pointer-events':'auto', - 'fill': settings.textColor, - 'font-family': settings.fontFamily - }).html(c).css({ - 'font-weight': settings.fontWeight, - 'font-size': settings.fontSize+'px', - }); - - var colorIndex = Math.floor((c.charCodeAt(0) - 65) % colors.length); - - var svg = $('').attr({ - 'xmlns': 'http://www.w3.org/2000/svg', - 'pointer-events':'none', - 'width': settings.width, - 'height': settings.height - }).css({ - 'background-color': colors[colorIndex], - 'width': settings.width+'px', - 'height': settings.height+'px', - 'border-radius': settings.radius+'px', - '-moz-border-radius': settings.radius+'px' - }); - - svg.append(cobj); - // svg.append(group); - var svgHtml = window.btoa(unescape(encodeURIComponent($('
').append(svg.clone()).html()))); - - e.attr("src", 'data:image/svg+xml;base64,' + svgHtml); - - }) - }; - -}(jQuery)); \ No newline at end of file From d870706a26a003ec8fedb9adb4a455d58ecb2606 Mon Sep 17 00:00:00 2001 From: David Gil Date: Wed, 12 Aug 2015 18:51:58 +0200 Subject: [PATCH 06/10] rename css class --- app/assets/stylesheets/participacion.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/participacion.scss b/app/assets/stylesheets/participacion.scss index cbd95ada8..e2fb5f041 100644 --- a/app/assets/stylesheets/participacion.scss +++ b/app/assets/stylesheets/participacion.scss @@ -484,7 +484,7 @@ form { opacity: .5; } - .avatar { + .initialjs-avatar { margin-bottom: $line-height; } From 2b16716ee1c78b39c1fdc0ade9950713d02d3da2 Mon Sep 17 00:00:00 2001 From: David Gil Date: Wed, 12 Aug 2015 18:58:48 +0200 Subject: [PATCH 07/10] add author-photo css class to author avatar --- app/assets/stylesheets/debates.scss | 5 ----- app/views/debates/show.html.erb | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index 3faf62632..3aaa26b75 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -371,13 +371,8 @@ } .author-photo { - border-radius: 2px; - display: inline-block; - height: 32px; line-height: $line-height*2; margin-right: $line-height/4; - vertical-align: middle; - width: 32px; } .author { diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb index 57d8140da..5967e6e55 100644 --- a/app/views/debates/show.html.erb +++ b/app/views/debates/show.html.erb @@ -14,7 +14,7 @@

<%= @debate.title %>

- <%= avatar_image(@debate.author, size: 32) %> + <%= avatar_image(@debate.author, size: 32, class: 'author-photo') %> <%= @debate.author.name %> From c6154fe48da6a14e25138f3cae54673d589df3b2 Mon Sep 17 00:00:00 2001 From: David Gil Date: Wed, 12 Aug 2015 20:08:01 +0200 Subject: [PATCH 08/10] testing avatar presence --- spec/features/account_spec.rb | 7 ++++--- spec/features/comments_spec.rb | 1 + spec/features/debates_spec.rb | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/spec/features/account_spec.rb b/spec/features/account_spec.rb index 59ee23f5b..a50d26f7c 100644 --- a/spec/features/account_spec.rb +++ b/spec/features/account_spec.rb @@ -4,20 +4,22 @@ feature 'Account' do background do @user = create(:user, first_name: "Manuela", last_name:"Colau") + login_as(@user) end scenario 'Show' do - login_as(@user) visit root_path + click_link "My account" + expect(current_path).to eq(account_path) expect(page).to have_selector("input[value='Manuela']") expect(page).to have_selector("input[value='Colau']") + expect(page).to have_selector("img.initialjs-avatar[data-name='Manuela Colau'][data-height='100']", count: 1) end scenario "Failed Edit" do - login_as(@user) visit account_path fill_in 'account_first_name', with: '' @@ -31,7 +33,6 @@ feature 'Account' do end scenario 'Edit' do - login_as(@user) visit account_path fill_in 'account_first_name', with: 'Larry' diff --git a/spec/features/comments_spec.rb b/spec/features/comments_spec.rb index 77444cf61..3fa2464fb 100644 --- a/spec/features/comments_spec.rb +++ b/spec/features/comments_spec.rb @@ -17,6 +17,7 @@ feature 'Comments' do expect(page).to have_content comment.user.name expect(page).to have_content time_ago_in_words(comment.created_at) expect(page).to have_content comment.body + expect(page).to have_selector("img.initialjs-avatar[data-name='#{comment.user.name}'][data-height='32']", count: 1) end end diff --git a/spec/features/debates_spec.rb b/spec/features/debates_spec.rb index de3e05943..4a9f8c8f3 100644 --- a/spec/features/debates_spec.rb +++ b/spec/features/debates_spec.rb @@ -25,6 +25,7 @@ feature 'Debates' do expect(page).to have_content "Debate description" expect(page).to have_content debate.author.name expect(page).to have_content I18n.l(Date.today) + expect(page).to have_selector("img.initialjs-avatar[data-name='#{debate.author.name}'][data-height='32']", count: 1) within('.social-share-button') do expect(page.all('a').count).to be(3) # Twitter, Facebook, Google+ From f835154233b1d2614c4b178bca5e562675d54da8 Mon Sep 17 00:00:00 2001 From: David Gil Date: Fri, 14 Aug 2015 21:18:31 +0200 Subject: [PATCH 09/10] adds a helper for avatars in specs --- spec/features/account_spec.rb | 2 +- spec/features/comments_spec.rb | 2 +- spec/features/debates_spec.rb | 2 +- spec/support/common_actions.rb | 4 ++++ 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/spec/features/account_spec.rb b/spec/features/account_spec.rb index a50d26f7c..14a5310ba 100644 --- a/spec/features/account_spec.rb +++ b/spec/features/account_spec.rb @@ -16,7 +16,7 @@ feature 'Account' do expect(page).to have_selector("input[value='Manuela']") expect(page).to have_selector("input[value='Colau']") - expect(page).to have_selector("img.initialjs-avatar[data-name='Manuela Colau'][data-height='100']", count: 1) + expect(page).to have_selector(avatar('Manuela Colau'), count: 1) end scenario "Failed Edit" do diff --git a/spec/features/comments_spec.rb b/spec/features/comments_spec.rb index 3fa2464fb..93547ffd2 100644 --- a/spec/features/comments_spec.rb +++ b/spec/features/comments_spec.rb @@ -17,7 +17,7 @@ feature 'Comments' do expect(page).to have_content comment.user.name expect(page).to have_content time_ago_in_words(comment.created_at) expect(page).to have_content comment.body - expect(page).to have_selector("img.initialjs-avatar[data-name='#{comment.user.name}'][data-height='32']", count: 1) + expect(page).to have_selector(avatar(comment.user.name), count: 1) end end diff --git a/spec/features/debates_spec.rb b/spec/features/debates_spec.rb index 4a9f8c8f3..87856c457 100644 --- a/spec/features/debates_spec.rb +++ b/spec/features/debates_spec.rb @@ -25,7 +25,7 @@ feature 'Debates' do expect(page).to have_content "Debate description" expect(page).to have_content debate.author.name expect(page).to have_content I18n.l(Date.today) - expect(page).to have_selector("img.initialjs-avatar[data-name='#{debate.author.name}'][data-height='32']", count: 1) + expect(page).to have_selector(avatar(debate.author.name), count: 1) within('.social-share-button') do expect(page.all('a').count).to be(3) # Twitter, Facebook, Google+ diff --git a/spec/support/common_actions.rb b/spec/support/common_actions.rb index 5e56d2cea..066e32b87 100644 --- a/spec/support/common_actions.rb +++ b/spec/support/common_actions.rb @@ -56,4 +56,8 @@ module CommonActions SimpleCaptcha::SimpleCaptchaData.first.value end + def avatar(name) + "img.initialjs-avatar[data-name='#{name}']" + end + end From 994774ec65d08ecccb47edaedf7636a181ecf4d0 Mon Sep 17 00:00:00 2001 From: David Gil Date: Fri, 14 Aug 2015 21:23:06 +0200 Subject: [PATCH 10/10] prevents for Comments.initialize to be called twice causing unexpected behaviour in forms, when initialize_modules is called on ajax:complete --- app/assets/javascripts/application.js | 4 +--- app/assets/javascripts/comments.js.coffee | 18 ++++++++++++++---- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 34f0ece62..ed87ec326 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -31,7 +31,5 @@ $(function(){ $(document).ready(initialize_modules); $(document).on('page:load', initialize_modules); - $(document).on('ajax:complete', function(){ - App.Users.initialize(); - }); + $(document).on('ajax:complete', initialize_modules); }); diff --git a/app/assets/javascripts/comments.js.coffee b/app/assets/javascripts/comments.js.coffee index 0831d8a20..f6243beab 100644 --- a/app/assets/javascripts/comments.js.coffee +++ b/app/assets/javascripts/comments.js.coffee @@ -17,7 +17,17 @@ App.Comments = $("#js-comment-form-#{id}").toggle() initialize: -> - $('body').on 'click', '.js-add-comment-link', -> - id = $(this).data().id - App.Comments.toggle_form(id) - false + # $('body').on 'click', '.js-add-comment-link', -> + # id = $(this).data().id + # App.Comments.toggle_form(id) + # false + # + $('body .js-add-comment-link').each -> + $this = $(this) + + unless $this.data('initialized') is 'yes' + $this.on('click', -> + id = $(this).data().id + App.Comments.toggle_form(id) + false + ).data 'initialized', 'yes'