Merge pull request #8217 from tclaus/7080_multi_select_on_aspects_on_mobile

multi select on aspects on mobile

closes #7080

Changelog.md

@@ -62,6 +62,7 @@ We use yarn to install the frontend dependencies now, so you need to have that i
 * Add support for directly paste images to upload them [#8237](https://github.com/diaspora/diaspora/pull/8237)
 * Add support for webp images and convert new png/jpg to webp to save space and bandwidth [#8358](https://github.com/diaspora/diaspora/pull/8358)
 * Show total and active pods count in the pods list for podmins [#8383](https://github.com/diaspora/diaspora/pull/8383)
+* Allow to select multiple aspects when posting on mobile [#8217](https://github.com/diaspora/diaspora/pull/8217)
 
 # 0.7.18.1
 

app/assets/javascripts/app/views/aspects_dropdown_view.js

@@ -27,16 +27,14 @@ app.views.AspectsDropdown = app.views.Base.extend({
   },
 
   // change class and text of the dropdown button
-  _updateButton: function(inAspectClass) {
-    var button = this.$('.btn.dropdown-toggle'),
+  _updateButton: function() {
+    let button = this.$(".btn.dropdown-toggle"),
       selectedAspects = this.$(".dropdown-menu > li.selected").length,
       buttonText;
 
     if (selectedAspects === 0) {
-      button.removeClass(inAspectClass).addClass('btn-default');
       buttonText = Diaspora.I18n.t("aspect_dropdown.select_aspects");
     } else {
-      button.removeClass('btn-default').addClass(inAspectClass);
       if (selectedAspects === 1) {
         buttonText = this.$(".dropdown-menu > li.selected .text").first().text();
       } else {

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

@@ -31,7 +31,7 @@ app.views.PublisherAspectSelector  = app.views.AspectsDropdown.extend({
     }
 
     this._updateSelectedAspectIds();
-    this._updateButton('btn-default');
+    this._updateButton();
 
     // update the globe or lock icon
     var icon = this.$("#visibility-icon");
@@ -48,7 +48,7 @@ app.views.PublisherAspectSelector  = app.views.AspectsDropdown.extend({
   updateAspectsSelector: function(ids){
     this._selectAspects(ids);
     this._updateSelectedAspectIds();
-    this._updateButton('btn-default');
+    this._updateButton();
   },
 
   // take care of the form fields that will indicate the selected aspects

app/assets/javascripts/mobile/publisher.js

@@ -48,4 +48,74 @@ $(document).ready(function(){
   });
 
   new Diaspora.MarkdownEditor("#status_message_text");
+
+  $(".dropdown-menu > li").bind("tap click", function(evt) {
+    let target = $(evt.target).closest("li");
+
+    // visually toggle the aspect selection
+    if (target.is(".radio")) {
+      _toggleRadio(target);
+    } else if (target.is(".aspect-selector")) {
+      // don't close the dropdown
+      evt.stopPropagation();
+      _toggleCheckbox(target);
+    }
+
+    _updateSelectedAspectIds();
+    _updateButton();
+
+    // update the globe or lock icon
+    let icon = $("#visibility-icon");
+    if (target.find(".text").text().trim() === Diaspora.I18n.t("stream.public")) {
+      icon.removeClass("entypo-lock");
+      icon.addClass("entypo-globe");
+    } else {
+      icon.removeClass("entypo-globe");
+      icon.addClass("entypo-lock");
+    }
+  });
+
+  function _toggleRadio(target) {
+    $(".dropdown-menu > li").removeClass("selected");
+    target.toggleClass("selected");
+  }
+
+  function _toggleCheckbox(target) {
+    $(".dropdown-menu > li.radio").removeClass("selected");
+    target.toggleClass("selected");
+  }
+
+  // take care of the form fields that will indicate the selected aspects
+  function _updateSelectedAspectIds() {
+    let form = $("#new_status_message");
+
+    // remove previous selection
+    form.find('input[name="aspect_ids[]"]').remove();
+
+    // create fields for current selection
+    form.find(".dropdown-menu > li.selected").each(function() {
+      let uid = _.uniqueId("aspect_ids_");
+      let id = $(this).data("aspect_id");
+      form.append('<input id="' + uid + '" name="aspect_ids[]" type="hidden" value="' + id + '">');
+    });
+  }
+
+  // change class and text of the dropdown button
+  function _updateButton() {
+    let button = $(".btn.dropdown-toggle"),
+        selectedAspects = $(".dropdown-menu > li.selected").length,
+        buttonText;
+
+    switch (selectedAspects) {
+      case 0:
+        buttonText = Diaspora.I18n.t("aspect_dropdown.select_aspects");
+        break;
+      case 1:
+        buttonText = $(".dropdown-menu > li.selected .text").first().text();
+        break;
+      default:
+        buttonText = Diaspora.I18n.t("aspect_dropdown.toggle", {count: selectedAspects.toString()});
+    }
+    button.find(".text").text(buttonText);
+  }
 });

app/assets/stylesheets/_mixins.scss

@@ -1,7 +1,7 @@
 /* Mixin file for sass.  Here is where we define our variables and
    browser compatability functions used in all scss/sass files */
 
-/* Transision defaults */
+// Transition defaults
 $speed: 0.1s;
 $easing: linear;
 
@@ -138,3 +138,21 @@ $default-border-radius: 3px;
     .glyphicon-ok { display: none;}
   }
 }
+
+@mixin aspect-dropdown-link($anchor-size) {
+  $link-text-color: #333;
+
+  a {
+    cursor: pointer;
+    padding-left: 10px;
+
+    .text {
+      color: $link-text-color;
+      font-size: $anchor-size;
+    }
+
+    &:hover {
+      background: $background-grey;
+    }
+  }
+}

app/assets/stylesheets/aspects.scss

@@ -1,26 +1,19 @@
+@import 'mixins';
+
 .aspect-dropdown {
 
   li {
     @include selectable-list;
+    @include aspect-dropdown-link(1em);
 
     .status_indicator {
       width: 19px;
       height: 14px;
       display: inline-block;
     }
-
-    a {
-      .text {
-        color: #333333;
-      }
-      &:hover {
-        background: $background-grey;
-      }
-      cursor: pointer;
-      padding-left: 10px;
-    }
   }
 }
+
 .aspect-membership {
   max-height: 300px;
   overflow: auto;

app/assets/stylesheets/mobile/mobile.scss

@@ -658,40 +658,44 @@ form#update_profile_form {
   .submit_block { margin-bottom: 20px; }
 }
 
-select#user_language, select#user_color_theme, #user_auto_follow_back_aspect_id, #aspect_ids_ {
-  padding: 3px;
-}
-
 .hero-unit-mobile {
-  padding: 10px;
-  font-size: 14px;
-  line-height: 18px;
-  color: inherit;
   background-color: $background-grey;
   border-radius: 10px;
+  color: inherit;
+  font-size: 14px;
+  line-height: 18px;
+  padding: 10px;
 }
 
 .search-mobile {
-  text-align: center;
   padding-top: 30px;
+  text-align: center;
 }
 
 input#q.search {
   margin-bottom: 20px;
 }
 
-select#aspect_ids_ {
-  width: auto !important;
-  float: right;
-  margin: 0px;
+.aspect-dropdown {
+  li {
+    @include selectable-list;
+    @include aspect-dropdown-link(128%);
+
+    .status-indicator {
+      display: inline-block;
+      height: 14px;
+      width: 19px;
+    }
+  }
 }
 
 #file-upload-spinner {
-  top: 0px;
+  top: 0;
 }
 
-#publisher_mobile {
+#publisher-mobile {
   float: right;
+  margin-left: 5px;
 }
 
 #file-upload-publisher {

app/assets/stylesheets/mobile/settings.scss

@@ -56,4 +56,8 @@
       width: 50px;
     }
   }
+
+  select {
+    padding: 3px;
+  }
 }

app/views/aspects/_aspect_dropdown.mobile.haml

@@ -0,0 +1,29 @@
+-# Note: all_aspects is a global in the ApplicationController
+
+.btn-group.aspect-dropdown
+  %button.btn.btn-default.dropdown-toggle{data: {toggle: "dropdown"}}
+    %span.text
+      = t("all_aspects")
+    %span.caret
+  %ul.dropdown-menu.pull-right{unSelectable: "on"}
+
+    %li.public.radio{"data-aspect_id" => "public"}
+      %a
+        %span.status-indicator
+          %i.glyphicon.glyphicon-ok
+        %span.text
+          = t("public")
+    %li.all-aspects.radio.selected{"data-aspect_id" => "all_aspects"}
+      %a
+        %span.status-indicator
+          %i.glyphicon.glyphicon-ok
+        %span.text
+          = t("all_aspects")
+    %li.divider
+    - all_aspects.each do |aspect|
+      %li.aspect-selector{"data-aspect_id" => aspect.id}
+        %a
+          %span.status-indicator
+            %i.glyphicon.glyphicon-ok
+          %span.text
+            = aspect.name

app/views/publisher/_publisher.mobile.haml

@@ -8,6 +8,7 @@
     = status.hidden_field :provider_display_name, value: 'mobile'
     = status.text_area :text, placeholder: t('shared.publisher.whats_on_your_mind'), rows: 4, autofocus: "autofocus", class: "form-control"
 
+  = hidden_field_tag "aspect_ids[]", "all_aspects"
   .form-group
     %span#publisher-service-icons
       - if current_user.services
@@ -16,27 +17,18 @@
             title: service.provider.titleize, class: "service_icon dim",
             id: "#{service.provider}", maxchar: "#{service.class::MAX_CHARACTERS}"
 
-    %select{id: "aspect_ids_", class: "form-control", name: "aspect_ids[]"}
-      %option{value: 'public'}
-        = t('public')
-
-      %option{value: 'all_aspects', selected: true}
-        = t('all_aspects')
-
-      - current_user.aspects.each do |aspect|
-        %option{value: aspect.id}
-          = "· #{aspect.name}"
-
     .clear
     #publisher-textarea-wrapper
       %ul#photodropzone
     #fileInfo-publisher
-
-    #file-upload-publisher{class: "btn btn-default"}
-      %i.entypo-camera.middle
-    #publisher_mobile
-      = submit_tag t("shared.publisher.share"),
-        class: "btn btn-primary",
-        id: "submit_new_message",
-        data: {"disable-with" => t("shared.publisher.posting")}
     .clearfix
+    .btn-toolbar
+      .pull-left#file-upload-publisher
+        %i.entypo-camera.middle
+      .pull-right#publisher-mobile
+        = submit_tag t("shared.publisher.share"),
+          class: "btn btn-primary",
+          id: "submit_new_message",
+          data: {"disable-with" => t("shared.publisher.posting")}
+      .pull-right
+        = render partial: "aspects/aspect_dropdown"

features/mobile/posts_from_main_page.feature

@@ -21,13 +21,31 @@ Feature: posting from the mobile main page
   Scenario: post and delete some text
     Given I visit the mobile publisher page
     And I append "I am eating yogurt" to the publisher
-    And I select "Unicorns" from "aspect_ids_"
-    And I press "Share"
+    And I press the aspect dropdown
+    And I toggle the aspect "Unicorns"
+    And I press the share button
     When I go to the stream page
     Then I should see "I am eating yogurt"
     When I confirm the alert after I click on selector "a.remove"
     Then I should not see "I am eating yogurt"
 
+  Scenario: post in multiple aspects
+    Given I visit the mobile publisher page
+    And I append "I am selecting my friends" to the publisher
+    And I press the aspect dropdown
+    And I toggle the aspect "PostingTo"
+    And I toggle the aspect "Unicorns"
+    And I press the share button
+
+    When I visit the stream with aspect "PostingTo"
+    Then I should see "I am selecting my friends"
+    
+    When I visit the stream with aspect "Unicorns"
+    Then I should see "I am selecting my friends"
+
+    When I visit the stream with aspect "NotPostingThingsHere"
+    Then I should not see "I am selecting my friends"
+
   Scenario: post a photo without text
     Given I visit the mobile publisher page
     When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"

features/step_definitions/aspects_steps.rb

@@ -2,7 +2,11 @@
 
 module AspectCukeHelpers
   def click_aspect_dropdown
-    find(".aspect-dropdown .dropdown-toggle").trigger "click"
+    find(".aspect-dropdown > .dropdown-toggle").click
+  end
+
+  def click_share_button
+    find("#submit_new_message").trigger "click"
   end
 
   def toggle_aspect(a_name)
@@ -112,6 +116,17 @@ When /^I press the aspect dropdown$/ do
   click_aspect_dropdown
 end
 
+When /^I press the share button$/ do
+  # There were issues 'clicking' the share button on mobile
+  click_share_button
+end
+
+When /^I visit the stream with aspect "([^"]*)"$/ do |aspect_name|
+  # In mobile view aspects are single anchors
+  a_id = @me.aspects.where(name: aspect_name).pick(:id)
+  visit("/aspects?a_ids[]=#{a_id}")
+end
+
 When /^(.*) in the aspect creation modal$/ do |action|
   within("#newAspectModal") do
     step action