Merge pull request #6697 from svbergerem/unify-ui

Unify contacts, notifications and settings UI

app/assets/stylesheets/_application.scss

@@ -26,6 +26,9 @@
 /* font overrides */
 @import 'typography';
 
+// layout
+@import 'sidebar';
+
 /* login */
 @import 'login';
 @import 'registration';

app/assets/stylesheets/base.scss

@@ -10,6 +10,24 @@ body {
   > .container-fluid { max-width: 100%; }
 }
 
+// These names are generated by a rails controller
+// scss-lint:disable SelectorFormat
+.page-contacts,
+.page-conversations,
+.page-notifications,
+.page-people.action-show,
+.page-people.action-contacts,
+.page-photos,
+.page-profiles.action-edit,
+.page-services.action-index,
+.page-streams,
+.page-user_applications,
+.page-users.action-edit,
+.page-users.action-privacy_settings {
+  background-color: $sidebars-background;
+}
+// scss-lint:enable SelectorFormat
+
 // Overflow
 h1,
 h2,

app/assets/stylesheets/bootstrap-variables.scss

@@ -668,9 +668,9 @@ $navbar-collapse-max-height: 480px;
 //
 //##
 //** Background color on `.list-group-item`
-$list-group-bg: $sidebars-background;
+$list-group-bg: $white;
 //** `.list-group-item` border color
-$list-group-border: $border-grey;
+$list-group-border: transparent;
 //** List group border radius
 $list-group-border-radius: 0;
 

app/assets/stylesheets/contacts.scss

@@ -1,21 +1,29 @@
+.page-contacts {
+  .sidebar { padding-bottom: 10px; }
+
+  .header {
+    border-bottom: 1px solid $border-grey;
+    min-height: 55px;
+    form { margin: 0; }
+    input,
+    .btn {
+      margin-bottom: 11px;
+      margin-top: 11px;
+    }
+
+    .aspect-controls { margin: 7px -10px 7px 0; }
+  }
+}
+
 #contacts_container {
   #people_stream.contacts {
     .header {
-      border-bottom: 1px solid $border-grey;
-      margin-top: 10px;
-      min-height: 53px;
       #change_aspect_name { cursor: pointer; }
       #aspect_name_form {
         display: none;
-        form { margin: 0px; }
-        input {
-          margin-bottom: 0px;
-          margin-top: 10px;
-        }
-        .btn { margin-top: 10px; }
       }
       #contact_list_search {
-        margin: 6px 30px 0 0;
+        margin: 11px 30px 0 0;
         width: 150px;
         &:focus { width: 250px; }
       }

app/assets/stylesheets/conversations.scss

