From f53aa3e0e5d04a2fbe1a22151d0f091eb97c6fce Mon Sep 17 00:00:00 2001
From: Srihari Sriraman <srihari@c42.in>
Date: Mon, 26 Aug 2013 23:47:45 +0530
Subject: [PATCH] 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
---
app/assets/javascripts/app/router.js | 1 -
.../javascripts/app/views/stream_view.js | 8 +++++++
app/assets/stylesheets/sidebar.css.scss | 22 +++++++++----------
app/views/aspects/_aspect_listings.haml | 2 +-
app/views/streams/main_stream.html.haml | 6 ++---
app/views/tags/_followed_tags_listings.haml | 2 +-
6 files changed, 24 insertions(+), 17 deletions(-)
diff --git a/app/assets/javascripts/app/router.js b/app/assets/javascripts/app/router.js
index 818834679a..b4b74eb7f7 100644
--- a/app/assets/javascripts/app/router.js
+++ b/app/assets/javascripts/app/router.js
@@ -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();
diff --git a/app/assets/javascripts/app/views/stream_view.js b/app/assets/javascripts/app/views/stream_view.js
index b140017999..0cd222bd88 100644
--- a/app/assets/javascripts/app/views/stream_view.js
+++ b/app/assets/javascripts/app/views/stream_view.js
@@ -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");
}
}));
diff --git a/app/assets/stylesheets/sidebar.css.scss b/app/assets/stylesheets/sidebar.css.scss
index 1e8ec7a5d6..177c603987 100644
--- a/app/assets/stylesheets/sidebar.css.scss
+++ b/app/assets/stylesheets/sidebar.css.scss
@@ -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;
diff --git a/app/views/aspects/_aspect_listings.haml b/app/views/aspects/_aspect_listings.haml
index 60e3c96057..4cae098658 100644
--- a/app/views/aspects/_aspect_listings.haml
+++ b/app/views/aspects/_aspect_listings.haml
@@ -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
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 7a7771cf8d..5b63ae75dd 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -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
diff --git a/app/views/tags/_followed_tags_listings.haml b/app/views/tags/_followed_tags_listings.haml
index 5c07cf8e8d..f242159ed5 100644
--- a/app/views/tags/_followed_tags_listings.haml
+++ b/app/views/tags/_followed_tags_listings.haml
@@ -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
--
GitLab