Truncate recipients in listing, add to detail view

tweedegolf · Apr 3, 2023 · 39381b5 · 39381b5
1 parent 0699315
commit 39381b5
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 42 deletions.
diff --git a/frontend/src/list.rs b/frontend/src/list.rs
@@ -95,14 +95,19 @@ pub fn list(props: &MessageListProps) -> Html {
                   </span>
                 </span>
                   <span class="recipients">
-                  <span>{"Recipient(s): "} </span>
-                  {
-                      for message.envelope_recipients.clone().into_iter().map(|addr| html_nested! {
-                          <span class="email">
-                              {addr}
-                          </span>
-                      })
-                  }
+                    <span class="label">
+                      if message.envelope_recipients.len() > 1 {
+                        {"Recipients: "}
+                      } else {
+                        {"Recipient: "}
+                      }
+                    </span>
+                    {for message.envelope_recipients.clone().into_iter().take(2).map(|addr| html_nested! {
+                      <span class="email">{addr}</span>
+                    })}
+                    if message.envelope_recipients.len() > 2 {
+                      <span class="etc">{", \u{2026}"}</span>
+                    }
                   </span>
               </li>
             }

diff --git a/frontend/src/message_header.rs b/frontend/src/message_header.rs
@@ -1,5 +1,5 @@
 use crate::types::MailMessage;
-use yew::{function_component, html, Html, Properties};
+use yew::{function_component, html, html_nested, Html, Properties};
 
 #[derive(Properties, Eq, PartialEq)]
 pub struct MessageHeaderProps {
@@ -50,6 +50,22 @@ pub fn view(props: &MessageHeaderProps) -> Html {
               <th>{"Subject"}</th>
               <td>{&message.subject}</td>
             </tr>
+            <tr>
+            <th>
+              if message.envelope_recipients.len() > 1 {
+                {"Recipients: "}
+              } else {
+                {"Recipient: "}
+              }
+            </th>
+            <td>
+              <span class="recipients">
+                {for message.envelope_recipients.clone().into_iter().map(|addr| html_nested! {
+                  <span class="email">{addr}</span>
+                })}
+              </span>
+            </td>
+          </tr>
           </tbody>
         </table>
         <div class="attachments">

diff --git a/frontend/src/overview.rs b/frontend/src/overview.rs
@@ -13,7 +13,7 @@ use crate::websocket::WebsocketService;
 pub enum Msg {
     Select(String),
     SetTab(Tab),
-    Message(MailMessageMetadata),
+    Message(Box<MailMessageMetadata>),
     Messages(Vec<MailMessageMetadata>),
     Remove(String),
     RemoveAll,
@@ -50,7 +50,7 @@ impl Component for Overview {
         let link = ctx.link().clone();
         spawn_local(async move {
             while let Some(message) = wss.receiver.next().await {
-                link.send_message(Msg::Message(message));
+                link.send_message(Msg::Message(Box::new(message)));
             }
         });
 
@@ -65,7 +65,7 @@ impl Component for Overview {
     fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::Message(message) => {
-                self.messages.push(message);
+                self.messages.push(*message);
                 true
             }
             Msg::Messages(messages) => {

diff --git a/frontend/style.scss b/frontend/style.scss
@@ -8,17 +8,29 @@ body {
   font-size: 16px;
 }
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
 }
 
-body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
   margin: 0;
   padding: 0;
   font-weight: normal;
 }
 
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
 
@@ -27,7 +39,9 @@ img {
   height: auto;
 }
 
-input, button, select {
+input,
+button,
+select {
   font-family: Inter, sans-serif;
 }
 
@@ -37,7 +51,7 @@ input, button, select {
   font-display: swap;
   font-style: normal;
   font-named-instance: 'Regular';
-  src: url("fonts/Inter-roman.var.woff2") format("woff2");
+  src: url('fonts/Inter-roman.var.woff2') format('woff2');
 }
 
 @font-face {
@@ -46,7 +60,7 @@ input, button, select {
   font-display: swap;
   font-style: italic;
   font-named-instance: 'Italic';
-  src: url("fonts/Inter-italic.var.woff2") format("woff2");
+  src: url('fonts/Inter-italic.var.woff2') format('woff2');
 }
 
 $grey: #ccc;
@@ -55,7 +69,8 @@ $light: #f6f6f6;
 $red: #f74c00;
 $light-red: #fffafa;
 
-html, body {
+html,
+body {
   height: 100%;
   max-height: 100vh;
 }
@@ -160,7 +175,8 @@ header {
       border-top: 1px solid $border-grey;
     }
 
-    &:hover, &.selected {
+    &:hover,
+    &.selected {
       background-color: $light-red;
     }
 
@@ -186,7 +202,7 @@ header {
       .name + .email {
         margin-left: 0.5rem;
         color: rgba(black, 0.3);
-        
+
         &::before {
           content: '<';
         }
@@ -197,22 +213,14 @@ header {
       }
     }
 
-    .recipients > span.email + span.email:before {
-      content: ", <";
-      display: inline-block;
-    }
-
     .recipients {
-      .email {
-        color: rgba(black, 0.3);
-
-        &::before {
-          content: '<';
-        }
+      .label {
+        color: rgba(black, 0.6);
+      }
 
-        &::after {
-          content: '>';
-        }
+      .email,
+      .etc {
+        color: rgba(black, 0.3);
       }
     }
 
@@ -244,6 +252,26 @@ header {
   }
 }
 
+.recipients {
+  & > .email + .email:before {
+    content: ', <';
+    display: inline-block;
+    color: rgba(black, 0.3);
+  }
+
+  .email {
+    &::before {
+      content: '<';
+      color: rgba(black, 0.3);
+    }
+
+    &::after {
+      content: '>';
+      color: rgba(black, 0.3);
+    }
+  }
+}
+
 .view {
   background-color: $light;
   padding: 1rem;
@@ -271,7 +299,8 @@ header {
           border: none;
           background-color: darken($light, 5%);
 
-          &:hover, &.active {
+          &:hover,
+          &.active {
             background: white;
             transition: all 150ms ease-in;
           }
@@ -313,22 +342,23 @@ header {
           width: 10rem;
         }
 
-        td, th {
+        td,
+        th {
           padding: 0.5rem;
           border-bottom: 1px solid lighten($grey, 10%);
         }
 
         .name {
           font-weight: 500;
         }
-  
+
         .name + .email {
           color: rgba(black, 0.8);
-          
+
           &::before {
             content: ' <';
           }
-  
+
           &::after {
             content: '>';
           }
@@ -349,7 +379,7 @@ header {
           background-size: 1rem;
 
           &.application-pdf {
-            background-image: url('img/file-pdf.svg') 
+            background-image: url('img/file-pdf.svg');
           }
 
           .size {
@@ -383,7 +413,8 @@ header {
           line-height: 1.4;
         }
 
-        iframe, pre {
+        iframe,
+        pre {
           border: 1px solid $border-grey;
           width: 100%;
           height: 100%;