nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #5118 from blase/feature/4466-port-everything-to-bootstrap

Browse source 
Port everything under /contacts to bootstrap
This commit is contained in:
Jonne Haß 2014-08-15 02:34:29 +02:00
commit f82a5ba4d5
20 changed files with 286 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changelog.md
View file

@ -8,6 +8,7 @@
* Clarify explanations and defaults in diaspora.yml.example [#5088](https://github.com/diaspora/diaspora/pull/5088)
* Consistent header spacing on Bootstrap pages [#5108](https://github.com/diaspora/diaspora/pull/5108)
* Port settings pages (account, profile, privacy, services) to Bootstrap [#5039](https://github.com/diaspora/diaspora/pull/5039)
* Port contacts and community spotlight pages to Bootstrap [#5118](https://github.com/diaspora/diaspora/pull/5118)
## Bug fixes
* Fix hiding of poll publisher on close [#5029](https://github.com/diaspora/diaspora/issues/5029)

4
app/assets/javascripts/aspect-edit-pane.js
View file

@ -41,8 +41,8 @@ app.tmp || (app.tmp = {});
// on the contacts page, viewing the facebox for single aspect
app.tmp.ContactAspectsBox = function() {
$('body').on('click', '#aspect_edit_pane a.add.button', _.bind(this.addToAspect, this));
$('body').on('click', '#aspect_edit_pane a.added.button', _.bind(this.removeFromAspect, this));
$('body').on('click', '#aspect_edit_pane a.add.btn', _.bind(this.addToAspect, this));
$('body').on('click', '#aspect_edit_pane a.added.btn', _.bind(this.removeFromAspect, this));
};
_.extend(app.tmp.ContactAspectsBox.prototype, {
addToAspect: function(evt) {

126
app/assets/stylesheets/aspects.css.scss
View file

@ -25,6 +25,20 @@
}
}
.btn {
&.delete {
color: desaturate($red,10%);
}
}
.modify_aspect {
background: url("icons/pencil.png") no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
/* -- Used in contacts/index.html.haml -- */
#aspect_controls {
@ -37,7 +51,7 @@
.button, .button_to {
margin-right: 5px;
}
.button_to { display: inline-block; }
.contact_visibility_padlock,
@ -56,6 +70,26 @@
}
}
#aspect_nav {
list-style-type: none;
.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;
}
}
}
.contact_visibility_padlock {
height: 16px;
width: 16px;
@ -137,12 +171,17 @@
margin-bottom: 5px;
}
#aspect_name_title {
margin: 0px 0px 5px 0px;
}
#contact_list_search {
width: 200px;
margin-bottom: 2px;
margin-top: 0px;
float: right;
}
.contact_list,
.aspect_list {
@include border-radius(3px);
@ -196,18 +235,28 @@
border: 1px solid $border-dark-grey;
&.hidden { display: none; }
& > .name { white-space: nowrap; }
&.remote_friend { width: 285px; }
a.button {
& > .name {
font-size: 16px;
margin: 0px 0px 5px 0px;
white-space: nowrap;
}
a.btn {
@include box-shadow(0,0,0);
border-bottom: none;
min-width: auto;
min-width: 90px;
float: right;
padding: 2px 4px;
padding: 2px 0px;
margin-top: 5px;
margin-right: -5px;
&.added {
@include linear-gradient(rgb(158,255,153), rgb(92,199,86));
background-color: rgb(92,199,86);
}
&.added { @include linear-gradient(rgb(158,255,153), rgb(92,199,86)); }
&.added.remove {
@include linear-gradient(rgb(255,153,153), rgb(199,86,86));
@ -260,6 +309,7 @@
form {
display: inline-block;
margin: 0px;
}
.creation {
@ -267,3 +317,65 @@
}
}
}
#leftNavBar {
color: #222222;
ul {
margin: 0px;
padding: 0px;
}
a {
color: $link-grey;
font-weight: bold;
text-decoration: none;
}
.selected { color: $black; }
.selected a { color: $black; }
.hoverable {
display: block;
margin-right: 6px;
padding: 4px;
&:hover { background-color: $background-blue; }
.label {
background-color: $background-grey;
color: $text-grey;
float: right;
padding: 3px 5px;
}
}
.selectable {
display: block;
margin-left: 21px;
overflow: hidden;
text-overflow: ellipsis;
}
.action {
width: 12px;
height: 12px;
display: none;
float: right;
margin: 3px;
}
.hoverable:hover > .action {
display: block;
}
}
#new_aspect {
#aspect_contacts_visible.checkbox {
margin: 0px;
}
label[for="aspect_contacts_visible"] {
display: inline;
}
}

