Merge pull request #4570 from Flaburgan/contacts-refactor

Add actions to contacts/index.html page

app/assets/stylesheets/application.css.sass

@@ -14,6 +14,7 @@
 @import 'profile'
 @import 'publisher'
 @import 'facebox'
+@import 'aspects'
 
 /* ====== media ====== */
 .media
@@ -1731,81 +1732,6 @@ a.toggle_selector
   &:hover
     :color $link-grey
 
-.no_contacts
-  :position relative
-  :text-align center
-  :top 50px
-
-#people_stream.contacts
-  .stream_element
-    :padding 10px
-    :min-height 30px
-    .right
-      :top 16px
-
-      a
-        @include opacity(0.3)
-
-        &:hover
-          @include opacity(1)
-
-    .from
-      :position relative
-      a
-        :color rgb(85,80,80)
-
-    .content
-      :padding
-        :left 40px
-    .info
-      :margin
-        :top -2px
-
-  .avatar
-    :height 30px
-    :width 30px
-
-  .icons-monotone_close_exit_delete
-    :height 20px
-    :width 20px
-
-#aspect_controls
-  @include border-radius(2px)
-  :background
-    :color #fafafa
-  :border 1px solid #ccc
-  :padding 10px
-  :min-height 23px
-
-  .conversation_button
-    :float right
-
-#selected_aspect_contacts
-  .avatar
-    :height 32px
-    :width 32px
-    :margin
-      :bottom -2px
-
-.stream-faces
-  a:hover
-    :text-decoration none
-
-#view_all_contacts_link
-  @include border-radius(2px)
-  :display block
-  :padding 5px
-  :border 1px dotted #aaa
-  :text-align center
-  :margin 5px 0
-
-#no_contacts
-  :text-align center
-  :padding 10px
-  :background
-    :color #eee
-  :color $text-dark-grey
-
 .cubbies_collage
   :position absolute
   :right 50px

app/assets/stylesheets/aspects.css.scss

