From 29fa1e582af411f18d188eb6e190ecd36ee0089f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Adam?= <sebastien.adam.webdev@gmail.com>
Date: Tue, 29 Aug 2017 15:58:38 +0200
Subject: #7080 using aspect selecting button form html into mobile version

---
 app/views/aspects/_aspect_dropdown.mobile.haml | 36 ++++++++++++++++++++++++++
 app/views/publisher/_publisher.mobile.haml     | 19 ++++++++------
 2 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 app/views/aspects/_aspect_dropdown.mobile.haml

diff --git a/app/views/aspects/_aspect_dropdown.mobile.haml b/app/views/aspects/_aspect_dropdown.mobile.haml
new file mode 100644
index 000000000..807f295f2
--- /dev/null
+++ b/app/views/aspects/_aspect_dropdown.mobile.haml
@@ -0,0 +1,36 @@
+-# Note: all_aspects is a global in the ApplicationController
+:ruby
+  dropdown_css = {"data-toggle" => "dropdown"}
+  if current_user.getting_started?
+    dropdown_css[:title] = popover_with_close_html("2. #{t('shared.public_explain.control_your_audience')}")
+    dropdown_css["data-content"] = t("shared.public_explain.visibility_dropdown")
+  end
+
+.btn-group.aspect_dropdown
+  %button.btn.btn-default.dropdown-toggle{dropdown_css}
+    %i.entypo-lock.small#visibility-icon
+    %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{"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
diff --git a/app/views/publisher/_publisher.mobile.haml b/app/views/publisher/_publisher.mobile.haml
index e031c1027..6a320da2e 100644
--- a/app/views/publisher/_publisher.mobile.haml
+++ b/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,16 +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')
+    -# %select{id: "aspect_ids_", class: "form-control", name: "aspect_ids[]"}
+    -#   %option{value: 'public'}
+    -#     = t('public')
 
-      %option{value: 'all_aspects', selected: true}
-        = t('all_aspects')
+    -#   %option{value: 'all_aspects', selected: true}
+    -#     = t('all_aspects')
 
-      - current_user.aspects.each do |aspect|
-        %option{value: aspect.id}
-          = "· #{aspect.name}"
+    -#   - current_user.aspects.each do |aspect|
+    -#     %option{value: aspect.id}
+    -#       = "· #{aspect.name}"
+    .btn-toolbar.pull-right
+      = render partial: "aspects/aspect_dropdown"
 
     .clear
     #publisher-textarea-wrapper
-- 
cgit v1.2.3


From fa39f7d34839704ec9becb9a13a2351893de0c6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Adam?= <sebastien.adam.webdev@gmail.com>
Date: Wed, 30 Aug 2017 16:21:03 +0200
Subject: #7080 Adaptation of the JS for the behavior of the aspect selection
 button.

---
 app/assets/javascripts/mobile/publisher.js     | 74 ++++++++++++++++++++++++++
 app/views/aspects/_aspect_dropdown.mobile.haml |  2 +-
 2 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/mobile/publisher.js b/app/assets/javascripts/mobile/publisher.js
index 9bac0f0bf..b94578d7f 100644
--- a/app/assets/javascripts/mobile/publisher.js
+++ b/app/assets/javascripts/mobile/publisher.js
@@ -48,4 +48,78 @@ $(document).ready(function(){
   });
 
   new Diaspora.MarkdownEditor("#status_message_text");
+
+  $(".dropdown-menu > li").bind("tap click", function(evt) {
+    var 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('btn-default');
+
+    // update the globe or lock icon
+    var 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() {
+    var form = $("#new_status_message");
+
+    // remove previous selection
+    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+'">'
+      );
+    });
+  };
+
+  // change class and text of the dropdown button
+  function _updateButton(inAspectClass) {
+    var button = $('.btn.dropdown-toggle'),
+        selectedAspects = $(".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 {
+        buttonText = Diaspora.I18n.t("aspect_dropdown.toggle", { count: selectedAspects.toString() });
+      }
+    }
+
+    button.find('.text').text(buttonText);
+  }
 });
diff --git a/app/views/aspects/_aspect_dropdown.mobile.haml b/app/views/aspects/_aspect_dropdown.mobile.haml
index 807f295f2..74fcbc6e8 100644
--- a/app/views/aspects/_aspect_dropdown.mobile.haml
+++ b/app/views/aspects/_aspect_dropdown.mobile.haml
@@ -20,7 +20,7 @@
           %i.glyphicon.glyphicon-ok
         %span.text
           = t("public")
