From 925921d605c09eed5d3842cddaade386b227c0bc Mon Sep 17 00:00:00 2001 From: David Gil Date: Wed, 12 Aug 2015 17:25:13 +0200 Subject: [PATCH] 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