Extending profile badge to profile dialog.

This commit is contained in:
Samuel Clay 2012-03-07 18:35:17 -08:00
parent fd32d38b99
commit 3e2e6e272b
7 changed files with 110 additions and 117 deletions

View file

@ -219,10 +219,12 @@ def load_feeds(request):
'update_counts': update_counts,
}
social_feeds = MSocialSubscription.feeds(**social_params)
social_profile = MSocialProfile.profile(user.pk)
data = {
'feeds': feeds,
'social_feeds': social_feeds,
'social_profile': social_profile,
'folders': json.decode(folders.folders),
'starred_count': starred_count,
}

View file

@ -107,6 +107,14 @@ class MSocialProfile(mongo.Document):
}
return values
@classmethod
def profile(cls, user_id):
try:
profile = cls.objects.get(user_id=user_id)
except cls.DoesNotExist:
return {}
return profile.to_json(full=True)
@classmethod
def profiles(cls, user_ids):
profiles = cls.objects.filter(user_id__in=user_ids)
@ -180,7 +188,6 @@ class MSocialProfile(mongo.Document):
'photo_service': self.photo_service,
'following_user_ids': self.following_user_ids,
'follower_user_ids': self.follower_user_ids,
'unfollowed_user_ids': self.unfollowed_user_ids,
})
return params

View file

