Refactor the left bar side menu, improve tag autosuggestion design, close #4271

Changelog.md

@@ -8,6 +8,7 @@
 * Update sign out route to a DELETE request [#4068](https://github.com/diaspora/diaspora/issues/4068)
 * Convert all ActivityStreams::Photo to StatusMessages and drop ActivityStreams::Photo [#4144](https://github.com/diaspora/diaspora/issues/4144)
 * Port the Rails application to strong_parameters in preparation to the upgrade to Rails 4 [#4143](https://github.com/diaspora/diaspora/issues/4143)
+* Refactor left bar side menu, improve tag autosuggestion design [#4271](https://github.com/diaspora/diaspora/issues/4271), [#4316](https://github.com/diaspora/diaspora/pull/4316)
 
 ## Bug fixes
 * Don't focus comment form on 'show n more comments' [#4265](https://github.com/diaspora/diaspora/issues/4265)

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

@@ -3,23 +3,16 @@ app.views.Aspect = app.views.Base.extend({
 
   tagName: "li",
 
-  className: 'sub_nav_item',
+  className: 'hoverable',
-
-  initialize: function(){
-    if (this.model.get('selected')){
-      this.$el.addClass('active');
-    };
-  },
 
   events: {
-    'click a.aspect_selector': 'toggleAspect'
+    'click .icons-check_yes_ok+a': 'toggleAspect'
   },
 
-  toggleAspect: function(evt){
+  toggleAspect: function(evt) {
     if (evt) { evt.preventDefault(); };
     this.model.toggleSelected();
-    this.$el.toggleClass('active');
+    this.$el.find('.icons-check_yes_ok').toggleClass('selected');
-    this.$el.find('.icons-check_yes_ok').toggleClass('invisible')
     app.router.aspects_stream();
   },
 

app/assets/javascripts/app/views/aspects_list_view.js

@@ -7,7 +7,7 @@ app.views.AspectsList = app.views.Base.extend({
     'click .toggle_selector' : 'toggleAll'
   },
 
-  initialize: function(){
+  initialize: function() {
     this.collection.on('change', this.toggleSelector, this);
     this.collection.on('change', this.updateStreamTitle, this);
   },
@@ -25,21 +25,19 @@ app.views.AspectsList = app.views.Base.extend({
     }).render().el);
   },
 
-  toggleAll: function(evt){
+  toggleAll: function(evt) {
     if (evt) { evt.preventDefault(); };
 
     var aspects = this.$('li:not(:last)')
     if (this.collection.allSelected()) {
       this.collection.deselectAll();
-      aspects.removeClass("active");
       aspects.each(function(i){
-        $(this).find('.icons-check_yes_ok').addClass('invisible');
+        $(this).find('.icons-check_yes_ok').removeClass('selected');
       });
     } else {
       this.collection.selectAll();
-      aspects.addClass("active");
       aspects.each(function(i){
-        $(this).find('.icons-check_yes_ok').removeClass('invisible');
+        $(this).find('.icons-check_yes_ok').addClass('selected');
       });
     }
 
@@ -47,7 +45,7 @@ app.views.AspectsList = app.views.Base.extend({
     app.router.aspects_stream();
   },
 
-  toggleSelector: function(){
+  toggleSelector: function() {
     var selector = this.$('a.toggle_selector');
     if (this.collection.allSelected()) {
       selector.text(Diaspora.I18n.t('aspect_navigation.deselect_all'));
@@ -56,7 +54,7 @@ app.views.AspectsList = app.views.Base.extend({
     }
   },
 
-  updateStreamTitle: function(){
+  updateStreamTitle: function() {
     $('.stream_title').text(this.collection.toSentence());
   }
 })

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

@@ -2,12 +2,12 @@ app.views.TagFollowing = app.views.Base.extend({
 
   templateName: "tag_following",
 
-  className : "unfollow",
+  className : "hoverable",
 
   tagName: "li",
 
   events : {
-    "click .tag_following_delete": "destroyModel"
+    "click .delete_tag_following": "destroyModel"
   },
 
   initialize : function(){
@@ -30,4 +30,4 @@ app.views.TagFollowing = app.views.Base.extend({
     })
   }
   
-});
+});

app/assets/stylesheets/application.css.sass

@@ -3,6 +3,7 @@
 @import '_mixins.css.scss'
 @import '_flash_messages.scss'
 @import 'new_styles/_spinner'
+@import 'sidebar.css.scss'
 
 /* ===== sprites ===== */
 
@@ -1060,10 +1061,6 @@ ul#settings_nav
 #thumbnails
   :line-height 14px
 
-#aspect_list
-  :margin 0
-  :padding 0
-
 .dull
   :color #aaa
   :text-align center
@@ -1150,24 +1147,6 @@ input[type="search"]
   form
     :display relative
 
-.inline_aspect_listing
-  :margin 0
-  :padding 0
-  :display inline
-  > li
-    :display inline
-    :font
-      :weight normal
-
-    &:after
-      :content ", "
-
-    &:last-child
-      &:before
-        :content "and "
-      &:after
-        :content "."
-
 #user_photo_uploader
   .avatar
     @include border-radius(5px)
@@ -1811,31 +1790,6 @@ ul#press_logos
   :margin
     :top 8px
 
-#home_user_badge
-  :position relative
-
-  img
-    :position absolute
-    :left 0
-
-  h4
-    :position relative
-    :top 14px
-    :padding
-      :bottom 5px
-    :text-overflow ellipsis
-    :overflow hidden
-    :white-space nowrap
-
-    a
-      :color inherit
-
-  :margin
-    :bottom 54px
-
-  :padding
-    :left 60px
-
 .icons-monotone_email_letter_round
   :height 128px
   :width 128px
@@ -2439,20 +2393,10 @@ ul.left_nav
     :text
       :decoration none
 
-  .invisible
-    :visibility hidden
-
   li
     :position relative
     :width 100%
 
-    .icons-check_yes_ok
-      :height 18px
-      :width 18px
-      :display inline-block
-      :margin-left 3px
-      :vertical-align middle
-
   li.active
     > a.home_selector:not(.sub_selected)
       :font
@@ -2534,18 +2478,12 @@ ul.left_nav
       :float right
 
   ul.sub_nav
-    :padding 0
+    :padding
+      :left 25px
     :margin 0
     li
       :width 204px
 
-    a.toggle_selector,
-    .new_aspect,
-    a.tag_selector
-      :padding
-        :left 25px
-      :width 172px
-
 .section
   .left_nav
     a.aspect_selector,

app/assets/stylesheets/sidebar.css.scss

@@ -0,0 +1,135 @@
+$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;
+		}
+	}
+}
+
+#leftNavBar {
+	float: left;
+	margin: 0px;
+	margin-right: 10px;
+	padding: 0px;
+	color: #222222;
+	
+	ul {
+		padding: 0px;
+	}
+	
+	a {
+		color: #777777;
+		font-weight: bold;
+		text-decoration: none;
+	}
+	
+	.hoverable {
+		display: block;
+		width: 90%;
+		padding: 4px;
+		
+		&:hover {
+			background-color: $bluebg;
+		}
+	}
+	
+	.selectable {
+		display: block;
+		margin-left: 21px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+#stream_selection {
+	& > li {
+		margin-bottom: 10px;
+	}
+
+	.action {
+		width: 12px;
+		height: 12px;
+		display: none;
+		float: right;
+		margin: 3px;
+	}
+
+	.hoverable:hover  > .action {
+		display: block;
+	}
+}
+
+#aspects_list {
+	.icons-check_yes_ok {
+		height:18px;
+		width:18px;
+		background: url('icons/check_yes_ok.png') no-repeat;
+		float: left;
+		visibility: hidden;
+	}
+
+	.selected {
+		visibility: visible;
+	}
+	
+	.selected + a {
+		color: #333333;
+	}
+
+	.modify_aspect {
+		background: url("icons/pencil.png") no-repeat;
+	}
+}
+
+#tags_list {
+	.delete_tag_following {
+		background: url("icons/deletelabel.png") no-repeat;
+	}
+	
+	/* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
+	.tag_input {
+		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: $bluebg;
+		border-color: $bluebg;		
+	}
+	/* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */
+}

app/assets/templates/aspect_tpl.jst.hbs

@@ -1,10 +1,7 @@
-<a href="/aspects/{{id}}/edit" rel="facebox">
+<a href="/aspects/{{id}}/edit" class="action modify_aspect" rel="facebox"></a>
-  <div class="edit icons-pencil" alt="Pencil" title="{{t 'edit'}} {{name}}">
-  </div>
-</a>
 {{#if selected}}
-  <div class="icons-check_yes_ok"></div>
+  <div class="icons-check_yes_ok selected"></div>
 {{else}}
-  <div class="icons-check_yes_ok invisible"></div>
+  <div class="icons-check_yes_ok"></div>
 {{/if}}
-<a class="aspect_selector name" data-guid="{{id}}" href="/aspects/query"> {{name}} </a>
+<a href="/aspects/query" class="selectable" data-guid="{{id}}"> {{name}} </a>

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

@@ -1,6 +1,8 @@
-<a class="toggle_selector" href="#">
+<li class="hoverable">
-  {{ t "aspect_navigation.select_all" }}
+  <a class="selectable toggle_selector" href="#">
-</a>
+    {{ t "aspect_navigation.select_all" }}
-<li>
+  </a>
-  <a class="new_aspect" href="/aspects/new" rel="facebox">{{ t "aspect_navigation.add_an_aspect" }}</a>
+</li>
+<li class="hoverable">
+  <a href="/aspects/new" class="selectable new_aspect" rel="facebox">{{ t "aspect_navigation.add_an_aspect" }}</a>
 </li>

app/assets/templates/tag_following_list_tpl.jst.hbs

@@ -1,5 +1,5 @@
 <li>
-  <form accept-charset="UTF-8" action="/tag_followings" id="new_tag_following" method="post">
+  <form id="new_tag_following" accept-charset="UTF-8" action="/tag_followings" method="post">
     <input class="tag_input" type="text" name="name" placeholder="{{t "stream.followed_tag.add_a_tag"}}" />
   </form>
 </li>

app/assets/templates/tag_following_tpl.jst.hbs

@@ -1,9 +1,4 @@
-<a class="tag_selector" href="/tags/{{name}}">
+<a href="#" id="unfollow_{{name}}" rel="nofollow" class="action delete_tag_following" title="{{t "delete"}}"><a/>
+<a href="/tags/{{name}}" class="selectable">
   #{{ name }}
 </a>
-
-<div class="unfollow_icon hidden">
-  <a href="#" id="unfollow_{{name}}" rel="nofollow" class="delete tag_following_delete" title="{{t "delete"}}">
-    <div alt="Deletelabel" class="icons-deletelabel"></div>
-  <a/>
-</div>

app/views/aspects/_aspect_listings.haml

@@ -2,8 +2,5 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-%ul#aspect_nav.left_nav.sub
+= link_to t('streams.aspects.title'), aspects_path, :class => 'hoverable', :rel => 'backbone'
-  %li.all_aspects
+%ul#aspects_list
-    = link_to t('streams.aspects.title'), aspects_path, :class => 'home_selector', :rel => 'backbone'
-
-    %ul#aspects_list.sub_nav

app/views/streams/main_stream.html.haml

@@ -22,28 +22,22 @@
   %br
   %br
 
-.span-5.leftNavBar
+.span-5#leftNavBar
   #home_user_badge
     = owner_image_link
     %h4
       = link_to current_user.first_name, local_or_remote_person_path(current_user.person)
 
-  .section
+  %ul#stream_selection
-    %ul.left_nav
+    %li.hoverable
-      %li
+      = link_to t("streams.activity.title"), activity_stream_path, :rel => 'backbone'
-        = link_to t("streams.activity.title"), activity_stream_path, :class => 'home_selector', :rel => 'backbone'
+    %li.hoverable
-
+      = link_to t('streams.mentions.title'), mentioned_stream_path, :rel => 'backbone'
-    %ul.left_nav
+    %li.hoverable
-      %li
+      = link_to t("streams.multi.title"), stream_path, :rel => 'backbone'
-        = link_to t('streams.mentions.title'), mentioned_stream_path, :class => 'home_selector', :rel => 'backbone'
+    %li.all_aspects
-
+      = render 'aspects/aspect_listings', :stream => @stream
-    %ul.left_nav
+    %li
-      %li
-        = link_to t("streams.multi.title"), stream_path, :class => 'home_selector', :rel => 'backbone'
-
-    = render 'aspects/aspect_listings', :stream => @stream
-
-    #followed_tags_listing
       = render 'tags/followed_tags_listings'
 
 

app/views/tags/_followed_tags_listings.haml

@@ -2,9 +2,5 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-- if user_signed_in?
+= link_to t('streams.followed_tag.title'), followed_tags_stream_path, :class => 'hoverable'
-  %ul.left_nav.sub
+%ul#tags_list  
-    %li
-      %b=link_to t('streams.followed_tag.title'), followed_tags_stream_path, :class => 'home_selector'
-
-      %ul.sub_nav#tags_list

app/views/tags/show.haml

@@ -12,7 +12,7 @@
 - content_for :body_class do
   = "tags_show"
 
-.span-6.tags_people
+#leftNavBar
   %h3
     = t('people', :count => @stream.tagged_people_count)
 
@@ -21,7 +21,7 @@
 
   %br
 
-  .section
+  - if user_signed_in?
     = render "tags/followed_tags_listings"
 
 .span-15.last

config/application.rb

@@ -90,6 +90,7 @@ module Diaspora
       mobile.css
       new-templates.css
       rtl.css
+      sidebar.css
     }
 
     # Version of your assets, change this if you want to expire all your assets

features/follows_tags.feature

@@ -37,11 +37,9 @@ Feature: posting
   Scenario: can stop following a tag from the tag page
     When I press "Following #boss"
     And I go to the followed tags stream page
-    Then I should not see "#boss" within ".left_nav"
+    Then I should not see "#boss" within "#tags_list"
 
   Scenario: can stop following a tag from the homepage
     When I go to the followed tags stream page
-    And I hover over the "li.unfollow#tag-following-boss"
+    And I unfollow the "boss" tag
-    And I follow "unfollow_boss"
+    Then I should not see "#tag-following-boss" within "#tags_list"
-    And I confirm the alert
-    Then I should not see "#tag-following-boss" within ".left_nav"

features/manages_aspects.feature

@@ -39,7 +39,7 @@ Feature: User manages contacts
     And I press "Delete" in the modal window
     And I confirm the alert
     Then I should be on the aspects page
-    And I should not see "People" within "#aspect_nav"
+    And I should not see "People" within "#aspects_list"
 
   Scenario: Editing the aspect memberships of a contact from the aspect edit facebox
     Given I am signed in

features/mentions_from_profile_page.feature

@@ -28,11 +28,11 @@ Feature: mentioning a contact from their profile page
       And I append "I am eating a yogurt" to the publisher
       And I press "Share" in the modal window
       When I am on the aspects page
-      And I follow "PostingTo" within "#aspect_nav"
+      And I follow "PostingTo" within "#aspects_list"
       Then I should see "I am eating a yogurt"
 
       When I am on the aspects page
-      And I follow "NotPostingThingsHere" within "#aspect_nav"
+      And I follow "NotPostingThingsHere" within "#aspects_list"
       Then I should see "I am eating a yogurt"
 
     Scenario: mentioning while posting to just one aspect

features/step_definitions/aspects_steps.rb

@@ -1,13 +1,14 @@
 When /^I click on "([^"]*)" aspect edit icon$/ do |aspect_name|
-  step %{I hover over the "ul.sub_nav > li:contains('#{aspect_name}')"}
+  within(".all_aspects") do
-  within("#aspect_nav") do
+    li = find('li', text: aspect_name)
-    find('a > .edit').click
+    page.execute_script("$('#aspects_list li:contains(\\'#{aspect_name}\\') .modify_aspect').css('display', 'block');") # TODO HACK please replace me by li.hover when capybara will be fixed
+    li.find('.modify_aspect').click
   end
 end
 
 When /^I select only "([^"]*)" aspect$/ do |aspect_name|
-  within('#aspect_nav') do
+  click_link 'My Aspects'
-    click_link 'Aspects'
+  within('#aspects_list') do
     click_link 'Select all' if has_link? 'Select all'
     click_link 'Deselect all'
   end
@@ -15,7 +16,7 @@ When /^I select only "([^"]*)" aspect$/ do |aspect_name|
 end
 
 When /^I select "([^"]*)" aspect as well$/ do |aspect_name|