-    %li.all_aspects.radio{"data-aspect_id" => "all_aspects"}
+    %li.all_aspects.radio.selected{"data-aspect_id" => "all_aspects"}
       %a
         %span.status_indicator
           %i.glyphicon.glyphicon-ok
-- 
cgit v1.2.3


From 71c856e330a590d71b27ee64793695224fe65dbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Adam?= <sebastien.adam.webdev@gmail.com>
Date: Wed, 30 Aug 2017 16:43:41 +0200
Subject: #7080: SCSS adaptation for displaying the selection of the aspect
 selection button

---
 app/assets/javascripts/mobile/publisher.js     | 46 ++++++++++++--------------
 app/assets/stylesheets/mobile/mobile.scss      | 39 ++++++++++++++++++----
 app/views/aspects/_aspect_dropdown.mobile.haml | 12 +++----
 app/views/publisher/_publisher.mobile.haml     | 10 ------
 features/desktop/posts_from_main_page.feature  |  2 +-
 features/mobile/posts_from_main_page.feature   |  4 ++-
 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"
-- 
cgit v1.2.3


From 8e01a66cb5c2eecd0010280d5c71d7e3c8ec3f80 Mon Sep 17 00:00:00 2001
From: Thorsten Claus <thorstenclaus@web.de>
Date: Sat, 6 Mar 2021 20:28:46 +0100
Subject: Finishing Touches

---
 .../javascripts/app/views/aspects_dropdown_view.js |  6 ++--
 .../app/views/publisher/aspect_selector_view.js    |  4 +--
 app/assets/javascripts/mobile/publisher.js         | 34 ++++++++++------------
 app/assets/stylesheets/mobile/mobile.scss          | 19 +++++-------
 app/assets/stylesheets/mobile/settings.scss        |  6 ++++
 app/views/aspects/_aspect_dropdown.mobile.haml     |  9 +-----
 app/views/publisher/_publisher.mobile.haml         | 21 +++++++------
 app/views/users/_edit.haml                         |  6 ++--
 features/desktop/posts_from_main_page.feature      |  2 +-
 features/mobile/posts_from_main_page.feature       | 20 +++++++++++--
 features/step_definitions/aspects_steps.rb         | 17 ++++++++++-
 11 files changed, 82 insertions(+), 62 deletions(-)

