diff --git a/Changelog.md b/Changelog.md
index 5a4ae4e0e7a3ae42f5d40eed696d936bce2c6017..330948c791bda301432e8a41650a1875941c6d16 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -8,6 +8,7 @@
* Clarify explanations and defaults in diaspora.yml.example [#5088](https://github.com/diaspora/diaspora/pull/5088)
* Consistent header spacing on Bootstrap pages [#5108](https://github.com/diaspora/diaspora/pull/5108)
* Port settings pages (account, profile, privacy, services) to Bootstrap [#5039](https://github.com/diaspora/diaspora/pull/5039)
+* Port contacts and community spotlight pages to Bootstrap [#5118](https://github.com/diaspora/diaspora/pull/5118)
## Bug fixes
* Fix hiding of poll publisher on close [#5029](https://github.com/diaspora/diaspora/issues/5029)
diff --git a/app/assets/javascripts/aspect-edit-pane.js b/app/assets/javascripts/aspect-edit-pane.js
index 71b0e041b2c8f87ea54fc0814cc5bfa31a91066a..57be91bd2d54a94dc073210bb2488ff0ac55c10f 100644
--- a/app/assets/javascripts/aspect-edit-pane.js
+++ b/app/assets/javascripts/aspect-edit-pane.js
@@ -41,8 +41,8 @@ app.tmp || (app.tmp = {});
// on the contacts page, viewing the facebox for single aspect
app.tmp.ContactAspectsBox = function() {
- $('body').on('click', '#aspect_edit_pane a.add.button', _.bind(this.addToAspect, this));
- $('body').on('click', '#aspect_edit_pane a.added.button', _.bind(this.removeFromAspect, this));
+ $('body').on('click', '#aspect_edit_pane a.add.btn', _.bind(this.addToAspect, this));
+ $('body').on('click', '#aspect_edit_pane a.added.btn', _.bind(this.removeFromAspect, this));
};
_.extend(app.tmp.ContactAspectsBox.prototype, {
addToAspect: function(evt) {
diff --git a/app/assets/stylesheets/aspects.css.scss b/app/assets/stylesheets/aspects.css.scss
index 6389959e5a3207b345e2cf0bfc1782149572893f..0bd8917f13ba0cee6b154d8786e8a77b05265c95 100644
--- a/app/assets/stylesheets/aspects.css.scss
+++ b/app/assets/stylesheets/aspects.css.scss
@@ -25,6 +25,20 @@
}
}
+.btn {
+ &.delete {
+ color: desaturate($red,10%);
+ }
+}
+
+.modify_aspect {
+ background: url("icons/pencil.png") no-repeat;
+ width: 12px;
+ height: 12px;
+ display: inline-block;
+}
+
+
/* -- Used in contacts/index.html.haml -- */
#aspect_controls {
@@ -37,7 +51,7 @@
.button, .button_to {
margin-right: 5px;
}
-
+
.button_to { display: inline-block; }
.contact_visibility_padlock,
@@ -56,6 +70,26 @@
}
}
+#aspect_nav {
+ list-style-type: none;
+
+ .icons-check_yes_ok {
+ height:18px;
+ width:18px;
+ background: url('icons/check_yes_ok.png') no-repeat;
+ float: left;
+ visibility: hidden;
+
+ &.selected {
+ visibility: visible;
+ }
+
+ &.selected + a {
+ color: #333333;
+ }
+ }
+}
+
.contact_visibility_padlock {
height: 16px;
width: 16px;
@@ -137,12 +171,17 @@
margin-bottom: 5px;
}
+ #aspect_name_title {
+ margin: 0px 0px 5px 0px;
+ }
+
#contact_list_search {
width: 200px;
+ margin-bottom: 2px;
margin-top: 0px;
float: right;
}
-
+
.contact_list,
.aspect_list {
@include border-radius(3px);
@@ -196,18 +235,28 @@
border: 1px solid $border-dark-grey;
&.hidden { display: none; }
- & > .name { white-space: nowrap; }
&.remote_friend { width: 285px; }
- a.button {
+ & > .name {
+ font-size: 16px;
+ margin: 0px 0px 5px 0px;
+ white-space: nowrap;
+ }
+
+ a.btn {
@include box-shadow(0,0,0);
border-bottom: none;
- min-width: auto;
+ min-width: 90px;
float: right;
- padding: 2px 4px;
+ padding: 2px 0px;
margin-top: 5px;
+ margin-right: -5px;
+
+ &.added {
+ @include linear-gradient(rgb(158,255,153), rgb(92,199,86));
+ background-color: rgb(92,199,86);
+ }
- &.added { @include linear-gradient(rgb(158,255,153), rgb(92,199,86)); }
&.added.remove {
@include linear-gradient(rgb(255,153,153), rgb(199,86,86));
@@ -260,6 +309,7 @@
form {
display: inline-block;
+ margin: 0px;
}
.creation {
@@ -267,3 +317,65 @@
}
}
}
+
+#leftNavBar {
+ color: #222222;
+
+ ul {
+ margin: 0px;
+ padding: 0px;
+ }
+
+ a {
+ color: $link-grey;
+ font-weight: bold;
+ text-decoration: none;
+ }
+
+ .selected { color: $black; }
+ .selected a { color: $black; }
+
+ .hoverable {
+ display: block;
+ margin-right: 6px;
+ padding: 4px;
+ &:hover { background-color: $background-blue; }
+
+ .label {
+ background-color: $background-grey;
+ color: $text-grey;
+ float: right;
+ padding: 3px 5px;
+ }
+ }
+
+ .selectable {
+ display: block;
+ margin-left: 21px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .action {
+ width: 12px;
+ height: 12px;
+ display: none;
+ float: right;
+ margin: 3px;
+ }
+
+ .hoverable:hover > .action {
+ display: block;
+ }
+}
+
+#new_aspect {
+ #aspect_contacts_visible.checkbox {
+ margin: 0px;
+ }
+
+ label[for="aspect_contacts_visible"] {
+ display: inline;
+ }
+}
+
diff --git a/app/assets/stylesheets/colors.css.scss b/app/assets/stylesheets/colors.css.scss
index 4fd10ecf1bb43050638d23ad676cb64f5c62378c..94b8c4b40d7726abe6760ba095f3f41dc07d8311 100644
--- a/app/assets/stylesheets/colors.css.scss
+++ b/app/assets/stylesheets/colors.css.scss
@@ -2,6 +2,7 @@ $highlight-white: #FAFAFA;
$background-white: #FFFFFF;
$background-grey: #EEEEEE;
+$background-blue: #E7F2F7;
$grey: #2B2B2B;
$light-grey: #DDDDDD;
diff --git a/app/assets/stylesheets/contacts.css.scss b/app/assets/stylesheets/contacts.css.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e98596f685940302e1c49bf2fe994911a091f95c
--- /dev/null
+++ b/app/assets/stylesheets/contacts.css.scss
@@ -0,0 +1,82 @@
+#section_header {
+ h3 {
+ border-bottom: 1px solid $border-grey;
+ }
+}
+
+#people_stream {
+ .bd {
+ font-size: 13px;
+ line-height: 19.5px;
+ }
+
+ .btn-group {
+ margin-top: 5px;
+
+ .caret {
+ margin-top: 8px;
+ }
+
+ .text {
+ text-shadow: none;
+ }
+ }
+
+ .info {
+ font-size: 11px;
+ line-height: 16.5px;
+ }
+
+ .stream_element {
+ border-bottom: 1px solid $border-grey;
+
+ .icons-monotone_close_exit_delete {
+ margin-top: 8px;
+ }
+
+ .media {
+ margin: 10px;
+ }
+ }
+}
+
+#community_spotlight {
+ .avatar {
+ width: 140px;
+ height: 140px;
+ }
+
+ .user_card {
+ @include border-radius(3px);
+ @include box-shadow(0,1px,5px,#ccc);
+
+ border: 1px solid #ccc;
+ display: inline-block;
+ margin-bottom: 15px;
+ margin-right: 10px;
+ min-height: 220px;
+ padding: 10px 10px 30px 10px;
+ position: relative;
+ vertical-align: top;
+ width: 140px;
+
+ h4 {
+ margin-bottom: 0px;
+ padding-bottom: 2px;
+ }
+
+ .add_user_to_aspect {
+ bottom: 10px;
+ right: 10px;
+ position: absolute;
+ }
+
+ .dropdown {
+ width: 100%;
+ }
+
+ .tags {
+ color: $text-grey;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss
index 5a4fc311b80eec71a3b8840f2e65b3124f7549a0..782348799c31d28c876a712cfaf95fe9574e581f 100644
--- a/app/assets/stylesheets/new-templates.css.scss
+++ b/app/assets/stylesheets/new-templates.css.scss
@@ -58,3 +58,6 @@
/* stream */
@import 'tag';
+
+/* contacts */
+@import 'contacts';
\ No newline at end of file
diff --git a/app/controllers/contacts_controller.rb b/app/controllers/contacts_controller.rb
index 0f7573bda4ab81d464841aff8d4750cd34b3af4f..68e3f6469e7224cc06f50d2c7fc9fb66ebdbcdb6 100644
--- a/app/controllers/contacts_controller.rb
+++ b/app/controllers/contacts_controller.rb
@@ -5,6 +5,8 @@
class ContactsController < ApplicationController
before_filter :authenticate_user!
+ use_bootstrap_for :index, :spotlight
+
def index
respond_to do |format|
diff --git a/app/helpers/aspects_helper.rb b/app/helpers/aspects_helper.rb
index a4260ebe421235dbb1fd1ccec6bfd6c9795bb7cc..0c781e9866baa4d66ef92270ff3d65bb0a53390e 100644
--- a/app/helpers/aspects_helper.rb
+++ b/app/helpers/aspects_helper.rb
@@ -12,7 +12,7 @@ module AspectsHelper
:person_id => person_id
},
:method => 'post',
- :class => 'add button',
+ :class => 'add btn',
'data-aspect_id' => aspect_id,
'data-person_id' => person_id
end
@@ -24,7 +24,7 @@ module AspectsHelper
:id => membership_id
},
:method => 'delete',
- :class => 'added button',
+ :class => 'added btn',
'data-membership_id' => membership_id,
'data-aspect_id' => aspect_id,
'data-person_id' => person_id
@@ -50,7 +50,7 @@ module AspectsHelper
title = t('aspects.edit.aspect_list_is_not_visible');
end
- link_to aspect_toggle_contact_visibility_path(@aspect), class: 'contact_visibility_link button', title: title, method: :put, remote: true do
+ link_to aspect_toggle_contact_visibility_path(@aspect), class: 'contact_visibility_link btn', title: title, method: :put, remote: true do
concat t('aspects.edit.set_visibility')
concat content_tag(:span, nil, class: "contact_visibility_padlock " + icon)
end
diff --git a/app/helpers/contacts_helper.rb b/app/helpers/contacts_helper.rb
index cd7ffe32b18fc972b3a8de6c2f5f75d3639b69cb..53edbc6e000dd186b1d1eba969848490a26bb328 100644
--- a/app/helpers/contacts_helper.rb
+++ b/app/helpers/contacts_helper.rb
@@ -24,7 +24,7 @@ module ContactsHelper
def start_a_conversation_link(aspect, contacts_size)
suggested_limit = 16
- conv_opts = { class: "button conversation_button", rel: "facebox"}
+ conv_opts = { class: "btn conversation_button", rel: "facebox"}
conv_opts[:title] = t('.many_people_are_you_sure', suggested_limit: suggested_limit) if contacts_size > suggested_limit
link_to new_conversation_path(aspect_id: aspect.id, name: aspect.name), conv_opts do
diff --git a/app/views/aspects/edit.html.haml b/app/views/aspects/edit.html.haml
index 59610fd9501135bb004dbbc94c77d7d68ce9839b..f2c2d7d759dbd88293b276bd530600cf701b26d8 100644
--- a/app/views/aspects/edit.html.haml
+++ b/app/views/aspects/edit.html.haml
@@ -12,13 +12,13 @@
#aspect_name_edit.hidden
= form_for @aspect, :remote => true do |aspect|
= aspect.text_field :name, :maxlength => 20
- = aspect.submit t('.update'), 'data-disable-with' => t('.updating'), :class => 'button'
+ = aspect.submit t('.update'), 'data-disable-with' => t('.updating'), :class => 'btn'
- if @contacts.count > 0
= render 'shared/contact_list', :aspect => @aspect, :contacts => @contacts
.bottom_submit_section
- = button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'button delete'
+ = button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'btn delete'
= aspect_visibility_link(@aspect)
- = submit_tag t('.done'), :class => 'button creation', :rel => 'close'
+ = submit_tag t('.done'), :class => 'btn creation', :rel => 'close'
diff --git a/app/views/aspects/new.haml b/app/views/aspects/new.haml
index 9fafc9331dbd49f665b956b16fe48e2600f3b551..82a90bdb3eeeff3f9533d7f4913c5a0a72763e34 100644
--- a/app/views/aspects/new.haml
+++ b/app/views/aspects/new.haml
@@ -2,7 +2,9 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
-.span-12.last
+-# TODO: remove Blueprint classes when everything is ported to Bootstrap
+
+.span6.span-12.last
#facebox_header
%h3
= t('contacts.index.add_a_new_aspect')
@@ -16,11 +18,11 @@
= aspect.text_field :name, :maxlength => 20
%p.checkbox_select
+ = aspect.check_box :contacts_visible, :checked => false, class: 'checkbox'
= aspect.label :contacts_visible, t('aspects.edit.make_aspect_list_visible')
- = aspect.check_box :contacts_visible, :checked => false
%br
.bottom_submit_section
- = submit_tag t('cancel'), :class => 'button', :type => :reset, :rel => "close"
- = aspect.submit t('.create'), :class => 'button creation'
+ = submit_tag t('cancel'), :class => 'button btn', :type => :reset, :rel => "close"
+ = aspect.submit t('.create'), :class => 'button btn creation'
diff --git a/app/views/contacts/_aspect_listings.haml b/app/views/contacts/_aspect_listings.haml
index c78e8eec898891e2e704f5ea1b040a4a6f36246d..b72acc8ead24877ee8cbc8b386d622f815d13f70 100644
--- a/app/views/contacts/_aspect_listings.haml
+++ b/app/views/contacts/_aspect_listings.haml
@@ -6,13 +6,13 @@
%li.all_aspects{:class => ("active" if params["set"] != "all" && params["set"] != "only_sharing" && !@spotlight)}
%a.home_selector.hoverable{:href => contacts_path, :class => ("sub_selected" if params["a_id"])}
= t('contacts.index.my_contacts')
- .item_count
+ .label
= my_contacts_count
%ul.sub_nav#aspects_list
- all_aspects.each do |aspect|
%li.hoverable{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
- .item_count
+ .label
= aspect.contacts.size
.icons-check_yes_ok{:class => ("selected" if params["a_id"].to_i == aspect.id) }
%a.selectable{:href => contacts_path(:a_id => aspect.id)}
@@ -24,7 +24,7 @@
%li.all_contacts{:class => ("active" if params["set"] == "all" || params["set"] == "only_sharing")}
%a.home_selector.hoverable{:href => contacts_path(:set => "all"), :class => ("sub_selected" if params["set"] == "only_sharing")}
= t('contacts.index.all_contacts')
- .item_count
+ .label
= all_contacts_count
%ul.sub_nav
@@ -32,6 +32,5 @@
.icons-check_yes_ok{:class => ("invisible" if params["set"] == "only_sharing")}
%a.selectable{:href => contacts_path(:set => "only_sharing")}
= t('contacts.index.only_sharing_with_me')
- .item_count
+ .label
= only_sharing_count
-
diff --git a/app/views/contacts/_contact.html.haml b/app/views/contacts/_contact.html.haml
index 60ab71c5b88fced1faee0495e5faeed7f0196115..bc7a9756f5527630bd3c14b326045d55fcac070e 100644
--- a/app/views/contacts/_contact.html.haml
+++ b/app/views/contacts/_contact.html.haml
@@ -1,6 +1,6 @@
.stream_element{:id => contact.person_id}
.media
- .float-right
+ .pull-right
= contact_aspect_dropdown(contact)
.img
= person_image_link(contact.person, :size => :thumb_small)
diff --git a/app/views/contacts/index.html.haml b/app/views/contacts/index.html.haml
index 383cfd187168aa46c22d88605e9f2510007127c3..0fc1a81c9a1ee7a3771e5c29767070574e4ed720 100644
--- a/app/views/contacts/index.html.haml
+++ b/app/views/contacts/index.html.haml
@@ -8,39 +8,42 @@
- content_for :head do
= javascript_include_tag :people
-#section_header
- %h2
- = t('.title')
+.row
+ .span12
+ #section_header
+ %h3
+ = t('.title')
-= render 'shared/contact_sidebar'
+.row
+ = render 'shared/contact_sidebar'
-.span-18.last
- #people_stream.stream.contacts
- - if @aspect
- #aspect_controls
- - if @contacts_size > 0 && @contacts_size < 20
- = start_a_conversation_link(@aspect, @contacts_size)
- = link_to edit_aspect_path(@aspect), rel: "facebox", class: "button" do
- = t('aspects.edit.manage')
- %span.modify_aspect
- = aspect_visibility_link(@aspect)
- = link_to @aspect, method: "delete", data: { confirm: t('aspects.edit.confirm_remove_aspect') }, class: 'button delete' do
- = t('delete')
- %span.icons-monotone_close_exit_delete
+ .span9
+ #people_stream.stream.contacts
+ - if @aspect
+ #aspect_controls
+ - if @contacts_size > 0 && @contacts_size < 20
+ = start_a_conversation_link(@aspect, @contacts_size)
+ = link_to edit_aspect_path(@aspect), rel: "facebox", class: "btn" do
+ = t('aspects.edit.manage')
+ %span.modify_aspect
+ = aspect_visibility_link(@aspect)
+ = link_to @aspect, method: "delete", data: { confirm: t('aspects.edit.confirm_remove_aspect') }, class: 'btn delete' do
+ = t('delete')
+ %span.icons-monotone_close_exit_delete
- - if @contacts_size > 0
- = render @contacts
+ - if @contacts_size > 0
+ = render @contacts
- = will_paginate @contacts
- - else
- %h3.no_contacts
- = t('.no_contacts')
- %br
- %br
- - if @aspect
- != t('.no_contacts_message_with_aspect',
- :community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path),
- :add_to_aspect_link => link_to(t('.add_to_aspect_link', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"))
- - else
- != t('.no_contacts_message',
- :community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path))
+ = will_paginate @contacts
+ - else
+ .no_contacts
+ %h3
+ = t('.no_contacts')
+ %p
+ - if @aspect
+ != t('.no_contacts_message_with_aspect',
+ :community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path),
+ :add_to_aspect_link => link_to(t('.add_to_aspect_link', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"))
+ - else
+ != t('.no_contacts_message',
+ :community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path))
diff --git a/app/views/contacts/sharing.haml b/app/views/contacts/sharing.haml
index 7b1f24c9c94212cc0e99d61403f8086ac28891ce..b35f3fa1a095a1ebef4e40816780f01563c9dfc6 100644
--- a/app/views/contacts/sharing.haml
+++ b/app/views/contacts/sharing.haml
@@ -27,4 +27,4 @@
%br
%div{:style => "text-align:right;"}
- = link_to t('aspects.edit.done'), '#', :class => 'button', :rel => 'close'
+ = link_to t('aspects.edit.done'), '#', :class => 'btn', :rel => 'close'
diff --git a/app/views/contacts/spotlight.haml b/app/views/contacts/spotlight.haml
index 39a1c5588c1b2e0b4925e6cbebfb64976440ed62..53c8515ea75bcb5742e8f475cbca2387348fd90d 100644
--- a/app/views/contacts/spotlight.haml
+++ b/app/views/contacts/spotlight.haml
@@ -8,23 +8,24 @@
- content_for :head do
= javascript_include_tag :people
-#section_header
- %h2
- = t('contacts.index.title')
-
-= render 'shared/contact_sidebar'
-
-.span-18.last{:style => "position:relative;"}
-
- - if AppConfig.settings.community_spotlight.suggest_email.present?
- .right
- = link_to t('contacts.spotlight.suggest_member'), "mailto:#{AppConfig.settings.community_spotlight.suggest_email}", :class => "button"
-
- %h3
- = t('contacts.spotlight.community_spotlight')
- %br
-
- #community_spotlight
- - unless @people.blank?
- - @people.each do |person|
- = render 'community_spotlight/user', :person => person
+.row
+ .span12
+ #section_header
+ %h3
+ = t('contacts.index.title')
+
+.row
+ = render 'shared/contact_sidebar'
+
+ .span9
+ - if AppConfig.settings.community_spotlight.suggest_email.present?
+ .right
+ = link_to t('contacts.spotlight.suggest_member'), "mailto:#{AppConfig.settings.community_spotlight.suggest_email}", :class => "button"
+
+ %h3
+ = t('contacts.spotlight.community_spotlight')
+
+ #community_spotlight
+ - unless @people.blank?
+ - @people.each do |person|
+ = render 'community_spotlight/user', :person => person
diff --git a/app/views/shared/_contact_list.html.haml b/app/views/shared/_contact_list.html.haml
index 8324da0d30bbd30a1c362711ba5557468bc79a4b..44e0eb18df75c41350bd72d9e298904c40163802 100644
--- a/app/views/shared/_contact_list.html.haml
+++ b/app/views/shared/_contact_list.html.haml
@@ -14,6 +14,6 @@
= person_image_tag contact.person
%h4.name
= link_to contact.person.name, contact.person
- .right
+ .pull-right
= aspect_membership_button(aspect, contact, contact.person)
diff --git a/app/views/shared/_contact_sidebar.html.haml b/app/views/shared/_contact_sidebar.html.haml
index 861965e777f197c725d1a81ab268dc216ab5fa1e..4a8fd9335c5467b77a295bfde8ab4c970060e9e2 100644
--- a/app/views/shared/_contact_sidebar.html.haml
+++ b/app/views/shared/_contact_sidebar.html.haml
@@ -2,7 +2,7 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
-#leftNavBar.span-5.append-1
+#leftNavBar.span3
= render 'contacts/aspect_listings'
- if AppConfig.settings.community_spotlight.enable?
diff --git a/features/desktop/manages_aspects.feature b/features/desktop/manages_aspects.feature
index 68021fcafa079b48ba5ddf473b026e4ca21a8a2f..768149470a40d8c3b92dec2652f88bb4cb023ec1 100644
--- a/features/desktop/manages_aspects.feature
+++ b/features/desktop/manages_aspects.feature
@@ -82,7 +82,7 @@ Feature: User manages contacts
And I click on my name in the header
When I follow "Contacts"
- Then I should see "Community Spotlight" within ".span-18"
+ Then I should see "Community Spotlight" within ".span9"
Scenario: clicking on the contacts link in the header with contacts does not send a user to the featured users page
Given I am signed in
diff --git a/features/step_definitions/aspects_steps.rb b/features/step_definitions/aspects_steps.rb
index 3636a8da3465e7125a07afbcaa9871ca270023b0..83539e80f4813d281273370c13742789565397ac 100644
--- a/features/step_definitions/aspects_steps.rb
+++ b/features/step_definitions/aspects_steps.rb
@@ -42,14 +42,14 @@ When /^I select "([^"]*)" aspect as well$/ do |aspect_name|
end
When /^I check the first contact list button$/ do
- find(".contact_list .button", match: :first).tap do |button|
+ find(".contact_list .btn", match: :first).tap do |button|
button.click
button.parent.should have_css ".added"
end
end
When /^I uncheck the first contact list button$/ do
- find(".contact_list .button", match: :first).tap do |button|
+ find(".contact_list .btn", match: :first).tap do |button|
button.click
button.parent.should have_css ".add"
sleep 1 # The expectation above should wait for the request to finsh, but that doesn't work for some reason