Rebasing and fixing tests

app/assets/javascripts/app/views/aspect_view.js

@@ -8,7 +8,7 @@ app.views.Aspect = app.views.Base.extend({
   className: 'hoverable',
 
   events: {
-    "click .entypo-check+a": "toggleAspect"
+    "click .aspect-item": "toggleAspect"
   },
 
   toggleAspect: function(evt) {

app/assets/javascripts/app/views/sidebar.js

@@ -1,7 +1,7 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
 app.views.Sidebar = app.views.Base.extend({
-  el: '.rightBar',
+  el: '.rightbar',
 
   events: {
     'click input#invite_code': 'selectInputText'

app/assets/javascripts/app/views/tag_following_view.js

@@ -9,7 +9,7 @@ app.views.TagFollowing = app.views.Base.extend({
   tagName: "li",
 
   events : {
-    "click .delete_tag_following": "destroyModel"
+    "click .delete-tag-following": "destroyModel"
   },
 
   initialize : function(){

app/assets/stylesheets/color_themes/_color_theme_override.scss

@@ -24,7 +24,7 @@ body {
     }
   }
 
-  #leftNavBar .hoverable:hover { background-color: $main-color-essence; }
+  #left-navbar .hoverable:hover { background-color: $main-color-essence; }
 
   .poll_form .progress .bar { background-color: $main-color-dark; }
 

app/assets/stylesheets/leftnavbar.scss

@@ -11,7 +11,7 @@
   height: 100%;
 }
 
-#leftNavBar {
+#left-navbar {
   background: $left-navbar-background;
   a {
     color: $link-grey;
@@ -21,46 +21,54 @@
   }
 
   ul {
-    margin: 0px;
+    margin: 0;
-    padding: 0px;
+    padding: 0;
     list-style: none;
     &#stream_selection {
       margin: 0px -15px; /* -15px overrides Bootstrap's default gutter width */
     }
   }
 
-  .selected { color: $black; }
+  .selected, .selected a { color: $black; }
-  .selected a { color: $black; }
 
   .hoverable {
     display: block;
-    &.selected a, &.selected a:hover {
+    &.selected a, &.selected a:hover,
+    .followed-tags-sidebar a.hoverable.selected {
       color: white;
       background: #666;
     }
   }
 
-  .all_aspects a.hoverable.selected, .followed_tags_sidebar a.hoverable.selected {
+  a.hoverable, li.hoverable {
-    color: white;
-    background: #666;
-  }
-
-  .hoverable a, .all_aspects a.hoverable, .followed_tags_sidebar a.hoverable {
     padding: 10px 20px;
     display: block;
     font-weight: normal;
     color: $link-grey;
     border-bottom: 1px solid #ddd;
-    &:hover, &:hover .entypo.check, &:hover + .action .entypo { 
+    &:hover, &:hover a,
+    &:hover .entypo-check{
       background-color: $blue;
       color: $white;
     }
+    &:not(:hover) [class^="entypo"] { visibility: hidden; }
+    .entypo-check.selected { visibility: visible; }
   }
 
-  .selectable {
+  #aspects_list, #tags_list {
-    display: block;
+    background: $left-navbar-drawer-background;
-    overflow: hidden;
+    li { padding: 0; }
-    text-overflow: ellipsis;
+    .selectable {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 10px 20px 10px 40px;
+    }
+    .action.modify_aspect, .action.delete-tag-following {
+      position: relative;
+      bottom: 30px;
+      right: 20px;
+    }
   }
 
   #home_user_badge {
@@ -87,69 +95,7 @@
     }
   }
 
-  #aspects_list {
-    .hoverable {
-      position: relative;
-    }
-    .selectable {
-      padding-left: 40px;
-    }
-  }
-
-  #aspects_list, #tags_list {
-    background: $left-navbar-drawer-background;
-    .hoverable > .action {
-      visibility: hidden;
-      margin: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 200;
-      padding: 10px 15px;
-      border: none;
-    }
-    .hoverable:hover > .action {
-      visibility: visible;
-      background: none;
-    }
-  }
-
-  #aspects_list {
-    .selectable {
-      padding-right: 40px;
-    }
-    .entypo.check {
-      visibility: hidden;
-      margin: 0;
-      position: absolute;
-      left: 20px;
-      top: 10px;
-      z-index: 200;
-      &.selected { 
-        visibility: visible; 
-      }
-    }
-    .selected + a {
-      color: #333333;
-    }
-  }
-
   #tags_list {
-
-    li {
-      position: relative;
-    }
-
-    .selectable {
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-
-    .delete_tag_following {
-      font-size: 20px;
-      line-height: 15px;
-    }
-
     #new_tag_following {
       padding: 10px 20px 10px 30px;
     }

app/assets/stylesheets/rtl.scss

@@ -59,7 +59,7 @@ footer ul#footer_nav {
   right: auto;
 }
 
-.rightBar .right {
+.rightbar .right {
   margin-right: 70px;
 }
 

app/assets/stylesheets/sidebar.scss

@@ -13,7 +13,7 @@
 .right-sidebar-padder {
   max-width: 400px;
 }
-.rightBar {
+.rightbar {
   padding-top: 20px;
   background: $right-sidebar-background;
 

app/assets/templates/aspect_tpl.jst.hbs

@@ -1,12 +1,10 @@
-<a href="/aspects/query" class="selectable" data-guid="{{id}}"> 
+<a href="/aspects/query" class="selectable aspect-item" data-guid="{{id}}">
 	{{#if selected}}
-	  <i class="entypo check selected"></i>
+	  <i class="entypo-check selected"></i>
 	{{else}}
-	  <div class="entypo check"></div>
+	  <div class="entypo-check"></div>
 	{{/if}}
-
 	{{name}}
-
 </a>
 <a href="/contacts?a_id={{id}}" class="action modify_aspect pull-right">
   <i class="entypo-pencil"></i>

app/assets/templates/tag_following_tpl.jst.hbs

@@ -1,4 +1,6 @@
-<a href="#" id="unfollow_{{name}}" rel="nofollow" class="action delete_tag_following pull-right" title="{{t "delete"}}">&times;</a>
 <a href="/tags/{{name}}" class="selectable">
   #{{ name }}
 </a>
+<a href="#" id="unfollow_{{name}}" rel="nofollow" class="action delete-tag-following pull-right" title="{{t "delete"}}">
+  <i class="entypo-cross"></i>
+</a>

app/views/streams/main_stream.html.haml

@@ -26,7 +26,7 @@
   .row
     #left-navbar-fixed-sub-background.col-lg-1.visible-lg
     #left-navbar-fixed-background.col-lg-offset-1.col-lg-2.col-md-3.hidden-sm.hidden-xs
-    .col-lg-offset-1.col-lg-2.col-md-3#leftNavBar
+    #left-navbar.col-lg-offset-1.col-lg-2.col-md-3
       #home_user_badge
         = owner_image_link
         %h4
@@ -41,14 +41,14 @@
           = link_to t("streams.mentions.title"), mentioned_stream_path, rel: "backbone", class: "hoverable"
         %li.all_aspects
           = render "aspects/aspect_listings", stream: @stream
-        %li.followed_tags_sidebar
+        %li.followed-tags-sidebar
           = render "tags/followed_tags_listings"
 
     .col-md-6
       #aspect_stream_container.stream_container
         = render 'aspects/aspect_stream', stream: @stream
 
-    .col-md-3.col-lg-2.rightBar
+    .col-md-3.col-lg-2.hidden-xs.hidden-sm.rightbar
       #selected_aspect_contacts.section
         .title
           %h5.stream_title

features/step_definitions/tag_steps.rb

@@ -2,7 +2,7 @@ When(/^I unfollow the "(.*?)" tag$/) do |tag|
   within("#tags_list") do
     li = find('li', text: tag)
     li.hover
-    li.find('.delete_tag_following').click
+    li.find('.delete-tag-following').click
   end
   step 'I confirm the alert'
 end

spec/javascripts/app/views/aspect_view_spec.js

@@ -10,7 +10,7 @@ describe("app.views.Aspect", function(){
     });
 
     it("should show the aspect selected", function(){
-      expect(this.view.$el.children(".entypo-check").hasClass("selected")).toBeTruthy();
+      expect(this.view.$el.find(".entypo-check").hasClass("selected")).toBeTruthy();
     });
 
     it('should show the name of the aspect', function(){

spec/javascripts/app/views/aspects_list_view_spec.js

@@ -20,11 +20,11 @@ describe("app.views.AspectsList", function(){
 
     it('should show the corresponding aspects selected', function(){
       expect(this.view.$('.selected').length).toBe(1);
-      expect(this.view.$('.selected + a.selectable').text()).toMatch('Work');
+      expect(this.view.$('.selected').parent().text()).toMatch('Work');
     });
 
     it("should show all the aspects", function(){
-      var aspectSelectors = this.view.$(".entypo-check + a.selectable");
+      var aspectSelectors = this.view.$(".entypo-check").parent();
       expect(aspectSelectors.length).toBe(3);
       expect(aspectSelectors[0].text).toMatch("Work");
       expect(aspectSelectors[1].text).toMatch("Friends");