public-mirrors/NewsBlur
1
0
Fork 0
mirror of https://github.com/samuelclay/NewsBlur.git synced 2025-09-18 21:50:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Inverting segmented controls. Adding loader to public comments bar. Fixing button in feed chooser.

Browse source
This commit is contained in:
Samuel Clay 2013-03-26 11:10:12 -07:00
parent b5a2ee9219
commit 92112a5b56
5 changed files with 103 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
media/css/controls.css
View file

@ -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;
}
}

42
media/css/reader.css
View file

@ -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;

4
media/js/newsblur/reader/reader_feedchooser.js
View file

@ -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();

4
media/js/newsblur/views/story_comments_view.js
View file

@ -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'));

2
templates/reader/feeds_skeleton.xhtml
View file

@ -182,7 +182,7 @@
</li>
</ul>
<ul class="segmented-control segmented-control-active NB-taskbar NB-taskbar-nav">
<ul class="segmented-control NB-taskbar NB-taskbar-nav">
<li class="NB-taskbar-button NB-task-story-previous">
<div class="NB-task-image"></div>
</li>