From 054ea7dc4aad0fc66ca3f7645737cc2c7cfb0a20 Mon Sep 17 00:00:00 2001 From: epriestley Date: Sun, 30 Sep 2012 20:12:35 -0700 Subject: [PATCH] Simplify upvote/downvote implementation Summary: Use sigils to simplify the vote implementation and move most rendering to the server. Use unicode glyphs in place of graphics. Test Plan: {F19539} Reviewers: pieter, starruler Reviewed By: pieter CC: aran Maniphest Tasks: T1644 Differential Revision: https://secure.phabricator.com/D3518 --- .../ponder/view/PonderVotableView.php | 65 +++++++++--- webroot/rsrc/css/application/ponder/vote.css | 94 +++++++---------- .../image/application/ponder/downvote.png | Bin 929 -> 0 bytes .../rsrc/image/application/ponder/upvote.png | Bin 916 -> 0 bytes .../js/application/ponder/behavior-votebox.js | 97 +++++++----------- 5 files changed, 127 insertions(+), 129 deletions(-) delete mode 100644 webroot/rsrc/image/application/ponder/downvote.png delete mode 100644 webroot/rsrc/image/application/ponder/upvote.png diff --git a/src/applications/ponder/view/PonderVotableView.php b/src/applications/ponder/view/PonderVotableView.php index d4fb401b5c..0f1b10ddf6 100644 --- a/src/applications/ponder/view/PonderVotableView.php +++ b/src/applications/ponder/view/PonderVotableView.php @@ -47,23 +47,60 @@ final class PonderVotableView extends AphrontView { require_celerity_resource('ponder-vote-css'); require_celerity_resource('javelin-behavior-ponder-votebox'); - Javelin::initBehavior( - 'ponder-votebox', + Javelin::initBehavior('ponder-votebox', array()); + + $uri = id(new PhutilURI($this->uri))->alter('phid', $this->phid); + + $up = javelin_render_tag( + 'a', array( - 'nodeid' => $this->phid, - 'vote' => $this->vote, - 'count' => $this->count, - 'uri' => $this->uri - )); + 'href' => (string)$uri, + 'sigil' => 'upvote', + 'mustcapture' => true, + 'class' => ($this->vote > 0) ? 'ponder-vote-active' : null, + ), + "\xE2\x96\xB2"); - $content = - '
'. - '
-
'. - $this->renderChildren(). - '
'; + $down = javelin_render_tag( + 'a', + array( + 'href' => (string)$uri, + 'sigil' => 'downvote', + 'mustcapture' => true, + 'class' => ($this->vote < 0) ? 'ponder-vote-active' : null, + ), + "\xE2\x96\xBC"); - return $content; + $count = javelin_render_tag( + 'div', + array( + 'class' => 'ponder-vote-count', + 'sigil' => 'ponder-vote-count', + ), + phutil_escape_html($this->count)); + + return javelin_render_tag( + 'div', + array( + 'class' => 'ponder-votable', + 'sigil' => 'ponder-votable', + 'meta' => array( + 'count' => (int)$this->count, + 'vote' => (int)$this->vote, + ), + ), + javelin_render_tag( + 'div', + array( + 'class' => 'ponder-votebox', + ), + $up.$count.$down). + phutil_render_tag( + 'div', + array( + 'class' => 'ponder-votebox-content', + ), + $this->renderChildren())); } } diff --git a/webroot/rsrc/css/application/ponder/vote.css b/webroot/rsrc/css/application/ponder/vote.css index 9e6e0e428d..31b8ac9f71 100644 --- a/webroot/rsrc/css/application/ponder/vote.css +++ b/webroot/rsrc/css/application/ponder/vote.css @@ -2,17 +2,45 @@ * @provides ponder-vote-css */ - - -.ponder-votable .phabricator-transaction-view { - margin : 0; - padding : 0; +.ponder-votebox { + text-align: center; } -.ponder-votable .phabricator-transaction-detail { - min-height : 90px; +.ponder-votebox a { + font-size: 20px; + line-height: 20px; + display: block; + + text-decoration: none; + color: #999999; + font-weight: normal; + + /* Our default fonts have weirdly different up/down arrow sizes. */ + font-family: Arial; } +.ponder-votebox a:hover { + color: #606060; +} + +.ponder-votebox a.ponder-vote-active { + color: #3b5998; +} + +.ponder-votebox a.ponder-vote-active:hover { + color: #a1bbe5; +} + +.ponder-vote-count { + color: #888888; + font-size: 14px; + line-height: 14px; + font-weight: bold; +} + + + + .ponder-votebox { float : left; width : 32px; @@ -21,57 +49,11 @@ margin-left : 10px; } -.ponder-upbutton { - border : none; - padding : 0; +.ponder-votable .phabricator-transaction-view { margin : 0; - width : 32px; - height : 13px; -} - -.ponder-downbutton { - border : none; padding : 0; - margin : 0; - width : 32px; - height : 13px; } -.ponder-votecount { - width : 32px; - height : 22pt; - padding : 0; - margin : 0; - overflow : visible; - text-align : center; - font-size : 15pt; -} - -.ponder-upbutton:hover { - cursor : pointer; -} - -.ponder-downbutton:hover { - cursor : pointer; -} - -.ponder-votable-bottom { - clear : both; -} - -.ponder-upbutton { - background : url(/rsrc/image/application/ponder/upvote.png) 0 -13px no-repeat; -} - -.ponder-upbutton.ponder-vote-up { - background : url(/rsrc/image/application/ponder/upvote.png) 0 0 no-repeat; -} - -.ponder-downbutton { - background : url(/rsrc/image/application/ponder/downvote.png) - 0 -13px no-repeat; -} - -.ponder-downbutton.ponder-vote-down { - background : url(/rsrc/image/application/ponder/downvote.png) 0 0 no-repeat; +.ponder-votable .phabricator-transaction-detail { + min-height : 90px; } diff --git a/webroot/rsrc/image/application/ponder/downvote.png b/webroot/rsrc/image/application/ponder/downvote.png deleted file mode 100644 index 7272a6645cb1c2d32bc9057da1c0585c3e159b2e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 929 zcmV;S177@zP)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iyl9 z6e|iQM3s{O00SXOL_t(Y$Gw&@Y+F?nhQI&DlEo0I8v}`=G)3*wr4kDhVlAy;K^-FK z0?MF1IhMjQLGd-aKWpPx}<`0c-Y11)fX>r{dhp6g@s!)=(Sf^r?P%z zxPpU55|FwSp;VnvqL+6AAVl-|^VJrk%2u|;#V?ob@BmRABxEaVx3P_>Jm0uY@?&tV z*ZchEQ3qzEEiK+tU;pd`>yo2%(x9xvg~%7Pqflfo_tVrjo;|C7b=WaJ)J~ticiEn~ zD{;=oQVx)nC=*#`h?_|tNnYRE`}FC!dt@S8TKxKTm!1{7CSyUY$L_{!uGDD ztL=8<;4n&()(r3pICUKOnVOR1G)*O`xwW-6ei+qix0h`{0IDVCM^UBNlVLoTRBN{z zlMkbMeM9|ze+Rgv%*K%@WlZMV2X3_6jp>I`t#qstdvPY8E+wI2j z45O8mFCI!-2Eslfx!gm;sMBdqG>pQe1UjAO$CBQX^wYjS+4WoYnSOT2~Y^g}G00000NkvXXu0mjf DETOO2 diff --git a/webroot/rsrc/image/application/ponder/upvote.png b/webroot/rsrc/image/application/ponder/upvote.png deleted file mode 100644 index cb543a214156e71419854a1e6f701217b480e2f3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 916 zcmV;F18e+=P)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iyl9 z6e%dd61MdK00R_BL_t(Y$F-I}j8s(=#=qa4KM;|^n22OREGSL3p+XZ9jI<;)G;V<* z?#xh_A!tkn&1RQ1F>GvB-w-!65)v&;tn6sqU_nE-G|(_%lNAze)W*4=#e4Ji&CKp* zXV|&jx$mBHzWbeX?)T6H>$TTEq!M0v*Yb~`nyr?k@1H+k{b$@*jO$Q)^W%g6#p+!v zUI0nLvM@Z6xb(;7%Gy)_yivOr=*81kTnh@4Y+Di{3u0MF%v+V^&CRd>-Zub8j$At& zsN4}gpSpO!wP4v2NRJ>~-q=|B{iOlaYV$L;A4saEDXfTKqj z4ngI%6fb7SMpE{<$Sou?2u4Q2W?ez;XWh?#*)xDz?VGa@?}2Qmoi>zhG(@p7E}GZ| zp%p{xS@)CPjsT7y|L&ONmgK8Q_5hueR1qs90vQw5Wg6XX{kIYC6K}1aGQO{>{A~Bj(YHIdZhbMC z7&RI<4oSK#>0)+kk5jS&8|#wVNz&fC7&V(qXJd@_vIfiYPc$%cx&T&yR+6-L7NdH7 z@mL6z{Fp+fBqjaoo&+fzISo}0000 0)); - function decorate() { - upnode = JX.$N('div'); - countnode = JX.$N('div'); - downnode = JX.$N('div'); - node.appendChild(upnode); - node.appendChild(countnode); - node.appendChild(downnode); - JX.DOM.alterClass(upnode, "ponder-upbutton " + voteclass[vote], true); - JX.DOM.alterClass(downnode, "ponder-downbutton " + voteclass[vote], true); - JX.DOM.alterClass(countnode, "ponder-votecount", true); + var downv = JX.DOM.find(root, 'a', 'downvote'); + JX.DOM.alterClass(downv, 'ponder-vote-active', (data.vote < 0)) + + JX.DOM.setContent( + JX.DOM.find(root, 'div', 'ponder-vote-count'), + data.count); + + new JX.Request(e.getTarget().href, JX.bag) + .setData({vote: data.vote}) + .send() } - function update_state() { - upnode.className = "ponder-upbutton " + voteclass[vote]; - downnode.className = "ponder-downbutton " + voteclass[vote]; - JX.DOM.setContent(countnode, JX.$H(count.toString())); - } + JX.Stratcom.listen( + 'click', + 'downvote', + function(e) { + handle_vote(e, -1); + }); - function getdata() { - return { phid : config.nodeid, vote : vote }; - } - - var request = new JX.PhabricatorShapedRequest(config.uri, JX.id, getdata); - var trigger = JX.bind(request, request.trigger); - - function handle_upvote(e) { - count += votecycle[vote].up - vote; - vote = votecycle[vote].up; - trigger(); - update_state(); - } - - function handle_downvote(e) { - count += votecycle[vote].down - vote; - vote = votecycle[vote].down; - trigger(); - update_state(); - } - - decorate(); - update_state(); - JX.DOM.listen(upnode, 'click', null, handle_upvote); - JX.DOM.listen(downnode, 'click', null, handle_downvote); + JX.Stratcom.listen( + 'click', + 'upvote', + function(e) { + handle_vote(e, 1); + }); });