From 92112a5b5662d910815561657d6032932c63177c Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Tue, 26 Mar 2013 11:10:12 -0700 Subject: [PATCH] Inverting segmented controls. Adding loader to public comments bar. Fixing button in feed chooser. --- media/css/controls.css | 139 +++++++++--------- media/css/reader.css | 42 ++++-- .../js/newsblur/reader/reader_feedchooser.js | 4 +- .../js/newsblur/views/story_comments_view.js | 4 + templates/reader/feeds_skeleton.xhtml | 2 +- 5 files changed, 103 insertions(+), 88 deletions(-) diff --git a/media/css/controls.css b/media/css/controls.css index 51bf57835..630515f51 100644 --- a/media/css/controls.css +++ b/media/css/controls.css @@ -20,15 +20,63 @@ ul.segmented-control { .segmented-control li { background: none; - background-color: #DDDFD9; float: left; margin-left: 1px; cursor: pointer; margin: 0; padding: 0; clear: none; - + text-transform: uppercase; + text-align: center; border-right: 1px solid rgba(0, 0, 0, .2); + + color: #61635e; + text-shadow: 0 1px 0 rgba(255, 255, 255, .7); + + background-color: #DDDFD9; + background-image: + -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .05))), + url(/media/img/reader/background-control-light.png); + background-image: + -moz-linear-gradient(0% 0% -90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)), + url(/media/img/reader/background-control-light.png); + + -webkit-box-shadow: inset 0 1px 3px rgba(255, 255, 255, .15), + inset 0 0 5px rgba(255, 255, 255, .1); + -moz-box-shadow: inset 0 1px 3px rgba(255, 255, 255, .15), + inset 0 0 5px rgba(255, 255, 255, .1); + box-shadow: inset 0 1px 3px rgba(255, 255, 255, .15), + inset 0 0 5px rgba(255, 255, 255, .1); +} + +.segmented-control li:active:not(.NB-disabled), +.segmented-control-active li:active { + color: #303030; + text-shadow: 0 1px 0 rgba(255, 255, 255, .3); + + background-image: + -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .25))), + url(/media/img/reader/background-control.png); + + background-image: + -moz-linear-gradient(0% 0% -90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .25)), + url(/media/img/reader/background-control.png); + + -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), + inset 0 0 5px rgba(0, 0, 0, .1); + -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), + inset 0 0 5px rgba(0, 0, 0, .1); + box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), + inset 0 0 5px rgba(0, 0, 0, .1); +} + +.segmented-control li.NB-active, +.segmented-control li.NB-active:active, +.segmented-control-active li { + color: #303030; + + background-color: #FDFDFD; + background-image: linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .3)), to(rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(0 0 -90deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); @@ -36,13 +84,26 @@ ul.segmented-control { -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1); - - color: #61635e; - text-transform: uppercase; - text-shadow: 0 1px 0 rgba(255, 255, 255, .7); - text-align: center; } +.segmented-control li.NB-disabled { + opacity: .9; + color: rgba(0, 0, 0, .1); + text-shadow: 0 1px 0 rgba(255, 255, 255, .3); + cursor: default; + + -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15), + inset 0 0 2px rgba(255, 255, 255, .1); + -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15), + inset 0 0 2px rgba(255, 255, 255, .1); + box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15), + inset 0 0 2px rgba(255, 255, 255, .1); +} +.segmented-control li.NB-disabled .NB-task-image { + opacity: .3; +} + + .segmented-control li:first-child, .segmented-control li.NB-first { margin-left: 0; @@ -64,66 +125,4 @@ ul.segmented-control { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-right: none; -} - -.segmented-control li:active:not(.NB-disabled), -.segmented-control-active li:active { - background-image: - -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .25))), - url(/media/img/reader/background-control.png); - - background-image: - -moz-linear-gradient(0% 0% -90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .25)), - url(/media/img/reader/background-control.png); - - -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), - inset 0 0 5px rgba(0, 0, 0, .1); - -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), - inset 0 0 5px rgba(0, 0, 0, .1); - box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), - inset 0 0 5px rgba(0, 0, 0, .1); - - text-shadow: 0 1px 0 rgba(255, 255, 255, .3); - - color: #303030; -} - -.segmented-control li.NB-active, -.segmented-control li.NB-active:active, -.segmented-control-active li { - background-image: - -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .05))), - url(/media/img/reader/background-control-light.png); - - background-image: - -moz-linear-gradient(0% 0% -90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)), - url(/media/img/reader/background-control-light.png); - - background-color: #FDFDFD; - - -webkit-box-shadow: inset 0 1px 3px rgba(255, 255, 255, .15), - inset 0 0 5px rgba(255, 255, 255, .1); - -moz-box-shadow: inset 0 1px 3px rgba(255, 255, 255, .15), - inset 0 0 5px rgba(255, 255, 255, .1); - box-shadow: inset 0 1px 3px rgba(255, 255, 255, .15), - inset 0 0 5px rgba(255, 255, 255, .1); - - color: #303030; -} - -.segmented-control li.NB-disabled { - opacity: .9; - color: rgba(0, 0, 0, .1); - text-shadow: 0 1px 0 rgba(255, 255, 255, .3); - cursor: default; - - -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15), - inset 0 0 2px rgba(255, 255, 255, .1); - -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15), - inset 0 0 2px rgba(255, 255, 255, .1); - box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15), - inset 0 0 2px rgba(255, 255, 255, .1); -} -.segmented-control li.NB-disabled .NB-task-image { - opacity: .3; -} +} \ No newline at end of file diff --git a/media/css/reader.css b/media/css/reader.css index 0b6b6f0db..e26bffa83 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -2703,18 +2703,11 @@ background: transparent; .NB-story-comments-public-header-wrapper { margin-top: 12px; } -.NB-story-comments-public-teaser, -.NB-story-comments-public-header { - -webkit-transition: all .12s ease-out; - -moz-transition: all .12s ease-out; - -o-transition: all .12s ease-out; - -ms-transition: all .12s ease-out; -} .NB-story-comments-shares-teaser { background-color: #F5F5EF; color: #898989; cursor: default; - text-shadow: 0 1px 0 #FFF; + text-shadow: 0 1px 0 rgba(255, 255, 255, .8); font-weight: normal; font-size: 10px; padding: 4px 12px 4px 28px; @@ -2724,21 +2717,39 @@ background: transparent; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1); - -webkit-transition: all .12s ease-out; - -moz-transition: all .12s ease-out; - -o-transition: all .12s ease-out; - -ms-transition: all .12s ease-out; } .NB-story-comments-public-teaser-wrapper:hover .NB-story-comments-public-teaser { - background-color: #2B478C; - background-image: none; - text-shadow: 0 1px 0 #141F48; + background-image: -webkit-linear-gradient(center top , #EAECE5, #DDDFD6); + background-image: -moz-linear-gradient(center top , #EAECE5, #DDDFD6); + background-image: linear-gradient(center top , #EAECE5, #DDDFD6); + text-shadow: 0 1px 0 rgba(255, 255, 255, .8); +} +.NB-story-comments-public-teaser-wrapper:active .NB-story-comments-public-teaser { + background-image: -webkit-linear-gradient(center top , #D6D9D0, #C7CABF); + background-image: -moz-linear-gradient(center top , #D6D9D0, #C7CABF); + background-image: linear-gradient(center top , #D6D9D0, #C7CABF); } .NB-story-comments-public-teaser b { padding: 0 1px; font-size: 12px; } +.NB-story-comments-expand-icon { + background: transparent url("/media/embed/icons/circular/folder_expand.png") no-repeat center center; + background-size: 13px 12px; + width: 16px; + height: 16px; + float: right; + margin: 2px 2px; + opacity: .8; +} +.NB-story-comments-expand-icon.NB-loading { + background: transparent url("/media/embed/reader/recycle_spinner.gif") no-repeat center center; + background-size: 16px; +} +.NB-story-comments-public-teaser-wrapper:hover .NB-story-comments-expand-icon { + opacity: 1; +} .NB-story-share-label { display: inline-block; margin: 0 4px 0 0; @@ -2880,6 +2891,7 @@ background: transparent; text-shadow: 0 1px 0 #000; margin-top: 1px; background-color: #edefea; + clear: both; -webkit-transition: all .12s ease-out; -moz-transition: all .12s ease-out; -o-transition: all .12s ease-out; diff --git a/media/js/newsblur/reader/reader_feedchooser.js b/media/js/newsblur/reader/reader_feedchooser.js index 20efe5acb..1551ce656 100644 --- a/media/js/newsblur/reader/reader_feedchooser.js +++ b/media/js/newsblur/reader/reader_feedchooser.js @@ -54,8 +54,8 @@ NEWSBLUR.ReaderFeedchooser.prototype = { $.make('form', { className: 'NB-feedchooser-form' }, [ $.make('div', { className: 'NB-modal-submit' }, [ // $.make('div', { className: 'NB-modal-submit-or' }, 'or'), - $.make('input', { type: 'submit', disabled: 'true', className: 'NB-disabled NB-modal-submit-save NB-modal-submit-green', value: 'Check what you like above...' }), - $.make('input', { type: 'submit', className: 'NB-modal-submit-add NB-modal-submit-green', value: 'First, add sites' }) + $.make('input', { type: 'submit', disabled: 'true', className: 'NB-disabled NB-modal-submit-button NB-modal-submit-save NB-modal-submit-green', value: 'Check what you like above...' }), + $.make('input', { type: 'submit', className: 'NB-modal-submit-add NB-modal-submit-button NB-modal-submit-green', value: 'First, add sites' }) ]) ]).bind('submit', function(e) { e.preventDefault(); diff --git a/media/js/newsblur/views/story_comments_view.js b/media/js/newsblur/views/story_comments_view.js index 18b48ed9d..b50cb2202 100644 --- a/media/js/newsblur/views/story_comments_view.js +++ b/media/js/newsblur/views/story_comments_view.js @@ -85,6 +85,7 @@ NEWSBLUR.Views.StoryCommentsView = Backbone.View.extend({ if (NEWSBLUR.assets.preference('hide_public_comments')) { var $public_teaser = $.make('div', { className: 'NB-story-comments-public-teaser-wrapper' }, [ $.make('div', { className: 'NB-story-comments-public-teaser NB-module-header' }, [ + $.make('div', { className: 'NB-story-comments-expand-icon' }), 'There ', Inflector.pluralize('is', this.model.get('comment_count_public')), ' ', @@ -153,7 +154,10 @@ NEWSBLUR.Views.StoryCommentsView = Backbone.View.extend({ load_public_story_comments: function() { var following_user_ids = NEWSBLUR.assets.user_profile.get('following_user_ids'); + this.$(".NB-story-comments-expand-icon").addClass("NB-loading"); + NEWSBLUR.assets.load_public_story_comments(this.model.id, this.model.get('story_feed_id'), _.bind(function(comments) { + this.$(".NB-story-comments-expand-icon").addClass("NB-loading"); var $comments = $.make('div', { className: 'NB-story-comments-public' }); var public_comments = comments.select(_.bind(function(comment) { return !_.contains(following_user_ids, comment.get('user_id')); diff --git a/templates/reader/feeds_skeleton.xhtml b/templates/reader/feeds_skeleton.xhtml index aeb4b49e5..f2c0e0e1d 100644 --- a/templates/reader/feeds_skeleton.xhtml +++ b/templates/reader/feeds_skeleton.xhtml @@ -182,7 +182,7 @@ -