Merge pull request #5334 from svbergerem/fix-bootstrap-poll

Fix poll for Bootstrap publisher

Changelog.md

@@ -65,6 +65,7 @@ The keys will still be available in the root level within the 0.5 release. The o
 * Fix services settings reported by statistics.json [#5256](https://github.com/diaspora/diaspora/pull/5256)
 * Only collapse empty comment box [#5328](https://github.com/diaspora/diaspora/pull/5328)
 * Fix pagination for people/guid/contacts [#5304](https://github.com/diaspora/diaspora/pull/5304)
+* Fix poll creation on Bootstrap pages [#5334](https://github.com/diaspora/diaspora/pull/5334)
 
 ## Features
 * Don't pull jQuery from a CDN by default [#5105](https://github.com/diaspora/diaspora/pull/5105)

app/assets/javascripts/app/views/publisher/poll_creator_view.js

@@ -71,15 +71,14 @@ app.views.PublisherPollCreator = app.views.Base.extend({
   },
 
   validateInput: function(input){
-    var wrapper = input.parents('.control-group');
     var isValid = this.isValidInput(input);
 
     if(isValid){
-      wrapper.removeClass('error');
+      input.removeClass('error');
       return true;
     }
     else {
-      wrapper.addClass('error');
+      input.addClass('error');
       return false;
     }
   },

app/assets/javascripts/app/views/publisher_view.js

@@ -123,7 +123,7 @@ app.views.Publisher = Backbone.View.extend({
     this.view_uploader.on('change', this.checkSubmitAvailability, this);
 
     this.view_poll_creator = new app.views.PublisherPollCreator({
-      el: this.$('#publisher-poll-creator')
+      el: this.$('#poll_creator_container')
     });
     this.view_poll_creator.on('change', this.checkSubmitAvailability, this);
     this.view_poll_creator.render();

app/assets/stylesheets/publisher.css.scss

@@ -50,7 +50,7 @@
       border-radius: 3px;
       border: 1px solid $border-dark-grey;
 
-      input[type='text'] {
+      input[type='text']#status_message_text {
         border: none;
         box-shadow: none;
         margin: none;
@@ -87,13 +87,22 @@
         border-top: 1px dashed $border-grey; 
       }
 
-      #poll_creator_wrapper {
-        display:none;
+      .row-fluid#poll_creator_container {
+        display: none;
         border-top: 1px dashed $border-grey;
         padding:4px 6px 4px 6px;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
+        .remove-answer.entypo.cross {
+          display: none;
+          color: lighten($black,75%);
+          &.active { display: block; }
+          &:hover { color: $black; }
+          line-height: 30px;
+          font-size: 18px;
+          cursor: pointer;
+        }
       }
 
       &.with_location .row-fluid#location_container {

app/assets/stylesheets/publisher_blueprint.css.scss

@@ -344,7 +344,7 @@
   }
 }
 
-#publisher-poll-creator {
+#poll_creator_container {
   border: 1px solid $border-dark-grey;
   padding: 5px;
   margin-top: 5px;
@@ -379,19 +379,18 @@
       }
   }
   .poll-answer {
+    .span1, .span11 { display: inline-block; }
+    .span11 { width: 96%; }
     input {
-      width: 96%;
+      width: 100%;
       display: inline-block;
       vertical-align: bottom;
     }
     .remove-answer {
-      width: 14px;
-      height: 14px;
       @include opacity(0.4);
       cursor: pointer;
-      vertical-align: top;
-      margin-top: 7px;
       display: none;
+      line-height: 27px;
 
       &:hover {
         @include opacity(1);

app/assets/templates/poll_creator_tpl.jst.hbs

 <div class="poll-question control-group">
-  <div class="controls">
-    <input class="span12" placeholder="{{t 'publisher.question' }}" type="text" name="poll_question">
-  </div>
+  <input class="input-block-level" placeholder="{{t 'publisher.question' }}" type="text" name="poll_question">
 </div>
 <div class="poll-answers">
-  <div class="poll-answer control-group">
-    <div class="controls">
-      <input type="text" name="poll_answers[]" placeholder="{{t 'publisher.option' }}">
-      <div class="remove-answer icons-deletelabel"></div>
+  <div class="poll-answer row-fluid">
+    <div class="span11">
+      <input type="text" class="input-block-level" name="poll_answers[]" placeholder="{{t 'publisher.option' }}">
+    </div>
+    <div class="span1">
+      <i class="remove-answer entypo cross"></i>
     </div>
   </div>
-  <div class="poll-answer control-group">
-    <div class="controls">
-      <input type="text" name="poll_answers[]" placeholder="{{t 'publisher.option' }}">
-      <div class="remove-answer icons-deletelabel"></div>
+  <div class="poll-answer row-fluid">
+    <div class="span11">
+      <input type="text" class="input-block-level" name="poll_answers[]" placeholder="{{t 'publisher.option' }}">
+    </div>
+    <div class="span1">
+      <i class="remove-answer entypo cross"></i>
     </div>
   </div>
 </div>
-

app/views/publisher/_publisher_blueprint.html.haml

@@ -37,7 +37,7 @@
                 = image_tag 'icons/camera.png', :alt => t('shared.publisher.upload_photos').titleize, :class => 'publisher_image'
             = hidden_field :location, :coords
           #location_container
-          #publisher-poll-creator
+          #poll_creator_container
 
       - if publisher_public
         = hidden_field_tag 'aspect_ids[]', "public"

app/views/publisher/_publisher_bootstrap.html.haml

@@ -22,16 +22,8 @@
             %ul#photodropzone
           .row-fluid#location_container
             = hidden_field :location, :coords
-          .row-fluid#poll_creator_wrapper
-            #poll_question_wrapper{:class => "input-block-level"}
-              %input{:id => 'poll_question', :placeholder => t('shared.publisher.poll.question'), :name => 'poll_question', :class=> "form-control"}
-            .poll_answer
-              %input{:class => 'form-control poll_answer_input', :placeholder => t('shared.publisher.poll.option'), :name => 'poll_answers[]'}
-              .remove_poll_answer.btn.btn-link{:title => t('shared.publisher.poll.remove_poll_answer')}
-                %i.entypo.trash
-            #add_poll_answer_wrapper
-              #add_poll_answer{:class => 'btn btn-default'}
-                = t('shared.publisher.poll.add_poll_answer')
+          .row-fluid#poll_creator_container
+            -# handlebars template
           .row-fluid#button_container
             #publisher-images.pull-right
               #poll_creator.btn.btn-link{:title => t('shared.publisher.poll.add_a_poll')}

features/desktop/post_with_a_poll.feature

@@ -9,18 +9,18 @@ Feature: posting with a poll
       And I am on the home page
       
     Scenario: expanding the publisher
-      Given "#publisher-poll-creator" is hidden
+      Given "#poll_creator_container" is hidden
       When I expand the publisher
       Then I should see an element "#poll_creator"
 
     Scenario: expanding the poll creator
-      Given "#publisher-poll-creator" is hidden
+      Given "#poll_creator_container" is hidden
       When I expand the publisher
       And I press the element "#poll_creator"
-      Then I should see an element "#publisher-poll-creator"
+      Then I should see an element "#poll_creator_container"
 
     Scenario: adding option to poll
-      Given "#publisher-poll-creator" is hidden
+      Given "#poll_creator_container" is hidden
       When I expand the publisher
       And I press the element "#poll_creator"
       And I fill in values for the first two options
@@ -28,7 +28,7 @@ Feature: posting with a poll
       Then I should see 3 options
 
     Scenario: delete an option
-      Given "#publisher-poll-creator" is hidden
+      Given "#poll_creator_container" is hidden
       When I expand the publisher
       And I press the element "#poll_creator"
       And I fill in values for the first two options
@@ -89,6 +89,6 @@ Feature: posting with a poll
     And I fill in the following for the options:
         | normal |
         |  |
-    And I press the element "#publisher-poll-creator"
+    And I press the element "#poll_creator_container"
     And I press the element "input[type=submit]"
-    Then I should see an element ".poll-answer.error"
+    Then I should see an element ".poll-answer input.error"

features/step_definitions/post_with_poll_steps.rb

 Then /^I should see ([1-9]+) options?$/ do |number|
-  find("#publisher-poll-creator").all(".poll-answer").count.should eql(number.to_i)
+  find("#poll_creator_container").all(".poll-answer").count.should eql(number.to_i)
 end
 
 And /^I delete the last option$/ do
-  find("#publisher-poll-creator").all(".poll-answer .remove-answer").first.click
+  find("#poll_creator_container").all(".poll-answer .remove-answer").first.click
 end
 
 And /^I should not see a remove icon$/ do
@@ -36,7 +36,7 @@ When(/^I fill in values for the first two options$/) do
 end
 
 When(/^I lose focus$/) do
-  find("#publisher-poll-creator").click
+  find("#poll_creator_container").click
 end
 
 Then /^I should see an element "([^"]*)"$/ do |selector|