mirror of
https://github.com/samuelclay/NewsBlur.git
synced 2025-09-18 21:50:56 +00:00
Extending profile badge to profile dialog.
This commit is contained in:
parent
fd32d38b99
commit
3e2e6e272b
7 changed files with 110 additions and 117 deletions
|
@ -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,
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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'] }, [
|
||||
|
|
|
@ -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');
|
||||
|
|
Loading…
Add table
Reference in a new issue