Put the feed/page view buttons together. You can now switch between the two views. Now to fully connect scrolling behavior in the story_titles and the story_view itself.

This commit is contained in:
Samuel Clay 2009-08-17 00:07:53 +00:00
parent 69b73500f7
commit 4d352f8bfe
3 changed files with 75 additions and 28 deletions

View file

@ -276,7 +276,6 @@ a img {
left: 0;
width: 100%;
height: 100%;
display: none;
}
#story_pane .NB-feed-frame {
@ -413,10 +412,12 @@ a img {
.NB-taskbar .taskbar_leftnav .task_button {
height: 29px;
margin: 0px;
width: 36px;
display: block;
position: relative;
border-right: 1px solid #828282;
float: left;
padding: 0px 8px 0 32px;
font-size: 13px;
}
.NB-taskbar .taskbar_leftnav .task_button:hover {
@ -461,10 +462,35 @@ a img {
.NB-taskbar .task_button.task_add {
background: transparent url(../img/icons/silk/add.png) no-repeat center center;
background: transparent url(../img/icons/silk/add.png) no-repeat center 8px;
}
.NB-taskbar .task_button.task_profile {
background: transparent url(../img/icons/silk/user.png) no-repeat center center;
background: transparent url(../img/icons/silk/user.png) no-repeat center 8px;
}
/* =================== */
/* = Taskbar - Story = */
/* =================== */
.NB-taskbar .NB-task-title {
padding: 7px 0 0 0;
display: block;
cursor: pointer;
}
.NB-taskbar .task_button.task_view_page {
cursor: pointer;
background: transparent url(../img/icons/silk/application_view_tile.png) no-repeat 8px 8px;
}
.NB-taskbar .task_button.task_view_feed {
cursor: pointer;
background: transparent url(../img/icons/silk/application_view_columns.png) no-repeat 8px 8px;
}
.NB-taskbar .task_button_view.NB-active {
background-color: #A0A7B1;
}
.NB-view-hidden {
position: absolute !important;
left: -9999em !important;
}
/* ================ */

View file

@ -10,6 +10,7 @@
this.model = NEWSBLUR.AssetModel.reader();
this.options = {};
this.google_favicon_url = 'http://www.google.com/s2/favicons?domain_url=';
this.story_view = 'page';
$('body').live('click', $.rescope(this.handle_clicks, this));
$('body').live('dblclick', $.rescope(this.handle_dblclicks, this));
@ -58,7 +59,7 @@
var outerLayout, rightLayout, contentLayout, leftLayout;
outerLayout = $('body').layout({
closable: false,
closable: true,
center__paneSelector: ".right-pane",
west__paneSelector: ".left-pane",
west__size: 300,
@ -377,6 +378,33 @@
$feed_link.parent('.feed').next('.feed').children('a').addClass('after_selected');
},
// ===================
// = Taskbar - Story =
// ===================
switch_taskbar_view: function($button) {
if (!($button.hasClass('NB-active'))) {
var $taskbar_buttons = $('.NB-taskbar .task_button_view');
var $feed_view = $('.NB-feed-story-view');
var $page_view = $('.NB-feed-frame');
$taskbar_buttons.removeClass('NB-active');
$button.addClass('NB-active');
if ($button.hasClass('task_view_page')) {
$feed_view.addClass('NB-view-hidden');
$page_view.removeClass('NB-view-hidden');
this.story_view = 'page';
} else if ($button.hasClass('task_view_feed')) {
$page_view.addClass('NB-view-hidden');
$feed_view.removeClass('NB-view-hidden');
this.story_view = 'feed';
}
}
},
// ==============
// = Story Pane =
// ==============
@ -423,6 +451,7 @@
},
scroll_to_story_in_story_frame: function(story_title) {
var self = this;
var $iframe = $('.NB-feed-frame');
var title = story_title.replace('^\s+|\s+$', '');
@ -430,7 +459,11 @@
$iframe.contents().find(':contains('+title+')').each(function(){
if($(this).children().length < 1) {
$iframe.scrollTo(this, 800, { axis: 'y', easing: 'easeInOutQuint', offset: -24 });
if (self.story_view == 'feed') {
$iframe.scrollTo(this, 0, { axis: 'y', offset: -24 });
} else if (self.story_view == 'page') {
$iframe.scrollTo(this, 800, { axis: 'y', easing: 'easeInOutQuint', offset: -24 });
}
return false;
}
});
@ -629,10 +662,14 @@
// = Taskbar =
// ===========
$.targetIs(e, { tagSelector: '.task_button' }, function($t, $p){
$.targetIs(e, { tagSelector: '.task_button_menu' }, function($t, $p){
e.preventDefault();
self.open_taskbar_menu($t, e);
});
$.targetIs(e, { tagSelector: '.task_button_view' }, function($t, $p){
e.preventDefault();
self.switch_taskbar_view($t, e);
});
$.targetIs(e, { tagSelector: '.NB-task-import-upload-opml' }, function($t, $p){
e.preventDefault();
self.open_opml_import_modal_form($t);

View file

@ -7,7 +7,7 @@
<div class="NB-taskbar left-south">
<ul class="taskbar_leftnav">
<li class="task_button task_add">
<li class="task_button task_button_menu task_add">
<ul class="taskbar_menu">
<li>Import</li>
<li><span class="NB-task-import-upload-opml">Upload an OPML file</span></li>
@ -17,7 +17,7 @@
</li>
</ul>
<ul class="taskbar_leftnav">
<li class="task_button task_profile">
<li class="task_button task_button_menu task_profile">
<ul class="taskbar_menu">
<li>{{ user_info.username }}</li>
<li><span>View my feed preferences</span></li>
@ -43,24 +43,8 @@
<div id="story_taskbar" class="NB-taskbar content-north">
<ul class="taskbar_leftnav">
<li class="task_button task_add">
<ul class="taskbar_menu">
<li>Import</li>
<li><span class="NB-task-import-upload-opml">Upload an OPML file</span></li>
<li><span>From NetNewsWire (NewsGator)</span></li>
<li><span>From Google Reader</span></li>
</ul>
</li>
</ul>
<ul class="taskbar_leftnav">
<li class="task_button task_add">
<ul class="taskbar_menu">
<li>Import</li>
<li><span class="NB-task-import-upload-opml">Upload an OPML file</span></li>
<li><span>From NetNewsWire (NewsGator)</span></li>
<li><span>From Google Reader</span></li>
</ul>
</li>
<li class="task_button task_button_view task_view_page NB-active"><span class="NB-task-title">Page</span></li>
<li class="task_button task_button_view task_view_feed"><span class="NB-task-title">Feed</span></li>
</ul>
</div>
@ -69,7 +53,7 @@
<iframe class="NB-feed-frame"></iframe>
<div class="NB-feed-story-view">
<div class="NB-feed-story-view NB-view-hidden">
<div class="story_navigator">
<a href="#" class="rounded {transparent} button like"></a>
<a href="#" class="rounded {transparent} button dislike"></a>