From 8e01a66cb5c2eecd0010280d5c71d7e3c8ec3f80 Mon Sep 17 00:00:00 2001 From: Thorsten Claus 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(''); }); } // 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