diff --git a/Changelog.md b/Changelog.md index 530c427a7..8db438829 100644 --- a/Changelog.md +++ b/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) diff --git a/app/assets/javascripts/app/views/aspect_view.js b/app/assets/javascripts/app/views/aspect_view.js index d4482a788..c8e553ea8 100644 --- a/app/assets/javascripts/app/views/aspect_view.js +++ b/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', - - initialize: function(){ - if (this.model.get('selected')){ - this.$el.addClass('active'); - }; - }, + className: 'hoverable', 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('invisible') + this.$el.find('.icons-check_yes_ok').toggleClass('selected'); app.router.aspects_stream(); }, diff --git a/app/assets/javascripts/app/views/aspects_list_view.js b/app/assets/javascripts/app/views/aspects_list_view.js index c0adbaf3b..01c65ded2 100644 --- a/app/assets/javascripts/app/views/aspects_list_view.js +++ b/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()); } }) diff --git a/app/assets/javascripts/app/views/tag_following_view.js b/app/assets/javascripts/app/views/tag_following_view.js index f59defb32..e69c4dc6d 100644 --- a/app/assets/javascripts/app/views/tag_following_view.js +++ b/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({ }) } -}); \ No newline at end of file +}); diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index 1d9fbb3a7..aff5d805d 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/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, diff --git a/app/assets/stylesheets/sidebar.css.scss b/app/assets/stylesheets/sidebar.css.scss new file mode 100644 index 000000000..300ae7483 --- /dev/null +++ b/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 ---- */ +} diff --git a/app/assets/templates/aspect_tpl.jst.hbs b/app/assets/templates/aspect_tpl.jst.hbs index 8133e35fc..2965181d1 100644 --- a/app/assets/templates/aspect_tpl.jst.hbs +++ b/app/assets/templates/aspect_tpl.jst.hbs @@ -1,10 +1,7 @@ - -
-
- + {{#if selected}} -
+
{{else}} - +
{{/if}} - {{name}} + {{name}} diff --git a/app/assets/templates/aspects-list_tpl.jst.hbs b/app/assets/templates/aspects-list_tpl.jst.hbs index 493f259a4..5f29f9313 100644 --- a/app/assets/templates/aspects-list_tpl.jst.hbs +++ b/app/assets/templates/aspects-list_tpl.jst.hbs @@ -1,6 +1,8 @@ - - {{ t "aspect_navigation.select_all" }} - -
  • - {{ t "aspect_navigation.add_an_aspect" }} +
  • + + {{ t "aspect_navigation.select_all" }} + +
    • +
  • + {{ t "aspect_navigation.add_an_aspect" }}
    • diff --git a/app/assets/templates/tag_following_list_tpl.jst.hbs b/app/assets/templates/tag_following_list_tpl.jst.hbs index 2e0c2f292..d4ba359fb 100644 --- a/app/assets/templates/tag_following_list_tpl.jst.hbs +++ b/app/assets/templates/tag_following_list_tpl.jst.hbs @@ -1,5 +1,5 @@
  • -
    +
    • diff --git a/app/assets/templates/tag_following_tpl.jst.hbs b/app/assets/templates/tag_following_tpl.jst.hbs index 2b5a692ad..bc88c255f 100644 --- a/app/assets/templates/tag_following_tpl.jst.hbs +++ b/app/assets/templates/tag_following_tpl.jst.hbs @@ -1,9 +1,4 @@ - + + #{{ name }} - - diff --git a/app/views/aspects/_aspect_listings.haml b/app/views/aspects/_aspect_listings.haml index 8e593df9d..60e3c9605 100644 --- a/app/views/aspects/_aspect_listings.haml +++ b/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 - %li.all_aspects - = link_to t('streams.aspects.title'), aspects_path, :class => 'home_selector', :rel => 'backbone' - - %ul#aspects_list.sub_nav += link_to t('streams.aspects.title'), aspects_path, :class => 'hoverable', :rel => 'backbone' +%ul#aspects_list diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml index 3429fff75..7a7771cf8 100644 --- a/app/views/streams/main_stream.html.haml +++ b/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.left_nav - %li - = link_to t("streams.activity.title"), activity_stream_path, :class => 'home_selector', :rel => 'backbone' - - %ul.left_nav - %li - = link_to t('streams.mentions.title'), mentioned_stream_path, :class => 'home_selector', :rel => 'backbone' - - %ul.left_nav - %li - = link_to t("streams.multi.title"), stream_path, :class => 'home_selector', :rel => 'backbone' - - = render 'aspects/aspect_listings', :stream => @stream - - #followed_tags_listing + %ul#stream_selection + %li.hoverable + = link_to t("streams.activity.title"), activity_stream_path, :rel => 'backbone' + %li.hoverable + = link_to t('streams.mentions.title'), mentioned_stream_path, :rel => 'backbone' + %li.hoverable + = link_to t("streams.multi.title"), stream_path, :rel => 'backbone' + %li.all_aspects + = render 'aspects/aspect_listings', :stream => @stream + %li = render 'tags/followed_tags_listings' diff --git a/app/views/tags/_followed_tags_listings.haml b/app/views/tags/_followed_tags_listings.haml index defb05517..5c07cf8e8 100644 --- a/app/views/tags/_followed_tags_listings.haml +++ b/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? - %ul.left_nav.sub - %li - %b=link_to t('streams.followed_tag.title'), followed_tags_stream_path, :class => 'home_selector' - - %ul.sub_nav#tags_list += link_to t('streams.followed_tag.title'), followed_tags_stream_path, :class => 'hoverable' +%ul#tags_list diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml index 84ec56b05..5988490ef 100644 --- a/app/views/tags/show.haml +++ b/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 diff --git a/config/application.rb b/config/application.rb index ee781069e..d0e17637d 100644 --- a/config/application.rb +++ b/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 diff --git a/features/follows_tags.feature b/features/follows_tags.feature index 0448b2163..f648f2834 100644 --- a/features/follows_tags.feature +++ b/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 follow "unfollow_boss" - And I confirm the alert - Then I should not see "#tag-following-boss" within ".left_nav" + And I unfollow the "boss" tag + Then I should not see "#tag-following-boss" within "#tags_list" diff --git a/features/manages_aspects.feature b/features/manages_aspects.feature index b1955c2e6..492a569e2 100644 --- a/features/manages_aspects.feature +++ b/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 diff --git a/features/mentions_from_profile_page.feature b/features/mentions_from_profile_page.feature index dda6c8527..fa75e5226 100644 --- a/features/mentions_from_profile_page.feature +++ b/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 diff --git a/features/step_definitions/aspects_steps.rb b/features/step_definitions/aspects_steps.rb index b404fcf3d..e1653574c 100644 --- a/features/step_definitions/aspects_steps.rb +++ b/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("#aspect_nav") do - find('a > .edit').click + within(".all_aspects") do + li = find('li', text: aspect_name) + 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 'Aspects' + click_link 'My 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 - page.has_css?("li.active[data-aspect_id='#{aspect.id}']").should be_true - page.has_no_css?("li.active[data-aspect_id='#{aspect.id}'] .invisible").should be_true + within("#aspects_list") do + page.should have_css "li[data-aspect_id='#{aspect.id}'] .selected" end end Then /^I should see "([^"]*)" aspect unselected$/ do |aspect_name| aspect = @me.aspects.where(:name => aspect_name).first - within("#aspect_nav") do - page.has_css?("li[data-aspect_id='#{aspect.id}']:not(.active) .invisible", visible: false).should be_true + within("#aspects_list") do + page.should_not have_css "li[data-aspect_id='#{aspect.id}'] .selected" end end diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index 2f66a03c0..04be88f29 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/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| diff --git a/features/step_definitions/tag_steps.rb b/features/step_definitions/tag_steps.rb new file mode 100644 index 000000000..c3cbef484 --- /dev/null +++ b/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 diff --git a/spec/javascripts/app/views/aspect_view_spec.js b/spec/javascripts/app/views/aspect_view_spec.js index cfdbb387d..40839c922 100644 --- a/spec/javascripts/app/views/aspect_view_spec.js +++ b/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(); }); }); diff --git a/spec/javascripts/app/views/aspects_list_view_spec.js b/spec/javascripts/app/views/aspects_list_view_spec.js index 27b5ed972..c8c38a80b 100644 --- a/spec/javascripts/app/views/aspects_list_view_spec.js +++ b/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.$('.active > .aspect_selector').text()).toMatch('Work'); + expect(this.view.$('.selected').length).toBe(1); + 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(){