Merge pull request #4897 from hpetru/update-poll-view-in-stream

I update design for poll in post stream

Changelog.md

@@ -41,7 +41,7 @@
 * Added comment count to statistic to enable calculations of posts/comments ratios [#4799](https://github.com/diaspora/diaspora/pull/4799)
 * Add filters to notifications controller [#4814](https://github.com/diaspora/diaspora/pull/4814)
 * Activate hovercards in SPV and conversations [#4870](https://github.com/diaspora/diaspora/pull/4870)
-* Added possibility to conduct polls [#4861](https://github.com/diaspora/diaspora/pull/4861) [#4894](https://github.com/diaspora/diaspora/pull/4894)
+* Added possibility to conduct polls [#4861](https://github.com/diaspora/diaspora/pull/4861) [#4894](https://github.com/diaspora/diaspora/pull/4894) [#4897](https://github.com/diaspora/diaspora/pull/4897)
 
 # 0.3.0.3
 

app/assets/javascripts/app/views/poll_blueprint_view.js

@@ -1,17 +0,0 @@
-//= require ./poll_view
-app.views.PollBlueprint = app.views.Poll.extend({
-  templateName: 'poll_blueprint',
-  
-  initialize: function(options) {
-    this.constructor.__super__.initialize.apply(this, options);
-    this.progressBarFactor = 3;
-  },
-  setProgressBarData: function(progressBar, percent) {
-    progressBar.css('width', percent * this.progressBarFactor + 'px');
-    progressBar.parent().next().html(" - " + percent + "%");
-  },
-  toggleElements: function() {
-    this.$('.poll_progress_bar_wrapper').toggle();
-    this.$('.percentage').toggle();
-  }
-});

app/assets/javascripts/app/views/stream_post_views.js

@@ -32,7 +32,7 @@ app.views.StreamPost = app.views.Post.extend({
     this.commentStreamView = new app.views.CommentStream({model : this.model});
     this.oEmbedView = new app.views.OEmbed({model : this.model});
     this.openGraphView = new app.views.OpenGraph({model : this.model});
-    this.pollView = new app.views.PollBlueprint({model : this.model});
+    this.pollView = new app.views.Poll({model : this.model});
   },
 
 

app/assets/stylesheets/poll.css.scss

@@ -1,45 +1,32 @@
+@import 'new_styles/poll';
+
 .poll_form {
-  display: block;
+  .pull-right {
-  margin: 10px 0px 10px 0px;
-  border-top: solid 1px $border-grey;
-  border-bottom: solid 1px $border-grey;
-  padding: 10px 0px 5px 0px;
-  overflow: hidden;
-  width: 100%;
-}
-
-.poll_form input[type="radio"] {
-  display:inline !important;  
-}
-
-.poll_result {
-  width:100%px;
-}
-
-.poll_progress_bar {
-  position:absolute;
-  width:0px;
-  height:15px;
-  top:-12px;
-  z-index:-1;
-  background-color:$background-grey;
-}
-
-.poll_statistic{
     float: right;
   }
+  label {
+    display: block;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 20px;
+    padding-left: 20px;
 
-.poll_progress_bar_wrapper {
+    input[type=radio] {
-  position: relative;
+      float: left;
-  width: 0;
+      margin-left: -20px;
-  height: 0;
-  display:inline-block;
     }
+    &:HOVER {
+      cursor: pointer;
+    }
+  }
+  .progress {
+    overflow: hidden;
+    background-color: #f6f6f6;
+    @include border-radius(4px);
 
-.poll_answer_entry{
+    .bar {
-  width:100%;
+      height: 100%;
+      float: left;
+    }
   }
-
-.percentage {
-  display:inline;
 }

app/assets/templates/poll_blueprint_tpl.jst.hbs

@@ -1,32 +0,0 @@
-{{#if poll}}
-  <div class="poll_form">
-    <p class="poll_statistic">{{t "poll.count" count=poll.participation_count}}</p>
-    <strong>{{poll.question}}</strong><br/>
-    {{#unless already_participated_in_poll}}
-      <form action="/posts/{{poll.post_id}}/poll_participations" method="POST">
-        {{#poll.poll_answers}}
-          <input type="radio" name="vote" value="{{id}}"/>
-          <div class="poll_progress_bar_wrapper" style="display:none;">
-            <div class="poll_progress_bar" data-answerid="{{id}}"></div>
-          </div>
-          {{answer}}
-          <p class="percentage" style="display:none;"></p>
-          <br/>
-        {{/poll.poll_answers}}
-        <input type="submit" class="button submit" style="float:right;" value="{{t "poll.vote"}}"/>
-      </form>
-      <p class="toggle_result_wrapper">
-        <br/><a href="#" class="toggle_result">{{t "poll.show_result"}}</a><br/>
-      </p>
-    {{else}}
-      {{#poll.poll_answers}}
-        <div class="poll_progress_bar_wrapper">
-          <div class="poll_progress_bar" data-answerid="{{id}}"></div>
-        </div>
-        {{answer}}
-        <p class="percentage"></p>
-        <br/>
-      {{/poll.poll_answers}}
-    {{/unless}}
-  </div>
-{{/if}}

spec/javascripts/app/views/poll_view_spec.js

@@ -1,15 +1,15 @@
-describe("app.views.PollBlueprint", function(){
+describe("app.views.Poll", function(){
   beforeEach(function() {
     loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
-    this.view = new app.views.PollBlueprint({ model: factory.postWithPoll()});
+    this.view = new app.views.Poll({ model: factory.postWithPoll()});
     this.view.render();
   });
 
   describe("setProgressBar", function(){
     it("sets the progress bar according to the voting result", function(){
       var percentage = (this.view.poll.poll_answers[0].vote_count / this.view.poll.participation_count)*100;
-      expect(this.view.$('.poll_progress_bar:first').css('width')).toBe(this.view.progressBarFactor * percentage+"px");
+      expect(this.view.$('.poll_progress_bar:first').css('width')).toBe(percentage+"%");
-      expect(this.view.$(".percentage:first").text()).toBe(" - " + percentage + "%");
+      expect(this.view.$(".percentage:first").text()).toBe(percentage + "%");
     })
   });