-  within('#aspect_nav') do
+  within('#aspects_list') do
     click_link aspect_name
   end
   step %Q(I should see "#{aspect_name}" aspect selected)
@@ -23,16 +24,15 @@ end
 
 Then /^I should see "([^"]*)" aspect selected$/ do |aspect_name|
   aspect = @me.aspects.where(:name => aspect_name).first
-  within("#aspect_nav") do
+  within("#aspects_list") do
-    page.has_css?("li.active[data-aspect_id='#{aspect.id}']").should be_true
+    page.should have_css "li[data-aspect_id='#{aspect.id}'] .selected"
-    page.has_no_css?("li.active[data-aspect_id='#{aspect.id}'] .invisible").should be_true
   end
 end
 
 Then /^I should see "([^"]*)" aspect unselected$/ do |aspect_name|
   aspect = @me.aspects.where(:name => aspect_name).first
-  within("#aspect_nav") do
+  within("#aspects_list") do
-    page.has_css?("li[data-aspect_id='#{aspect.id}']:not(.active) .invisible", visible: false).should be_true
+    page.should_not have_css "li[data-aspect_id='#{aspect.id}'] .selected"
   end
 end
 

features/step_definitions/custom_web_steps.rb

@@ -208,7 +208,7 @@ end
 When /^I search for "([^\"]*)"$/ do |search_term|
   fill_in "q", :with => search_term
   find_field("q").native.send_key(:enter)
