Merge pull request #6309 from AugierLe42e/left-navbar-polishing

Left and right navbar polishing

Changelog.md

@@ -47,6 +47,7 @@ With the port to Bootstrap 3, app/views/terms/default.haml has a new structure.
 * Remove unused header icons and an unused favicon  [#6283](https://github.com/diaspora/diaspora/pull/6283)
 * Replace mobile icons for post interactions with Entypo icons [#6291](https://github.com/diaspora/diaspora/pull/6291)
 * Replace jquery.autocomplete with typeahead.js [#6293](https://github.com/diaspora/diaspora/pull/6293)
+* Redesign sidebars on stream pages [#6309](https://github.com/diaspora/diaspora/pull/6309)
 
 ## Bug fixes
 * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)

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/aspects_list_view.js

@@ -31,7 +31,7 @@ app.views.AspectsList = app.views.Base.extend({
   },
 
   appendAspect: function(aspect) {
-    $("#aspects_list > *:last").before(new app.views.Aspect({
+    $("#aspects_list > .hoverable:last").before(new app.views.Aspect({
       model: aspect, attributes: {'data-aspect_id': aspect.get('id')}
     }).render().el);
   },

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

@@ -1,10 +1,10 @@
 // @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'
+    "click input#invite_code": "selectInputText"
   },
 
   selectInputText: function(event) {

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/_application.scss

@@ -81,11 +81,11 @@
 @import 'post-content';
 
 /* right bar */
-@import 'sidebar';
+@import 'navbar_right';
 
 /* contacts */
 @import 'contacts';
-@import 'leftnavbar';
+@import 'navbar_left';
 
 /* code */
 @import 'new_styles/code';

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/colors.scss

@@ -25,6 +25,10 @@ $red: #A80000;
 $blue: #3F8FBA;
 $dark-blue: darken(#0984C8,10%);
 
+$sidebars-background: #f0f0f0;
+$sidebars-sub-background: darken($sidebars-background, 12%);
+$left-navbar-drawer-background: darken($sidebars-background, 6%);
+
 /* colors : http://www.colourlovers.com/palette/2134203/Awezome_in_argyle */
 $cyan : rgb(8,204,249);
 $yellow : rgb(242,244,9);

app/assets/stylesheets/leftnavbar.scss

@@ -1,127 +0,0 @@
-#leftNavBar {
-  a {
-    color: $link-grey;
-    font-weight: bold;
-    text-decoration: none;
-  }
-
-  ul {
-    margin: 0px;
-    padding: 0px;
-    list-style: none;
-  }
-
-  .selected { color: $black; }
-  .selected a { color: $black; }
-
-  .hoverable {
-    display: block;
-    margin-right: 6px;
-    padding: 4px;
-    &:hover { background-color: $background-blue; }
-  }
-
-  .selectable {
-    display: block;
-    margin-left: 21px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  #home_user_badge {
-    border-bottom: 1px dashed $border-grey;
-    margin-bottom: 10px;
-    min-height: 50px;
-    padding-bottom: 20px;
-    padding-left: 4px;
-
-    .avatar {
-      float: left;
-      height: 50px;
-      width: 50px;
-    }
-
-    h4 {
-      margin-left: 60px;
-      padding-top: 15px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      a { color: $black; }
-    }
-  }
-
-  #stream_selection {
-    & > li {
-      margin-bottom: 5px;
-    }
-  }
-
-  #aspects_list, #tags_list {
-    .hoverable > .action {
-      visibility: hidden;
-      margin: 0 3px;
-    }
-    .hoverable:hover  > .action {
-      visibility: visible;
-    }
-  }
-
-  #aspects_list {
-    .entypo-check {
-      float: left;
-      visibility: hidden;
-      &.selected { visibility: visible; }
-    }
-    .selected + a {
-      color: #333333;
-    }
-  }
-
-  #tags_list {
-    .delete_tag_following {
-      font-size: 20px;
-      line-height: 15px;
-    }
-
-    #new_tag_following {
-      margin-left: 20px;
-      margin-top: 5px;
-    }
-
-    /* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
-    .as-original{ width: 100%; }
-    .tag_input {
-      line-height: $font-size-base;
-      vertical-align: top;
-      width: 100%;
-    }
-
-    .as-result {
-      margin-top: -1px;
-      margin-left: 1px;
-    }
-
-    .as-list {
-      em {
-        background-color: #aabbcc;
-        color: black;
-        padding: 0px;
-      }
-
-      color: black;
-      position: static; /* override absolute */
-      margin: 0px;
-      border-radius: 0px 0px 3px 3px;
-      box-shadow: 0px 1px 1px #666;
-    }
-
-    .as-result-item.active {
-      color: black;
-      text-shadow: none;
-      background-color: $background-blue;
-      border-color: $background-blue;
-    }
-    /* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */
-  }
-}

app/assets/stylesheets/navbar_left.scss

@@ -0,0 +1,140 @@
+/* Fixed backgrounds are a common practice to avoid height issues */
+#left-navbar-fixed-sub-background {
+  background: $sidebars-sub-background;
+  position: fixed;
+  height: 100%;
+}
+
+#left-navbar-fixed-background {
+  background: $sidebars-background;
+  border-right: 1px solid $light-grey;
+  position: fixed;
+  height: 100%;
+}
+
+#left-navbar {
+  background: $sidebars-background;
+  border-right: 1px solid $light-grey;
+  a {
+    color: $link-grey;
+    font-weight: bold;
+    text-decoration: none;
+    outline: 0;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    &#stream_selection {
+      margin: 0px -15px; /* -15px overrides Bootstrap's default gutter width */
+    }
+  }
+
+  .selected, .selected a { color: $black; }
+
+  .hoverable {
+    display: block;
+    &.selected a, &.selected a:hover,
+    .followed-tags-sidebar a.hoverable.selected {
+      color: white;
+      background: #666;
+    }
+  }
+
+  a.hoverable, li.hoverable {
+    padding: 10px 20px;
+    display: block;
+    font-weight: normal;
+    color: $link-grey;
+    border-bottom: 1px solid #ddd;
+    &:hover, &:hover a,
+    &:hover .entypo-check{
+      background-color: $blue;
+      color: $white;
+    }
+    &:not(:hover) [class^="entypo"] { visibility: hidden; }
+    .entypo-check.selected { visibility: visible; }
+  }
+
+  #aspects_list, #tags_list {
+    background: $left-navbar-drawer-background;
+    li { padding: 0; }
+    .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 {
+    min-height: 90px;
+    padding: 20px;
+    margin: 0 -15px;
+
+    .avatar {
+      float: left;
+      height: 50px;
+      width: 50px;
+    }
+
+    h4 {
+      margin: 0 0 0 60px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 25px;
+
+      a {
+        color: $black;
+        font-weight: normal;
+      }
+    }
+  }
+
+  #tags_list {
+    #new_tag_following {
+      padding: 10px 20px 10px 30px;
+    }
+
+    /* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
+    .as-original{ width: 100%; }
+    .tag_input {
+      line-height: $font-size-base;
+      vertical-align: top;
+      width: 100%;
+    }
+
+    .as-result {
+      margin-top: -1px;
+      margin-left: 1px;
+    }
+
+    .as-list {
+      em {
+        background-color: #aabbcc;
+        color: black;
+        padding: 0px;
+      }
+
+      color: black;
+      position: static; /* override absolute */
+      margin: 0px;
+      border-radius: 0px 0px 3px 3px;
+      box-shadow: 0px 1px 1px #666;
+    }
+
+    .as-result-item.active {
+      color: black;
+      text-shadow: none;
+      background-color: $background-blue;
+      border-color: $background-blue;
+    }
+    /* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */
+  }
+}

