Redesign profile page and port to Bootstrap

Changelog.md

@@ -42,6 +42,7 @@ The default for including jQuery from a CDN has changed. If you want to continue
 * Display new conversation form on conversations/index [#5178](https://github.com/diaspora/diaspora/pull/5178)
 * Port profile page to Backbone [#5180](https://github.com/diaspora/diaspora/pull/5180)
 * Pull punycode.js from rails-assets.org [#5263](https://github.com/diaspora/diaspora/pull/5263)
+* Redesign profile page and port to Bootstrap [#4657](https://github.com/diaspora/diaspora/pull/4657)
 
 
 ## Bug fixes

app/assets/javascripts/app/helpers/handlebars-helpers.js

@@ -31,18 +31,18 @@ Handlebars.registerHelper('linkToPerson', function(context, block) {
 });
 
 // relationship indicator for profile page
-Handlebars.registerHelper('sharingBadge', function(person) {
+Handlebars.registerHelper('sharingMessage', function(person) {
   var i18n_scope = 'people.helper.is_not_sharing';
-  var icon  = 'icons-circle';
+  var icon = "circle";
   if( person.is_sharing ) {
     i18n_scope = 'people.helper.is_sharing';
-    icon = 'icons-check_yes_ok';
+    icon = "entypo check";
   }
 
   var title = Diaspora.I18n.t(i18n_scope, {name: person.name});
-  var html = '<div class="sharing_message_container" title="'+title+'" data-placement="bottom">'+
-             '  <div id="sharing_message" class="'+icon+'"></div>'+
-             '</div>';
+  var html = '<span class="sharing_message_container" title="'+title+'" data-placement="bottom">'+
+             '  <i id="sharing_message" class="'+icon+'"></i>'+
+             '</span>';
   return html;
 });
 
@@ -90,3 +90,18 @@ Handlebars.registerHelper('fmtTags', function(tags) {
 Handlebars.registerHelper('fmtText', function(text) {
   return new Handlebars.SafeString(app.helpers.textFormatter(text, null));
 });
+
+Handlebars.registerHelper('isCurrentPage', function(path_helper, id, options){
+  var currentPage = "/"+Backbone.history.fragment;
+  if (currentPage == Handlebars.helpers.urlTo(path_helper, id, options.data)) {
+    return options.fn(this);
+  } else {
+    return options.inverse(this);
+  }
+});
+
+Handlebars.registerHelper('isCurrentProfilePage', function(id, diaspora_handle, options){
+  var username = diaspora_handle.split("@")[0];
+  return Handlebars.helpers.isCurrentPage('person', id, options) ||
+         Handlebars.helpers.isCurrentPage('user_profile', username, options);
+});

app/assets/javascripts/app/pages/profile.js

@@ -11,7 +11,7 @@ app.pages.Profile = app.views.Base.extend({
     '#main_stream': 'streamView'
   },
 
-  tooltipSelector: '.profile_button div, .sharing_message_container',
+  tooltipSelector: '.profile_button .profile-header-icon, .sharing_message_container',
 
   initialize: function(opts) {
     if( !this.model ) {
@@ -52,14 +52,16 @@ app.pages.Profile = app.views.Base.extend({
     if( !this.model.has('profile') ) return false;
     return new app.views.ProfileSidebar({
       model: this.model,
-      photos: this.photos,
-      contacts: this.contacts
     });
   },
 
   headerView: function() {
     if( !this.model.has('profile') ) return false;
-    return new app.views.ProfileHeader({model: this.model});
+    return new app.views.ProfileHeader({
+      model: this.model,
+      photos: this.photos,
+      contacts: this.contacts
+    });
   },
 
   streamView: function() {

app/assets/javascripts/app/router.js

@@ -21,6 +21,7 @@ app.Router = Backbone.Router.extend({
     "followed_tags": "followed_tags",
     "tags/:name": "followed_tags",
     "people/:id/photos": "photos",
+    "people/:id/contacts": "profile",
 
     "people/:id": "profile",
     "u/:name": "profile"
@@ -81,7 +82,7 @@ app.Router = Backbone.Router.extend({
     this.renderPage(function() {
       return new app.pages.Profile({
         person_id: guid,
-        el: $('body > .container'),
+        el: $('body > .container-fluid'),
         streamCollection: app.collections.Photos,
         streamView: app.views.Photos
       });
@@ -147,7 +148,7 @@ app.Router = Backbone.Router.extend({
 
   profile: function() {
     this.renderPage(function() { return new app.pages.Profile({
-      el: $('body > .container')
+      el: $('body > .container-fluid')
     }); });
   }
 });

app/assets/javascripts/app/views/conversations_form_view.js

+app.views.ConversationsForm = Backbone.View.extend({
+
+  initialize: function(opts) {
+    this.contacts = _.has(opts, 'contacts') ? opts.contacts : null;
+    this.prefill = [];
+    if (_.has(opts, 'prefillName') && _.has(opts, 'prefillValue')) {
+      this.prefill = [{name : opts.prefillName, 
+                       value : opts.prefillValue}];
+    }
+    this.autocompleteInput = $("#contact_autocomplete");
+    this.prepareAutocomplete(this.contacts);
+  },
+
+  prepareAutocomplete: function(data){
+    this.autocompleteInput.autoSuggest(data, {
+      selectedItemProp: "name",
+      searchObjProps: "name",
+      asHtmlID: "contact_ids",
+      retrieveLimit: 10,
+      minChars: 1,
+      keyDelay: 0,
+      startText: '',
+      emptyText: Diaspora.I18n.t('no_results'),
+      preFill: this.prefill 
+    }).focus();
+  }
+});

app/assets/javascripts/app/views/conversations_view.js

@@ -13,8 +13,8 @@ app.views.Conversations = Backbone.View.extend({
     if ($('#first_unread').length > 0) {
       $("html").scrollTop($('#first_unread').offset().top-50);
     }
-    this.autocompleteInput = $("#contact_autocomplete");
-    this.prepareAutocomplete(gon.contacts);
+
+    new app.views.ConversationsForm({contacts: gon.contacts});
 
     $('.timeago').each(function(i,e) {
         var jqe = $(e);
@@ -30,18 +30,5 @@ app.views.Conversations = Backbone.View.extend({
 
   showParticipants: function(e){
     $(e.currentTarget).find('.participants').slideDown('300');
-  },
-
-  prepareAutocomplete: function(data){
-    this.autocompleteInput.autoSuggest(data, {
-      selectedItemProp: "name",
-      searchObjProps: "name",
-      asHtmlID: "contact_ids",
-      retrieveLimit: 10,
-      minChars: 1,
-      keyDelay: 0,
-      startText: '',
-      emptyText: Diaspora.I18n.t('no_results'),
-    }).focus();
   }
 });

app/assets/javascripts/app/views/profile_header_view.js

@@ -2,14 +2,24 @@
 app.views.ProfileHeader = app.views.Base.extend({
   templateName: 'profile_header',
 
-  initialize: function() {
+  initialize: function(opts) {
     app.events.on('aspect:create', this.postRenderTemplate, this);
+    this.photos = _.has(opts, 'photos') ? opts.photos : null;
+    this.contacts = _.has(opts, 'contacts') ? opts.contacts : null;
   },
 
   presenter: function() {
     return _.extend({}, this.defaultPresenter(), {
+      show_profile_btns: this._shouldShowProfileBtns(),
+      show_photos: this._shouldShowPhotos(),
+      show_contacts: this._shouldShowContacts(),
       is_blocked: this.model.isBlocked(),
-      has_tags: this._hasTags()
+      is_sharing: this.model.isSharing(),
+      is_receiving: this.model.isReceiving(),
+      is_mutual: this.model.isMutual(),
+      has_tags: this._hasTags(),
+      contacts: this.contacts,
+      photos: this.photos
     });
   },
 
@@ -17,6 +27,18 @@ app.views.ProfileHeader = app.views.Base.extend({
     return (this.model.get('profile')['tags'].length > 0);
   },
 
+  _shouldShowProfileBtns: function() {
+    return (app.currentUser.authenticated() && !this.model.get('is_own_profile'));
+  },
+
+  _shouldShowPhotos: function() {
+    return (this.photos && this.photos.count > 0);
+  },
+
+  _shouldShowContacts: function() {
+    return (this.contacts && this.contacts.count > 0);
+  },
+
   postRenderTemplate: function() {
     var self = this;
     var dropdownEl = this.$('.aspect_membership_dropdown.placeholder');
@@ -26,16 +48,16 @@ app.views.ProfileHeader = app.views.Base.extend({
     }
 
     // TODO render me client side!!!
-    var href = this.model.url() + '/aspect_membership_button?create=true';
+    var href = this.model.url() + '/aspect_membership_button?create=true&size=normal';
     if( gon.bootstrap ) href += '&bootstrap=true';
 
     $.get(href, function(resp) {
       dropdownEl.html(resp);
-      new app.views.AspectMembership({el: dropdownEl});
+      new app.views.AspectMembership({el: $('.aspect_dropdown',dropdownEl)});
 
       // UGLY (re-)attach the facebox
       self.$('a[rel*=facebox]').facebox();
-      this._done();
+      self._done();
     });
   },
 

app/assets/javascripts/app/views/profile_sidebar_view.js

@@ -2,44 +2,13 @@
 app.views.ProfileSidebar = app.views.Base.extend({
   templateName: 'profile_sidebar',
 
-  initialize: function(opts) {
-    this.photos = _.has(opts, 'photos') ? opts.photos : null;
-    this.contacts = _.has(opts, 'contacts') ? opts.contacts : null;
-  },
-
   presenter: function() {
     return _.extend({}, this.defaultPresenter(), {
-      do_profile_btns: this._shouldDoProfileBtns(),
-      do_profile_info: this._shouldDoProfileInfo(),
-      do_photos: this._shouldDoPhotos(),
-      do_contacts: this._shouldDoContacts(),
-      is_sharing: this.model.isSharing(),
-      is_receiving: this.model.isReceiving(),
-      is_mutual: this.model.isMutual(),
-      is_not_blocked: !this.model.isBlocked(),
-      photos: this.photos,
-      contacts: this.contacts
+      show_profile_info: this._shouldShowProfileInfo(),
     });
   },
 
-  _shouldDoProfileBtns: function() {
-    return (app.currentUser.authenticated() && !this.model.get('is_own_profile'));
-  },
-
-  _shouldDoProfileInfo: function() {
+  _shouldShowProfileInfo: function() {
     return (this.model.isSharing() || this.model.get('is_own_profile'));
-  },
-
-  _shouldDoPhotos: function() {
-    return (this.photos && this.photos.items.length > 0);
-  },
-
-  _shouldDoContacts: function() {
-    return (this.contacts && this.contacts.items.length > 0);
-  },
-
-  postRenderTemplate: function() {
-    // UGLY (re-)attach the facebox
-    this.$('a[rel*=facebox]').facebox();
   }
 });

app/assets/javascripts/inbox.js

@@ -2,7 +2,6 @@
  *   licensed under the Affero General Public License version 3 or later.  See
  *   the COPYRIGHT file.
  */
-//= require jquery.autoSuggest.custom
 
 $(document).ready(function(){
   $(document).on('click', '.conversation-wrapper', function(){

app/assets/stylesheets/application.css.sass

@@ -13,7 +13,6 @@
 @import 'opengraph'
 @import 'poll'
 @import 'help'
-@import 'profile'
 @import 'publisher_blueprint'
 @import 'facebox'
 @import 'aspects'

app/assets/stylesheets/comments.css.scss

@@ -38,4 +38,5 @@
     width: 95%;
   }
   .comment_box { width: 95%; }
+  .comment_box:focus { min-height: 100px; }
 }

app/assets/stylesheets/contacts.css.scss

@@ -19,7 +19,8 @@
         width: 150px;
         &:focus { width: 250px; }
       }
-      & > a, #aspect_controls > a {
+      #aspect_controls > .contacts_button {
+        cursor: pointer;
         text-decoration: none;
         margin-right: 25px;
       }

app/assets/stylesheets/conversations.css.scss

@@ -210,32 +210,5 @@
 #new_conversation_pane {
   ul.as-selections { width: 100% !important; }
   input#contact_ids { box-shadow: none; }
-  textarea { width: 98%; }
-
-  .bottom_submit_section {
-    text-align: right;
-  }
-
-  .button.creation {
-    $button-border-color: #aaa;
-    @include border-radius(3px);
-    @include box-shadow(0,1px,1px,#cfcfcf);
-    @include transition(border);
-    @include button-gradient($creation-blue);
-    font-size: 12px;
-    color: #fff;
-    padding: 4px 9px;
-    min-width: 90px;
-    min-height: 10px;
-    border: 1px solid darken($button-border-color,20%);
-
-    cursor: pointer;
-    white-space: nowrap;
-
-    &:hover {
-      @include button-gradient-hover($creation-blue);
-      border: 1px solid darken($button-border-color,35%);
-      text-decoration: none;
-    }
-  }
+  label { font-weight: bold; }
 }

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

@@ -59,6 +59,7 @@
 /* people */
 @import 'people';
 @import 'invitations';
+@import 'profile';
 
 /* stream */
 @import 'tag';

app/assets/stylesheets/new_styles/_interactions.scss

@@ -21,7 +21,7 @@
     }
   }
 
-  .stream_element, .comment, .stream_element:hover .comment {
+  .stream_element, .comment, .photo, .stream_element:hover .comment {
     .controls > a { @include opacity(0); }
 
     &:hover .controls {

app/assets/stylesheets/new_styles/_navs.scss

 .nav.nav-tabs{
   li > a {
     color: $text-dark-grey;
-    .entypo {
+    .entypo, .mentionIcon {
       color: $text-dark-grey;
       margin-right: 5px;
     }
+    .mentionIcon { font-weight: 700; }
   }
   li.active > a {
     background-color: $background-grey;
     color: $black;
-    .entypo { color: $black; }
+    .entypo, .mentionIcon { color: $black; }
   }
 }

app/assets/stylesheets/profile.css.scss

+#profile_container {
+  .profile_header {
+    border-bottom: 1px solid $border-grey;
+    margin-bottom: 20px;
 
-.profile_photo {
-  img {
-    height: auto;
-    width: 200px;
-  }
-}
-
-#profile {
-  h3 { margin-bottom: 0; }
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-
-  .avatar.large { margin-bottom: 0; }
-
-  ul#profile_information {
-    margin: 1em 0;
-    > li {
-        margin-bottom: 2em;
-        margin-right: 2em;
-      h4 { font-weight: bold; }
-      }
-  }
-
-  .image_list {
-    .section {
-      margin-bottom: 4px;
+    #edit_profile, #unblock_user_button, .aspect_dropdown {
+      margin-top: 5px;
+      margin-right: 10px;
     }
-    img {
-      height: 45px;
-      width: 45px;
-    }
-  }
 
-  .blocked {
-    background-color: rgb(244, 42, 42);
-    .profile_button {
-      width: 150px;
-    }
-  }
-  .mutual {
-    background-color: rgb(142, 222, 61);
-    .profile_button {
-      width: 50px;
-    }
-  }
-  .sharing {
-    background-color: rgb(142, 222, 61);
-    .profile_button {
-      width: 150px;
-    }
-  }
-  .receiving {
-    background-color: rgb(211, 211, 211);
-    .profile_button {
-      width: 75px;
-    }
-  }
-  .not_sharing {
-    background-color: rgb(211, 211, 211);
-    .profile_button {
-      width: 150px;
+    #author_info {
+      h2 {
+        line-height: 35px;
+        margin-top: 10px;
+        margin-bottom: 0px;
+      }
+      #name {
+        font-weight: 700;
+      }
+      #diaspora_handle {
+        color: $text-grey;
+        font-size: 20px;
+      }
+      #sharing_message {
+        cursor: default;
+        font-size: 20px;
+        &.circle {
+          color: $light-grey;
+          &:before { content: '\26aa'; }
+        }
+        &.entypo.check { color: darken($green,20%); }
+      }
+      .description {
+        margin-bottom: 20px;
+        .tag {
+          background-color: transparent;
+          font-size: 14px;
+        }
+        .tag:not(.entypo) {
+          font-weight: 700;
+        }
+        .entypo.tag {
+          margin: 0 5px;
+          font-weight: normal;
+          &:hover {text-decoration: none;}
+        }
+      }
     }
-  }
 
-  #profile_buttons {
-    width: 190px;
-    padding-right: 10px;
-    height: 28px;
-    text-align: center;
-    @include border-bottom-radius(8px);
+    #profile_horizontal_bar {
+      border-top: 1px dashed $border-grey;
+      min-height: 50px;
+      margin-top: 10px;
+      #profile_buttons {
+        padding: 10px 0;
+        > .profile_button {
+          text-decoration: none;
+          cursor: pointer;
+          margin-right: 25px;
+          .entypo.profile-header-icon, .profile-header-icon {
+            font-size: 24.5px;
+            line-height: 30px;
+            color: lighten($black,75%);
+            &:hover { color: $black; }
+          }
+          #mention_button { font-weight: 700; }
+        }
+      }
 
-    .sharing_message_container {
-      float: left;
-      padding: 5px 1px;
-      @include opacity(0.3);
-      background-color: white;
-      @include border-bottom-left-radius(8px);
+      ul#profile_nav {
+        list-style: none;
+        margin: 0;
+        > li {
+          display: inline-block;
+          &.active {
+            border-bottom: 3px solid $creation-blue;
+            a {
+              color: $black;
+              .entypo { color: $black; }
+            }
+          }
+          a {
+            padding: 10px 15px;
+            font-size: 16px;
+            line-height: 46px;
+            color: lighten($black,50%);
+            .entypo {
+              color: lighten($black,50%);
+              margin-right: 2px;
+            }
+            &:hover {
+              color: $black;
+              .entypo { color: $black; }
+              text-decoration: none;
+            }
+          }
+        }
+      }
     }
+  }
 
-    .profile_button {
-      display: inline-block;
+  #profile {
+    border-right: 1px solid $border-grey;
+    padding: 10px 20px;
+    #profile_photo {
+      margin-top: 10px;
+      padding-bottom: 10px;
+      border-bottom: 1px dashed $border-grey;
       text-align: center;
     }
 
-    a { @include opacity(0.5); }
-    a:hover { @include opacity(1); }
-
-    .icons-check_yes_ok {
-      display: inline-block;
-      height: 18px;
-      width: 18px;
-    }
-    .icons-circle {
-      display: inline-block;
-      height: 18px;
-      width: 18px;
-    }
-    .icons-ignoreuser {
-      display: inline-block;
-      height: 14px;
-      width: 14px;
-      margin: 7px 0;
-    }
-    .icons-mention {
-      display: inline-block;
-      height: 18px;
-      width: 19px;
-      margin: 5px 0;
-    }
-    .icons-message {
-      display: inline-block;
-      height: 18px;
-      width: 25px;
-      margin: 5px 0;
-    }
-    .white_bar {
-      display: inline-block;
-      height: 18px;
-      width: 1px;
-      background-color: white;
-      margin: 5px 0;
+    ul#profile_information {
+      margin: 0;
+      list-style: none;
+      > li {
+          margin-bottom: 2em;
+        h4 { font-weight: bold; }
+        }
     }
+
   }
 }

app/assets/stylesheets/single-post-view.css.scss

@@ -165,7 +165,7 @@
     border-bottom: none;
   }
   a {
-    color: #3f8fba;
+    color: $blue;
   }
   .count {
     i {