Skip to content

Commit b1824a1

Browse files
rsmithlalrsmithlal
committed
WIP: Improve look and feel of communicator interface
1 parent c494893 commit b1824a1

File tree

12 files changed

+94
-36
lines changed

12 files changed

+94
-36
lines changed

‎app/assets/stylesheets/better_together/conversations.scss‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,34 +43,35 @@
4343
display: flex;
4444
align-items: center;
4545
}
46-
46+
4747
.message-container {
4848
max-width: 75%;
4949
}
50-
50+
5151
.message-header {
5252
margin-bottom: 0.25rem;
5353
}
54-
54+
5555
.message-bubble {
5656
background-color: #f1f1f1;
5757
border-radius: 15px;
5858
}
59-
60-
.justify-content-end .message-bubble {
59+
60+
.me .message-bubble {
6161
background-color: #007bff;
6262
color: white;
63+
min-width: 40vw;
6364
}
64-
65+
6566
.card-body {
6667
background-color: #e9ecef;
6768
}
68-
69+
6970
.input-group textarea.form-control {
7071
resize: none;
7172
border-radius: 15px 0 0 15px;
7273
}
73-
74+
7475
.input-group button {
7576
border-radius: 0 15px 15px 0;
7677
}

‎app/assets/stylesheets/better_together/profiles.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@
3939
margin-right: 1%;
4040
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
4141
}
42+
43+
&.mention {
44+
width: 2rem;
45+
height: 2rem;
46+
}
4247
}
4348