app/assets/stylesheets/navbar_right.scss

@@ -1,21 +1,39 @@
-.rightBar {
+#right-sidebar-fixed-background {
+  height: 100%;
+  border-left: 1px solid $light-grey;
+  background: $sidebars-background;
+  position: fixed;
+  right: 0;
+}
+#right-sidebar-fixed-sub-background {
+  height: 100%;
+  background: $sidebars-sub-background;
+  position: fixed;
+  right: 0;
+}
+
+.right-sidebar-padder {
+  max-width: 400px;
+}
+.rightbar {
   padding-top: 20px;
+  border-left: 1px solid $light-grey;
+  background: $sidebars-background;
 
   .section {
     margin-bottom: 20px;
 
     > .title {
       border-bottom: 1px solid $border-grey;
-      padding-bottom: 2px;
+      padding-bottom: 5px;
 
       &.no_icon { padding-left: 8px; }
 
       h5 {
         color: $text-dark-grey;
-        font-weight: bold;
+        font-weight: normal;
         font-size: $font-size-base;
         margin: 0;
-        &.title-header { margin-left: 5px; }
       }
     }
 
@@ -23,7 +41,7 @@
       color: $text-grey;
       font-size: $font-size-small;
       line-height: 18px;
-      padding: 5px;
+      padding: 10px 0;
 
       p, ul { margin: 0; }
 
@@ -69,3 +87,9 @@
     }
   }
 }