1
app/assets/stylesheets/colors.css.scss
View file

@ -2,6 +2,7 @@ $highlight-white: #FAFAFA;
$background-white: #FFFFFF;
$background-grey: #EEEEEE;
$background-blue: #E7F2F7;
$grey: #2B2B2B;
$light-grey: #DDDDDD;

82
app/assets/stylesheets/contacts.css.scss Normal file
View file

@ -0,0 +1,82 @@
#section_header {
h3 {
border-bottom: 1px solid $border-grey;
}
}
#people_stream {
.bd {
font-size: 13px;
line-height: 19.5px;
}
.btn-group {
margin-top: 5px;
.caret {
margin-top: 8px;
}
.text {
text-shadow: none;
}
}
.info {
font-size: 11px;
line-height: 16.5px;
}
.stream_element {
border-bottom: 1px solid $border-grey;
.icons-monotone_close_exit_delete {
margin-top: 8px;
}
.media {
margin: 10px;
}
}
}
#community_spotlight {
.avatar {
width: 140px;
height: 140px;
}
.user_card {
@include border-radius(3px);
@include box-shadow(0,1px,5px,#ccc);
border: 1px solid #ccc;
display: inline-block;
margin-bottom: 15px;
margin-right: 10px;
min-height: 220px;
padding: 10px 10px 30px 10px;
position: relative;
vertical-align: top;
width: 140px;
h4 {
margin-bottom: 0px;
padding-bottom: 2px;
}
.add_user_to_aspect {
bottom: 10px;
right: 10px;
position: absolute;
}
.dropdown {
width: 100%;
}
.tags {
color: $text-grey;
}
}
}

3
app/assets/stylesheets/new-templates.css.scss
View file

@ -58,3 +58,6 @@
/* stream */
@import 'tag';
/* contacts */
@import 'contacts';

2
app/controllers/contacts_controller.rb
View file

@ -5,6 +5,8 @@
class ContactsController < ApplicationController
before_filter :authenticate_user!
use_bootstrap_for :index, :spotlight
def index
respond_to do |format|

6
app/helpers/aspects_helper.rb
View file

@ -12,7 +12,7 @@ module AspectsHelper
:person_id => person_id
},
:method => 'post',
:class => 'add button',
:class => 'add btn',
'data-aspect_id' => aspect_id,
'data-person_id' => person_id
end
@ -24,7 +24,7 @@ module AspectsHelper
:id => membership_id
},
:method => 'delete',
:class => 'added button',
:class => 'added btn',
'data-membership_id' => membership_id,
'data-aspect_id' => aspect_id,
'data-person_id' => person_id
@ -50,7 +50,7 @@ module AspectsHelper
title = t('aspects.edit.aspect_list_is_not_visible');
end
link_to aspect_toggle_contact_visibility_path(@aspect), class: 'contact_visibility_link button', title: title, method: :put, remote: true do
link_to aspect_toggle_contact_visibility_path(@aspect), class: 'contact_visibility_link btn', title: title, method: :put, remote: true do
concat t('aspects.edit.set_visibility')
concat content_tag(:span, nil, class: "contact_visibility_padlock " + icon)
end

2
app/helpers/contacts_helper.rb
View file

@ -24,7 +24,7 @@ module ContactsHelper
def start_a_conversation_link(aspect, contacts_size)
suggested_limit = 16
conv_opts = { class: "button conversation_button", rel: "facebox"}
conv_opts = { class: "btn conversation_button", rel: "facebox"}
conv_opts[:title] = t('.many_people_are_you_sure', suggested_limit: suggested_limit) if contacts_size > suggested_limit
link_to new_conversation_path(aspect_id: aspect.id, name: aspect.name), conv_opts do

6
app/views/aspects/edit.html.haml
View file