@@ -0,0 +1,240 @@
+
+/* -- Used in contacts/index.html.haml -- */
+#aspect_controls {
+  @include border-radius(2px);
+  background-color: #fafafa;
+  border: 1px solid #ccc;
+  padding: 10px;
+  min-height: 23px;
+  
+  .button, .button_to {
+    margin-right: 5px;
+  }
+  
+  .button_to { display: inline-block; }
+  
+  .contact_visibility_padlock,
+  .modify_aspect,
+  .icons-mail,
+  .icons-monotone_close_exit_delete {
+    margin-left: 4px;
+    margin-bottom: -2px;
+    display: inline-block;
+  }  
+  
+  .icons-mail {
+    width: 16px;
+    height: 13px;
+    margin-bottom: -1px;
+  }
+}
+
+.contact_visibility_padlock {
+  height: 16px;
+  width: 16px;
+  /* -- To remove when the facebox will be deleted -- */
+  display: inline-block;
+  margin-left: 4px;
+  margin-bottom: -2px;
+}
+
+#people_stream.contacts {
+  .stream_element {
+    padding: 10px;
+    min-height: 30px;
+    
+    .float-right {
+      top: 16px;
+
+      a {
+        @include opacity(1);
+
+        &:hover {
+          @include opacity(0.6);
+        }
+      }
+    }
+    
+    .info { margin-top: -2px; }
+  }
+  
+  .avatar {
+    height: 30px;
+    width: 30px;
+  }
+
+  .icons-monotone_close_exit_delete {
+    height: 14px;
+    width: 14px;
+  }
+  
+  .no_contacts {
+    text-align: center;
+    margin-top: 50px;
+  }
+}
+
+#selected_aspect_contacts .avatar {
+    height: 32px;
+    width: 32px;
+    margin-bottom: -2px;
+}
+
+.stream-faces a:hover { text-decoration: none; }
+
+#view_all_contacts_link {
+  @include border-radius(2px);
+  display: block;
+  padding: 5px;
+  border: 1px dotted #aaa;
+  text-align: center;
+  margin: 5px 0px;
+}
+
+#no_contacts {
+  text-align: center;
+  padding: 10px;
+  background-color: #eee;
+  color: $text-dark-grey;
+}
+
+/* -- Used in aspects/edit.haml and in contacts/sharing.haml -- */
+#aspect_edit_controls { margin-top: 8px; }
+#aspect_edit_pane {
+  width: 772px;
+  
+  .contact_list_controls {
+    height: 30px;
+    margin-bottom: 5px;
+  }
+
+  #contact_list_search {
+    width: 200px;
+    margin-top: 0px;
+    float: right;
+  }
+  
+  .contact_list,
+  .aspect_list {
+    @include border-radius(3px);
+    height: 300px;
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border: 1px solid #bbb;
+    background-color: rgb(252,252,252);
+
+    .avatar {
+      float: left;
+      height: 50px;
+      width: 50px;
+      margin-right: 10px !important;
+    }
+
+    .button.share {
+      padding-right: 20px;
+      .right {
+        right: 8px;
+        top: 3px;
+      }
+    }
+
+    .icons-monotone_plus_add_round,
+    .icons-monotone_check_yes {
+      height: 20px;
+      width: 20px;
+    }
+
+    & > .contacts {
+      margin: 0px;
+      padding: 5px;
+      padding-right: 0px;
+
+      & > .contact {
+        @include border-radius(3px);
+        @include box-shadow(0, 1px, 5px, #ccc);
+        position: relative;
+        display: inline-block;
+        float: left;
+        height: 50px;
+        width: 170px;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        margin-bottom: 5px;
+        margin-right: 5px;
+        padding: 5px;
+        background-color: #fff;
+        border: 1px solid $border-dark-grey;
+
+        &.hidden { display: none; }
+        & > .name { white-space: nowrap; }
+        &.remote_friend { width: 285px; }
+
+        a.button {
+          @include box-shadow(0,0,0);
+          border-bottom: none;
+          min-width: auto;
+          float: right;
+          padding: 2px 4px;
+          margin-top: 5px;
+
+          &.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));
+
+            &:active { @include linear-gradient(rgb(199,119,119), rgb(130,55,55)); }
+          }
+        }
+      }
+    }
+  }
+
+  .aspect_list {
+    height: 300px;
+    max-height: 300px;
+
+    .name { left: 1em; }
+
+    ul > li {
+      padding: 1em;
+      height: 1em;
+
+      .right {
+        top: 2px;
+        right: 1em;
+      }
+    }
+  }
+
+  .person_tiles .tile {
+    @include border-radius(2px);
+    padding: 6px;
+    padding-left: 65px;
+    margin: 3px;
+    margin-left: 0px;
+    display: inline-block;
+    width: 126px;
+    height: 50px;
+    border: 1px solid #eee;
+    position: relative;
+
+    img {
+      position: absolute;
+      left: 6px;
+    }
+  }
+
+  &.larger { width: 650px; }
+
+  .bottom_submit_section {
+    margin-top: 12px;
+  
+    form {
+      display: inline-block;
+    }
+    
+    .creation {
+      float: right;
+    }
+  }
+}

app/assets/stylesheets/facebox.css.scss

@@ -30,155 +30,3 @@
     font-weight: normal;
   }
 }
