Comment attachment (pc+mobile/light+dark themes supported)

frontend/html/comments/edit.html

@@ -9,14 +9,17 @@
                     <div class="avatar"><img src="{% if form.instance.author.avatar %}{{ form.instance.author.get_avatar }}{% else %}{{ me.get_avatar }}{% endif %}" alt="Аватар" /></div>
                 </div>
                 <div class="comment-form-body">
-                    <comment-markdown-editor post-slug="{{ post.slug }}">
+                    <comment-markdown-editor
+                        post-slug="{{ post.slug }}"
+                        submit-label="Сохранить"
+                    >
                         {{ form.text }}
                     </comment-markdown-editor>
                     {% if form.text.errors %}<span class="form-errors">{{ form.full_name.errors }}</span>{% endif %}
                 </div>
-                <div class="comment-form-footer">
+                <noscript class="comment-form-footer" inline-template>
                     <button type="submit" class="button">Сохранить</button>
-                </div>
+                </noscript>
             </div>
         </form>
     </div>

frontend/html/comments/forms/battle.html

@@ -13,16 +13,20 @@
                 </select>
             </div>
             <div class="comment-form-body-title">{{ form.title }}</div>
-            <comment-markdown-editor class="comment-form-body-text" post-slug="{{ post.slug }}">
+            <comment-markdown-editor
+                class="comment-form-body-text"
+                post-slug="{{ post.slug }}"
+                submit-label="Отправить"
+            >
                 {{ form.text }}
             </comment-markdown-editor>
             {% if form.text.errors %}<span class="form-errors">{{ form.full_name.errors }}</span>{% endif %}
         </div>
-        <div class="comment-form-footer">
+        <noscript class="comment-form-footer" inline-template>
             <div class="comment-form-subscribe">
                 {{ form.subscribe_to_post }} {{ form.subscribe_to_post.label_tag }}
             </div>
             <button type="submit" class="button comment-form-button">Отправить</button>
-        </div>
+        </noscript>
     </div>
 </form>

frontend/html/comments/forms/comment.html

@@ -5,16 +5,23 @@
             <div class="avatar"><img src="{{ me.get_avatar }}" alt="Аватар {{ me.full_name }}" loading="lazy" /></div>
         </div>
         <div class="comment-form-body">
-            <comment-markdown-editor class="comment-form-body-text" post-slug="{{ post.slug }}">
+
+            <comment-markdown-editor
+                class="comment-form-body-text"
+                submit-label="Отправить"
+                subscribe-value="{{ form.subscribe_to_post.value|default_if_none:'' }}"
+                subscribe-label="{{ form.subscribe_to_post.label }}"
+                subscribe-form-name="{{ form.subscribe_to_post.name }}"
+            >
                 {{ form.text }}
             </comment-markdown-editor>
             {% if form.text.errors %}<span class="form-errors">{{ form.full_name.errors }}</span>{% endif %}
         </div>
-        <div class="comment-form-footer">
+        <noscript class="comment-form-footer" inline-template>
             <div class="comment-form-subscribe">
                 {{ form.subscribe_to_post }} {{ form.subscribe_to_post.label_tag }}
             </div>
             <button type="submit" class="button comment-form-button">Отправить</button>
-        </div>
+        </noscript>
     </div>
 </form>

frontend/html/comments/forms/reply.html

@@ -6,16 +6,19 @@
         </div>
 
         <div class="reply-form-body">
-            <comment-markdown-editor post-slug="{{ post.slug }}">
+            <comment-markdown-editor
+                post-slug="{{ post.slug }}"
+                submit-label="Отправить"
+            >
                 {{ reply_form.text }}
             </comment-markdown-editor>
             {% if reply_form.text.errors %}<span class="form-errors">{{ reply_form.full_name.errors }}</span>{% endif %}
         </div>
 
         <input type="hidden" name="reply_to_id" value="{{ comment.id }}">
 
-        <div class="reply-form-button">
+        <noscript class="reply-form-button" inline-template>
             <button type="submit" class="button button-small">Отправить</button>
-        </div>
+        </noscript>
     </div>
 </form>

frontend/static/css/base.css

@@ -150,7 +150,7 @@
     cursor: pointer;
 }
 