-  find(".tags_people")
+  find("#leftNavBar")
 end
 
 Then /^the "([^"]*)" field(?: within "([^"]*)")? should be filled with "([^"]*)"$/ do |field, selector, value|

features/step_definitions/tag_steps.rb

@@ -0,0 +1,5 @@
+When(/^I unfollow the "(.*?)" tag$/) do |tag|
+  page.execute_script("$('#unfollow_#{tag}').css('display', 'block')")
+  find("#unfollow_#{tag}").click
+  step 'I confirm the alert'
+end

spec/javascripts/app/views/aspect_view_spec.js

@@ -10,11 +10,11 @@ describe("app.views.Aspect", function(){
     });
 
     it('should show the aspect selected', function(){
-      expect(this.view.$el.hasClass('active')).toBeTruthy();
+      expect(this.view.$el.children('.icons-check_yes_ok').hasClass('selected')).toBeTruthy();
     });
 
     it('should show the name of the aspect', function(){
-      expect(this.view.$('a.aspect_selector').text()).toMatch('Acquaintances');
+      expect(this.view.$el.children('a.selectable').text()).toMatch('Acquaintances');
     });
 
     describe('selecting aspects', function(){
@@ -26,15 +26,15 @@ describe("app.views.Aspect", function(){
       });
 
       it('it should deselect the aspect', function(){
-        this.view.$('a.aspect_selector').trigger('click');
+        this.view.$el.children('a.selectable').trigger('click');
         expect(this.view.toggleAspect).toHaveBeenCalled();
-        expect(this.view.$el.hasClass('active')).toBeFalsy();
+        expect(this.view.$el.children('.icons-check_yes_ok').hasClass('selected')).toBeFalsy();
         expect(app.router.aspects_stream).toHaveBeenCalled();
       });
 
       it('should call #toggleSelected on the model', function(){
         spyOn(this.aspect, 'toggleSelected');
-        this.view.$('a.aspect_selector').trigger('click');
+        this.view.$el.children('a.selectable').trigger('click');
         expect(this.aspect.toggleSelected).toHaveBeenCalled();
       });
     });

spec/javascripts/app/views/aspects_list_view_spec.js

@@ -19,12 +19,12 @@ describe("app.views.AspectsList", function(){
     });
 
     it('should show the corresponding aspects selected', function(){
-      expect(this.view.$('.active').length).toBe(1);
+      expect(this.view.$('.selected').length).toBe(1);
-      expect(this.view.$('.active > .aspect_selector').text()).toMatch('Work');
+      expect(this.view.$('.selected + a.selectable').text()).toMatch('Work');
     });
 
     it('should show all the aspects', function(){
-      var aspect_selectors = this.view.$('.aspect_selector');
+      var aspect_selectors = this.view.$('.icons-check_yes_ok + a.selectable');
       expect(aspect_selectors.length).toBe(3)
       expect(aspect_selectors[0].text).toMatch('Work');
       expect(aspect_selectors[1].text).toMatch('Friends');
@@ -48,7 +48,7 @@ describe("app.views.AspectsList", function(){
 
         it('should show all the aspects selected', function(){
           expect(this.view.toggleAll).toHaveBeenCalled();
-          expect(this.view.$('li.active').length).toBe(3);
+          expect(this.view.$('.selected').length).toBe(3);
         });
 
         it('should show \'Deselect all\' link', function(){