diff --git a/app/assets/javascripts/app/views/aspects_dropdown_view.js b/app/assets/javascripts/app/views/aspects_dropdown_view.js
index ae9d7d897..df7c4d690 100644
--- a/app/assets/javascripts/app/views/aspects_dropdown_view.js
+++ b/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 {
diff --git a/app/assets/javascripts/app/views/publisher/aspect_selector_view.js b/app/assets/javascripts/app/views/publisher/aspect_selector_view.js
index 5e65e63ec..40e9e51dd 100644
--- a/app/assets/javascripts/app/views/publisher/aspect_selector_view.js
+++ b/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
diff --git a/app/assets/javascripts/mobile/publisher.js b/app/assets/javascripts/mobile/publisher.js
index 9267eb69b..b7d566452 100644
--- a/app/assets/javascripts/mobile/publisher.js
+++ b/app/assets/javascripts/mobile/publisher.js
@@ -50,7 +50,7 @@ $(document).ready(function(){
   new Diaspora.MarkdownEditor("#status_message_text");
 
   $(".dropdown-menu > li").bind("tap click", function(evt) {
-    var target = $(evt.target).closest("li");
+    let target = $(evt.target).closest("li");
 
     // visually toggle the aspect selection
     if (target.is(".radio")) {
@@ -62,10 +62,10 @@ $(document).ready(function(){
     }
 
     _updateSelectedAspectIds();
-    _updateButton("btn-default");
+    _updateButton();
 
     // update the globe or lock icon
-    var icon = $("#visibility-icon");
+    let icon = $("#visibility-icon");
     if (target.find(".text").text().trim() === Diaspora.I18n.t("stream.public")) {
       icon.removeClass("entypo-lock");
       icon.addClass("entypo-globe");
@@ -87,37 +87,35 @@ $(document).ready(function(){
 
   // take care of the form fields that will indicate the selected aspects
   function _updateSelectedAspectIds() {
-    var form = $("#new_status_message");
+    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() {
-      var uid = _.uniqueId("aspect_ids_");
-      var id = $(this).data("aspect_id");
+      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(inAspectClass) {
-    var button = $(".btn.dropdown-toggle"),
+  function _updateButton() {
+    let button = $(".btn.dropdown-toggle"),
         selectedAspects = $(".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 {
+    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);
   }
 });
diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss
index 3f67eca05..f3998a7c7 100644
--- a/app/assets/stylesheets/mobile/mobile.scss
+++ b/app/assets/stylesheets/mobile/mobile.scss
@@ -658,24 +658,18 @@ form#update_profile_form {
   .submit_block { margin-bottom: 20px; }
 }
 
-select#user_language,
-select#user_color_theme,
-#user_auto_follow_back_aspect_id {
-  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 {
@@ -717,8 +711,9 @@ input#q.search {
   top: 0;
 }
 
-#publisher_mobile {
+#publisher-mobile {
   float: right;
+  margin-left: 5px;
 }
 
 #file-upload-publisher {
diff --git a/app/assets/stylesheets/mobile/settings.scss b/app/assets/stylesheets/mobile/settings.scss
index 9c959beb4..f49b0ee88 100644
--- a/app/assets/stylesheets/mobile/settings.scss
+++ b/app/assets/stylesheets/mobile/settings.scss
@@ -57,3 +57,9 @@
     }
   }
 }
+
+.user-language,
+.user-color-theme,
+.aspect-id {
+  padding: 3px;
+}
diff --git a/app/views/aspects/_aspect_dropdown.mobile.haml b/app/views/aspects/_aspect_dropdown.mobile.haml
index 3938c71c4..222e6f002 100644
--- a/app/views/aspects/_aspect_dropdown.mobile.haml
+++ b/app/views/aspects/_aspect_dropdown.mobile.haml
@@ -1,14 +1,7 @@
 -# Note: all_aspects is a global in the ApplicationController
-:ruby
-  dropdown_css = {"data-toggle" => "dropdown"}
-  if current_user.getting_started?
-    dropdown_css[:title] = popover_with_close_html("2. #{t('shared.public_explain.control_your_audience')}")
-    dropdown_css["data-content"] = t("shared.public_explain.visibility_dropdown")
-  end
 
 .btn-group.aspect-dropdown
-  %button.btn.btn-default.dropdown-toggle{dropdown_css}
-    %i.entypo-lock.small#visibility-icon
+  %button.btn.btn-default.dropdown-toggle{data: {toggle: "dropdown"}}
     %span.text
       = t("all_aspects")
     %span.caret
diff --git a/app/views/publisher/_publisher.mobile.haml b/app/views/publisher/_publisher.mobile.haml
index e128e3382..da881fa25 100644
--- a/app/views/publisher/_publisher.mobile.haml
+++ b/app/views/publisher/_publisher.mobile.haml
@@ -17,19 +17,18 @@
             title: service.provider.titleize, class: "service_icon dim",
             id: "#{service.provider}", maxchar: "#{service.class::MAX_CHARACTERS}"
 
-    .btn-toolbar.pull-right
-      = render partial: "aspects/aspect_dropdown"
-
     .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"
diff --git a/app/views/users/_edit.haml b/app/views/users/_edit.haml
index e20bcff44..86c0011fd 100644
--- a/app/views/users/_edit.haml
+++ b/app/views/users/_edit.haml
@@ -62,7 +62,7 @@
         %h3= t(".change_language")
         = form_for "user", url: edit_user_path, html: {method: :put} do |f|
           .form-inline.clearfix
-            = f.select :language, available_language_options, {}, class: "form-control form-group"
+            = f.select :language, available_language_options, {}, class: "form-control form-group user-language"
             = f.submit t(".change_language"), class: "btn btn-primary pull-right"
     %hr
 
@@ -71,7 +71,7 @@
         %h3= t(".change_color_theme")
         = form_for "user", url: edit_user_path, html: {method: :put} do |f|
           .form-inline.clearfix
-            = f.select :color_theme, available_color_themes, {}, class: "form-control form-group"
+            = f.select :color_theme, available_color_themes, {}, class: "form-control form-group color-theme"
             = f.submit t(".change_color_theme"), class: "btn btn-primary pull-right"
     %hr
 
@@ -110,7 +110,7 @@
               = f.select :auto_follow_back_aspect_id,
                 aspect_options_for_select(current_user.aspects),
                 {},
-                class: "form-control"
+                class: "form-control aspect-id"
 
           .small-horizontal-spacer
           .clearfix= f.submit t(".change"), class: "btn btn-primary pull-right"
diff --git a/features/desktop/posts_from_main_page.feature b/features/desktop/posts_from_main_page.feature
index 38e108a8a..f4be7342b 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 5afa1bc3e..90b9e6d88 100644
--- a/features/mobile/posts_from_main_page.feature
+++ b/features/mobile/posts_from_main_page.feature
@@ -23,13 +23,29 @@ Feature: posting from the mobile main page
     And I append "I am eating yogurt" to the publisher
     And I press the aspect dropdown
     And I toggle the aspect "Unicorns"
-    And I press the aspect dropdown
-    And I press "Share"
+    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"
diff --git a/features/step_definitions/aspects_steps.rb b/features/step_definitions/aspects_steps.rb
index 4a5c9e577..e025200d1 100644
--- a/features/step_definitions/aspects_steps.rb
+++ b/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
-- 
cgit v1.2.3


From 65456c7f5e6663c03fb1a661f440779f665b9b21 Mon Sep 17 00:00:00 2001
From: Thorsten Claus <thorstenclaus@web.de>
Date: Fri, 2 Sep 2022 22:30:29 +0200
Subject: Using mixins for aspects css style

---
 app/assets/stylesheets/_mixins.scss         | 20 +++++++++++++++++++-
 app/assets/stylesheets/aspects.scss         | 15 ++++-----------
 app/assets/stylesheets/mobile/mobile.scss   | 20 +-------------------
 app/assets/stylesheets/mobile/settings.scss |  8 +++-----
 app/views/users/_edit.haml                  |  6 +++---
 5 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss
index 17523f226..1f3dfb1b6 100644
--- a/app/assets/stylesheets/_mixins.scss
+++ b/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;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/aspects.scss b/app/assets/stylesheets/aspects.scss
index dce9a065d..5d79f11a8 100644
--- a/app/assets/stylesheets/aspects.scss
+++ b/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;
diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss
index f3998a7c7..2a88055e6 100644
--- a/app/assets/stylesheets/mobile/mobile.scss
+++ b/app/assets/stylesheets/mobile/mobile.scss
@@ -676,28 +676,10 @@ input#q.search {
   margin-bottom: 20px;
 }
 
-@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;
+    @include aspect-dropdown-link(128%);
 
     .status-indicator {
       display: inline-block;
diff --git a/app/assets/stylesheets/mobile/settings.scss b/app/assets/stylesheets/mobile/settings.scss
index f49b0ee88..0880462d3 100644
--- a/app/assets/stylesheets/mobile/settings.scss
+++ b/app/assets/stylesheets/mobile/settings.scss
@@ -56,10 +56,8 @@
       width: 50px;
     }
   }
-}
 
-.user-language,
-.user-color-theme,
-.aspect-id {
-  padding: 3px;
+  select {
+    padding: 3px;
+  }
 }
diff --git a/app/views/users/_edit.haml b/app/views/users/_edit.haml
index 86c0011fd..e20bcff44 100644
--- a/app/views/users/_edit.haml
+++ b/app/views/users/_edit.haml
@@ -62,7 +62,7 @@
         %h3= t(".change_language")
         = form_for "user", url: edit_user_path, html: {method: :put} do |f|
           .form-inline.clearfix
-            = f.select :language, available_language_options, {}, class: "form-control form-group user-language"
+            = f.select :language, available_language_options, {}, class: "form-control form-group"
             = f.submit t(".change_language"), class: "btn btn-primary pull-right"
     %hr
 
@@ -71,7 +71,7 @@
         %h3= t(".change_color_theme")
         = form_for "user", url: edit_user_path, html: {method: :put} do |f|
           .form-inline.clearfix
-            = f.select :color_theme, available_color_themes, {}, class: "form-control form-group color-theme"
+            = f.select :color_theme, available_color_themes, {}, class: "form-control form-group"
             = f.submit t(".change_color_theme"), class: "btn btn-primary pull-right"
     %hr
 
@@ -110,7 +110,7 @@
               = f.select :auto_follow_back_aspect_id,
                 aspect_options_for_select(current_user.aspects),
                 {},
-                class: "form-control aspect-id"
+                class: "form-control"
 
           .small-horizontal-spacer
           .clearfix= f.submit t(".change"), class: "btn btn-primary pull-right"
-- 
cgit v1.2.3