@ -12,13 +12,13 @@
#aspect_name_edit.hidden
= form_for @aspect, :remote => true do |aspect|
= aspect.text_field :name, :maxlength => 20
= aspect.submit t('.update'), 'data-disable-with' => t('.updating'), :class => 'button'
= aspect.submit t('.update'), 'data-disable-with' => t('.updating'), :class => 'btn'
- if @contacts.count > 0
= render 'shared/contact_list', :aspect => @aspect, :contacts => @contacts
.bottom_submit_section
= button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'button delete'
= button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'btn delete'
= aspect_visibility_link(@aspect)
= submit_tag t('.done'), :class => 'button creation', :rel => 'close'
= submit_tag t('.done'), :class => 'btn creation', :rel => 'close'

10
app/views/aspects/new.haml
View file

@ -2,7 +2,9 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
.span-12.last
-# TODO: remove Blueprint classes when everything is ported to Bootstrap
.span6.span-12.last
#facebox_header
%h3
= t('contacts.index.add_a_new_aspect')
@ -16,11 +18,11 @@
= aspect.text_field :name, :maxlength => 20
%p.checkbox_select
= aspect.check_box :contacts_visible, :checked => false, class: 'checkbox'
= aspect.label :contacts_visible, t('aspects.edit.make_aspect_list_visible')
= aspect.check_box :contacts_visible, :checked => false
%br
.bottom_submit_section
= submit_tag t('cancel'), :class => 'button', :type => :reset, :rel => "close"
= aspect.submit t('.create'), :class => 'button creation'
= submit_tag t('cancel'), :class => 'button btn', :type => :reset, :rel => "close"
= aspect.submit t('.create'), :class => 'button btn creation'

9
app/views/contacts/_aspect_listings.haml
View file