4449
.profile-header img.cover-image {

‎app/views/better_together/conversations/_communicator.html.erb‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div id="better-together-comunicator" class="">
2+
<div class="row gx-0">
3+
<!-- Sidebar for Conversations List -->
4+
<%= content_tag :div, id: "conversations_sidebar", class: 'col-md-4' do %>
5+
<%= render 'better_together/conversations/sidebar' %>
6+
<% end %>
7+
8+
<!-- Main Content Pane -->
9+
<%= content_tag :div, id: "conversation_content", class: 'col-md-8' do %>
10+
<%= yield %> <!-- This will render the specific content from the index or show views -->
11+
<% end %>
12+
</div>
13+
</div>

‎app/views/better_together/conversations/_conversation.html.erb‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
<!-- app/views/conversations/_conversation.html.erb -->
22

3-
<li class="list-group-item <%= 'active' if conversation == @conversation %>">
4-
<%= link_to conversation_path(conversation), class: "stretched-link text-decoration-none text-dark" do %>
5-
<strong><%= conversation.title %></strong>
6-
<div class="mb-1 conversation-participants">
7-
<% conversation.participants.each do |participant| %>
8-
<% unless participant == current_person %>
9-
<span class="badge bg-secondary"><%= participant %></span>
10-
<% end %>
11-
<% end %>
3+
<%# locals: (conversation:, last_message: conversation.messages.last) %>
4+
5+
<li id="<%= dom_id(conversation) %>" class="<%= dom_class(conversation) %> list-group-item rounded-0 <%= 'active' if conversation == @conversation %>">
6+
<%= link_to conversation_path(conversation), class: "stretched-link text-decoration-none d-flex justify-content-between" do %>
7+
<div class="mb-1 conversation-participants justify-content-between">
8+
<%= render partial: 'better_together/people/mention', collection: conversation.participants.where.not(id: current_person.id), as: :person %>
129
</div>
13-
<small class="text-muted d-block">
14-
<%= t('.last_message') %>: <%= l(conversation.messages.last.created_at, format: :short) if conversation.messages.any? %>
10+
11+
<strong><%= conversation.title if conversation.title.present? %></strong>
12+
<small class="last-message">
13+
<%= l(last_message.created_at, format: :short) if last_message %>
1514
</small>
1615
<% end %>
1716
</li>

‎app/views/better_together/conversations/_conversation_content.html.erb‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<!-- app/views/conversations/_conversation_content.html.erb -->
2-
<div id="<%= dom_id(conversation) %>" class="conversation-messages card shadow-sm">
3-
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
4-
<h3 class="mb-0">
2+
<div id="<%= dom_id(conversation) %>" class="conversation-messages card shadow-sm d-flex flex-column justify-content-between h-100">
3+
<div class="card-header bg-secondary text-white text-center rounded-0">
4+
<h4 class="mb-0">
55
<%= conversation.participants.reject { |participant| participant == current_person }.map(&:to_s).join(', ') %>
66
<% if conversation.title.present? %>
77
(<%= conversation.title %>)
88
<% end %>
9-
</h3>
9+
</h4>
1010
</div>
1111

12-
<div id="conversation_messages" class="card-body p-4" style="max-height: 60vh; overflow-y: auto;" data-controller="better_together--conversation-messages">
12+
<div id="conversation_messages" class="card-body p-4" style="overflow-y: auto; height: 50vh;" data-controller="better_together--conversation-messages">
1313
<%= render(partial: 'better_together/messages/message', collection: messages, as: :message) || render(partial: 'better_together/conversations/empty') %>
1414
</div>
1515

‎app/views/better_together/conversations/_conversation_with_last_message.html.erb‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!-- app/views/conversations/_conversation.html.erb -->
2+
3+
<%# locals: (conversation:, last_message: conversation.messages.last) %>
4+
5+
<li id="<%= dom_id(conversation) %>" class="<%= dom_class(conversation) %> list-group-item <%= 'active' if conversation == @conversation %>">
6+
<%= link_to conversation_path(conversation), class: "stretched-link text-decoration-none d-flex justify-content-between" do %>
7+
<div class="mb-1 conversation-participants justify-content-between">
8+
<%= render partial: 'better_together/people/mention', collection: conversation.participants.where.not(id: current_person.id), as: :person %>
9+
</div>
10+
11+
<strong><%= conversation.title %></strong>
12+
13+
<div class="last-message">
14+
<%= render(partial: 'better_together/messages/message_simple', locals: { message: last_message }) || render(partial: 'better_together/conversations/empty') %>
15+
</div>
16+
<% end %>
17+
</li>

‎app/views/better_together/conversations/_sidebar.html.erb‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<div class="card shadow-sm">
2-
<div class="card-header bg-secondary text-white d-flex flex-wrap justify-content-between align-items-center">
3-
<h5 class="mb-0"><%= t('.conversations') %></h5>
4-
<%= link_to new_conversation_path, class: "btn btn-sm btn-light text-dark mt-2 mt-md-0", data: { turbo_frame: "_top" } do %>
5-
<i class="bi bi-plus-lg"></i> <%= t('.new') %>
2+
<div class="card-header bg-secondary rounded-0 text-white d-flex flex-row justify-content-between align-items-center">
3+
<h5 class="mb-0">
4+
<%= link_to t('.conversations'), conversations_path, class: 'text-decoration-none text-light' %>
5+
</h5>
6+
<%= link_to new_conversation_path, class: "btn btn-xs btn-primary", data: { turbo_frame: "_top" } do %>
7+
<%= t('.new') %> <i class="fas fa-plus ms-1"></i>
68
<% end %>
79
</div>
8-
<ul id="conversations_list" class="list-group list-group-flush">
10+
<ul id="conversations_list" class="list-group list-group-flush flex-row flex-md-column">
911
<%= render @conversations %> <!-- This renders each conversation using the _conversation.html.erb partial -->
1012
</ul>
1113
</div>

‎app/views/better_together/conversations/index.html.erb‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<%= render 'layout_with_sidebar' do %>
1+
<%= render 'communicator' do %>
22
<%= content_tag :div, id: "conversations_index" do %>
3-
<div class="px-4">
3+
<div class="px-4 mt-3">
44
<h3><%= t('.active_conversations') %></h3>
55
<ul class="list-group">
6-
<%= render @conversations %>
6+
<%= render(partial: 'better_together/conversations/conversation_with_last_message', collection: @conversations, as: :conversation) || render(partial: 'better_together/conversations/empty') %>
77
</ul>
88
</div>
99
<% end %>

‎app/views/better_together/conversations/show.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- app/views/conversations/show.html.erb -->
2-
<%= render 'layout_with_sidebar' do %>
2+
<%= render 'communicator' do %>
33
<%= render partial: 'better_together/conversations/conversation_content', locals: { conversation: @conversation, messages: @messages, message: @message } %>
44
<% end %>
55

‎app/views/better_together/messages/_message.html.erb‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<!-- app/views/messages/_message.html.erb -->
2-
<div class="d-flex mb-3 <% if message.sender == current_person %>justify-content-end<% end %>">
2+
3+
<%# locals: (message:, me: message.sender == current_person) %>
4+
5+
<div class="d-flex mb-3 <% if me %>me justify-content-end<% end %>">
36
<div class="message-container">
4-
<div class="message-header d-flex align-items-center">
7+
<div class="message-header d-flex <% if me %>justify-content-end<% end %>">
58
<strong class="me-2"><%= message.sender.name %></strong>
69
<small class="text-muted"><%= l(message.created_at, format: :short) %></small>
710
</div>
811
<div class="message-bubble p-3 rounded">
9-
<p class="mb-0"><%= message.content %></p>
12+
<%= message.content %>
1013
</div>
1114
</div>
1215
</div>

0 commit comments

Comments
 (0)