Post list: Improve lazy chat message edit button layout.

Change-Id: I46100b4b0039f241c7fb13905fb203303f1a466d

3 files changed, 38 insertions, 11 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();
+      });
+    }
   }
 });
diff --git a/src/main/resources/templates/benki/posts/postList.html b/src/main/resources/templates/benki/posts/postList.html
index a66528b..3cd4e49 100644
--- a/src/main/resources/templates/benki/posts/postList.html
+++ b/src/main/resources/templates/benki/posts/postList.html
@@ -17,6 +17,8 @@
 {#head}
   <link href="{feedUri}" rel="alternate" type="application/atom+xml" />
 
+  <script type="module" src="/web_modules/elix/define/Button.js"></script>
+  <script type="module" src="/web_modules/elix/define/ExpandablePanel.js"></script>
   <script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script>
   <script type="module" src="/bookmarks/MlkBookmarkSubmissionForm.js"></script>
   <script type="module" src="/lazychat/MlkLazychatSubmissionForm.js"></script>
@@ -69,24 +71,29 @@
       {#else}
         <article class="lazychat-message">
           <header>
-            <div class="lazychat-message-info" style="display: inline-block">
+            <div class="lazychat-message-info">
               <time datetime="{date.htmlDateTime}">{date.humanDateTime}</time>
               <span class="lazychat-message-owner">{owner.firstName} {owner.lastName}</span>
             </div>
 
+            <div class="lazychat-message-controls">
+              {#if showLazychatForm}
+                <button class="pure-button lazychat-edit-button">Edit</button>
+              {/if}
+            </div>
+          </header>
+
+          <section class="lazychat-editor">
             {#if showLazychatForm}
-              <elix-expandable-section class="lazychat-editor-pane editor-pane">
+              <elix-expandable-panel class="lazychat-editor-pane editor-pane">
                 <mlk-lazychat-submission-form edited-id="{post.id}"></mlk-lazychat-submission-form>
-              </elix-expandable-section>
+              </elix-expandable-panel>
             {/if}
-          </header>
+          </section>
 
           <section class="lazychat-message-content">
             {contentHtml.raw}
           </section>
-
-          <section class="lazychat-editor">
-          </section>
         </article>
       {/if}
     {/with}