Commit eddfa7cb authored by Steffen van Bergerem's avatar Steffen van Bergerem

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

Left and right navbar polishing
parents e54208d3 450bf4f4
......@@ -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)
......
......@@ -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) {
......
......@@ -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);
},
......
// @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) {
......
......@@ -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(){
......@@ -31,6 +31,6 @@ app.views.TagFollowing = app.views.Base.extend({
tag : this.model
});
}
});
// @license-end
......@@ -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';
......
......@@ -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; }
......
......@@ -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);
......
#leftNavBar {
/* 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: 0px;
padding: 0px;
margin: 0;
padding: 0;
list-style: none;
&#stream_selection {
margin: 0px -15px; /* -15px overrides Bootstrap's default gutter width */
}
}
.selected { color: $black; }
.selected a { color: $black; }
.selected, .selected a { color: $black; }
.hoverable {
display: block;
margin-right: 6px;
padding: 4px;
&:hover { background-color: $background-blue; }
&.selected a, &.selected a:hover,
.followed-tags-sidebar a.hoverable.selected {
color: white;
background: #666;
}
}
.selectable {
a.hoverable, li.hoverable {
padding: 10px 20px;
display: block;
margin-left: 21px;
overflow: hidden;
text-overflow: ellipsis;
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 {
border-bottom: 1px dashed $border-grey;
margin-bottom: 10px;
min-height: 50px;
padding-bottom: 20px;
padding-left: 4px;
min-height: 90px;
padding: 20px;
margin: 0 -15px;
.avatar {
float: left;
......@@ -42,51 +85,21 @@
}
h4 {
margin-left: 60px;
padding-top: 15px;
margin: 0 0 0 60px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 25px;
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;
a {
color: $black;
font-weight: normal;
}
}
}
#tags_list {
.delete_tag_following {
font-size: 20px;
line-height: 15px;
}
#new_tag_following {
margin-left: 20px;
margin-top: 5px;
padding: 10px 20px 10px 30px;
}
/* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
......
.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 */
}
}
......@@ -59,7 +59,7 @@ footer ul#footer_nav {
right: auto;
}
.rightBar .right {
.rightbar .right {
margin-right: 70px;
}
......
.stream_container {
border-left: 1px solid $border-grey;
padding-left: 10px;
padding-top: 20px;
margin-left: -10px;
......
<a href="/aspects/query" class="selectable aspect-item" data-guid="{{id}}">
{{#if selected}}
<i class="entypo-check selected"></i>
{{else}}
<div class="entypo-check"></div>
{{/if}}
{{name}}
</a>
<a href="/contacts?a_id={{id}}" class="action modify_aspect pull-right">
<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>
......@@ -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>
<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>
......@@ -2,99 +2,93 @@
-# 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
= t('shared.invitations.invite_your_friends')
.content
= render "shared/invitations"
- if AppConfig.settings.invitations.open?
.section
.title
%h5.title-header
%i.entypo-plus
= t('shared.invitations.invite_your_friends')
= t('aspects.index.new_here.title')
.content
= render "shared/invitations"
.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'))))
%br
= link_to(t('aspects.index.new_here.learn_more'), "http://wiki.diasporafoundation.org/Welcoming_Committee")
!= 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'))))
%br
= link_to(t('aspects.index.new_here.learn_more'), "http://wiki.diasporafoundation.org/Welcoming_Committee")
.section
.title
%h5.title-header
%i.entypo-circled-help
= t('aspects.index.help.need_help')
.content
%p
= t('aspects.index.help.here_to_help')
%p
= t('aspects.index.help.do_you')
%ul
%li
!= t('aspects.index.help.have_a_question', :link => link_to("#"+t('aspects.index.help.tag_question'), tag_path(:name => t('aspects.index.help.tag_question'))))
%li
!= t('aspects.index.help.find_a_bug', :link => link_to("#"+t('aspects.index.help.tag_bug'), tag_path(:name => t('aspects.index.help.tag_bug'))))
%li
!= t('aspects.index.help.feature_suggestion', :link => link_to("#"+t('aspects.index.help.tag_feature'), tag_path(:name => t('aspects.index.help.tag_feature'))))
%p
!= t('aspects.index.help.tutorials_and_wiki',
:faq => link_to(t('_help'), help_path),
:tutorial => link_to(t('aspects.index.help.tutorial_link_text'), "https://diasporafoundation.org/tutorials", :target => '_blank'),
:wiki => link_to('Wiki','http://wiki.diasporafoundation.org', :target => '_blank'), :target => '_blank')
- unless AppConfig.configured_services.blank? || all_services_connected?
.section
.title
%h5.title-header
%i.entypo-cog
= t('aspects.index.services.heading')
= t('aspects.index.help.need_help')
.content
%div
= t('aspects.index.services.content')
%p
= t('aspects.index.help.here_to_help')
%p
= t('aspects.index.help.do_you')
%ul
%li
!= t('aspects.index.help.have_a_question', :link => link_to("#"+t('aspects.index.help.tag_question'), tag_path(:name => t('aspects.index.help.tag_question'))))
%li
!= t('aspects.index.help.find_a_bug', :link => link_to("#"+t('aspects.index.help.tag_bug'), tag_path(:name => t('aspects.index.help.tag_bug'))))
%li
!= t('aspects.index.help.feature_suggestion', :link => link_to("#"+t('aspects.index.help.tag_feature'), tag_path(:name => t('aspects.index.help.tag_feature'))))
%p
!= t('aspects.index.help.tutorials_and_wiki',
:faq => link_to(t('_help'), help_path),
:tutorial => link_to(t('aspects.index.help.tutorial_link_text'), "https://diasporafoundation.org/tutorials", :target => '_blank'),
:wiki => link_to('Wiki','http://wiki.diasporafoundation.org', :target => '_blank'), :target => '_blank')
#right_service_icons
- AppConfig.configured_services.each do |service|
- if AppConfig.show_service?(service, current_user)
- unless current_user.services.any?{|x| x.provider == service}
= link_to(content_tag(:div, nil, :class => "social_media_logos-#{service.to_s.downcase}-24x24", :title => service.to_s.titleize), "/auth/#{service}")
- unless AppConfig.configured_services.blank? || all_services_connected?
.section
.title
%h5.title-header
= t('aspects.index.services.heading')
.content
%div
= t('aspects.index.services.content')
.section
.title
%h5.title-header
%i.entypo-bookmark
= t('bookmarklet.heading')
.content
!= t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), bookmarklet_code))
#right_service_icons
- AppConfig.configured_services.each do |service|
- if AppConfig.show_service?(service, current_user)
- unless current_user.services.any?{|x| x.provider == service}
= link_to(content_tag(:div, nil, :class => "social_media_logos-#{service.to_s.downcase}-24x24", :title => service.to_s.titleize), "/auth/#{service}")
- if AppConfig.settings.paypal_donations.enable? || AppConfig.bitcoin_donation_address
.section
.title
%h5.title-header
%i.entypo-heart
= t('aspects.index.donate')
= t('bookmarklet.heading')
.content
%p
= t('aspects.index.keep_pod_running', :pod => AppConfig.pod_uri.host)
= render 'shared/donatepod'
!= t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), bookmarklet_code))
- if AppConfig.settings.paypal_donations.enable? || AppConfig.bitcoin_donation_address
.section
.title
%h5.title-header
= t('aspects.index.donate')
.content
%p
= t('aspects.index.keep_pod_running', :pod => AppConfig.pod_uri.host)
= render 'shared/donatepod'
- if AppConfig.admins.podmin_email.present?
.section
.title
%h5.title-header
= t('aspects.index.help.any_problem')
.content
%p
= t('aspects.index.help.contact_podmin')
%p
= link_to t('aspects.index.help.mail_podmin'), "mailto:#{AppConfig.admins.podmin_email}", :class => "button"
- if AppConfig.admins.podmin_email.present?
.section
.title
%h5.title-header
%i.entypo-mail
= t('aspects.index.help.any_problem')
.content
%p
= t('aspects.index.help.contact_podmin')
%p
= link_to t('aspects.index.help.mail_podmin'), "mailto:#{AppConfig.admins.podmin_email}", :class => "button"
.section
.title
.content
%ul
= render "shared/links"
%ul
= render "shared/links"
......@@ -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
......
......@@ -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'
within('#aspects_list') do
click_link 'Deselect all'
current_scope.should have_no_css '.selected'
click_link "My aspects"
within("#aspects_list") do
all(".selected").each {|node| node.find(:xpath, "..").click }
expect(current_scope).to have_no_css ".selected"
end
step %Q(I select "#{aspect_name}" aspect as well)
end
......
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
......@@ -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(){
......
......@@ -18,13 +18,13 @@ describe("app.views.AspectsList", function(){
this.view.render();
});
it('should show the corresponding aspects selected', function(){
expect(this.view.$('.selected').length).toBe(1);
expect(this.view.$('.selected + a.selectable').text()).toMatch('Work');
it("should show the corresponding aspects selected", function(){
expect(this.view.$(".selected").length).toBe(1);
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");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment