From 5edc8fc651fa0b161c0f700acbb044af0dc45fcf Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Fri, 14 Apr 2023 19:02:53 +0000
Subject: [PATCH] drafts: Add abstract classes for messages in an overlay.

This will help up achieve 2 things:

* Have a lot of common CSS for drafts and scheduled messages.
* Have common JS for things like keyboard navigation between drafts
  and scheduled messages.
---
 web/styles/app_components.css      | 154 +++++++++++++++++++++++++++++
 web/styles/dark_theme.css          |   4 +-
 web/styles/drafts.css              |  62 ------------
 web/templates/draft.hbs            |  11 ++-
 web/templates/draft_table_body.hbs |   8 +-
 5 files changed, 167 insertions(+), 72 deletions(-)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 89210f0221..57edf17c24 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -853,3 +853,157 @@ div.overlay {
         }
     }
 }
+
+/* This includes css needed to display messages in an overlay. */
+.overlay-messages-container {
+    position: relative;
+    height: 95%;
+    background-color: hsl(0deg 0% 100%);
+    border-radius: 4px;
+    padding: 0;
+    width: 58%;
+    overflow: hidden;
+    max-width: 1200px;
+    max-height: 1000px;
+    display: flex;
+    flex-direction: column;
+
+    @media (width < $md_min) {
+        height: 95%;
+        max-width: none;
+        width: 90%;
+    }
+
+    .overlay-messages-header {
+        padding-top: 4px;
+        padding-bottom: 8px;
+        text-align: center;
+        border-bottom: 1px solid hsl(0deg 0% 87%);
+
+        & h1 {
+            margin: 0;
+            font-size: 1.1em;
+            text-transform: uppercase;
+        }
+
+        .exit {
+            font-weight: 400;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: hsl(0deg 0% 67%);
+            cursor: pointer;
+
+            .exit-sign {
+                position: relative;
+                top: 1px;
+                margin-left: 3px;
+                font-size: 1.5rem;
+                line-height: 1;
+                font-weight: 600;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .overlay-messages-list {
+        padding: 10px 25px;
+        overflow: auto;
+
+        .no-overlay-messages {
+            display: block;
+            margin-top: calc(45vh - 30px - 1.5em);
+            text-align: center;
+            font-size: 1.5em;
+            color: hsl(0deg 0% 67%);
+            pointer-events: none;
+        }
+    }
+}
+
+.overlay-messages-container .overlay-message-row {
+    padding: 5px 0;
+
+    > div {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .overlay-message-info-box {
+        width: 100%;
+        margin-bottom: 10px;
+
+        &.active {
+            outline: 2px solid hsl(215deg 47% 50%);
+            /* this offset ensures no gap between the blue box and the draft in active state */
+            outline-offset: -1px;
+        }
+
+        .message_row {
+            border-radius: 0 0 7px 7px;
+            border: 1px solid var(--color-message-list-border);
+            border-top: 0;
+        }
+
+        .messagebox-content {
+            grid-template-rows: auto;
+            grid-template-columns: auto max-content;
+            padding: 10px;
+
+            .message_content {
+                grid-column: 1 / 2;
+                /* to space from restore draft button */
+                margin-right: 5px;
+            }
+
+            .message_top_line {
+                grid-column: 2 / 3;
+            }
+        }
+
+        .messagebox {
+            cursor: auto;
+            box-shadow: none;
+            border-radius: 0 0 7px 7px;
+        }
+
+        .overlay_message_controls {
+            display: inline-block;
+            font-size: 0.9em;
+
+            [data-tippy-root] {
+                width: max-content;
+                word-wrap: unset;
+            }
+
+            .restore-overlay-message {
+                cursor: pointer;
+                margin-right: 5px;
+                color: hsl(170deg 48% 54%);
+                opacity: 0.7;
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+
+            .delete-overlay-message {
+                cursor: pointer;
+                margin-left: 5px;
+                color: hsl(357deg 52% 57%);
+                opacity: 0.7;
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+
+        .message_header {
+            /* We don't need these effects applied for message list in the drafts overlay. */
+            box-shadow: none !important;
+            border: 0 !important;
+            background: transparent;
+        }
+    }
+}
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 2cddb8e170..d8e7027c91 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -882,7 +882,9 @@
         border-color: hsl(0deg 0% 0% / 20%);
     }
 
-    .draft-row .message_header_private_message .message_label_clickable {
+    .overlay-message-row
+        .message_header_private_message
+        .message_label_clickable {
         padding: 4px 6px 3px;
         color: inherit;
     }
diff --git a/web/styles/drafts.css b/web/styles/drafts.css
index 5759eaf459..3b4038bb2f 100644
--- a/web/styles/drafts.css
+++ b/web/styles/drafts.css
@@ -1,67 +1,5 @@
 .drafts-container {
-    position: relative;
-    height: 95%;
-    background-color: hsl(0deg 0% 100%);
-    border-radius: 4px;
-    padding: 0;
-    width: 58%;
-    overflow: hidden;
-    max-width: 1200px;
-    max-height: 1000px;
-    display: flex;
-    flex-direction: column;
-
-    @media (width < $md_min) {
-        height: 95%;
-        max-width: none;
-        width: 90%;
-    }
-
-    .drafts-header {
-        padding-top: 4px;
-        padding-bottom: 8px;
-        text-align: center;
-        border-bottom: 1px solid hsl(0deg 0% 87%);
-
-        & h1 {
-            margin: 0;
-            font-size: 1.1em;
-            text-transform: uppercase;
-        }
-
-        .exit {
-            font-weight: 400;
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            color: hsl(0deg 0% 67%);
-            cursor: pointer;
-
-            .exit-sign {
-                position: relative;
-                top: 1px;
-                margin-left: 3px;
-                font-size: 1.5rem;
-                line-height: 1;
-                font-weight: 600;
-                cursor: pointer;
-            }
-        }
-    }
-
     .drafts-list {
-        padding: 10px 25px;
-        overflow: auto;
-
-        .no-drafts {
-            display: block;
-            margin-top: calc(45vh - 30px - 1.5em);
-            text-align: center;
-            font-size: 1.5em;
-            color: hsl(0deg 0% 67%);
-            pointer-events: none;
-        }
-
         .removed-drafts {
             display: block;
             text-align: center;
diff --git a/web/templates/draft.hbs b/web/templates/draft.hbs
index 7c8a2f2d66..49c5bd7340 100644
--- a/web/templates/draft.hbs
+++ b/web/templates/draft.hbs
@@ -1,5 +1,5 @@
-<div class="draft-row" data-draft-id="{{draft_id}}">
-    <div class="draft-info-box" tabindex="0">
+<div class="draft-row overlay-message-row" data-draft-id="{{draft_id}}">
+    <div class="draft-info-box overlay-message-info-box" tabindex="0">
         {{#if is_stream}}
         <div class="message_header message_header_stream">
             <div class="message-header-contents" style="background: {{recipient_bar_color}};">
@@ -34,19 +34,20 @@
             <div class="messagebox">
                 <div class="messagebox-content">
                     <div class="message_top_line">
-                            <i class="fa fa-pencil fa-lg restore-draft tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="restore-draft-tooltip-template"></i>
+                        <div class="draft_controls overlay_message_controls">
+                            <i class="fa fa-pencil fa-lg restore-draft restore-overlay-message tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="restore-draft-tooltip-template"></i>
                             <template id="restore-draft-tooltip-template">
                                 {{t 'Restore draft' }}
                                 {{tooltip_hotkey_hints "Enter"}}
                             </template>
-                            <i class="fa fa-trash-o fa-lg delete-draft tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="delete-draft-tooltip-template"></i>
+                            <i class="fa fa-trash-o fa-lg delete-draft delete-overlay-message tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="delete-draft-tooltip-template"></i>
                             <template id="delete-draft-tooltip-template">
                                 {{t 'Delete draft' }}
                                 {{tooltip_hotkey_hints "Backspace"}}
                             </template>
                         </div>
                     </div>
-                    <div class="message_content rendered_markdown restore-draft" title="{{t 'Restore draft' }}">{{rendered_markdown content}}</div>
+                    <div class="message_content rendered_markdown restore-draft restore-overlay-message" title="{{t 'Restore draft' }}">{{rendered_markdown content}}</div>
                 </div>
             </div>
         </div>
diff --git a/web/templates/draft_table_body.hbs b/web/templates/draft_table_body.hbs
index 862d206ba3..15d162d9ee 100644
--- a/web/templates/draft_table_body.hbs
+++ b/web/templates/draft_table_body.hbs
@@ -1,7 +1,7 @@
 <div id="draft_overlay" class="overlay new-style" data-overlay="drafts">
     <div class="flex overlay-content">
-        <div class="drafts-container modal-bg">
-            <div class="drafts-header">
+        <div class="drafts-container overlay-messages-container modal-bg">
+            <div class="overlay-messages-header">
                 <h1>{{t 'Drafts' }}</h1>
                 <div class="exit">
                     <span class="exit-sign">&times;</span>
@@ -12,8 +12,8 @@
                     {{#tr}}Drafts older than <strong>{draft_lifetime}</strong> days are automatically removed.{{/tr}}
                 </div>
             </div>
-            <div class="drafts-list">
-                <div class="no-drafts">
+            <div class="drafts-list overlay-messages-list">
+                <div class="no-drafts no-overlay-messages">
                     {{t 'No drafts.'}}
                 </div>