-.button {
+.button, .comment-markdown-editor .submit {
     display: inline-block;
     padding: 15px 18px;
     box-sizing: border-box;
@@ -169,18 +169,18 @@
         border-radius: 50%;
     }
 
-    .button:hover {
+    .button:hover, .comment-markdown-editor .submit:hover {
         color: var(--button-hover-color);
         background-color: var(--button-hover-bg-color);
         border: var(--button-hover-border);
     }
 
-    .button:disabled {
+    .button:disabled, .comment-markdown-editor .submit:disabled {
         background-color: var(--button-disabled-bg-color);
         border-color: var(--button-disabled-bg-color);
     }
 
-    .button:disabled:hover {
+    .button:disabled:hover, .comment-markdown-editor .submit:disabled:hover {
         color: var(--button-color);
         background-color: var(--button-disabled-bg-color);
         border-color: var(--button-disabled-bg-color);

frontend/static/css/components/comments.css

@@ -628,6 +628,105 @@
     position: relative;
 }
 
+    .comment-markdown-editor .EasyMDEContainer {
+        display: flex;
+        flex-direction: column-reverse;
+        border-radius: 4px;
+        border: 1px solid var(--input-border-color);
+        overflow: hidden;
+        box-shadow: var(--input-shadow);
+        resize: vertical;
+    }
+
+    .comment-markdown-editor .EasyMDEContainer .CodeMirror {
+        flex-grow: 1;
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+        resize: none;
+    }
+
+    .comment-markdown-editor .editor-toolbar {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap-reverse;
+        z-index: 1;
+        gap: 10px 10px;
+        padding: 20px 15px 15px;
+        background: var(--input-bg-color);
+        box-shadow: none;
+        border-radius: 0;
+    }
+
+    .comment-markdown-editor .editor-toolbar button:hover {
+        transform: none;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tsubmit {
+        margin-left: auto;
+        height: auto;
+        width: auto;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tbutton {
+        border: none;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tbutton {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--input-toolbar-button-bg);
+        border-radius: calc(var(--button-border-radius)/2);
+        color: var(--input-toolbar-button-color);
+        border: 1px solid transparent;
+        height: 36px;
+        width: 36px;
+        padding: 0 12px;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tbutton:hover {
+        color: var(--button-hover-color);
+        background-color: var(--button-hover-bg-color);
+        border: var(--button-hover-border);
+        border-width: 1px;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tcheckbox {
+        white-space: nowrap;
+        width: auto;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tcheckbox::before {
+        display: inline-block;
+        font-family: "Font Awesome 5 Free";
+        font-weight: normal;
+        content: "\f0c8";
+        margin-right: 4px;
+        color: var(--input-toolbar-button-color);
+        line-height: 1;
+    }
+
+    .comment-markdown-editor .editor-toolbar .tcheckbox.checked::before {
+        content: "\f14a";
+    }
+
+    @media only screen and (max-width : 767px) {
+        .comment-markdown-editor .editor-toolbar .tcheckbox {
+            align-items: flex-end;
+            justify-content: flex-start;
+            order: 1;
+            width: 100%;
+            padding: 6px;
+            margin: 0 -6px;
+            background: transparent;
+        }
+
+        .comment-markdown-editor .editor-toolbar .tcheckbox:hover {
+            border-color: transparent;
+        }
+    }
+
 .mention-autocomplete-hint {
     position: absolute;
     min-width: 100px;

frontend/static/css/components/select.css

@@ -16,7 +16,7 @@
     --vs-input-margin: 4px 2px;
 
     /* Copied from theme.css */
-    --vs-dropdown-box-shadow: 0 4px 8px -2px rgba(9,30,66,.25),0 0 0 1px rgba(9,30,66,.08);
+    --vs-dropdown-box-shadow: var(--input-shadow);
 }
 
 

frontend/static/css/layout.css

@@ -272,7 +272,7 @@
 .comment-form {
     display: grid;
     grid-template-columns: min-content minmax(auto, 1fr);
-    grid-template-rows: auto 60px;
+    grid-template-rows: auto;
     justify-content: stretch;
 }
 
@@ -302,6 +302,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        margin-top: 12px;
     }
 
     .comment-form-body {
@@ -331,7 +332,7 @@
 
 .reply-form {
     display: grid;
-    grid-template-columns: 40px auto 110px;
+    grid-template-columns: 40px auto 40px;
     justify-content: stretch;
 }
 

frontend/static/css/theme.css

@@ -13,6 +13,8 @@
     --button-hover-border: solid 2px #333;
 
     --badge-color: rgba(255, 196, 85, 0.91);
+
+    --input-shadow: 0 4px 8px -2px rgba(9,30,66,.25),0 0 0 1px rgba(9,30,66,.08);
 }
 
 html, html[theme="light"] {
@@ -47,7 +49,8 @@ html, html[theme="light"] {
     --input-bg-color: #fff;
     --input-border-color: #ddd;
     --input-toolbar-bg: #fff;
-    --input-toolbar-button-color: #000;
+    --input-toolbar-button-bg: #F5F5F5;
+    --input-toolbar-button-color: #333;
     --input-link: #7f8c8d;
     --input-selection-color: #d7d4f0;
 }
@@ -84,7 +87,8 @@ html[theme="dark"] {
     --input-bg-color: #373c48;
     --input-border-color: #333;
     --input-toolbar-bg: #252a35;
-    --input-toolbar-button-color: #fff;
+    --input-toolbar-button-bg: #252a35;
+    --input-toolbar-button-color: #DDD;
     --input-link: #b3b6ff;
     --input-selection-color: #978fd8;
 }
@@ -116,6 +120,9 @@ html[theme="dark"] {
     }
 }
 
+select, input, textarea {
+  font-size: 16px;
+}
 body {
     font-family: var(--sans-font);
     font-size: 15px;
@@ -193,7 +200,7 @@ select,
 {
     -webkit-appearance: none;
     border: none;
-    box-shadow: 0 4px 8px -2px rgba(9,30,66,.25),0 0 0 1px rgba(9,30,66,.08);
+    box-shadow: var(--input-shadow);
     outline: none;
     padding: 8px 15px;
     resize: vertical;
@@ -212,7 +219,7 @@ select,
 
         .editor-toolbar {
             border: none;
-            box-shadow: 0 4px 8px -2px rgba(9,30,66,.25), 0 0 0 1px rgba(9,30,66,.08);
+            box-shadow: var(--input-shadow);
             background: var(--input-toolbar-bg);
         }
 

frontend/static/js/codemirror-4.inline-attachment.js

@@ -8,7 +8,7 @@
 (function () {
     "use strict";
 
-    var codeMirrorEditor = function (instance) {
+    const codeMirrorEditor = function (instance) {
         if (!instance.getWrapperElement) {
             throw "Invalid CodeMirror object given";
         }
@@ -59,34 +59,36 @@
         });
     };
 
-    var codeMirrorEditor4 = function (instance) {
+    const codeMirrorEditor4 = function(instance) {
         codeMirrorEditor.call(this, instance);
     };
 
-    codeMirrorEditor4.attach = function (codeMirror, options) {
+    codeMirrorEditor4.attach = function (codeMirror, options, fileInputEl) {
         options = options || {};
 
-        var editor = new codeMirrorEditor(codeMirror),
-            inlineattach = new inlineAttachment(options, editor),
-            el = codeMirror.getWrapperElement();
+        const editor = new codeMirrorEditor(codeMirror);
+        const inlineAttach = new inlineAttachment(options, editor);
+        const el = codeMirror.getWrapperElement();
 
         el.addEventListener(
             "paste",
             function (e) {
-                inlineattach.onPaste(e);
+                inlineAttach.onPaste(e);
             },
             false
         );
 
         codeMirror.on("drop", function (data, e) {
-            if (inlineattach.onDrop(e)) {
+            if (inlineAttach.onDrop(e)) {
                 e.stopPropagation();
                 e.preventDefault();
                 return true;
             } else {
                 return false;
             }
         });
+
+        fileInputEl && fileInputEl.addEventListener("change", (e) => inlineAttach.onFileInputChange(e));
     };
 
     inlineAttachment.editors.codemirror4 = codeMirrorEditor4;