From ac533f83835aeba9b0ec39b5a4da02dbe99d032c Mon Sep 17 00:00:00 2001
From: flaburgan <flaburgan@geexxx.fr>
Date: Thu, 11 Jul 2013 20:41:44 +0200
Subject: [PATCH] Refactor the left bar side menu, improve tag autosuggestion
design, close #4271
---
Changelog.md | 1 +
.../javascripts/app/views/aspect_view.js | 15 +-
.../app/views/aspects_list_view.js | 14 +-
.../app/views/tag_following_view.js | 6 +-
app/assets/stylesheets/application.css.sass | 68 +--------
app/assets/stylesheets/sidebar.css.scss | 135 ++++++++++++++++++
app/assets/templates/aspect_tpl.jst.hbs | 11 +-
app/assets/templates/aspects-list_tpl.jst.hbs | 12 +-
.../templates/tag_following_list_tpl.jst.hbs | 2 +-
.../templates/tag_following_tpl.jst.hbs | 9 +-
app/views/aspects/_aspect_listings.haml | 7 +-
app/views/streams/main_stream.html.haml | 28 ++--
app/views/tags/_followed_tags_listings.haml | 8 +-
app/views/tags/show.haml | 4 +-
config/application.rb | 1 +
features/follows_tags.feature | 8 +-
features/manages_aspects.feature | 2 +-
features/mentions_from_profile_page.feature | 4 +-
features/step_definitions/aspects_steps.rb | 22 +--
features/step_definitions/custom_web_steps.rb | 2 +-
features/step_definitions/tag_steps.rb | 5 +
.../javascripts/app/views/aspect_view_spec.js | 10 +-
.../app/views/aspects_list_view_spec.js | 8 +-
23 files changed, 216 insertions(+), 166 deletions(-)
create mode 100644 app/assets/stylesheets/sidebar.css.scss
create mode 100644 features/step_definitions/tag_steps.rb
diff --git a/Changelog.md b/Changelog.md
index 530c427a72..8db438829d 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 d4482a7883..c8e553ea87 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 c0adbaf3b2..01c65ded29 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 f59defb32e..e69c4dc6d2 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 1d9fbb3a7d..aff5d805df 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 0000000000..300ae7483f
--- /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 8133e35fcb..2965181d10 100644
--- a/app/assets/templates/aspect_tpl.jst.hbs
+++ b/app/assets/templates/aspect_tpl.jst.hbs
@@ -1,10 +1,7 @@
-<a href="/aspects/{{id}}/edit" rel="facebox">
- <div class="edit icons-pencil" alt="Pencil" title="{{t 'edit'}} {{name}}">
- </div>
-</a>
+<a href="/aspects/{{id}}/edit" class="action modify_aspect" rel="facebox"></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>
diff --git a/app/assets/templates/aspects-list_tpl.jst.hbs b/app/assets/templates/aspects-list_tpl.jst.hbs
index 493f259a48..5f29f93135 100644
--- a/app/assets/templates/aspects-list_tpl.jst.hbs
+++ b/app/assets/templates/aspects-list_tpl.jst.hbs
@@ -1,6 +1,8 @@
-<a class="toggle_selector" href="#">
- {{ t "aspect_navigation.select_all" }}
-</a>
-<li>
- <a class="new_aspect" href="/aspects/new" rel="facebox">{{ t "aspect_navigation.add_an_aspect" }}</a>
+<li class="hoverable">
+ <a class="selectable toggle_selector" href="#">
+ {{ t "aspect_navigation.select_all" }}
+ </a>
+</li>
+<li class="hoverable">
+ <a href="/aspects/new" class="selectable new_aspect" rel="facebox">{{ t "aspect_navigation.add_an_aspect" }}</a>
</li>
diff --git a/app/assets/templates/tag_following_list_tpl.jst.hbs b/app/assets/templates/tag_following_list_tpl.jst.hbs
index 2e0c2f2921..d4ba359fba 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 @@
<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>
diff --git a/app/assets/templates/tag_following_tpl.jst.hbs b/app/assets/templates/tag_following_tpl.jst.hbs
index 2b5a692ad0..bc88c255fd 100644
--- a/app/assets/templates/tag_following_tpl.jst.hbs
+++ b/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>
diff --git a/app/views/aspects/_aspect_listings.haml b/app/views/aspects/_aspect_listings.haml
index 8e593df9d9..60e3c96057 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 3429fff751..7a7771cf8d 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 defb055174..5c07cf8e8d 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 84ec56b05c..5988490efd 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 ee781069e3..d0e17637d4 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 0448b2163a..f648f28342 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 b1955c2e65..492a569e2f 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 dda6c85277..fa75e52260 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 b404fcf3d5..e1653574c8 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 2f66a03c02..04be88f29c 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 0000000000..c3cbef484c
--- /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 cfdbb387d9..40839c9225 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 27b5ed9726..c8c38a80b2 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(){
--
GitLab