Use typeahead on conversations #7129
Conversation
|
Those are design propositions? |
|
Yep. We can discuss the design of the tags. |
|
I'll be in favour of keeping the design as close as possible of the mention one. Unifying, you know :p |
|
Ready for review. |
|
I'd prefer a representation of the recipients that is similar to the representation in the dropdown: name and handle left aligned, the handle smaller than the name. The margins for the avatar should all be the same. (Currently the left margin is bigger.) I'd also like a smaller close icon that is in the right upper corner and uses an Entypo icon. |
|
Yes, you're right, that's better:
But I prefer the close icon as it is, though:
|
|
BTW, the pills also show hovercard when hovered. I though it would be handy. |
ghost
mentioned this pull request
ghost
mentioned this pull request
| post :create, @hash | ||
| expect(response).not_to be_success | ||
| expect(response.body).to eq(I18n.t("conversations.create.fail")) | ||
| context "with nil contact" do |
There was a problem hiding this comment.
Unnecessary spacing detected.
|
Rebased and ready for another review. |
| this.bindTypeaheadEvents(); | ||
|
|
||
| this.getTagListElement().empty(); | ||
| if (opts.prefills) { |
There was a problem hiding this comment.
Nitpick: I'd prefer opts.prefill.
| }); | ||
| $("#contact_ids").attr("aria-labelledby", "toLabel").focus(); | ||
| addRecipient: function(person) { | ||
| var isRecipientAbsent = _(this.conversationRecipients).findIndex(_.matcher({handle: person.handle})) < 0; |
There was a problem hiding this comment.
We already use customSearch so this shouldn't be necessary.
There was a problem hiding this comment.
I prefer to keep it because it is also used when prefilling.
There was a problem hiding this comment.
How do you add users more than once when prefilling the list of recipients?
Our mentions view also uses the custom search and we don't need the extra check there.
prefillMention:
addPersonToMentions:
| $(evt.target).parents("form").submit(); | ||
| } | ||
| }, | ||
|
|
||
| onRemoveRecipient: function(evt) { |
There was a problem hiding this comment.
Just removeRecipient since that's what this function does.
|
|
||
| getTypeaheadElement: function() { | ||
| return this.$el.find("#contacts-search-input"); | ||
| }, |
There was a problem hiding this comment.
What's wrong with
this.typeaheadElement = this.$el.find("#contacts-search-input");in initialize?
|
|
||
| getContactsIdsListInput: function() { | ||
| return this.$el.find("#as-values-contact-ids"); | ||
| }, |
There was a problem hiding this comment.
this.contactsIdsListInput = this.$el.find("#as-values-contacts-ids");| @@ -0,0 +1,12 @@ | |||
| <div class="conversation-recipient-tag clearfix btn btn-primary" data-diaspora-handle="{{ handle }}"> | |||
There was a problem hiding this comment.
This is not a button so I don't like using the btn class here. Changing the color on hover and showing the cursor as a pointer gives me the impression that you can click on it to change something. I'd rather just have the same background as the primary buttons.
| .form-group | ||
| %label#subject-label{for: "conversation-subject"} | ||
| = t(".subject") | ||
| %label#subject-label{for: "conversation-subject"}= t(".subject") |
There was a problem hiding this comment.
I think this was more readable before.
| .recipients-tag-list.clearfix#recipients-tag-list | ||
| = text_field_tag "contact_autocomplete", nil, id: "contacts-search-input", class: "form-control" | ||
| - unless defined?(mobile) && mobile | ||
| = text_field_tag "person_ids", nil, id: "as-values-contact-ids", type: "hidden", |
There was a problem hiding this comment.
Why as-values-contact-ids? I thought as would be autoSuggest.
| elsif params[:aspect_id] | ||
| @contact_ids = current_user.aspects.find(params[:aspect_id]).contacts.map{|c| c.id}.join(',') | ||
| gon.push conversation_prefill: current_user.aspects.find(params[:aspect_id]).contacts.map {|c| c.person.as_json } |
There was a problem hiding this comment.
Do we need these for the mobile view, too? Otherwise you could move this down into the else branch.
| # This will have to be removed when mobile autocomplete is ported to Typeahead | ||
| recipients_param, column = [%i(contact_ids id), %i(person_ids person_id)].find {|param, _| params[param].present? } | ||
| if recipients_param | ||
| person_ids = current_user.contacts.where(column => params[recipients_param].split(",")).pluck(:person_id) |
There was a problem hiding this comment.
Shouldn't we use current_user.contacts.mutual... here?
There was a problem hiding this comment.
This is related to #7002. The UI already doesn't allow you to create a conversation with non-mutual contacts and doing the same in the controller would be the next logical step.
But that would be another change of behavior that would need some additional tests. So I'd say let's keep it like it is and change it to mutual contacts later.
|
Done. |
because the desktop view doesn't use the name parameter anymore
* append html to spec.content() instead of body * don't append the unused conversations modal fixture * actually test that showModal has been called
* test that tag element are removed when clicking the tag's remove button
* append html to spec.content() instead of body * don't append the unused conversations modal fixture * actually test that showModal has been called
|
Merged. Thanks @AugierLe42e and @svbergerem for the work! |
ghost
deleted the
|
Awesome work guys :D |
|
Nice! |
|
@SansPseudoFix Yes, thank you! |
Typeahead results:
Conversation with one recipiant:
When recipient tag is hovered: