Post list: Improve lazy chat message edit button layout.

Change-Id: I46100b4b0039f241c7fb13905fb203303f1a466d

2 files changed, 24 insertions, 4 deletions

diff --git a/src/main/resources/META-INF/resources/cms2/base.css b/src/main/resources/META-INF/resources/cms2/base.css
index c455ce8..b165f1c 100644
--- a/src/main/resources/META-INF/resources/cms2/base.css
+++ b/src/main/resources/META-INF/resources/cms2/base.css
@@ -174,6 +174,7 @@ article.bookmark {
   font-size: smaller;
   margin: 0;
   padding: 0;
+  flex: auto;
 }
 
 article.lazychat-message {
@@ -183,6 +184,10 @@ article.lazychat-message {
   background: #f0f8f0;
 }
 
+article.lazychat-message > header {
+  display: flex
+}
+
 #bookmark-submission textarea {
   min-width: calc(100% - 12em);
 }
@@ -196,6 +201,14 @@ elix-expandable-section.editor-pane::part(header) {
   display: inline-block;
 }
 
+.lazychat-edit-button {
+  font-size: small;
+}
+
+.lazychat-message-controls {
+  flex: initial;
+}
+
 .paging {
   display: flex;
   flex-direction: row;
diff --git a/src/main/resources/META-INF/resources/posts/postList.js b/src/main/resources/META-INF/resources/posts/postList.js
index 3eb23ce..7bab4f9 100644
--- a/src/main/resources/META-INF/resources/posts/postList.js
+++ b/src/main/resources/META-INF/resources/posts/postList.js
@@ -11,9 +11,16 @@ document.addEventListener('DOMContentLoaded', () => {
     lazychatSubmissionPane.addEventListener('opened',() => lazychatSubmissionForm.focus());
   }
 
-  let lazychatEditorPanes = document.getElementsByClassName('lazychat-editor-pane');
-  for (let pane of lazychatEditorPanes) {
-    let form = pane.getElementsByTagName('mlk-lazychat-submission-form')[0];
-    pane.addEventListener('opened', () => form.focus());
+  let lazychatMessages = document.getElementsByClassName('lazychat-message');
+  for (let message of lazychatMessages) {
+    let editorPane = message.getElementsByClassName('lazychat-editor-pane')[0];
+    if (editorPane) {
+      let form = message.getElementsByTagName('mlk-lazychat-submission-form')[0];
+      let editButton = message.getElementsByClassName('lazychat-edit-button')[0];
+      editButton.addEventListener('click', () => {
+        editorPane.toggle();
+        form.focus();
+      });
+    }
   }
 });