Commit 1ba4357a authored by Steffen van Bergerem's avatar Steffen van Bergerem

Unify contacts, notifications and settings UI

parent 2a47b889
...@@ -26,6 +26,9 @@ ...@@ -26,6 +26,9 @@
/* font overrides */ /* font overrides */
@import 'typography'; @import 'typography';
// layout
@import 'sidebar';
/* login */ /* login */
@import 'login'; @import 'login';
@import 'registration'; @import 'registration';
......
...@@ -10,6 +10,24 @@ body { ...@@ -10,6 +10,24 @@ body {
> .container-fluid { max-width: 100%; } > .container-fluid { max-width: 100%; }
} }
// These names are generated by a rails controller
// scss-lint:disable SelectorFormat
.page-contacts,
.page-conversations,
.page-notifications,
.page-people.action-show,
.page-people.action-contacts,
.page-photos,
.page-profiles.action-edit,
.page-services.action-index,
.page-streams,
.page-user_applications,
.page-users.action-edit,
.page-users.action-privacy_settings {
background-color: $sidebars-background;
}
// scss-lint:enable SelectorFormat
// Overflow // Overflow
h1, h1,
h2, h2,
......
...@@ -668,9 +668,9 @@ $navbar-collapse-max-height: 480px; ...@@ -668,9 +668,9 @@ $navbar-collapse-max-height: 480px;
// //
//## //##
//** Background color on `.list-group-item` //** Background color on `.list-group-item`
$list-group-bg: $sidebars-background; $list-group-bg: $white;
//** `.list-group-item` border color //** `.list-group-item` border color
$list-group-border: $border-grey; $list-group-border: transparent;
//** List group border radius //** List group border radius
$list-group-border-radius: 0; $list-group-border-radius: 0;
......
.page-contacts {
.sidebar { padding-bottom: 10px; }
.header {
border-bottom: 1px solid $border-grey;
min-height: 55px;
form { margin: 0; }
input,
.btn {
margin-bottom: 11px;
margin-top: 11px;
}
.aspect-controls { margin: 7px -10px 7px 0; }
}
}
#contacts_container { #contacts_container {
#people_stream.contacts { #people_stream.contacts {
.header { .header {
border-bottom: 1px solid $border-grey;
margin-top: 10px;
min-height: 53px;
#change_aspect_name { cursor: pointer; } #change_aspect_name { cursor: pointer; }
#aspect_name_form { #aspect_name_form {
display: none; display: none;
form { margin: 0px; }
input {
margin-bottom: 0px;
margin-top: 10px;
}
.btn { margin-top: 10px; }
} }
#contact_list_search { #contact_list_search {
margin: 6px 30px 0 0; margin: 11px 30px 0 0;
width: 150px; width: 150px;
&:focus { width: 250px; } &:focus { width: 250px; }
} }
......
.page-conversations { .page-conversations {
background-color: $sidebars-background; .framed-content { padding: 0 10px 10px; }
.sidebar-header .pull-right { margin-top: 12px; }
.left-pane, .sidebar {
.new-conversation,
.stream_container .conversation-participants {
background-color: $white;
border: 1px solid $light-grey;
box-shadow: $card-shadow;
margin-top: -10px;
}
.new-conversation,
.left-pane-header,
.stream_container .conversation-participants {
padding: 10px;
}
.left-pane {
margin-bottom: 50px; margin-bottom: 50px;
.pagination { margin: 5px; } .pagination { margin: 5px; }
} }
......
...@@ -2,27 +2,22 @@ ...@@ -2,27 +2,22 @@
.stream { .stream {
.header { .header {
border-bottom: 1px solid $border-grey; border-bottom: 1px solid $border-grey;
.btn-toolbar { margin: 11px 0; }
margin-bottom: 10px; margin-bottom: 10px;
} }
.year_container { margin-top: 40px; } .btn-toolbar { margin: 11px 0; }
.year { .year {
background-color: $white; background-color: $white;
color: $text-grey; color: $text-grey;
font-size: 40px; font-size: 40px;
line-height: 40px; line-height: 40px;
margin-bottom: -20px; margin-bottom: 20px;
margin-top: 40px;
text-align: center; text-align: center;
} }
.year_container + .day_group {
border-top: 1px solid $border-grey;
padding-top: 60px;
}
.day_group + .day_group { .day_group + .day_group {
border-top: 1px dashed $border-grey;
margin-top: 10px; margin-top: 10px;
padding-top: 10px; padding-top: 10px;
} }
......
...@@ -31,11 +31,12 @@ ...@@ -31,11 +31,12 @@
#blocked_people { #blocked_people {
.blocked_person { .blocked_person {
border-bottom: 1px solid $border-grey; border-bottom: 1px solid $border-grey;
padding: 10px;
margin: 0px;
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
margin: 0;
min-height: 50px; min-height: 50px;
padding: 10px 0;
&:last-of-type { border-bottom: 0; }
.avatar { .avatar {
width: 50px; width: 50px;
height: 50px; height: 50px;
......
body.page-people.action-show, body.page-people.action-contacts {
background-color: $sidebars-background;
}
#profile_container { #profile_container {
.profile_header { .profile_header {
margin-bottom: 15px; margin-bottom: 15px;
...@@ -109,11 +105,8 @@ body.page-people.action-show, body.page-people.action-contacts { ...@@ -109,11 +105,8 @@ body.page-people.action-show, body.page-people.action-contacts {
} }
#profile { #profile {
background-color: $white;
padding: 20px; padding: 20px;
margin-top: -10px;
margin-bottom: 35px; margin-bottom: 35px;
box-shadow: $card-shadow;
#profile_photo { #profile_photo {
margin-top: 10px; margin-top: 10px;
......
// Specific styles for the settings pages (profile, user account, privacy, services) // Specific styles for the settings pages (profile, user account, privacy, services)
// These names are generated by a rails controller
// scss-lint:disable SelectorFormat
.page-profiles.action-edit,
.page-services.action-index,
.page-user_applications,
.page-users.action-edit,
.page-users.action-privacy_settings {
.framed-content {
padding-left: 10px;
padding-right: 10px;
}
}
// scss-lint:enable SelectorFormat
.enclosed-checkbox label { .enclosed-checkbox label {
margin-bottom: 0; margin-bottom: 0;
} }
......
.sidebar,
.framed-content {
background-color: $white;
border: 1px solid $light-grey;
box-shadow: $card-shadow;
margin-top: -10px;
padding-top: 10px;
.header,
.sidebar-header {
padding-left: 10px;
padding-right: 10px;
h3 {
line-height: 40px;
margin: 7px 0;
}
}
.list-group { margin-bottom: 0; }
}
body.page-streams, body.page-photos {
background-color: $sidebars-background;
}
.stream_container { .stream_container {
#publisher { #publisher {
margin-bottom: 15px; margin-bottom: 15px;
......
<div class="container-fluid stream_element media contact {{in_aspect}}" id={{person_id}}> <div class="clearfix stream_element media contact {{in_aspect}}" id={{person_id}}>
<div class="pull-right"> <div class="pull-right">
{{{aspectMembershipIndicator this in_aspect}}} {{{aspectMembershipIndicator this in_aspect}}}
</div> </div>
......
...@@ -4,9 +4,11 @@ ...@@ -4,9 +4,11 @@
.container-fluid.applications-page .container-fluid.applications-page
.row .row
.col-md-3 .col-md-3
= render "shared/settings_nav" .sidebar
= render "shared/settings_nav"
.col-md-9 .col-md-9
%h3= t(".title") .framed-content
.row %h3= t(".title")
.col-md-12 .row
= render "add_remove_applications" .col-md-12
= render "add_remove_applications"
.header .header.clearfix
- if @aspect - if @aspect
#aspect_controls.pull-right .aspect-controls.pull-right#aspect_controls
- if @aspect.contacts.size > 0 && @aspect.contacts.size < 20 - if @aspect.contacts.size > 0 && @aspect.contacts.size < 20
= start_a_conversation_link(@aspect, @aspect.contacts.size) = start_a_conversation_link(@aspect, @aspect.contacts.size)
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
= link_to @aspect, method: "delete", data: { confirm: t("aspects.edit.confirm_remove_aspect") }, class: "delete contacts_button", id: "delete_aspect" do = link_to @aspect, method: "delete", data: { confirm: t("aspects.edit.confirm_remove_aspect") }, class: "delete contacts_button", id: "delete_aspect" do
%i.entypo-trash.contacts-header-icon{title: t("delete")} %i.entypo-trash.contacts-header-icon{title: t("delete")}
.pull-right .pull-right.contact-list-search
= search_field_tag :contact_search, "", id: "contact_list_search", class: "search-query form-control", placeholder: t("contacts.index.user_search") = search_field_tag :contact_search, "", id: "contact_list_search", class: "search-query form-control", placeholder: t("contacts.index.user_search")
%h3 %h3
%span#aspect_name %span#aspect_name
......
%h3 .sidebar-header.clearfix
= t("contacts.index.title") %h3
= t("contacts.index.title")
= render "contacts/aspect_listings" = render "contacts/aspect_listings"
%hr %hr
- if AppConfig.settings.community_spotlight.enable? - if AppConfig.settings.community_spotlight.enable?
......
...@@ -4,10 +4,11 @@ ...@@ -4,10 +4,11 @@
.container-fluid#contacts_container .container-fluid#contacts_container
.row .row
.col-md-3 .col-md-3
= render 'contacts/sidebar' .sidebar
= render "contacts/sidebar"
.col-md-9 .col-md-9
#people_stream.stream.contacts .stream.contacts.framed-content#people_stream
= render 'contacts/header' = render 'contacts/header'
- if @contacts_size > 0 - if @contacts_size > 0
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
-# licensed under the Affero General Public License version 3 or later. See -# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file. -# the COPYRIGHT file.
.conversation-participants .conversation-participants.framed-content
.control-icons.pull-right .control-icons.pull-right
- if conversation.participants.count > 1 - if conversation.participants.count > 1
= link_to content_tag(:i, nil, class: "entypo-cross"), = link_to content_tag(:i, nil, class: "entypo-cross"),
......
...@@ -7,12 +7,12 @@ ...@@ -7,12 +7,12 @@
.container-fluid#conversations_container .container-fluid#conversations_container
.row .row
.col-md-4 .col-md-4
.left-pane#left_pane .sidebar#left_pane
.left-pane-header#left_pane_header .sidebar-header.clearfix#left_pane_header
.pull-right
= link_to t(".new_conversation"), conversations_path, class: "btn btn-default"
%h3 %h3
.pull-right{ class: ("hidden" unless @visibilities)} = t(".inbox")
= link_to t('.new_conversation'), conversations_path, class: 'btn btn-default'
= t('.inbox')
.conversation-inbox#conversation_inbox .conversation-inbox#conversation_inbox
.stream.conversations .stream.conversations
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
- else - else
.stream_container.hidden .stream_container.hidden
#conversation_show #conversation_show
#conversation_new .framed-content#conversation_new
.new-conversation .new-conversation
%h3.text-center %h3.text-center
= t("conversations.index.new_conversation") = t("conversations.index.new_conversation")
......
if($('.stream_container').hasClass('hidden')){ if($('.stream_container').hasClass('hidden')){
$('#conversation_new').hide(); $('#conversation_new').hide();
$('.stream_container').removeClass('hidden'); $('.stream_container').removeClass('hidden');
$('#left_pane_header .pull-right').removeClass('hidden');
} }
$('#conversation_show').html("<%= escape_javascript(render('conversations/show', :conversation => @conversation)) %>"); $('#conversation_show').html("<%= escape_javascript(render('conversations/show', :conversation => @conversation)) %>");
......
.container-fluid#notifications_container .container-fluid#notifications_container
.row .row
.col-md-3 .col-md-3
%h3 .sidebar
= t('.notifications') .sidebar-header.clearfix
.list-group %h3
%a.list-group-item{class: ('active' unless params[:type] && @grouped_unread_notification_counts.has_key?(params[:type])), href: '/notifications' + (params[:show] == 'unread' ? '?show=unread' : '') } = t(".notifications")
%span.pull-right.badge{class: ("hidden" unless @unread_notification_count > 0)} .list-group
= @unread_notification_count %a.list-group-item{href: "/notifications" + (params[:show] == "unread" ? "?show=unread" : ""),
= t('.all_notifications') class: ("active" unless params[:type] && @grouped_unread_notification_counts.has_key?(params[:type]))}
- @grouped_unread_notification_counts.each do |key, count| %span.pull-right.badge{class: ("hidden" unless @unread_notification_count > 0)}
%a.list-group-item{class: ('active' if params[:type] == key), data: { type: key }, href: '/notifications?type=' + key + (params[:show] == 'unread' ? '&show=unread' : '') } = @unread_notification_count
%span.pull-right.badge{class: ("hidden" unless count > 0)} = t(".all_notifications")
= count - @grouped_unread_notification_counts.each do |key, count|
- case key %a.list-group-item{class: ("active" if params[:type] == key),
- when 'also_commented', 'comment_on_post' data: {type: key},
%i.entypo-comment href: "/notifications?type=" + key + (params[:show] == "unread" ? "&show=unread" : "")}
- when 'liked' %span.pull-right.badge{class: ("hidden" unless count > 0)}
%i.entypo-heart = count
- when 'mentioned' - case key
%span.mentionIcon - when "also_commented", "comment_on_post"
@ %i.entypo-comment
- when 'reshared' - when "liked"
%i.entypo-reshare %i.entypo-heart
- when 'started_sharing' - when "mentioned"
%i.entypo-add-user %span.mentionIcon
= t('.'+key) @
- when "reshared"
%i.entypo-reshare
- when "started_sharing"
%i.entypo-add-user
= t("." + key)
.col-md-9.stream.notifications .col-md-9.stream.notifications
.row.header .framed-content
.col-md-12 .row
.btn-toolbar.pull-right .col-md-12
.btn-group .header.clearfix
%a.btn.btn-default{class: ('active' unless params[:show] == 'unread'), href: '/notifications' + (params[:type] ? '?type=' + params[:type] : '') } .btn-toolbar.pull-right
= t('.show_all') .btn-group
%a.btn.btn-default{class: ('active' if params[:show] == 'unread'), href: '/notifications?show=unread' + (params[:type] ? '&type=' + params[:type] : '') } %a.btn.btn-default{class: ("active" unless params[:show] == "unread"),
= t('.show_unread') href: "/notifications" + (params[:type] ? "?type=" + params[:type] : "")}
%a.btn.btn-default.btn-group{href: read_all_notifications_path(type: params[:type] ),class: ('disabled' unless @unread_notification_count > 0)} = t(".show_all")
-if params[:type] %a.btn.btn-default{class: ("active" if params[:show] == "unread"),
= t('.mark_all_shown_as_read') href: "/notifications?show=unread" + (params[:type] ? "&type=" + params[:type] : "")}
-else = t(".show_unread")
= t('.mark_all_as_read') %a.btn.btn-default.btn-group{href: read_all_notifications_path(type: params[:type]),
- if @group_days.length > 0 class: ("disabled" unless @unread_notification_count > 0)}
- year = nil - if params[:type]
- @group_days.each do |date, notes| = t(".mark_all_shown_as_read")
- if display_year?(year, date) - else
- year = the_year(date) = t(".mark_all_as_read")
.row.year_container - if @group_days.length > 0
.col-md-4.col-md-offset-4.year= year - year = nil
- @group_days.each do |date, notes|
- if display_year?(year, date)
- year = the_year(date)
.row.year_container
.col-md-4.col-md-offset-4.year= year
.day_group.row .day_group.row
.date.col-md-2 .date.col-md-2
.day= the_day(date) .day= the_day(date)
.month= the_month(date) .month= the_month(date)
.notifications_for_day.col-md-10 .notifications_for_day.col-md-10
- notes.each do |note| - notes.each do |note|
= render partial: 'notifications/notification', locals: { note: note } = render partial: "notifications/notification", locals: {note: note}
= will_paginate @notifications, renderer: WillPaginate::ActionView::BootstrapLinkRenderer .center-block.text-center
= will_paginate @notifications, renderer: WillPaginate::ActionView::BootstrapLinkRenderer
- else - else
.no_notifications.well .no_notifications.well
%h4 %h4
= t('.no_notifications') = t(".no_notifications")
:javascript :javascript
$(document).ready(function(){ $(document).ready(function(){
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
.container-fluid#profile_container .container-fluid#profile_container
.row .row
.col-md-3 .col-md-3
.profile-sidebar#profile .sidebar.profile-sidebar#profile
-# here be JS -# here be JS
.col-md-9 .col-md-9
......
...@@ -65,5 +65,5 @@ ...@@ -65,5 +65,5 @@
.small-horizontal-spacer .small-horizontal-spacer
.submit_block .submit_block.form-group
= yield(:submit_block) = yield(:submit_block)
...@@ -5,12 +5,14 @@ ...@@ -5,12 +5,14 @@
.container-fluid .container-fluid
.row .row
.col-md-3 .col-md-3
= render "shared/settings_nav" .sidebar
= render "shared/settings_nav"
.col-md-9 .col-md-9
- content_for :submit_block do .framed-content
= link_to t("cancel"), local_or_remote_person_path(current_user.person), class: "btn btn-default" - content_for :submit_block do
= submit_tag t(".update_profile"), class: "btn btn-primary pull-right", id: "update_profile" = link_to t("cancel"), local_or_remote_person_path(current_user.person), class: "btn btn-default"
= submit_tag t(".update_profile"), class: "btn btn-primary pull-right", id: "update_profile"
= form_tag profile_path, method: :put, multipart: true, id: "update_profile_form" do = form_tag profile_path, method: :put, multipart: true, id: "update_profile_form" do
= render "edit_public", profile: @profile, aspect: @aspect, person: @person, mobile: false = render "edit_public", profile: @profile, aspect: @aspect, person: @person, mobile: false
= render "edit_private", person: @person, profile: @profile, aspect: @aspect, step: @step = render "edit_private", person: @person, profile: @profile, aspect: @aspect, step: @step
...@@ -8,14 +8,16 @@ ...@@ -8,14 +8,16 @@
.container-fluid .container-fluid
.row .row
.col-md-3 .col-md-3
= render "shared/settings_nav" .sidebar
= render "shared/settings_nav"
.col-md-9 .col-md-9
%h3= t(".title") .framed-content
.row %h3= t(".title")
.col-md-12 .row
= render "add_remove_services" .col-md-12
= render "add_remove_services"
.row .row
.col-md-12 .col-md-12
%p %p
= t(".services_explanation") = t(".services_explanation")
#section_header #section_header
%h2 %h3.sidebar-header
= t("settings") = t("settings")
.list-group#settings_nav .list-group#settings_nav
= link_to t("profile"), edit_profile_path, = link_to t("profile"), edit_profile_path,
......
.container-fluid .container-fluid
.row .row
.col-md-3 .col-md-3
= render "shared/settings_nav" .sidebar
= render "shared/settings_nav"
.col-md-9 .col-md-9
= render "edit" .framed-content
= render "edit"
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
.container-fluid .container-fluid
.row .row
.col-md-3 .col-md-3
= render "shared/settings_nav" .sidebar
= render "shared/settings_nav"
.col-md-9 .col-md-9
= render "privacy_settings" .framed-content
= render "privacy_settings"
...@@ -98,7 +98,7 @@ When /^I drag "([^"]*)" (up|down)$/ do |aspect_name, direction| ...@@ -98,7 +98,7 @@ When /^I drag "([^"]*)" (up|down)$/ do |aspect_name, direction|
native_aspect = aspect.base.native native_aspect = aspect.base.native
native_target = target.base.native native_target = target.base.native
mouse.down native_aspect mouse.down native_aspect
mouse.move_to native_target, native_target.size.width / 2, 0 mouse.move_to native_target
sleep 1 sleep 1
mouse.up mouse.up
expect(page).to have_no_css "#aspect_nav .ui-sortable.syncing" expect(page).to have_no_css "#aspect_nav .ui-sortable.syncing"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.