+
+@media screen and (min-width: 1200px) {
+  #right-sidebar-fixed-background {
+    margin-right: 8.33333%; /* Only for LARGE screens, same as lg-offset-1 class, BS3 does not provide right side offsetting */
+  }
+}

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/stream.scss

@@ -1,5 +1,4 @@
 .stream_container {
-	border-left: 1px solid $border-grey;
 	padding-left: 10px;
 	padding-top: 20px;
 	margin-left: -10px;

app/assets/templates/aspect_tpl.jst.hbs

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

app/assets/templates/aspects-list_tpl.jst.hbs

@@ -7,5 +7,5 @@
   <a href="#" class="selectable new_aspect" data-toggle="modal" data-target="#newAspectModal">
     {{ t "aspect_navigation.add_an_aspect" }}
   </a>
-  <div id="newAspectContainer"></div>
 </li>
+<div id="newAspectContainer"></div>

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/shared/_right_sections.html.haml

@@ -2,12 +2,12 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
+.right-sidebar-padder
 
   - if AppConfig.settings.invitations.open?
     .section
       .title
         %h5.title-header
-        %i.entypo-plus
           = t('shared.invitations.invite_your_friends')
       .content
         = render "shared/invitations"
@@ -15,7 +15,6 @@
   .section
     .title
       %h5.title-header
-      %i.entypo-users
         = t('aspects.index.new_here.title')
     .content
       != t('aspects.index.new_here.follow', link: link_to("#"+t('shared.publisher.new_user_prefill.newhere'), tag_path(name: t('shared.publisher.new_user_prefill.newhere'))))
@@ -25,7 +24,6 @@
   .section
     .title
       %h5.title-header
-      %i.entypo-circled-help
         = t('aspects.index.help.need_help')
     .content
       %p
@@ -49,7 +47,6 @@
     .section
       .title
         %h5.title-header
-        %i.entypo-cog
           = t('aspects.index.services.heading')
       .content
         %div
@@ -64,7 +61,6 @@
   .section
     .title
       %h5.title-header
-      %i.entypo-bookmark
         = t('bookmarklet.heading')
     .content
       != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), bookmarklet_code))
@@ -73,7 +69,6 @@
     .section
       .title
         %h5.title-header
-        %i.entypo-heart
           = t('aspects.index.donate')
       .content
         %p
@@ -84,7 +79,6 @@
     .section
       .title
         %h5.title-header
-        %i.entypo-mail
           = t('aspects.index.help.any_problem')
       .content
         %p

app/views/streams/main_stream.html.haml

@@ -22,7 +22,9 @@
 
 %div.container-fluid
   .row
-    .col-md-offset-1.col-md-2#leftNavBar
+    #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
+    #left-navbar.col-lg-offset-1.col-lg-2.col-md-3
       #home_user_badge
         = owner_image_link
         %h4
@@ -37,16 +39,18 @@
           = link_to t("streams.mentions.title"), mentioned_stream_path, rel: "backbone", class: "hoverable"
         %li.all_aspects
           = render "aspects/aspect_listings", stream: @stream
-        %li
+        %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-2.rightBar
+    #right-sidebar-fixed-sub-background.col-lg-3.visible-lg
+    #right-sidebar-fixed-background.col-md-3.col-lg-2.hidden-sm.hidden-xs
+    .col-md-3.col-lg-2.hidden-xs.hidden-sm.rightbar
       #selected_aspect_contacts.section
-        .title.no_icon
+        .title
           %h5.stream_title
             = @stream.title
         .content

features/step_definitions/aspects_steps.rb

@@ -42,10 +42,10 @@ When /^I click on "([^"]*)" aspect edit icon$/ do |aspect_name|
 end
 
 When /^I select only "([^"]*)" aspect$/ do |aspect_name|
-  click_link 'My aspects'
+  click_link "My aspects"
-  within('#aspects_list') do
+  within("#aspects_list") do
-    click_link 'Deselect all'
+    all(".selected").each {|node| node.find(:xpath, "..").click }
-    current_scope.should have_no_css '.selected'
+    expect(current_scope).to have_no_css ".selected"
   end
   step %Q(I select "#{aspect_name}" aspect as well)
 end

features/step_definitions/tag_steps.rb

@@ -1,8 +1,8 @@
 When(/^I unfollow the "(.*?)" tag$/) do |tag|
   within("#tags_list") do
-    li = find('li', text: tag)
+    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'
+  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

@@ -18,13 +18,13 @@ describe("app.views.AspectsList", function(){
       this.view.render();
     });
 
-    it('should show the corresponding aspects selected', function(){
+    it("should show the corresponding aspects selected", function(){
-      expect(this.view.$('.selected').length).toBe(1);
+      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");