Post list: Improve lazy chat message edit button layout.
Change-Id: I46100b4b0039f241c7fb13905fb203303f1a466d
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 @@
font-size: smaller;
margin: 0;
padding: 0;
+ flex: auto;
}
article.lazychat-message {
@@ -183,6 +184,10 @@
background: #f0f8f0;
}
+article.lazychat-message > header {
+ display: flex
+}
+
#bookmark-submission textarea {
min-width: calc(100% - 12em);
}
@@ -196,6 +201,14 @@
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 @@
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>
- {#if showLazychatForm}
- <elix-expandable-section class="lazychat-editor-pane editor-pane">
- <mlk-lazychat-submission-form edited-id="{post.id}"></mlk-lazychat-submission-form>
- </elix-expandable-section>
- {/if}
+ <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-panel class="lazychat-editor-pane editor-pane">
+ <mlk-lazychat-submission-form edited-id="{post.id}"></mlk-lazychat-submission-form>
+ </elix-expandable-panel>
+ {/if}
+ </section>
+
<section class="lazychat-message-content">
{contentHtml.raw}
</section>
-
- <section class="lazychat-editor">
- </section>
</article>
{/if}
{/with}