#7080: SCSS adaptation for displaying the selection of the aspect selection button

6 files changed, 65 insertions, 48 deletions

diff --git a/app/assets/javascripts/mobile/publisher.js b/app/assets/javascripts/mobile/publisher.js
index b94578d7f..9267eb69b 100644
--- a/app/assets/javascripts/mobile/publisher.js
+++ b/app/assets/javascripts/mobile/publisher.js
@@ -50,19 +50,19 @@ $(document).ready(function(){
   new Diaspora.MarkdownEditor("#status_message_text");
 
   $(".dropdown-menu > li").bind("tap click", function(evt) {
-    var target = $(evt.target).closest('li');
+    var target = $(evt.target).closest("li");
 
     // visually toggle the aspect selection
-    if (target.is('.radio')) {
+    if (target.is(".radio")) {
       _toggleRadio(target);
-    } else if (target.is('.aspect_selector')) {
+    } else if (target.is(".aspect-selector")) {
       // don't close the dropdown
       evt.stopPropagation();
       _toggleCheckbox(target);
     }
 
     _updateSelectedAspectIds();
-    _updateButton('btn-default');
+    _updateButton("btn-default");
 
     // update the globe or lock icon
     var icon = $("#visibility-icon");
@@ -75,15 +75,15 @@ $(document).ready(function(){
     }
   });
 
-  function _toggleRadio (target) {
-    $('.dropdown-menu > li').removeClass('selected');
-    target.toggleClass('selected');
-  };
+  function _toggleRadio(target) {
+    $(".dropdown-menu > li").removeClass("selected");
+    target.toggleClass("selected");
+  }
 
-  function _toggleCheckbox (target) {
-    $('.dropdown-menu > li.radio').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() {
@@ -93,33 +93,31 @@ $(document).ready(function(){
     form.find('input[name="aspect_ids[]"]').remove();
 
     // create fields for current selection
-    $('.dropdown-menu > li.selected').each(function() {
-      var uid = _.uniqueId('aspect_ids_');
-      var id = $(this).data('aspect_id');
-      form.append(
-        '<input id="'+uid+'" name="aspect_ids[]" type="hidden" value="'+id+'">'
-      );
+    form.find(".dropdown-menu > li.selected").each(function() {
+      var uid = _.uniqueId("aspect_ids_");
+      var 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(inAspectClass) {
-    var button = $('.btn.dropdown-toggle'),
+    var button = $(".btn.dropdown-toggle"),
         selectedAspects = $(".dropdown-menu > li.selected").length,
         buttonText;
 
     if (selectedAspects === 0) {
-      button.removeClass(inAspectClass).addClass('btn-default');
+      button.removeClass(inAspectClass).addClass("btn-default");
       buttonText = Diaspora.I18n.t("aspect_dropdown.select_aspects");
     } else {
-      button.removeClass('btn-default').addClass(inAspectClass);
+      button.removeClass("btn-default").addClass(inAspectClass);
       if (selectedAspects === 1) {
         buttonText = this.$(".dropdown-menu > li.selected .text").first().text();
       } else {
-        buttonText = Diaspora.I18n.t("aspect_dropdown.toggle", { count: selectedAspects.toString() });
+        buttonText = Diaspora.I18n.t("aspect_dropdown.toggle", {count: selectedAspects.toString()});
       }
     }
 
-    button.find('.text').text(buttonText);
+    button.find(".text").text(buttonText);
   }
 });
diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss
index 63e0777e4..3f67eca05 100644
--- a/app/assets/stylesheets/mobile/mobile.scss
+++ b/app/assets/stylesheets/mobile/mobile.scss
@@ -658,7 +658,9 @@ form#update_profile_form {
   .submit_block { margin-bottom: 20px; }
 }
 
-select#user_language, select#user_color_theme, #user_auto_follow_back_aspect_id, #aspect_ids_ {
+select#user_language,
+select#user_color_theme,
+#user_auto_follow_back_aspect_id {
   padding: 3px;
 }
 
@@ -680,14 +682,39 @@ input#q.search {
   margin-bottom: 20px;
 }
 
-select#aspect_ids_ {
-  width: auto !important;
-  float: right;
-  margin: 0px;
+@mixin aspect-dropdown-link() {
+  $link-text-color: #333;
+
+  a {
+    cursor: pointer;
+    padding-left: 10px;
+
+    .text {
+      color: $link-text-color;
+      font-size: 128%;
+    }
+
+    &:hover {
+      background: $background-grey;
+    }
+  }
+}
+
+.aspect-dropdown {
+  li {
+    @include selectable-list;
+    @include aspect-dropdown-link;
+
+    .status-indicator {
+      display: inline-block;
+      height: 14px;
+      width: 19px;
+    }
+  }
 }
 
 #file-upload-spinner {
-  top: 0px;
+  top: 0;
 }
 
 #publisher_mobile {
diff --git a/app/views/aspects/_aspect_dropdown.mobile.haml b/app/views/aspects/_aspect_dropdown.mobile.haml
index 74fcbc6e8..3938c71c4 100644
--- a/app/views/aspects/_aspect_dropdown.mobile.haml
+++ b/app/views/aspects/_aspect_dropdown.mobile.haml
@@ -6,7 +6,7 @@
     dropdown_css["data-content"] = t("shared.public_explain.visibility_dropdown")
   end
 
-.btn-group.aspect_dropdown
+.btn-group.aspect-dropdown
   %button.btn.btn-default.dropdown-toggle{dropdown_css}
     %i.entypo-lock.small#visibility-icon
     %span.text
@@ -16,21 +16,21 @@
 
     %li.public.radio{"data-aspect_id" => "public"}
       %a
-        %span.status_indicator
+        %span.status-indicator
           %i.glyphicon.glyphicon-ok
         %span.text
           = t("public")
-    %li.all_aspects.radio.selected{"data-aspect_id" => "all_aspects"}
+    %li.all-aspects.radio.selected{"data-aspect_id" => "all_aspects"}
       %a
-        %span.status_indicator
+        %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}
+      %li.aspect-selector{"data-aspect_id" => aspect.id}
         %a
-          %span.status_indicator
+          %span.status-indicator
             %i.glyphicon.glyphicon-ok
           %span.text
             = aspect.name
diff --git a/app/views/publisher/_publisher.mobile.haml b/app/views/publisher/_publisher.mobile.haml
index 6a320da2e..e128e3382 100644
--- a/app/views/publisher/_publisher.mobile.haml
+++ b/app/views/publisher/_publisher.mobile.haml
@@ -17,16 +17,6 @@
             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}"
     .btn-toolbar.pull-right
       = render partial: "aspects/aspect_dropdown"
 
diff --git a/features/desktop/posts_from_main_page.feature b/features/desktop/posts_from_main_page.feature
index f4be7342b..38e108a8a 100644
--- a/features/desktop/posts_from_main_page.feature
+++ b/features/desktop/posts_from_main_page.feature
@@ -153,7 +153,7 @@ Feature: posting from the main page
       And I go to the aspects page
       Then I should not see "I am eating a yogurt"
 
-    Scenario: change post target aspects with the aspect-dropdown before posting
+    Scenario: change post target aspects with the aspect_dropdown before posting
       When I expand the publisher
       And I press the aspect dropdown
       And I toggle the aspect "PostingTo"
diff --git a/features/mobile/posts_from_main_page.feature b/features/mobile/posts_from_main_page.feature
index d8aad60b9..5afa1bc3e 100644
--- a/features/mobile/posts_from_main_page.feature
+++ b/features/mobile/posts_from_main_page.feature
@@ -21,7 +21,9 @@ 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 the aspect dropdown
+    And I toggle the aspect "Unicorns"
+    And I press the aspect dropdown
     And I press "Share"
     When I go to the stream page
     Then I should see "I am eating yogurt"