-#aspect_edit_controls { margin-top: 8px; }
-/* -- Used in aspects/edit.haml and in contacts/sharing.haml -- */
-#aspect_edit_pane {
-  width: 772px;
-  
-  .contact_list_controls {
-    height: 30px;
-    margin-bottom: 5px;
-  }
-
-  #contact_list_search {
-    width: 200px;
-    margin-top: 0px;
-    float: right;
-  }
-  
-  .contact_list,
-  .aspect_list {
-    @include border-radius(3px);
-    height: 300px;
-    max-height: 300px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    border: 1px solid #bbb;
-    background-color: rgb(252,252,252);
-
-    .avatar {
-      float: left;
-      height: 50px;
-      width: 50px;
-      margin-right: 10px !important;
-    }
-
-    .button.share {
-      padding-right: 20px;
-      .right {
-        right: 8px;
-        top: 3px;
-      }
-    }
-
-    .icons-monotone_plus_add_round,
-    .icons-monotone_check_yes {
-      height: 20px;
-      width: 20px;
-    }
-
-    & > .contacts {
-      margin: 0px;
-      padding: 5px;
-      padding-right: 0px;
-
-      & > .contact {
-        @include border-radius(3px);
-        @include box-shadow(0, 1px, 5px, #ccc);
-        position: relative;
-        display: inline-block;
-        float: left;
-        height: 50px;
-        width: 170px;
-        overflow-x: hidden;
-        overflow-y: hidden;
-        margin-bottom: 5px;
-        margin-right: 5px;
-        padding: 5px;
-        background-color: #fff;
-        border: 1px solid $border-dark-grey;
-
-        &.hidden { display: none; }
-        & > .name { white-space: nowrap; }
-        &.remote_friend { width: 285px; }
-
-        a.button {
-          @include box-shadow(0,0,0);
-          border-bottom: none;
-          min-width: auto;
-          float: right;
-          padding: 2px 4px;
-          margin-top: 5px;
-
-          &.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));
-
-            &:active { @include linear-gradient(rgb(199,119,119), rgb(130,55,55)); }
-          }
-        }
-      }
-    }
-  }
-
-  .aspect_list {
-    height: 300px;
-    max-height: 300px;
-
-    .name { left: 1em; }
-
-    ul > li {
-      padding: 1em;
-      height: 1em;
-
-      .right {
-        top: 2px;
-        right: 1em;
-      }
-    }
-  }
-
-  .person_tiles .tile {
-    @include border-radius(2px);
-    padding: 6px;
-    padding-left: 65px;
-    margin: 3px;
-    margin-left: 0px;
-    display: inline-block;
-    width: 126px;
-    height: 50px;
-    border: 1px solid #eee;
-    position: relative;
-
-    img {
-      position: absolute;
-      left: 6px;
-    }
-  }
-
-  &.larger { width: 650px; }
-
-  .bottom_submit_section {
-    margin-top: 12px;
-  
-    form {
-      display: inline-block;
-    }
-    
-    .creation {
-      float: right;
-    }
-    
-    .contact_visibility_link {
-      margin-left: 5px;
-  
-      #contact_visibility_padlock {
-        display: inline-block;
-        height: 16px;
-        width: 16px;
-        margin-left: 4px;
-        margin-bottom: -2px;
-      }
-    }
-  }
-}

app/assets/stylesheets/sidebar.css.scss

@@ -91,10 +91,13 @@ $bluebg: #e7f2f7;
 	.selected + a {
 		color: #333333;
 	}
+}
 
 .modify_aspect {
 	background: url("icons/pencil.png") no-repeat;
-	}
+	width: 12px;
+	height: 12px;
+	display: inline-block;
 }
 
 #tags_list {

app/assets/templates/aspect_tpl.jst.hbs