@@ -1,22 +1,8 @@
 .page-conversations {
-  background-color: $sidebars-background;
+  .framed-content { padding: 0 10px 10px; }
+  .sidebar-header .pull-right { margin-top: 12px; }
 
-  .left-pane,
+  .sidebar {
-  .new-conversation,
-  .stream_container .conversation-participants {
-    background-color: $white;
-    border: 1px solid $light-grey;
-    box-shadow: $card-shadow;
-    margin-top: -10px;
-  }
-
-  .new-conversation,
-  .left-pane-header,
-  .stream_container .conversation-participants {
-    padding: 10px;
-  }
-
-  .left-pane {
     margin-bottom: 50px;
     .pagination { margin: 5px; }
   }

app/assets/stylesheets/notifications.scss

@@ -2,27 +2,22 @@
   .stream {
     .header {
       border-bottom: 1px solid $border-grey;
-      .btn-toolbar { margin: 11px 0; }
       margin-bottom: 10px;
     }
 
-    .year_container { margin-top: 40px; }
+    .btn-toolbar { margin: 11px 0; }
+
     .year {
       background-color: $white;
       color: $text-grey;
       font-size: 40px;
       line-height: 40px;
-      margin-bottom: -20px;
+      margin-bottom: 20px;
+      margin-top: 40px;
       text-align: center;
     }
 
-    .year_container + .day_group {
-      border-top: 1px solid $border-grey;
-      padding-top: 60px;
-    }
-
     .day_group + .day_group {
-      border-top: 1px dashed $border-grey;
       margin-top: 10px;
       padding-top: 10px;
     }

app/assets/stylesheets/people.scss

@@ -31,11 +31,12 @@
 #blocked_people {
   .blocked_person {
     border-bottom: 1px solid $border-grey;
-    padding: 10px;
-    margin: 0px;
     font-size: 13px;
     line-height: 16px;
+    margin: 0;
     min-height: 50px;
+    padding: 10px 0;
+    &:last-of-type { border-bottom: 0; }
     .avatar {
       width: 50px;
       height: 50px;

app/assets/stylesheets/profile.scss

@@ -1,7 +1,3 @@
-body.page-people.action-show, body.page-people.action-contacts {
-  background-color: $sidebars-background;
-}
-
 #profile_container {
   .profile_header {
     margin-bottom: 15px;
@@ -109,11 +105,8 @@ body.page-people.action-show, body.page-people.action-contacts {
   }
 
   #profile {
-    background-color: $white;
     padding: 20px;
-    margin-top: -10px;
     margin-bottom: 35px;
-    box-shadow: $card-shadow;
 
     #profile_photo {
       margin-top: 10px;

app/assets/stylesheets/settings.scss

@@ -1,4 +1,19 @@
 // Specific styles for the settings pages (profile, user account, privacy, services)
+
+// These names are generated by a rails controller
+// scss-lint:disable SelectorFormat
+.page-profiles.action-edit,
+.page-services.action-index,
+.page-user_applications,
+.page-users.action-edit,
+.page-users.action-privacy_settings {
+  .framed-content {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+// scss-lint:enable SelectorFormat
+
 .enclosed-checkbox label {
   margin-bottom: 0;
 }

app/assets/stylesheets/sidebar.scss

@@ -0,0 +1,21 @@
+.sidebar,
+.framed-content {
+  background-color: $white;
+  border: 1px solid $light-grey;
+  box-shadow: $card-shadow;
+  margin-top: -10px;
+  padding-top: 10px;
+
+  .header,
+  .sidebar-header {
+    padding-left: 10px;
+    padding-right: 10px;
+
+    h3 {
+      line-height: 40px;
+      margin: 7px 0;
+    }
+  }
+
+  .list-group { margin-bottom: 0; }
+}

app/assets/stylesheets/stream.scss

@@ -1,7 +1,3 @@
-body.page-streams, body.page-photos {
-  background-color: $sidebars-background;
-}
-
 .stream_container {
   #publisher {
     margin-bottom: 15px;

app/assets/templates/contact_tpl.jst.hbs

@@ -1,4 +1,4 @@
-<div class="container-fluid stream_element media contact {{in_aspect}}" id={{person_id}}>
+<div class="clearfix stream_element media contact {{in_aspect}}" id={{person_id}}>
   <div class="pull-right">
     {{{aspectMembershipIndicator this in_aspect}}}
   </div>

app/views/api/openid_connect/user_applications/index.html.haml

@@ -4,8 +4,10 @@
 .container-fluid.applications-page
   .row
     .col-md-3
+      .sidebar
         = render "shared/settings_nav"
     .col-md-9
+      .framed-content
         %h3= t(".title")
         .row
           .col-md-12

app/views/contacts/_header.html.haml

@@ -1,6 +1,6 @@
-.header
+.header.clearfix
   - if @aspect
-    #aspect_controls.pull-right
+    .aspect-controls.pull-right#aspect_controls
       - if @aspect.contacts.size > 0 && @aspect.contacts.size < 20
         = start_a_conversation_link(@aspect, @aspect.contacts.size)
 
@@ -19,7 +19,7 @@
 
       = link_to @aspect, method: "delete", data: { confirm: t("aspects.edit.confirm_remove_aspect") }, class: "delete contacts_button", id: "delete_aspect" do
         %i.entypo-trash.contacts-header-icon{title: t("delete")}
-    .pull-right
+    .pull-right.contact-list-search
       = search_field_tag :contact_search, "", id: "contact_list_search", class: "search-query form-control",  placeholder: t("contacts.index.user_search")
     %h3
       %span#aspect_name

app/views/contacts/_sidebar.html.haml

@@ -1,4 +1,5 @@
-%h3
+.sidebar-header.clearfix
+  %h3
     = t("contacts.index.title")
 = render "contacts/aspect_listings"
 %hr

app/views/contacts/index.html.haml

@@ -4,10 +4,11 @@
 .container-fluid#contacts_container
   .row
     .col-md-3
-      = render 'contacts/sidebar'
+      .sidebar
+        = render "contacts/sidebar"
 
     .col-md-9
-      #people_stream.stream.contacts
+      .stream.contacts.framed-content#people_stream
         = render 'contacts/header'
 
         - if @contacts_size > 0

app/views/conversations/_show.haml

@@ -2,7 +2,7 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-.conversation-participants
+.conversation-participants.framed-content
   .control-icons.pull-right
     - if conversation.participants.count > 1
       = link_to content_tag(:i, nil, class: "entypo-cross"),

app/views/conversations/index.haml

@@ -7,12 +7,12 @@
 .container-fluid#conversations_container
   .row
     .col-md-4
-      .left-pane#left_pane
+      .sidebar#left_pane
-        .left-pane-header#left_pane_header
+        .sidebar-header.clearfix#left_pane_header
+          .pull-right
+            = link_to t(".new_conversation"), conversations_path, class: "btn btn-default"
           %h3
-            .pull-right{ class: ("hidden" unless @visibilities)}
+            = t(".inbox")
-              = link_to t('.new_conversation'), conversations_path, class: 'btn btn-default'
-            = t('.inbox')
 
         .conversation-inbox#conversation_inbox
           .stream.conversations
@@ -34,7 +34,7 @@
       - else
         .stream_container.hidden
           #conversation_show
-        #conversation_new
+        .framed-content#conversation_new
           .new-conversation
             %h3.text-center
               = t("conversations.index.new_conversation")

app/views/conversations/show.js.erb

@@ -1,7 +1,6 @@
 if($('.stream_container').hasClass('hidden')){
   $('#conversation_new').hide();
   $('.stream_container').removeClass('hidden');
-  $('#left_pane_header .pull-right').removeClass('hidden');
 }
 
 $('#conversation_show').html("<%= escape_javascript(render('conversations/show', :conversation => @conversation)) %>");

app/views/notifications/index.html.haml

@@ -1,45 +1,55 @@
 .container-fluid#notifications_container
   .row
     .col-md-3
+      .sidebar
+        .sidebar-header.clearfix
           %h3
-        = t('.notifications')
+            = t(".notifications")
         .list-group
-        %a.list-group-item{class: ('active' unless params[:type] && @grouped_unread_notification_counts.has_key?(params[:type])), href: '/notifications' + (params[:show] == 'unread' ? '?show=unread' : '') }
+          %a.list-group-item{href: "/notifications" + (params[:show] == "unread" ? "?show=unread" : ""),
+              class: ("active" unless params[:type] && @grouped_unread_notification_counts.has_key?(params[:type]))}
             %span.pull-right.badge{class: ("hidden" unless @unread_notification_count > 0)}
               = @unread_notification_count
-          = t('.all_notifications')
+            = t(".all_notifications")
           - @grouped_unread_notification_counts.each do |key, count|
-          %a.list-group-item{class: ('active' if params[:type] == key), data: { type: key }, href: '/notifications?type=' + key + (params[:show] == 'unread' ? '&show=unread' : '') }
+            %a.list-group-item{class: ("active" if params[:type] == key),
+                data: {type: key},
+                href: "/notifications?type=" + key + (params[:show] == "unread" ? "&show=unread" : "")}
               %span.pull-right.badge{class: ("hidden" unless count > 0)}
                 = count
               - case key
-              - when 'also_commented', 'comment_on_post'
+                - when "also_commented", "comment_on_post"
                   %i.entypo-comment
-              - when 'liked'
+                - when "liked"
                   %i.entypo-heart
-              - when 'mentioned'
+                - when "mentioned"
                   %span.mentionIcon
                     @
-              - when 'reshared'
+                - when "reshared"
                   %i.entypo-reshare
-              - when 'started_sharing'
+                - when "started_sharing"
                   %i.entypo-add-user
-            = t('.'+key)
+              = t("." + key)
 
     .col-md-9.stream.notifications
-      .row.header
+      .framed-content
+        .row
           .col-md-12
+            .header.clearfix
               .btn-toolbar.pull-right
                 .btn-group
-              %a.btn.btn-default{class: ('active' unless params[:show] == 'unread'), href: '/notifications' + (params[:type] ? '?type=' + params[:type] : '') }
+                  %a.btn.btn-default{class: ("active" unless params[:show] == "unread"),
-                = t('.show_all')
+                      href: "/notifications" + (params[:type] ? "?type=" + params[:type] : "")}
-              %a.btn.btn-default{class: ('active' if params[:show] == 'unread'), href: '/notifications?show=unread' + (params[:type] ? '&type=' + params[:type] : '') }
+                    = t(".show_all")
-                = t('.show_unread')
+                  %a.btn.btn-default{class: ("active" if params[:show] == "unread"),
-            %a.btn.btn-default.btn-group{href: read_all_notifications_path(type: params[:type] ),class: ('disabled' unless @unread_notification_count > 0)}
+                      href: "/notifications?show=unread" + (params[:type] ? "&type=" + params[:type] : "")}
-              -if params[:type]
+                    = t(".show_unread")
-                = t('.mark_all_shown_as_read')
+                %a.btn.btn-default.btn-group{href: read_all_notifications_path(type: params[:type]),
-              -else
+                    class: ("disabled" unless @unread_notification_count > 0)}
-                = t('.mark_all_as_read')
+                  - if params[:type]
+                    = t(".mark_all_shown_as_read")
+                  - else
+                    = t(".mark_all_as_read")
         - if @group_days.length > 0
           - year = nil
           - @group_days.each do |date, notes|
@@ -55,14 +65,15 @@
 
               .notifications_for_day.col-md-10
                 - notes.each do |note|
-                = render partial: 'notifications/notification', locals: { note: note }
+                  = render partial: "notifications/notification", locals: {note: note}
 
+          .center-block.text-center
             = will_paginate @notifications, renderer: WillPaginate::ActionView::BootstrapLinkRenderer
 
         - else
           .no_notifications.well
             %h4
-            = t('.no_notifications')
+              = t(".no_notifications")
 
 :javascript
   $(document).ready(function(){

app/views/people/show.html.haml

@@ -14,7 +14,7 @@
 .container-fluid#profile_container
   .row
     .col-md-3
-      .profile-sidebar#profile
+      .sidebar.profile-sidebar#profile
         -# here be JS
 
     .col-md-9

app/views/profiles/_edit_private.haml

@@ -65,5 +65,5 @@
 
 .small-horizontal-spacer
 
-.submit_block
+.submit_block.form-group
   = yield(:submit_block)

app/views/profiles/edit.haml

@@ -5,8 +5,10 @@
 .container-fluid
   .row
     .col-md-3
+      .sidebar
         = render "shared/settings_nav"
     .col-md-9
+      .framed-content
         - content_for :submit_block do
           = link_to t("cancel"), local_or_remote_person_path(current_user.person), class: "btn btn-default"
           = submit_tag t(".update_profile"), class: "btn btn-primary pull-right", id: "update_profile"

app/views/services/index.html.haml

@@ -8,8 +8,10 @@
 .container-fluid
   .row
     .col-md-3
+      .sidebar
         = render "shared/settings_nav"
     .col-md-9
+      .framed-content
         %h3= t(".title")
         .row
           .col-md-12

app/views/shared/_settings_nav.haml

@@ -1,5 +1,5 @@
 #section_header
-  %h2
+  %h3.sidebar-header
     = t("settings")
   .list-group#settings_nav
     = link_to t("profile"), edit_profile_path,

app/views/users/edit.html.haml

@@ -1,6 +1,8 @@
 .container-fluid
   .row
     .col-md-3
+      .sidebar
         = render "shared/settings_nav"
     .col-md-9
+      .framed-content
         = render "edit"

app/views/users/privacy_settings.html.haml

@@ -8,6 +8,8 @@
 .container-fluid
   .row
     .col-md-3
+      .sidebar
         = render "shared/settings_nav"
     .col-md-9
+      .framed-content
         = render "privacy_settings"

features/step_definitions/aspects_steps.rb

@@ -98,7 +98,7 @@ When /^I drag "([^"]*)" (up|down)$/ do |aspect_name, direction|
   native_aspect = aspect.base.native
   native_target = target.base.native
   mouse.down native_aspect
-  mouse.move_to native_target, native_target.size.width / 2, 0
+  mouse.move_to native_target
   sleep 1
   mouse.up
   expect(page).to have_no_css "#aspect_nav .ui-sortable.syncing"