Merge pull request #5118 from blase/feature/4466-port-everything-to-bootstrap

Port everything under /contacts to bootstrap

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)

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) {

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;
+  }
+}
+

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;

app/assets/stylesheets/contacts.css.scss

+#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

app/assets/stylesheets/new-templates.css.scss

@@ -58,3 +58,6 @@
 
 /* stream */
 @import 'tag';
+
+/* contacts */
+@import 'contacts';
\ No newline at end of file

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|
 

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

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

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'
 

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'

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
-

app/views/contacts/_contact.html.haml

 .stream_element{:id => contact.person_id}
   .media
-    .float-right
+    .pull-right
       = contact_aspect_dropdown(contact)
     .img
       = person_image_link(contact.person, :size => :thumb_small)

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))

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'

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

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)
 

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?

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

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