From 64d607d7e909af60f462432b4b61f43b7a23dd89 Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Tue, 10 Jul 2012 00:17:45 -0700 Subject: [PATCH] Fully customizable blurblogs: title, background color, and custom css. --- apps/social/models.py | 12 +- apps/social/urls.py | 1 + apps/social/views.py | 20 ++- media/css/reader.css | 60 +++++++- media/css/social/social_page.css | 2 +- media/js/newsblur/common/assetmodel.js | 7 + .../newsblur/reader/reader_profile_editor.js | 129 +++++++++++++++--- templates/social/social_page.xhtml | 2 +- 8 files changed, 210 insertions(+), 23 deletions(-) diff --git a/apps/social/models.py b/apps/social/models.py index e90938694..5857bf5ad 100644 --- a/apps/social/models.py +++ b/apps/social/models.py @@ -91,7 +91,8 @@ class MSocialProfile(mongo.Document): username = mongo.StringField(max_length=30, unique=True) email = mongo.StringField() bio = mongo.StringField(max_length=160) - blog_title = mongo.StringField(max_length=256) + blurblog_title = mongo.StringField(max_length=256) + custom_bgcolor = mongo.StringField(max_length=50) custom_css = mongo.StringField() photo_url = mongo.StringField() photo_service = mongo.StringField() @@ -254,7 +255,7 @@ class MSocialProfile(mongo.Document): @property def title(self): - return self.blog_title if self.blog_title else self.username + "'s blurblog" + return self.blurblog_title if self.blurblog_title else self.username + "'s blurblog" def feed(self): params = self.to_json(compact=True) @@ -297,7 +298,7 @@ class MSocialProfile(mongo.Document): domain = Site.objects.get_current().domain.replace('www', 'dev') return 'http://' + domain + settings.MEDIA_URL + 'img/reader/default_profile_photo.png' - def to_json(self, compact=False, include_follows=False, common_follows_with_user=None): + def to_json(self, compact=False, include_follows=False, common_follows_with_user=None, include_settings=False): # domain = Site.objects.get_current().domain domain = Site.objects.get_current().domain.replace('www', 'dev') params = { @@ -324,6 +325,11 @@ class MSocialProfile(mongo.Document): 'stories_last_month': self.stories_last_month, 'average_stories_per_month': self.average_stories_per_month, }) + if include_settings: + params.update({ + 'custom_css': self.custom_css, + 'custom_bgcolor': self.custom_bgcolor, + }) if include_follows: params.update({ 'photo_service': self.photo_service, diff --git a/apps/social/urls.py b/apps/social/urls.py index f83d63718..fab645fed 100644 --- a/apps/social/urls.py +++ b/apps/social/urls.py @@ -9,6 +9,7 @@ urlpatterns = patterns('', url(r'^profile/?$', views.profile, name='profile'), url(r'^load_user_profile/?$', views.load_user_profile, name='load-user-profile'), url(r'^save_user_profile/?$', views.save_user_profile, name='save-user-profile'), + url(r'^save_blurblog_settings/?$', views.save_blurblog_settings, name='save-blurblog-settings'), url(r'^interactions/?$', views.load_interactions, name='social-interactions'), url(r'^follow/?$', views.follow, name='social-follow'), url(r'^unfollow/?$', views.unfollow, name='social-unfollow'), diff --git a/apps/social/views.py b/apps/social/views.py index 8af9f63bf..d4ad792cf 100644 --- a/apps/social/views.py +++ b/apps/social/views.py @@ -558,9 +558,11 @@ def load_user_profile(request): social_profile, _ = MSocialProfile.objects.get_or_create(user_id=request.user.pk) social_services, _ = MSocialServices.objects.get_or_create(user_id=request.user.pk) + logging.user(request, "~BB~FRLoading social profile and blurblog settings") + return { 'services': social_services, - 'user_profile': social_profile.to_json(include_follows=True), + 'user_profile': social_profile.to_json(include_follows=True, include_settings=True), } @ajax_login_required @@ -581,6 +583,22 @@ def save_user_profile(request): return dict(code=1, user_profile=profile.to_json(include_follows=True)) + +@ajax_login_required +@json.json_view +def save_blurblog_settings(request): + data = request.POST + + profile, _ = MSocialProfile.objects.get_or_create(user_id=request.user.pk) + profile.custom_css = data.get('custom_css', None) + profile.custom_bgcolor = data.get('custom_bgcolor', None) + profile.blurblog_title = data.get('blurblog_title', None) + profile.save() + + logging.user(request, "~BB~FRSaving blurblog settings") + + return dict(code=1, user_profile=profile.to_json(include_follows=True, include_settings=True)) + @json.json_view def load_user_friends(request): user = get_user(request.user) diff --git a/media/css/reader.css b/media/css/reader.css index cf2ae9015..df5bb50a8 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -7731,7 +7731,7 @@ form.opml_import_form input { } .NB-modal-profile-editor .NB-tab-profile .NB-modal-submit-button { float: left; - margin: 12px 0 0 12px; + margin: 12px 0 12px 12px; text-align: center; } .NB-modal-profile-editor .NB-modal-section.NB-friends-profile { @@ -7851,6 +7851,64 @@ form.opml_import_form input { text-transform: uppercase; } +.NB-modal-profile-editor .NB-tab-blurblog label { + clear: both; + float: left; + width: 200px; + padding: 0 8px 0 12px; +} +.NB-modal-profile-editor .NB-tab-blurblog input { + width: 300px; +} +.NB-modal-profile-editor .NB-profile-blurblog-colors { + width: 516px; + float: left; + margin: 0 -6px 12px; +} +.NB-modal-profile-editor .NB-profile-blurblog-colorline { + clear: both; +} +.NB-modal-profile-editor .NB-profile-blurblog-color { + float: left; + width: 29px; + height: 33px; + border: 1px solid #606060; + margin: 5px 6px; + box-shadow: 1px 1px 0 #CFCFCF; +} +.NB-modal-profile-editor .NB-profile-blurblog-color:hover { + box-shadow: none; + border: 4px solid #D95300; + margin: 2px 3px; + cursor: pointer; +} +.NB-modal-profile-editor .NB-profile-blurblog-color.NB-active { + border: 4px solid #8F1F00; + margin: 2px 3px; +} +.NB-modal-profile-editor .NB-profile-blurblog-css { + width: 100%; + font-family: Courier, monospace; + font-size: 13px; + padding: 6px; + height: 54px; +} +.NB-modal-profile-editor .NB-tab-blurblog input[type=text] { + margin: 0 0 12px; +} +.NB-modal-profile-editor .NB-profile-blurblog-address { + float: left; + margin: 0 0 12px; +} +.NB-modal-profile-editor .NB-blurblog-save-button { + margin: 18px 12px 12px; + float: left; + clear: both; +} +.NB-modal-profile-editor .NB-tab.NB-tab-profile, +.NB-modal-profile-editor .NB-tab.NB-tab-blurblog { + height: auto; +} /* ================= */ /* = Profile Badge = */ diff --git a/media/css/social/social_page.css b/media/css/social/social_page.css index ae7a15470..c25f27e53 100644 --- a/media/css/social/social_page.css +++ b/media/css/social/social_page.css @@ -44,7 +44,7 @@ blockquote { /* ========== */ .NB-page { - background: #EBC55F url(/media/img/reader/background-control-light.png) repeat 0 0; + background: transparent url(/media/img/reader/background-control-light.png) repeat 0 0; padding: 0 12px; overflow: hidden; } diff --git a/media/js/newsblur/common/assetmodel.js b/media/js/newsblur/common/assetmodel.js index 6eb403ee1..6c0a3a1c4 100644 --- a/media/js/newsblur/common/assetmodel.js +++ b/media/js/newsblur/common/assetmodel.js @@ -1124,6 +1124,13 @@ NEWSBLUR.AssetModel = Backbone.Router.extend({ }, this)); }, + save_blurblog_settings: function(data, callback) { + this.make_request('/social/save_blurblog_settings/', data, _.bind(function(response) { + this.user_profile.set(response.user_profile); + callback(response); + }, this)); + }, + follow_user: function(user_id, callback) { this.make_request('/social/follow', {'user_id': user_id}, _.bind(function(data) { console.log(["follow data", data]); diff --git a/media/js/newsblur/reader/reader_profile_editor.js b/media/js/newsblur/reader/reader_profile_editor.js index 5fd5e49a5..905996845 100644 --- a/media/js/newsblur/reader/reader_profile_editor.js +++ b/media/js/newsblur/reader/reader_profile_editor.js @@ -68,28 +68,82 @@ _.extend(NEWSBLUR.ReaderProfileEditor.prototype, { ]) ]) ]), - $.make('div', { className: 'NB-modal-submit-grey NB-profile-save-button NB-modal-submit-button' }, 'Save my profile') + $.make('div', { className: 'NB-modal-submit-grey NB-profile-save-button NB-modal-submit-button' }, 'Change your profile above') ]), $.make('div', { className: 'NB-tab NB-tab-blurblog' }, [ $.make('fieldset', [ $.make('legend', 'Your Blurblog'), - $.make('div', { className: 'NB-modal-section NB-profile-editor-blurblog-preview' }) + $.make('div', { className: 'NB-modal-section NB-profile-editor-blurblog-preview' }, [ + $.make('label', { 'for': 'NB-profile-blurblog-address' }, 'Blurblog address'), + $.make('a', { href: this.profile.get('feed_link'), target: '_blank', className: 'NB-profile-blurblog-address NB-splash-link' }, this.profile.get('feed_link')), + $.make('label', { 'for': 'NB-profile-blurblog-title' }, 'Blurblog title'), + $.make('input', { type: 'text', id: 'NB-profile-blurblog-title', name: 'blurblog_title', value: this.profile.get('feed_title'), className: 'NB-input' }), + $.make('label', 'Background color'), + this.make_color_palette() + ]) ]), $.make('fieldset', [ - $.make('legend', 'Custom CSS'), - $.make('div', { className: 'NB-modal-section NB-profile-editor-blurblog-custom-css'}) + $.make('legend', 'Custom CSS for your Blurblog'), + $.make('div', { className: 'NB-modal-section NB-profile-editor-blurblog-custom-css'}, [ + $.make('textarea', { 'className': 'NB-profile-blurblog-css', name: 'css' }) + ]) ]), - $.make('fieldset', [ - $.make('legend', 'Comments'), - $.make('div', { className: 'NB-modal-section NB-profile-editor-blurblog'}) - ]), - $.make('div', { className: 'NB-modal-submit-grey NB-profile-save-button NB-modal-submit-button' }, 'Save my blurblog settings') + $.make('div', { className: 'NB-modal-submit-grey NB-blurblog-save-button NB-modal-submit-button' }, 'Change your blurblog settings above') ]), $.make('div', { className: 'NB-tab NB-tab-following' }), $.make('div', { className: 'NB-tab NB-tab-followers' }) ]); }, + make_color_palette: function() { + var user_profile = this.user_profile; + var colors = [ + // ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(153, 153, 153)","rgb(183, 183, 183)", + // "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(239, 239, 239)", "rgb(243, 243, 243)", "rgb(255, 255, 255)"], + // ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", + // "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], + ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", + "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", + "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", + "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", + "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", + "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)", + "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)", + "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)", + "rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)", + "rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)", + "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", + "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"] + ]; + + var $colors = $.make('div', { className: 'NB-profile-blurblog-colors' }); + _.each(colors, function(color_line) { + var $color_line = $.make('div', { className: 'NB-profile-blurblog-colorline' }); + _.each(color_line, function(color) { + var $color = $.make('span', { className: 'NB-profile-blurblog-color', style: 'background-color: ' + color }).data('color', color); + $color_line.append($color); + }); + $colors.append($color_line); + }); + + return $colors; + }, + + choose_color: function() { + var user_profile = this.profile; + var $colors = $('.NB-profile-blurblog-color', this.$modal); + + $colors.each(function() { + var $color = $(this); + var color = $color.data('color'); + + if (user_profile.get('custom_bgcolor') == color) { + $color.addClass('NB-active'); + return false; + } + }); + }, + make_profile_section: function() { var $badge = $('.NB-friends-findfriends-profile', this.$modal).empty(); var $profile_badge; @@ -144,6 +198,7 @@ _.extend(NEWSBLUR.ReaderProfileEditor.prototype, { this.services = data.services; this.make_profile_section(); this.make_profile_photo_chooser(); + this.choose_color(); callback && callback(); }, this)); }, @@ -234,12 +289,25 @@ _.extend(NEWSBLUR.ReaderProfileEditor.prototype, { }; this.model.save_user_profile(data, _.bind(function() { this.animate_profile_badge(); - this.disable_save(); + this.disable_save_profile(); }, this)); - this.disable_save(); + this.disable_save_profile(); $('.NB-profile-save-button', this.$modal).text('Saving...'); }, + save_blurblog: function() { + var data = { + 'blurblog_title': $('input[name=blurblog_title]', this.$modal).val(), + 'custom_bgcolor': $('.NB-profile-blurblog-color.NB-active', this.$modal).data('color'), + 'custom_css': $('textarea[name=css]', this.$modal).val() + }; + this.model.save_blurblog_settings(data, _.bind(function() { + this.disable_save_blurblog(); + }, this)); + this.disable_save_blurblog(); + $('.NB-blurblog-save-button', this.$modal).text('Saving...'); + }, + animate_profile_badge: function($badge) { $badge = $('table', $badge) || $('.NB-friends-findfriends-profile .NB-profile-badge table', this.$modal); _.delay(_.bind(function() { @@ -269,6 +337,12 @@ _.extend(NEWSBLUR.ReaderProfileEditor.prototype, { }); }, + set_active_color: function($color) { + $('.NB-profile-blurblog-color.NB-active', this.$modal).removeClass('NB-active'); + $color.addClass('NB-active'); + this.enable_save_blurblog(); + }, + // =========== // = Actions = // =========== @@ -291,6 +365,11 @@ _.extend(NEWSBLUR.ReaderProfileEditor.prototype, { self.save_profile(); }); + $.targetIs(e, { tagSelector: '.NB-blurblog-save-button' }, function($t, $p) { + e.preventDefault(); + + self.save_blurblog(); + }); $.targetIs(e, { tagSelector: '.NB-account-link' }, function($t, $p) { e.preventDefault(); @@ -301,6 +380,10 @@ _.extend(NEWSBLUR.ReaderProfileEditor.prototype, { self.close_and_load_friends(); }); + $.targetIs(e, { tagSelector: '.NB-profile-blurblog-color' }, function($t, $p) { + e.preventDefault(); + self.set_active_color($t); + }); }, handle_cancel: function() { @@ -333,23 +416,37 @@ _.extend(NEWSBLUR.ReaderProfileEditor.prototype, { }, delegate_change: function() { - $('.NB-tab-profile', this.$modal).delegate('input[type=radio],input[type=checkbox],select', 'change', _.bind(this.enable_save, this)); - $('.NB-tab-profile', this.$modal).delegate('input[type=text]', 'keydown', _.bind(this.enable_save, this)); + $('.NB-tab-profile', this.$modal).delegate('input[type=radio],input[type=checkbox],select', 'change', _.bind(this.enable_save_profile, this)); + $('.NB-tab-profile', this.$modal).delegate('input[type=text]', 'keydown', _.bind(this.enable_save_profile, this)); + $('.NB-tab-blurblog', this.$modal).delegate('input[type=text],textarea', 'keydown', _.bind(this.enable_save_blurblog, this)); }, - enable_save: function() { - console.log(["enable_save"]); + enable_save_profile: function() { $('.NB-profile-save-button', this.$modal) .removeClass('NB-modal-submit-grey') .addClass('NB-modal-submit-green') .text('Save My Profile'); }, - disable_save: function() { + enable_save_blurblog: function() { + $('.NB-blurblog-save-button', this.$modal) + .removeClass('NB-modal-submit-grey') + .addClass('NB-modal-submit-green') + .text('Save My Blurblog Settings'); + }, + + disable_save_profile: function() { $('.NB-profile-save-button', this.$modal) .addClass('NB-modal-submit-grey') .removeClass('NB-modal-submit-green') .text('Change what you like above...'); + }, + + disable_save_blurblog: function() { + $('.NB-blurblog-save-button', this.$modal) + .addClass('NB-modal-submit-grey') + .removeClass('NB-modal-submit-green') + .text('Change what you like above...'); } }); \ No newline at end of file diff --git a/templates/social/social_page.xhtml b/templates/social/social_page.xhtml index 0cb417877..a64541662 100644 --- a/templates/social/social_page.xhtml +++ b/templates/social/social_page.xhtml @@ -44,7 +44,7 @@ -
+