Refactor the left bar side menu, improve tag autosuggestion design, close #4271
This commit is contained in:
flaburgan
parent
9ec9ae0c6c
commit
ac533f8383
23 changed files with 216 additions and 166 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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({
|
|||
})
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
135
app/assets/stylesheets/sidebar.css.scss
Normal file
135
app/assets/stylesheets/sidebar.css.scss
Normal file
|
|
@ -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 ---- */
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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|
|
||||
|
|
|
|||
5
features/step_definitions/tag_steps.rb
Normal file
5
features/step_definitions/tag_steps.rb
Normal file
|
|
@ -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
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
|
|
|
|||
Loading…
Reference in a new issue