@@ -1,4 +1,4 @@
-<a href="/aspects/{{id}}/edit" class="action modify_aspect" rel="facebox"></a>
+<a href="/contacts?a_id={{id}}" class="action modify_aspect"></a>
 {{#if selected}}
   <div class="icons-check_yes_ok selected"></div>
 {{else}}

app/helpers/aspects_helper.rb

@@ -44,15 +44,15 @@ module AspectsHelper
   def aspect_visibility_link(aspect)
     if aspect.contacts_visible?
       icon = 'icons-padlock-open'
-      title = t('.aspect_list_is_visible')
+      title = t('aspects.edit.aspect_list_is_visible');
     else
       icon = 'icons-padlock-closed'
-      title = t('.aspect_list_is_not_visible')
+      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
-      concat t('.visibility')
+      concat t('aspects.edit.set_visibility')
-      concat content_tag(:div, nil, id: "contact_visibility_padlock", class: icon)
+      concat content_tag(:span, nil, class: "contact_visibility_padlock " + icon)
     end
   end
 end

app/helpers/contacts_helper.rb

@@ -24,8 +24,12 @@ module ContactsHelper
 
   def start_a_conversation_link(aspect, contacts_size)
     suggested_limit = 16
-    conv_opts = { :class => "button conversation_button", :rel => "facebox"}
+    conv_opts = { class: "button conversation_button", rel: "facebox"}
-    conv_opts[:title] = t('.many_people_are_you_sure', :suggested_limit => suggested_limit) if contacts_size > suggested_limit
+    conv_opts[:title] = t('.many_people_are_you_sure', suggested_limit: suggested_limit) if contacts_size > suggested_limit
-    link_to t('.start_a_conversation'), new_conversation_path(:aspect_id => aspect.id, :name => aspect.name), conv_opts
+    
+    link_to new_conversation_path(aspect_id: aspect.id, name: aspect.name), conv_opts do
+      concat t('.start_a_conversation')
+      concat content_tag(:span, nil, class: "icons-mail")
+    end
   end
 end

app/views/aspects/toggle_contact_visibility.js.erb

@@ -1,6 +1,6 @@
 $(document).ready(function() {
 
-  var padlockImg = $("#contact_visibility_padlock");
+  var padlockImg = $(".contact_visibility_padlock");
   var linkText = $(".contact_visibility_link");
 
   if (padlockImg.hasClass('icons-padlock-open')) {

app/views/contacts/_aspect_listings.haml

@@ -14,7 +14,6 @@
         %li.hoverable{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
           .item_count
             = aspect.contacts.size
-          %a.action.modify_aspect{:href => "/aspects/#{aspect.id}/edit", :rel => "facebox"}
           .icons-check_yes_ok{:class => ("selected" if params["a_id"].to_i == aspect.id) }
           %a.selectable{:href => contacts_path(:a_id => aspect.id)}
             = aspect

app/views/contacts/_contact.html.haml

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

app/views/contacts/index.html.haml

@@ -16,13 +16,19 @@
 
 .span-18.last
   #people_stream.stream.contacts
-    - if @contacts_size > 0
     - if @aspect
       #aspect_controls
-          - if @contacts_size < 20
+        - if @contacts_size > 0 && @contacts_size < 20 #TODO Fla: why 20? Technical restriction? We already warn the user if > 16
           = start_a_conversation_link(@aspect, @contacts_size)
-          = link_to t('.add_to_aspect', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"
+        = 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
 
+    - if @contacts_size > 0
       = render @contacts
 
       = will_paginate @contacts

config/locales/diaspora/en.yml

@@ -159,7 +159,8 @@ en:
       remove_aspect: "Delete this aspect"
       confirm_remove_aspect: "Are you sure you want to delete this aspect?"
       add_existing: "Add an existing contact"
-      visibility: "Visibility"
+      set_visibility: "Set visibility"
+      manage: "Manage"
       done: "Done"
       rename: "rename"
       aspect_list_is_visible: "Contacts in this aspect are able to see each other."

features/desktop/contacts.feature

@@ -30,7 +30,7 @@ Feature: show contacts
     And I add the person to my "Unicorns" aspect
     And I am on the contacts page
     And I follow "Unicorns"
-    And I follow "add contacts to Unicorns"
+    And I follow "Manage"
     And I press the first "a.contact_visibility_link" in the modal window
     And I press "Done" in the modal window
     And I sign out

features/desktop/manages_aspects.feature

@@ -29,16 +29,16 @@ Feature: User manages contacts
     And I press "Delete" in the modal window
     And I confirm the alert
     Then I should be on the contacts page
-    And I should not see "People" within "#aspect_nav"
+    And I should not see "People" within "#aspects_list"
 
   Scenario: deleting an aspect from homepage
     Given I am signed in
     And I have an aspect called "People"
     When I am on the aspects page
     And I click on "People" aspect edit icon
-    And I press "Delete" in the modal window
+    And I follow "Delete" within "#aspect_controls"
     And I confirm the alert
-    Then I should be on the aspects page
+    Then I should be on the contacts page
     And I should not see "People" within "#aspects_list"
 
   Scenario: Editing the aspect memberships of a contact from the aspect edit facebox

features/desktop/stops_following_users.feature

@@ -32,7 +32,7 @@ Feature: Unfollowing
     And I go to the contacts page
 
     And I follow "Besties"
-    And I follow "add contacts to Besties"
+    And I follow "Manage"
 
     And I press the first ".added" within "#facebox .contact_list ul > li:first-child"