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

Unify contacts, notifications and settings UI

Browse source
This commit is contained in:
Steffen van Bergerem 2016-02-13 14:18:22 +01:00
parent 2a47b889d1
commit 1ba4357aaa
28 changed files with 210 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/stylesheets/_application.scss
View file

@ -26,6 +26,9 @@
/* font overrides */
@import 'typography';
// layout
@import 'sidebar';
/* login */
@import 'login';
@import 'registration';

18
app/assets/stylesheets/base.scss
View file

@ -10,6 +10,24 @@ body {
> .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
h1,
h2,

4
app/assets/stylesheets/bootstrap-variables.scss vendored
View file

@ -668,9 +668,9 @@ $navbar-collapse-max-height: 480px;
//
//##
//** Background color on `.list-group-item`
$list-group-bg: $sidebars-background;
$list-group-bg: $white;
//** `.list-group-item` border color
$list-group-border: $border-grey;
$list-group-border: transparent;
//** List group border radius
$list-group-border-radius: 0;

28
app/assets/stylesheets/contacts.scss
View file

@ -1,21 +1,29 @@
.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 {
#people_stream.contacts {
.header {
border-bottom: 1px solid $border-grey;
margin-top: 10px;
min-height: 53px;
#change_aspect_name { cursor: pointer; }
#aspect_name_form {
display: none;
form { margin: 0px; }
input {
margin-bottom: 0px;
margin-top: 10px;
}
.btn { margin-top: 10px; }
}
#contact_list_search {
margin: 6px 30px 0 0;
margin: 11px 30px 0 0;
width: 150px;
&:focus { width: 250px; }
}

20
app/assets/stylesheets/conversations.scss
View file

@ -1,22 +1,8 @@
.page-conversations {
background-color: $sidebars-background;
.framed-content { padding: 0 10px 10px; }
.sidebar-header .pull-right { margin-top: 12px; }
.left-pane,
.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 {
.sidebar {
margin-bottom: 50px;
.pagination { margin: 5px; }
}

13
app/assets/stylesheets/notifications.scss
View file

@ -2,27 +2,22 @@
.stream {
.header {
border-bottom: 1px solid $border-grey;
.btn-toolbar { margin: 11px 0; }
margin-bottom: 10px;
}
.year_container { margin-top: 40px; }
.btn-toolbar { margin: 11px 0; }
.year {
background-color: $white;
color: $text-grey;
font-size: 40px;
line-height: 40px;
margin-bottom: -20px;
margin-bottom: 20px;
margin-top: 40px;
text-align: center;
}
.year_container + .day_group {
border-top: 1px solid $border-grey;
padding-top: 60px;
}
.day_group + .day_group {
border-top: 1px dashed $border-grey;
margin-top: 10px;
padding-top: 10px;
}

5
app/assets/stylesheets/people.scss
View file

@ -31,11 +31,12 @@
#blocked_people {
.blocked_person {
border-bottom: 1px solid $border-grey;
padding: 10px;
margin: 0px;
font-size: 13px;
line-height: 16px;
margin: 0;
min-height: 50px;
padding: 10px 0;
&:last-of-type { border-bottom: 0; }
.avatar {
width: 50px;
height: 50px;

7
app/assets/stylesheets/profile.scss
View file

@ -1,7 +1,3 @@
body.page-people.action-show, body.page-people.action-contacts {
background-color: $sidebars-background;
}
#profile_container {
.profile_header {
margin-bottom: 15px;
@ -109,11 +105,8 @@ body.page-people.action-show, body.page-people.action-contacts {
}
#profile {
background-color: $white;
padding: 20px;
margin-top: -10px;
margin-bottom: 35px;
box-shadow: $card-shadow;
#profile_photo {
margin-top: 10px;

15
app/assets/stylesheets/settings.scss
View file

@ -1,4 +1,19 @@
// 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 {
margin-bottom: 0;
}

21
app/assets/stylesheets/sidebar.scss Normal file
View file

@ -0,0 +1,21 @@
.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; }
}

4
app/assets/stylesheets/stream.scss
View file

@ -1,7 +1,3 @@
body.page-streams, body.page-photos {
background-color: $sidebars-background;
}
.stream_container {
#publisher {
margin-bottom: 15px;

2
app/assets/templates/contact_tpl.jst.hbs
View file

@ -1,4 +1,4 @@
<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">
{{{aspectMembershipIndicator this in_aspect}}}
</div>

12
app/views/api/openid_connect/user_applications/index.html.haml
View file

@ -4,9 +4,11 @@
.container-fluid.applications-page
.row
.col-md-3
= render "shared/settings_nav"
.sidebar
= render "shared/settings_nav"
.col-md-9
%h3= t(".title")
.row
.col-md-12
= render "add_remove_applications"
.framed-content
%h3= t(".title")
.row
.col-md-12
= render "add_remove_applications"

6
app/views/contacts/_header.html.haml
View file

@ -1,6 +1,6 @@
.header
.header.clearfix
- if @aspect
#aspect_controls.pull-right
.aspect-controls.pull-right#aspect_controls
- if @aspect.contacts.size > 0 && @aspect.contacts.size < 20
= start_a_conversation_link(@aspect, @aspect.contacts.size)
@ -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
%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")
%h3
%span#aspect_name

5
app/views/contacts/_sidebar.html.haml
View file

@ -1,5 +1,6 @@
%h3
= t("contacts.index.title")
.sidebar-header.clearfix
%h3
= t("contacts.index.title")
= render "contacts/aspect_listings"
%hr
- if AppConfig.settings.community_spotlight.enable?

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

@ -4,10 +4,11 @@
.container-fluid#contacts_container
.row
.col-md-3
= render 'contacts/sidebar'
.sidebar
= render "contacts/sidebar"
.col-md-9
#people_stream.stream.contacts
.stream.contacts.framed-content#people_stream
= render 'contacts/header'
- if @contacts_size > 0

2
app/views/conversations/_show.haml
View file

@ -2,7 +2,7 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
.conversation-participants
.conversation-participants.framed-content
.control-icons.pull-right
- if conversation.participants.count > 1
= link_to content_tag(:i, nil, class: "entypo-cross"),

12
app/views/conversations/index.haml
View file

@ -7,12 +7,12 @@
.container-fluid#conversations_container
.row
.col-md-4
.left-pane#left_pane
.left-pane-header#left_pane_header
.sidebar#left_pane
.sidebar-header.clearfix#left_pane_header
.pull-right
= link_to t(".new_conversation"), conversations_path, class: "btn btn-default"
%h3
.pull-right{ class: ("hidden" unless @visibilities)}
= link_to t('.new_conversation'), conversations_path, class: 'btn btn-default'
= t('.inbox')
= t(".inbox")
.conversation-inbox#conversation_inbox
.stream.conversations
@ -34,7 +34,7 @@
- else
.stream_container.hidden
#conversation_show
#conversation_new
.framed-content#conversation_new
.new-conversation
%h3.text-center
= t("conversations.index.new_conversation")

1
app/views/conversations/show.js.erb
View file

@ -1,7 +1,6 @@
if($('.stream_container').hasClass('hidden')){
$('#conversation_new').hide();
$('.stream_container').removeClass('hidden');
$('#left_pane_header .pull-right').removeClass('hidden');
}
$('#conversation_show').html("<%= escape_javascript(render('conversations/show', :conversation => @conversation)) %>");

123
app/views/notifications/index.html.haml
View file

@ -1,68 +1,79 @@
.container-fluid#notifications_container
.row
.col-md-3
%h3
= t('.notifications')
.list-group
%a.list-group-item{class: ('active' unless params[:type] && @grouped_unread_notification_counts.has_key?(params[:type])), href: '/notifications' + (params[:show] == 'unread' ? '?show=unread' : '') }
%span.pull-right.badge{class: ("hidden" unless @unread_notification_count > 0)}
= @unread_notification_count
= t('.all_notifications')
- @grouped_unread_notification_counts.each do |key, count|
%a.list-group-item{class: ('active' if params[:type] == key), data: { type: key }, href: '/notifications?type=' + key + (params[:show] == 'unread' ? '&show=unread' : '') }
%span.pull-right.badge{class: ("hidden" unless count > 0)}
= count
- case key
- when 'also_commented', 'comment_on_post'
%i.entypo-comment
- when 'liked'
%i.entypo-heart
- when 'mentioned'
%span.mentionIcon
@
- when 'reshared'
%i.entypo-reshare
- when 'started_sharing'
%i.entypo-add-user
= t('.'+key)
.sidebar
.sidebar-header.clearfix
%h3
= t(".notifications")
.list-group
%a.list-group-item{href: "/notifications" + (params[:show] == "unread" ? "?show=unread" : ""),
class: ("active" unless params[:type] && @grouped_unread_notification_counts.has_key?(params[:type]))}
%span.pull-right.badge{class: ("hidden" unless @unread_notification_count > 0)}
= @unread_notification_count
= t(".all_notifications")
- @grouped_unread_notification_counts.each do |key, count|
%a.list-group-item{class: ("active" if params[:type] == key),
data: {type: key},
href: "/notifications?type=" + key + (params[:show] == "unread" ? "&show=unread" : "")}
%span.pull-right.badge{class: ("hidden" unless count > 0)}
= count
- case key
- when "also_commented", "comment_on_post"
%i.entypo-comment
- when "liked"
%i.entypo-heart
- when "mentioned"
%span.mentionIcon
@
- when "reshared"
%i.entypo-reshare
- when "started_sharing"
%i.entypo-add-user
= t("." + key)
.col-md-9.stream.notifications
.row.header
.col-md-12
.btn-toolbar.pull-right
.btn-group
%a.btn.btn-default{class: ('active' unless params[:show] == 'unread'), href: '/notifications' + (params[:type] ? '?type=' + params[:type] : '') }
= t('.show_all')
%a.btn.btn-default{class: ('active' if params[:show] == 'unread'), href: '/notifications?show=unread' + (params[:type] ? '&type=' + params[:type] : '') }
= t('.show_unread')
%a.btn.btn-default.btn-group{href: read_all_notifications_path(type: params[:type] ),class: ('disabled' unless @unread_notification_count > 0)}
-if params[:type]
= t('.mark_all_shown_as_read')
-else
= t('.mark_all_as_read')
- if @group_days.length > 0
- 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
.framed-content
.row
.col-md-12
.header.clearfix
.btn-toolbar.pull-right
.btn-group
%a.btn.btn-default{class: ("active" unless params[:show] == "unread"),
href: "/notifications" + (params[:type] ? "?type=" + params[:type] : "")}
= t(".show_all")
%a.btn.btn-default{class: ("active" if params[:show] == "unread"),
href: "/notifications?show=unread" + (params[:type] ? "&type=" + params[:type] : "")}
= t(".show_unread")
%a.btn.btn-default.btn-group{href: read_all_notifications_path(type: params[:type]),
class: ("disabled" unless @unread_notification_count > 0)}
- if params[:type]
= t(".mark_all_shown_as_read")
- else
= t(".mark_all_as_read")
- if @group_days.length > 0
- 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
.date.col-md-2
.day= the_day(date)
.month= the_month(date)
.day_group.row
.date.col-md-2
.day= the_day(date)
.month= the_month(date)
.notifications_for_day.col-md-10
- notes.each do |note|
= render partial: 'notifications/notification', locals: { note: note }
.notifications_for_day.col-md-10
- notes.each do |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
.no_notifications.well
%h4
= t('.no_notifications')
- else
.no_notifications.well
%h4
= t(".no_notifications")
:javascript
$(document).ready(function(){

2
app/views/people/show.html.haml
View file

@ -14,7 +14,7 @@
.container-fluid#profile_container
.row
.col-md-3
.profile-sidebar#profile
.sidebar.profile-sidebar#profile
-# here be JS
.col-md-9

2
app/views/profiles/_edit_private.haml
View file

@ -65,5 +65,5 @@
.small-horizontal-spacer
.submit_block
.submit_block.form-group
= yield(:submit_block)

16
app/views/profiles/edit.haml
View file

@ -5,12 +5,14 @@
.container-fluid
.row
.col-md-3
= render "shared/settings_nav"
.sidebar
= render "shared/settings_nav"
.col-md-9
- content_for :submit_block do
= 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"
.framed-content
- content_for :submit_block do
= 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
= render "edit_public", profile: @profile, aspect: @aspect, person: @person, mobile: false
= render "edit_private", person: @person, profile: @profile, aspect: @aspect, step: @step
= 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_private", person: @person, profile: @profile, aspect: @aspect, step: @step

20
app/views/services/index.html.haml
View file

@ -8,14 +8,16 @@
.container-fluid
.row
.col-md-3
= render "shared/settings_nav"
.sidebar
= render "shared/settings_nav"
.col-md-9
%h3= t(".title")
.row
.col-md-12
= render "add_remove_services"
.framed-content
%h3= t(".title")
.row
.col-md-12
= render "add_remove_services"
.row
.col-md-12
%p
= t(".services_explanation")
.row
.col-md-12
%p
= t(".services_explanation")

2
app/views/shared/_settings_nav.haml
View file

@ -1,5 +1,5 @@
#section_header
%h2
%h3.sidebar-header
= t("settings")
.list-group#settings_nav
= link_to t("profile"), edit_profile_path,

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

@ -1,6 +1,8 @@
.container-fluid
.row
.col-md-3
= render "shared/settings_nav"
.sidebar
= render "shared/settings_nav"
.col-md-9
= render "edit"
.framed-content
= render "edit"

6
app/views/users/privacy_settings.html.haml
View file

@ -8,6 +8,8 @@
.container-fluid
.row
.col-md-3
= render "shared/settings_nav"
.sidebar
= render "shared/settings_nav"
.col-md-9
= render "privacy_settings"
.framed-content
= render "privacy_settings"

2
features/step_definitions/aspects_steps.rb
View file

@ -98,7 +98,7 @@ When /^I drag "([^"]*)" (up|down)$/ do |aspect_name, direction|
native_aspect = aspect.base.native
native_target = target.base.native
mouse.down native_aspect
mouse.move_to native_target, native_target.size.width / 2, 0
mouse.move_to native_target
sleep 1
mouse.up
expect(page).to have_no_css "#aspect_nav .ui-sortable.syncing"