Added descriptions to voting options

assets/javascripts/discourse/widgets/add-super-vote.js.es6

@@ -9,7 +9,15 @@ export default createWidget('add-super-vote', {
   },
 
   html(attrs, state){
-    return "Add super vote"
+    var user = this.currentUser;
+    var superVotesRemaining = user.super_vote_count - user.super_vote_limit;
+    if (superVotesRemaining == 1){
+      var superVoteDescription = I18n.t("feature_voting.super_votes_remaining.singular");
+    }
+    else{
+      var superVoteDescription = I18n.t("feature_voting.super_votes_remaining.plural", {number: superVotesRemaining});
+    }
+    return ["Add super vote", h("div.vote-option-description", superVoteDescription)];
   },
 
   click(){

assets/javascripts/discourse/widgets/remove-super-vote.js.es6

@@ -13,7 +13,15 @@ export default createWidget('remove-super-vote', {
   },
 
   html(attrs, state){
-    return "Remove super vote"
+    var user = this.currentUser;
+    var superVotesRemaining = user.super_vote_count - user.super_vote_limit;
+    if (superVotesRemaining == 1){
+      var superVoteDescription = I18n.t("feature_voting.super_votes_remaining.singular");
+    }
+    else{
+      var superVoteDescription = I18n.t("feature_voting.super_votes_remaining.plural", {number: superVotesRemaining});
+    }
+    return ["Remove super vote", h("div.vote-option-description", superVoteDescription)];
   },
 
   click(){

assets/javascripts/discourse/widgets/remove-vote.js.es6

@@ -13,7 +13,7 @@ export default createWidget('remove-vote', {
   },
 
   html(attrs, state){
-    return "Remove vote"
+    return ["Remove vote", h("div.vote-option-description", I18n.t("feature_voting.remove_vote_warning"))]
   },
 
   click(){

assets/javascripts/discourse/widgets/upgrade-vote.js.es6

@@ -9,9 +9,17 @@ export default createWidget('upgrade-vote', {
   },
 
   html(attrs, state){
+    var user = this.currentUser;
+    var superVotesRemaining = user.super_vote_count - user.super_vote_limit;
+    if (superVotesRemaining == 1){
+      var superVoteDescription = I18n.t("feature_voting.super_votes_remaining.singular");
+    }
+    else{
+      var superVoteDescription = I18n.t("feature_voting.super_votes_remaining.plural", {number: superVotesRemaining});
+    }
     var upgradeQuestion = h('div.upgrade-question', I18n.t('feature_voting.upgrade_question'));
     var upgradeAnswer = h('div.upgrade-answer', [h('i.fa.fa-star', ""), I18n.t('feature_voting.upgrade_answer')]);
-    return [upgradeQuestion, upgradeAnswer];
+    return [upgradeQuestion, upgradeAnswer, h("div.vote-option-description", superVoteDescription)];
   },
 
   click(){

assets/javascripts/discourse/widgets/vote-box.js.es6

@@ -30,6 +30,7 @@ export default createWidget('vote-box', {
       }
     }).then(function(result) {
       topic.set('vote_count', result.vote_count);
+      topic.set('has_votes', true);
       topic.set('user_voted', true);
       Discourse.User.current().set('vote_limit', result.vote_limit);
       topic.set('who_voted', result.who_voted);
@@ -51,6 +52,9 @@ export default createWidget('vote-box', {
     }).then(function(result) {
       topic.set('vote_count', result.vote_count);
       topic.set('super_vote_count', result.super_vote_count);
+      if (result.vote_count == 0){
+        topic.set('has_votes', false);
+      }
       if (result.super_vote_count == 0){
         topic.set('has_super_votes', false);
       }

assets/javascripts/discourse/widgets/vote-button.js.es6

@@ -25,7 +25,10 @@ export default createWidget('vote-button', {
         }
       }
     }
-    if (Discourse.SiteSettings.feature_voting_show_who_voted) { return buttonClass + ' show-pointer'; }
+    if (Discourse.SiteSettings.feature_voting_show_who_voted) { 
+      buttonClass += ' show-pointer';
+    }
+    return buttonClass
   },
 
   html(attrs, state){

assets/javascripts/discourse/widgets/vote-count.js.es6

@@ -5,7 +5,7 @@ export default createWidget('vote-count', {
   tagName: 'div.vote-count-wrapper',
 
   buildClasses(attrs, state) {
-    if (!attrs.has_votes){
+    if (!this.attrs.has_votes){
       return "no-votes";
     }
   },
@@ -15,9 +15,6 @@ export default createWidget('vote-count', {
   },
 
   html(attrs, state){
-    if (!attrs.has_votes){
-      return
-    }
     var voteCount = h('div.vote-count', attrs.vote_count.toString());
     if (attrs.single_vote){
       var voteDescription = I18n.t('feature_voting.vote.one');
@@ -35,21 +32,16 @@ export default createWidget('vote-count', {
         description: 'feature_voting.who_voted'
       })
     }
-    if (attrs.single_super_vote){
-      var superVoteDescription = I18n.t('feature_voting.vote.one');
-    }
-    else {
-      var superVoteDescription = I18n.t('feature_voting.vote.multiple');
-    }
     var superVoteCount = [];
     var whoSuperVoted = [];
-    if (Discourse.SiteSettings.feature_voting_show_who_voted && attrs.has_super_votes) {
-      if (attrs.single_super_vote){
-        var superVoteDescription = I18n.t('feature_voting.vote.one');
+    if (Discourse.SiteSettings.feature_voting_show_who_voted && this.attrs.has_super_votes) {
+      if (this.attrs.single_super_vote){
+        var superVoteDescription = I18n.t('feature_voting.super_vote.one');
       }
       else {
-        var superVoteDescription = I18n.t('feature_voting.vote.multiple');
+        var superVoteDescription = I18n.t('feature_voting.super_vote.multiple');
       }
+      superVoteDescription = " " + superVoteDescription;
       superVoteCount = h('div.super-vote-count', [attrs.super_vote_count.toString(), superVoteDescription]);
       var whoSuperVoted = [];
       whoSuperVoted = this.attach('small-user-list', {

assets/stylesheets/feature-voting.scss

@@ -5,7 +5,7 @@
     margin: 0px 20px 0px 0px;
     max-width: 10%;
 }
-.vote-count-wrapper{
+.vote-count-wrapper, .header-voting .voting-wrapper{
     border: 3px solid #e9e9e9;
 }
 .voting-wrapper.show-pointer .vote-count-wrapper{
@@ -14,6 +14,10 @@
 .voting-wrapper.show-pointer .vote-count-wrapper:hover{
     background-color:#e9e9e9;
 }
+.vote-count-wrapper.no-votes:hover {
+    background-color: initial !important;
+    cursor: initial;
+}
 .vote-count{
 	height:20px;
 	line-height:20px;
@@ -48,6 +52,39 @@
     margin-right: 5px;
     color: $highlight;
 }
+.vote-options{
+    text-align: left;
+}
+.vote-option{
+    cursor:pointer;
+    padding: 5px;
+}
+.vote-option:hover{
+    background-color: #e9e9e9;
+}
+.vote-option.add-super-vote:before{
+    content: $fa-var-star;
+    font-family: FontAwesome;
+    margin-right: 5px;
+    color: $highlight;
+}
+.vote-option.remove-vote:before{
+    content: $fa-var-close;
+    font-family: FontAwesome;
+    margin-right: 6px;
+    margin-left: 1px;
+    color: $danger;
+}
+.vote-option.remove-super-vote:before{
+    content: $fa-var-star-half-o;
+    font-family: FontAwesome;
+    margin-right: 5px;
+    color: $highlight;
+}
+.vote-option-description{
+    font-size: 0.8em;
+    margin-left: 18px;
+}
 .list-vote-count{
 	font-size: 0.75em;
 }
@@ -86,8 +123,20 @@
     margin: 2px 0px;
 }
 .upgrade-vote{
-    cursor: pointer;
+    text-align: center;
+}
+.upgrade-vote .vote-option-description{
+    margin-left: 0px;
+}
+.upgrade-answer{
+    text-decoration: underline;
+    font-weight: bold;
 }
 .upgrade-answer i{
     margin: 0px 5px 0px 0px;
+}
+.super-vote-count{
+    border-bottom: 1px solid #e9e9e9;
+    padding-bottom: 10px;
+    margin-bottom: 5px;
 }

config/locales/client.en.yml

@@ -13,6 +13,10 @@ en:
       super_vote:
         one: "super vote"
         multiple: "super votes"
+      super_votes_remaining: 
+        singular: "You have one super vote left."
+        plural: "You have {{number}} super votes left."
+      remove_vote_warning: "Also removes the super vote."
       who_voted: "voted for this"
       who_super_voted: "super voted for this"
       upgrade_question: "Would you like to make that a Super Vote?"

plugin.rb

@@ -1,6 +1,6 @@
 # name: discourse-feature-voting
 # about: Adds the ability to vote on features in a specified category.
-# version: 0.1
+# version: 0.2
 # author: Joe Buhlig joebuhlig.com
 # url: https://www.github.com/joebuhlig/discourse-feature-voting
 
@@ -165,7 +165,7 @@ after_initialize do
 
   require_dependency 'current_user_serializer'
   class ::CurrentUserSerializer
-    attributes :vote_limit, :super_vote_limit
+    attributes :vote_limit, :super_vote_limit, :vote_count, :super_vote_count
 
     def vote_limit
       object.vote_limit
@@ -175,6 +175,14 @@ after_initialize do
       object.super_vote_limit
     end
 
+    def vote_count
+      object.vote_count
+    end
+
+    def super_vote_count
+      object.super_vote_count
+    end
+
    end
 
   require_dependency 'topic'