Highlighting the currently active stream in the leftNavBar

- This gives the user the sense of what he/she is currently viewing
- The hover/selected are the same right now. Needs to change.
- Need to find a more meaningful place for `markSelected`

Moved markSelected to app.views.Stream

- Removes duplication
- All streams create this view, and this seems to do some setup on
  initializing, which is a good place to markNavSelected

Changing highlight on hover to 'black' instead of the blue

- The blue was a little intruisive
- Also fixes the vertical alignment issue

Changing the background to bluebg on hover
This commit is contained in:
Srihari Sriraman 2013-08-26 23:47:45 +05:30 committed by Jonne Haß
parent 991a505439
commit f53aa3e0e5
6 changed files with 24 additions and 17 deletions

View file

@ -93,7 +93,6 @@ app.Router = Backbone.Router.extend({
},
aspects_stream : function(){
var ids = app.aspects.selectedAspects('id');
app.stream = new app.models.StreamAspects([], { aspects_ids: ids });
app.stream.fetch();

View file

@ -13,6 +13,7 @@ app.views.Stream = app.views.InfScroll.extend(_.extend(
this.setupLightbox()
this.setupInfiniteScroll()
this.setupShortcuts()
this.markNavSelected()
},
postClass : app.views.StreamPost,
@ -28,5 +29,12 @@ app.views.Stream = app.views.InfScroll.extend(_.extend(
function reRenderPostViews() {
_.map(this.postViews, function(view){ view.render() })
}
},
markNavSelected : function() {
var activeStream = Backbone.history.fragment;
var streamSelection = $("#stream_selection");
streamSelection.find("[data-stream]").removeClass("selected");
streamSelection.find("[data-stream='" + activeStream + "']").addClass("selected");
}
}));

View file

@ -3,17 +3,17 @@ $bluebg: #e7f2f7;
#home_user_badge {
min-height: 50px;
margin-bottom: 20px;
img {
float: left;
}
h4 {
margin-left: 60px;
padding-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
a {
color: inherit;
font-weight: bold;
@ -26,7 +26,7 @@ $bluebg: #e7f2f7;
margin: 0px;
margin-right: 10px;
color: #222222;
ul {
margin: 0px;
padding: 0px;
@ -37,17 +37,17 @@ $bluebg: #e7f2f7;
font-weight: bold;
text-decoration: none;
}
.selected { color: $black; }
.selected a { color: $black; }
.hoverable {
display: block;
margin-right: 6px;
padding: 4px;
&:hover {
background-color: $bluebg;
}
padding: 4px 4px 4px 0;
&:hover { background-color: $bluebg; }
}
.selectable {
display: block;
margin-left: 21px;

View file

@ -2,5 +2,5 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
= link_to t('streams.aspects.title'), aspects_path, :class => 'hoverable', :rel => 'backbone'
= link_to t('streams.aspects.title'), aspects_path, :class => 'hoverable', :rel => 'backbone', :data => {:stream => 'aspects'}
%ul#aspects_list

View file

@ -29,11 +29,11 @@
= link_to current_user.first_name, local_or_remote_person_path(current_user.person)
%ul#stream_selection
%li.hoverable
%li.hoverable{:data => {:stream => 'activity'}}
= link_to t("streams.activity.title"), activity_stream_path, :rel => 'backbone'
%li.hoverable
%li.hoverable{:data => {:stream => 'mentions'}}
= link_to t('streams.mentions.title'), mentioned_stream_path, :rel => 'backbone'
%li.hoverable
%li.hoverable{:data => {:stream => 'stream'}}
= link_to t("streams.multi.title"), stream_path, :rel => 'backbone'
%li.all_aspects
= render 'aspects/aspect_listings', :stream => @stream

View file

@ -2,5 +2,5 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
= link_to t('streams.followed_tag.title'), followed_tags_stream_path, :class => 'hoverable'
= link_to t('streams.followed_tag.title'), followed_tags_stream_path, :class => 'hoverable', :data => {:stream => 'followed_tags'}
%ul#tags_list