livechat 0.9.0 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93a0ce2c43a9f0ba3f3ce569aac6758962a949919d924ada0283ebd043c34216
-  data.tar.gz: 961e891c713d52e780a52149b87230c8661da575a53b7a9356865db39241803b
+  metadata.gz: 77c8f578ea3bb8e56ae6e93c3ffc3194bbec65a1952d7e7f3e2152986bc12388
+  data.tar.gz: bb5e62c493d8aef5e20a82884ed43213f2671543bee6e06d2aa1a352a55f9d25
 SHA512:
-  metadata.gz: 20925768376d8fd25aef9323616e9e506c3e39081350ff25166a10eeaeceafbdd2a728a6015fe15407de8d7ed981381ccb1747bc95d10690bd4f9d8e7100b3e6
-  data.tar.gz: 78e714d488cc3ef8a29aafe63dc80f08069825c1fc78ff5294ce9c2ccce00cd84ffc2d2a44ad0c5b126d42ea7871ff99147621f3e5384fb844761bed607a9856
+  metadata.gz: f77110e02430ef730ac85ad64be4a05f4fd588035c384284e14374ebebbb40b3c5537df63e3d6128d20db2f1891836f54c90f223a087f123fa946893b8ea63d1
+  data.tar.gz: da4da0a2cfa71838e93434cdf3d0d88fd5a6fc15a24754369977d7e3064d5052b28cf6d29055db044b3132acbaf50d832f97a4eb6ef2a565d58edd37e27bbd84

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.9.1
+
+- **The conversation heading reads as one block.** The visitor's email and locale
+  moved out of their own row and sit directly under the name, inside a
+  `.panel-titles` wrapper, and the open/resolved switch is pinned to the right
+  edge of the heading row with `margin-left: auto` rather than relying on the
+  row's `space-between` — a long name no longer drags the switch inward. If you
+  targeted `.context-line` as a child of `.detail-panel`, it is now a child of
+  `.panel-head`.
+
 ## 0.9.0
 
 - **One design system across the family.** The stylesheet now opens with a

data/app/views/livechat/conversations/_thread_panel.html.erb

@@ -1,6 +1,17 @@
 <div class="detail-panel">
   <div class="panel-head">
-    <h1><%= conversation.display_name %> <span class="case-id">#<%= conversation.id %></span></h1>
+    <%# The name with the visitor's context directly under it, so the status
+        toggle on the right of the row clears both. %>
+    <div class="panel-titles">
+      <h1><%= conversation.display_name %> <span class="case-id">#<%= conversation.id %></span></h1>
+      <%# One quiet line of live context: who the visitor is and the language to answer in. %>
+      <p class="muted context-line">
+        <% context = [] %>
+        <% context << conversation.visitor_email if conversation.visitor_email.present? %>
+        <% context << conversation.locale if conversation.locale.present? %>
+        <%= safe_join(context, ' · ') %>
+      </p>
+    </div>
     <% if conversation.open? %>
       <%= button_to resolve_conversation_path(conversation), method: :post,
                     form_class: 'status-toggle-form',
@@ -20,14 +31,6 @@
     <% end %>
   </div>
 
-  <%# One quiet line of live context: who the visitor is and the language to answer in. %>
-  <p class="muted context-line">
-    <% context = [] %>
-    <% context << conversation.visitor_email if conversation.visitor_email.present? %>
-    <% context << conversation.locale if conversation.locale.present? %>
-    <%= safe_join(context, ' · ') %>
-  </p>
-
   <div class="card">
     <% last = messages.last %>
     <% cable = livechat_cable_data("livechat:conversation:#{conversation.id}") %>

data/lib/livechat/dashboard.css

@@ -290,8 +290,15 @@
   & .record-row.unread .record-copy { font-weight: 700; }
   & .record-side .avatars { min-height: 26px; }
 
+  /* The panel heading: the name with the visitor's context directly under it,
+     and the switch pushed to the far right of the row whatever the name's
+     length. `margin-left: auto` rather than the row's `space-between`, so a
+     third element in the row could never pull the switch back in. */
+  & .panel-titles { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
+  & .context-line { margin: 0; overflow-wrap: anywhere; }
+
   /* One switch reading open|resolved, sliding to the side it is on. */
-  & .status-toggle-form { flex: 0 0 auto; }
+  & .status-toggle-form { flex: 0 0 auto; margin-left: auto; }
   & .status-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 176px; min-height: 36px; padding: 3px; border-radius: 999px; border: 1px solid var(--lvc-border); background: var(--lvc-bg); color: var(--lvc-muted); overflow: hidden; }
   & .status-toggle::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--lvc-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); transition: left .16s ease; }
   & .status-toggle.is-open::before { left: 3px; }
@@ -312,7 +319,6 @@
   & .avatar.color-5 { background: #0891b2; }
 
   /* The thread: the visitor on the left, agents on the right. */
-  & .context-line { margin: -6px 0 16px; overflow-wrap: anywhere; }
   & .thread { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
   & .thread .who { font-size: 12px; color: var(--lvc-muted); margin: 10px 4px 2px; }
   & .thread .who.visitor { text-align: left; }
@@ -362,8 +368,7 @@
 
   /* Inside the thread pane only the messages scroll, so a reply never jumps the
      page and the composer stays put. */
-  & .detail-panel .panel-head,
-  & .detail-panel .context-line { flex: 0 0 auto; }
+  & .detail-panel .panel-head { flex: 0 0 auto; }
   & .detail-panel .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 8px; }
   & .detail-panel .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
   & .detail-panel .reply { flex: 0 0 auto; }
@@ -376,7 +381,6 @@
 .lvc-convo .container { display: flex; flex-direction: column; padding-bottom: 16px; }
 .lvc-convo .breadcrumb,
 .lvc-convo .panel-head,
-.lvc-convo .context-line,
 .lvc-convo .flash { flex: 0 0 auto; }
 .lvc-convo .detail-panel { flex: 1 1 auto; min-height: 0; }
 

data/lib/livechat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Livechat
-  VERSION = '0.9.0'
+  VERSION = '0.9.1'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livechat
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.9.1
 platform: ruby
 authors:
 - Yaroslav Shmarov