@ -7250,54 +7250,93 @@ background: transparent;
border-bottom: 1px solid #E0E0E0;
padding: 0 0 16px;
}
.NB-modal-friends .NB-profile-badge {
/* ================= */
/* = Profile Badge = */
/* ================= */
.NB-profile-badge {
clear: both;
padding: 12px 12px 12px 72px;
padding: 12px 12px 12px 12px;
position: relative;
font-size: 13px;
line-height: 17px;
background-color: white;
min-height: 50px;
width: 100%;
}
.NB-modal-friends .NB-profile-badge .NB-profile-badge-photo {
position: absolute;
top: 12px;
left: 12px;
.NB-profile-badge td {
vertical-align: middle;
}
.NB-modal-friends .NB-profile-badge .NB-profile-badge-photo img {
width: 48px;
height: 48px;
.NB-profile-badge td.NB-profile-badge-info {
width: 100%;
}
.NB-profile-badge.NB-profile-badge-embiggen {
padding: 12px 0;
}
.NB-profile-badge .NB-profile-badge-photo {
padding: 0 8px 0 0;
}
.NB-profile-badge .NB-profile-badge-photo img {
max-width: 48px;
max-height: 48px;
border-radius: 3px;
}
.NB-modal-friends .NB-profile-badge .NB-profile-badge-username {
.NB-profile-badge.NB-profile-badge-embiggen .NB-profile-badge-photo img {
max-width: 108px;
max-height: 108px;
}
.NB-profile-badge .NB-profile-badge-username {
font-weight: bold;
float: left;
}
.NB-modal-friends .NB-profile-badge .NB-profile-badge-location {
.NB-profile-badge.NB-profile-badge-embiggen .NB-profile-badge-username {
font-size: 22px;
text-shadow: 1px 1px 0 #E0E0E0;
}
.NB-profile-badge .NB-profile-badge-location {
font-weight: bold;
color: #909090;
font-size: 11px;
float: left;
padding-left: 12px;
}
.NB-modal-friends .NB-profile-badge .NB-profile-badge-bio {
.NB-profile-badge.NB-profile-badge-embiggen .NB-profile-badge-location {
font-size: 12px;
padding: 4px 0 0 12px;
}
.NB-profile-badge .NB-profile-badge-website {
float: left;
padding-left: 12px;
}
.NB-profile-badge.NB-profile-badge-embiggen .NB-profile-badge-website {
padding: 4px 0 0 12px;
}
.NB-profile-badge .NB-profile-badge-bio {
clear: left;
}
.NB-modal-friends .NB-profile-badge .NB-profile-badge-stats {
.NB-profile-badge.NB-profile-badge-embiggen .NB-profile-badge-bio {
font-size: 15px;
padding: 2px 0 0;
}
.NB-profile-badge .NB-profile-badge-stats {
clear: left;
color: #AE5D15;
font-size: 11px;
text-transform: uppercase;
}
.NB-modal-friends .NB-profile-badge .NB-profile-badge-stats .NB-count {
.NB-profile-badge.NB-profile-badge-embiggen .NB-profile-badge-stats {
padding: 2px 0 0;
}
.NB-profile-badge .NB-profile-badge-stats .NB-count {
padding-right: 3px;
font-weight: bold;
}
.NB-modal-friends .NB-profile-badge-actions {
.NB-profile-badge-actions {
float: right;
margin-top: 10px;
}
.NB-modal-friends .NB-profile-badge-actions .NB-profile-badge-action-self {
.NB-profile-badge-actions .NB-profile-badge-action-self {
color: #C0C0C0;
font-weight: bold;
background: none;
@ -7305,8 +7344,8 @@ background: transparent;
cursor: default;
border-color: #C0C0C0;
}
.NB-modal-friends .NB-profile-badge-actions .NB-profile-badge-action-self,
.NB-modal-friends .NB-profile-badge-actions .NB-modal-submit-button {
.NB-profile-badge-actions .NB-profile-badge-action-self,
.NB-profile-badge-actions .NB-modal-submit-button {
width: 90px;
text-align: center;
text-transform: uppercase;
@ -7332,42 +7371,6 @@ background: transparent;
text-transform: uppercase;
color: #151775;
}
.NB-modal-profile .NB-profile-photo {
max-width: 108px;
max-height: 108px;
margin: 0 8px 0 0;
}
.NB-modal-profile .NB-profile-username {
font-weight: bold;
float: left;
}
.NB-modal-profile .NB-profile-location {
font-weight: bold;
color: #909090;
font-size: 12px;
float: left;
padding: 10px 0 0 12px;
}
.NB-modal-profile .NB-profile-website {
padding: 2px 0;
font-size: 12px;
text-decoration: underline;
text-transform: none;
}
.NB-modal-profile .NB-profile-bio {
clear: left;
}
.NB-modal-profile .NB-profile-badge-stats {
clear: left;
color: #AE5D15;
font-size: 11px;
text-transform: uppercase;
padding: 4px 0 0 0;
}
.NB-modal-profile .NB-profile-badge-stats .NB-count {
padding-right: 3px;
font-weight: bold;
}
.NB-modal-profile .NB-profile-actions {
float: right;
margin-top: 10px;

View file

@ -34,7 +34,10 @@ NEWSBLUR.AssetModel.Reader = function() {
this.classifiers = {};
this.friends = {};
this.profile = {};
this.user_profile = new NEWSBLUR.Models.User();
this.user_profiles = new NEWSBLUR.Collections.Users();
this.follower_profiles = new NEWSBLUR.Collections.Users();
this.following_profiles = new NEWSBLUR.Collections.Users();
this.starred_stories = [];
this.starred_count = 0;
this.read_stories_river_count = 0;
@ -274,6 +277,7 @@ NEWSBLUR.AssetModel.Reader.prototype = {
self.folders = subscriptions.folders;
self.starred_count = subscriptions.starred_count;
self.social_feeds.reset(subscriptions.social_feeds);
self.user_profile.set(subscriptions.social_profile);
if (!_.isEqual(self.favicons, {})) {
_.each(self.feeds, function(feed) {

View file

@ -145,10 +145,7 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
$.make('img', { src: NEWSBLUR.Globals['MEDIA_URL']+'img/icons/silk/eye.png' })
]);
} else {
$profile_badge = new NEWSBLUR.Views.SocialProfileBadge({
model: profile,
user_profile: this.profile
});
$profile_badge = new NEWSBLUR.Views.SocialProfileBadge({model: profile});
}
$badge.append($profile_badge);
@ -220,10 +217,7 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
]);
$tab.append($heading);
this.model.follower_profiles.each(_.bind(function(profile) {
$tab.append(new NEWSBLUR.Views.SocialProfileBadge({
model: profile,
user_profile: this.profile
}));
$tab.append(new NEWSBLUR.Views.SocialProfileBadge({model: profile}));
}, this));
}
},
@ -241,10 +235,7 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
]);
$tab.append($heading);
this.model.following_profiles.each(_.bind(function(profile) {
$tab.append(new NEWSBLUR.Views.SocialProfileBadge({
model: profile,
user_profile: this.profile
}));
$tab.append(new NEWSBLUR.Views.SocialProfileBadge({model: profile}));
}, this));
}
},

View file

@ -25,16 +25,13 @@ _.extend(NEWSBLUR.ReaderSocialProfile.prototype, {
make_modal: function() {
var self = this;
var profile = new NEWSBLUR.Views.SocialProfileBadge({
model: this.profile,
embiggen: true
});
this.$modal = $.make('div', { className: 'NB-modal NB-modal-profile' }, [
$.make('table', { className: 'NB-profile-info-table' }, [
$.make('tr', [
$.make('td', [
$.make('img', { src: this.profile.get('photo_url'), className: 'NB-profile-photo' })
]),
$.make('td', { className: 'NB-profile-info-header' }, this.make_profile_user_info_header())
])
]),
$.make('div', { className: 'NB-profile-info-header' }, $(profile)),
$.make('div', { className: 'NB-profile-section' }, [
$.make('h3', 'Following'),
$.make('fieldset', [
@ -64,7 +61,7 @@ _.extend(NEWSBLUR.ReaderSocialProfile.prototype, {
$('.NB-modal-loading', this.$modal).addClass('NB-active');
this.model.fetch_user_profile(user_id, _.bind(function(data) {
this.profile = new NEWSBLUR.Models.User(data.user_profile);
this.profile.set(data.user_profile);
this.populate_friends(data);
callback && callback();
this.resize();
@ -72,35 +69,12 @@ _.extend(NEWSBLUR.ReaderSocialProfile.prototype, {
},
populate_friends: function(data) {
$('.NB-profile-info-header', this.$modal).html(this.make_profile_user_info_header());
$('.NB-profile-following-youknow', this.$modal).html(this.make_profile_badges(data.following_youknow));
$('.NB-profile-following-everybody', this.$modal).html(this.make_profile_badges(data.following_everybody));
$('.NB-profile-followers-youknow', this.$modal).html(this.make_profile_badges(data.followers_youknow));
$('.NB-profile-followers-everybody', this.$modal).html(this.make_profile_badges(data.followers_everybody));
},
make_profile_user_info_header: function() {
var $info = $.make('div', [
$.make('h2', { className: 'NB-modal-title NB-profile-username' }, this.profile.get('username')),
$.make('div', { className: 'NB-profile-location' }, this.profile.get('location')),
$.make('div', { className: 'NB-profile-bio' }, this.profile.get('bio')),
$.make('div', { className: 'NB-profile-badge-stats' }, [
$.make('span', { className: 'NB-count' }, this.profile.get('shared_stories_count')),
'shared ',
Inflector.pluralize('story', this.profile.get('shared_stories_count')),
' · ',
$.make('span', { className: 'NB-count' }, this.profile.get('follower_count')),
Inflector.pluralize('follower', this.profile.get('follower_count')),
(this.profile.get('website') && ' · '),
(this.profile.get('website') && $.make('a', {
href: this.profile.get('website'),
className: 'NB-profile-website NB-splash-link'
}, this.profile.get('website')))
])
]);
return $info;
},
make_profile_badges: function(profiles) {
var $badges = $.make('div', _.map(profiles, function(profile) {
return $.make('div', { className: 'NB-profile-badge', title: profile['username'] }, [

View file

@ -19,28 +19,40 @@ NEWSBLUR.Views.SocialProfileBadge = Backbone.View.extend({
render: function() {
var profile = this.model;
this.$el.html($.make('div', { className: "NB-profile-badge" }, [
$.make('div', { className: 'NB-profile-badge-actions' }),
$.make('div', { className: 'NB-profile-badge-photo' }, [
$.make('img', { src: profile.get('photo_url') })
]),
$.make('div', { className: 'NB-profile-badge-username' }, profile.get('username')),
$.make('div', { className: 'NB-profile-badge-location' }, profile.get('location')),
$.make('div', { className: 'NB-profile-badge-bio' }, profile.get('bio')),
$.make('div', { className: 'NB-profile-badge-stats' }, [
$.make('span', { className: 'NB-count' }, profile.get('shared_stories_count')),
'shared ',
Inflector.pluralize('story', profile.get('shared_stories_count')),
' · ',
$.make('span', { className: 'NB-count' }, profile.get('follower_count')),
Inflector.pluralize('follower', profile.get('follower_count'))
this.$el.html($.make('table', { className: "NB-profile-badge " + (this.options.embiggen ? "NB-profile-badge-embiggen" : "") }, [
$.make('tr', [
$.make('td', [
$.make('div', { className: 'NB-profile-badge-photo' }, [
$.make('img', { src: profile.get('photo_url') })
])
]),
$.make('td', { className: 'NB-profile-badge-info' }, [
$.make('div', { className: 'NB-profile-badge-actions' }),
$.make('div', { className: 'NB-profile-badge-username' }, profile.get('username')),
$.make('div', { className: 'NB-profile-badge-location' }, profile.get('location')),
(profile.get('website') && $.make('a', {
href: profile.get('website'),
target: '_blank',
rel: 'nofollow',
className: 'NB-profile-badge-website NB-splash-link'
}, profile.get('website').replace('http://', ''))),
$.make('div', { className: 'NB-profile-badge-bio' }, profile.get('bio')),
$.make('div', { className: 'NB-profile-badge-stats' }, [
$.make('span', { className: 'NB-count' }, profile.get('shared_stories_count')),
'shared ',
Inflector.pluralize('story', profile.get('shared_stories_count')),
' · ',
$.make('span', { className: 'NB-count' }, profile.get('follower_count')),
Inflector.pluralize('follower', profile.get('follower_count'))
])
])
])
]));
var $actions;
if (this.options.user_profile.get('user_id') == profile.get('user_id')) {
if (NEWSBLUR.reader.model.user_profile.get('user_id') == profile.get('user_id')) {
$actions = $.make('div', { className: 'NB-profile-badge-action-self NB-modal-submit-button' }, 'You');
} else if (_.contains(this.options.user_profile.get('following_user_ids'), profile.get('user_id'))) {
} else if (_.contains(NEWSBLUR.reader.model.user_profile.get('following_user_ids'), profile.get('user_id'))) {
$actions = $.make('div', {
className: 'NB-profile-badge-action-unfollow NB-modal-submit-button NB-modal-submit-close'
}, 'Following');