diff options
-rw-r--r-- | Changelog.md | 1 | ||||
-rw-r--r-- | app/assets/javascripts/app/views/aspects_dropdown_view.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/app/views/publisher/aspect_selector_view.js | 4 | ||||
-rw-r--r-- | app/assets/javascripts/mobile/publisher.js | 70 | ||||
-rw-r--r-- | app/assets/stylesheets/_mixins.scss | 20 | ||||
-rw-r--r-- | app/assets/stylesheets/aspects.scss | 15 | ||||
-rw-r--r-- | app/assets/stylesheets/mobile/mobile.scss | 34 | ||||
-rw-r--r-- | app/assets/stylesheets/mobile/settings.scss | 4 | ||||
-rw-r--r-- | app/views/aspects/_aspect_dropdown.mobile.haml | 29 | ||||
-rw-r--r-- | app/views/publisher/_publisher.mobile.haml | 30 | ||||
-rw-r--r-- | features/mobile/posts_from_main_page.feature | 22 | ||||
-rw-r--r-- | features/step_definitions/aspects_steps.rb | 17 |
12 files changed, 197 insertions, 55 deletions
diff --git a/Changelog.md b/Changelog.md index 54a27b64c..60c334f4f 100644 --- a/Changelog.md +++ b/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 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 9bac0f0bf..b7d566452 100644 --- a/app/assets/javascripts/mobile/publisher.js +++ b/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); + } }); 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 63e0777e4..2a88055e6 100644 --- a/app/assets/stylesheets/mobile/mobile.scss +++ b/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 { diff --git a/app/assets/stylesheets/mobile/settings.scss b/app/assets/stylesheets/mobile/settings.scss index 9c959beb4..0880462d3 100644 --- a/app/assets/stylesheets/mobile/settings.scss +++ b/app/assets/stylesheets/mobile/settings.scss @@ -56,4 +56,8 @@ width: 50px; } } + + select { + padding: 3px; + } } diff --git a/app/views/aspects/_aspect_dropdown.mobile.haml b/app/views/aspects/_aspect_dropdown.mobile.haml new file mode 100644 index 000000000..222e6f002 --- /dev/null +++ b/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 diff --git a/app/views/publisher/_publisher.mobile.haml b/app/views/publisher/_publisher.mobile.haml index e031c1027..da881fa25 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,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" diff --git a/features/mobile/posts_from_main_page.feature b/features/mobile/posts_from_main_page.feature index d8aad60b9..90b9e6d88 100644 --- a/features/mobile/posts_from_main_page.feature +++ b/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" 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 |