@ -6,13 +6,13 @@
%li.all_aspects{:class => ("active" if params["set"] != "all" && params["set"] != "only_sharing" && !@spotlight)}
%a.home_selector.hoverable{:href => contacts_path, :class => ("sub_selected" if params["a_id"])}
= t('contacts.index.my_contacts')
.item_count
.label
= my_contacts_count
%ul.sub_nav#aspects_list
- all_aspects.each do |aspect|
%li.hoverable{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
.item_count
.label
= aspect.contacts.size
.icons-check_yes_ok{:class => ("selected" if params["a_id"].to_i == aspect.id) }
%a.selectable{:href => contacts_path(:a_id => aspect.id)}
@ -24,7 +24,7 @@
%li.all_contacts{:class => ("active" if params["set"] == "all" || params["set"] == "only_sharing")}
%a.home_selector.hoverable{:href => contacts_path(:set => "all"), :class => ("sub_selected" if params["set"] == "only_sharing")}
= t('contacts.index.all_contacts')
.item_count
.label
= all_contacts_count
%ul.sub_nav
@ -32,6 +32,5 @@
.icons-check_yes_ok{:class => ("invisible" if params["set"] == "only_sharing")}
%a.selectable{:href => contacts_path(:set => "only_sharing")}
= t('contacts.index.only_sharing_with_me')
.item_count
.label
= only_sharing_count

2
app/views/contacts/_contact.html.haml
View file

@ -1,6 +1,6 @@
.stream_element{:id => contact.person_id}
.media
.float-right
.pull-right
= contact_aspect_dropdown(contact)
.img
= person_image_link(contact.person, :size => :thumb_small)

67
app/views/contacts/index.html.haml
View file

@ -8,39 +8,42 @@
- content_for :head do
= javascript_include_tag :people
#section_header
%h2
= t('.title')
.row
.span12
#section_header
%h3
= t('.title')
= render 'shared/contact_sidebar'
.row
= render 'shared/contact_sidebar'
.span-18.last
#people_stream.stream.contacts
- if @aspect
#aspect_controls
- if @contacts_size > 0 && @contacts_size < 20
= start_a_conversation_link(@aspect, @contacts_size)
= link_to edit_aspect_path(@aspect), rel: "facebox", class: "button" do
= t('aspects.edit.manage')
%span.modify_aspect
= aspect_visibility_link(@aspect)
= link_to @aspect, method: "delete", data: { confirm: t('aspects.edit.confirm_remove_aspect') }, class: 'button delete' do
= t('delete')
%span.icons-monotone_close_exit_delete
.span9
#people_stream.stream.contacts
- if @aspect
#aspect_controls
- if @contacts_size > 0 && @contacts_size < 20
= start_a_conversation_link(@aspect, @contacts_size)
= link_to edit_aspect_path(@aspect), rel: "facebox", class: "btn" do
= t('aspects.edit.manage')
%span.modify_aspect
= aspect_visibility_link(@aspect)
= link_to @aspect, method: "delete", data: { confirm: t('aspects.edit.confirm_remove_aspect') }, class: 'btn delete' do
= t('delete')
%span.icons-monotone_close_exit_delete
- if @contacts_size > 0
= render @contacts
- if @contacts_size > 0
= render @contacts
= will_paginate @contacts
- else
%h3.no_contacts
= t('.no_contacts')
%br
%br
- if @aspect
!= t('.no_contacts_message_with_aspect',
:community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path),
:add_to_aspect_link => link_to(t('.add_to_aspect_link', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"))
- else
!= t('.no_contacts_message',
:community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path))
= will_paginate @contacts
- else
.no_contacts
%h3
= t('.no_contacts')
%p
- if @aspect
!= t('.no_contacts_message_with_aspect',
:community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path),
:add_to_aspect_link => link_to(t('.add_to_aspect_link', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"))
- else
!= t('.no_contacts_message',
:community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path))

2
app/views/contacts/sharing.haml
View file

@ -27,4 +27,4 @@
%br
%div{:style => "text-align:right;"}
= link_to t('aspects.edit.done'), '#', :class => 'button', :rel => 'close'
= link_to t('aspects.edit.done'), '#', :class => 'btn', :rel => 'close'

33
app/views/contacts/spotlight.haml
View file

@ -8,23 +8,24 @@
- content_for :head do
= javascript_include_tag :people
#section_header
%h2
= t('contacts.index.title')
.row
.span12
#section_header
%h3
= t('contacts.index.title')
= render 'shared/contact_sidebar'
.row
= render 'shared/contact_sidebar'
.span-18.last{:style => "position:relative;"}
.span9
- if AppConfig.settings.community_spotlight.suggest_email.present?
.right
= link_to t('contacts.spotlight.suggest_member'), "mailto:#{AppConfig.settings.community_spotlight.suggest_email}", :class => "button"
- if AppConfig.settings.community_spotlight.suggest_email.present?
.right
= link_to t('contacts.spotlight.suggest_member'), "mailto:#{AppConfig.settings.community_spotlight.suggest_email}", :class => "button"
%h3
= t('contacts.spotlight.community_spotlight')
%h3
= t('contacts.spotlight.community_spotlight')
%br
#community_spotlight
- unless @people.blank?
- @people.each do |person|
= render 'community_spotlight/user', :person => person
#community_spotlight
- unless @people.blank?
- @people.each do |person|
= render 'community_spotlight/user', :person => person

2
app/views/shared/_contact_list.html.haml
View file

@ -14,6 +14,6 @@
= person_image_tag contact.person
%h4.name
= link_to contact.person.name, contact.person
.right
.pull-right
= aspect_membership_button(aspect, contact, contact.person)

2
app/views/shared/_contact_sidebar.html.haml
View file

@ -2,7 +2,7 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
#leftNavBar.span-5.append-1
#leftNavBar.span3
= render 'contacts/aspect_listings'
- if AppConfig.settings.community_spotlight.enable?

2
features/desktop/manages_aspects.feature
View file

@ -82,7 +82,7 @@ Feature: User manages contacts
And I click on my name in the header
When I follow "Contacts"
Then I should see "Community Spotlight" within ".span-18"
Then I should see "Community Spotlight" within ".span9"
Scenario: clicking on the contacts link in the header with contacts does not send a user to the featured users page
Given I am signed in

4
features/step_definitions/aspects_steps.rb
View file

@ -42,14 +42,14 @@ When /^I select "([^"]*)" aspect as well$/ do |aspect_name|
end
When /^I check the first contact list button$/ do
find(".contact_list .button", match: :first).tap do |button|
find(".contact_list .btn", match: :first).tap do |button|
button.click
button.parent.should have_css ".added"
end
end
When /^I uncheck the first contact list button$/ do
find(".contact_list .button", match: :first).tap do |button|
find(".contact_list .btn", match: :first).tap do |button|
button.click
button.parent.should have_css ".add"
sleep 1 # The expectation above should wait for the request to finsh, but that doesn't work for some reason