Commit 976ff0fc authored by Steffen van Bergerem's avatar Steffen van Bergerem

Redesign profile page and port to Bootstrap

parent 0e1bac59
......@@ -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
......
......@@ -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);
});
......@@ -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() {
......
......@@ -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.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();
}
});
......@@ -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();
}
});
......@@ -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();
});
},
......
......@@ -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();
}
});
......@@ -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(){
......
......@@ -13,7 +13,6 @@
@import 'opengraph'
@import 'poll'
@import 'help'
@import 'profile'
@import 'publisher_blueprint'
@import 'facebox'
@import 'aspects'
......
......@@ -38,4 +38,5 @@
width: 95%;
}
.comment_box { width: 95%; }
.comment_box:focus { min-height: 100px; }
}
......@@ -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;
}
......
......@@ -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; }
}
......@@ -59,6 +59,7 @@
/* people */
@import 'people';
@import 'invitations';
@import 'profile';
/* stream */
@import 'tag';
......
......@@ -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 {
......
.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; }
}
}
#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; }
}
}
}
}
......@@ -165,7 +165,7 @@
border-bottom: none;
}
a {
color: #3f8fba;
color: $blue;
}
.count {
i {
......
#main_stream .stream_element {
#main_stream .stream_element, #main_stream .photo {
padding: 10px;
border-bottom: 1px solid $border-grey;
......@@ -13,6 +13,7 @@
margin-bottom: 4px;
unicode-bidi: bidi-override;
}
a.author { color: $blue; }
.feedback {
margin-top: 5px;
font-size: 11px;
......
......@@ -7,6 +7,8 @@
}
}
a.tag { color: $blue; }
h1.tag {
border-bottom: 2px dotted $blue;
&:hover { border-bottom: 2px dotted $blue; }
......
<div id="author_info">
{{#if loggedIn}}
<div class="right">
{{#if is_own_profile}}
{{!-- can't block myself, so don't check it here --}}
<a href="{{urlTo 'edit_profile'}}" class="button creation">{{t 'people.edit_my_profile'}}</a>
{{else}} {{#if is_blocked}}
<a href="#" id="unblock_user_button" class="button">{{t 'people.stop_ignoring'}}</a>
{{else}}
<div class="placeholder aspect_membership_dropdown"></div>
{{/if}}{{/if}}
</div>
{{/if}}
{{#if loggedIn}}
<div class="pull-right">
{{#if is_own_profile}}
{{!-- can't block myself, so don't check it here --}}
<a href="{{urlTo 'edit_profile'}}" id="edit_profile" class="btn btn-primary creation">{{t 'people.edit_my_profile'}}</a>
{{else}} {{#if is_blocked}}
<a href="#" id="unblock_user_button" class="btn btn-danger">{{t 'people.stop_ignoring'}}</a>
{{else}}
<div class="placeholder aspect_membership_dropdown"></div>
{{/if}}{{/if}}
</div>
{{/if}}