Add modern theme

6 files changed, 307 insertions, 0 deletions

diff --git a/src/application/templates/modern/components/alert_error.twig b/src/application/templates/modern/components/alert_error.twig
new file mode 100644
index 0000000..ba14ba5
--- /dev/null
+++ b/src/application/templates/modern/components/alert_error.twig
@@ -0,0 +1,8 @@
+<div class="alert alert-danger" role="alert">
+    <svg viewBox="0 0 24 24" class="icon"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
+    {% if message starts with "?!HTML::" %}
+        {{ message|slice(8)|raw }}
+    {% else %}
+        <span>{{ message }}</span>
+    {% endif %}
+</div>
diff --git a/src/application/templates/modern/components/alert_info.twig b/src/application/templates/modern/components/alert_info.twig
new file mode 100644
index 0000000..6559ac2
--- /dev/null
+++ b/src/application/templates/modern/components/alert_info.twig
@@ -0,0 +1,8 @@
+<div class="alert alert-info" role="alert">
+    <svg viewBox="0 0 24 24" class="icon"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+    {% if message starts with "?!HTML::" %}
+        {{ message|slice(8)|raw }}
+    {% else %}
+        <span>{{ message }}</span>
+    {% endif %}
+</div>
diff --git a/src/application/templates/modern/components/alert_success.twig b/src/application/templates/modern/components/alert_success.twig
new file mode 100644
index 0000000..ed64ce5
--- /dev/null
+++ b/src/application/templates/modern/components/alert_success.twig
@@ -0,0 +1,8 @@
+<div class="alert alert-success" role="alert">
+    <svg viewBox="0 0 24 24" class="icon"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
+    {% if message starts with "?!HTML::" %}
+        {{ message|slice(8)|raw }}
+    {% else %}
+        <span>{{ message }}</span>
+    {% endif %}
+</div>
diff --git a/src/application/templates/modern/components/post.twig b/src/application/templates/modern/components/post.twig
new file mode 100644
index 0000000..5ceb46e
--- /dev/null
+++ b/src/application/templates/modern/components/post.twig
@@ -0,0 +1,180 @@
+{%- set fileAttachments = attachments|filter(a => not (a.mimeType starts with "image/" or a.mimeType starts with "video/")) -%}
+{%- set imageAttachments = attachments|filter(a => a.mimeType starts with "image/" or a.mimeType starts with "video/") -%}
+
+{%- set canReply =
+    not post.deleted
+    and not topic.isLocked
+    and currentUser is not null
+    and currentUser.hasPermission(permission("CREATE_OWN_POST"))
+-%}
+
+{%- set canEdit =
+    not post.deleted
+    and not topic.isLocked
+    and currentUser is not null
+    and (
+        (
+            postAuthor is not null
+            and postAuthor.id == currentUser.id
+            and postAuthor.hasPermission(permission("EDIT_OWN_POST"))
+        )
+        or currentUser.hasPermission(permission("EDIT_OTHER_POST"))
+    ) -%}
+
+{%- set canDelete =
+    not post.deleted
+    and currentUser is not null
+    and (
+        (
+            postAuthor is not null
+            and postAuthor.id == currentUser.id
+            and postAuthor.hasPermission(permission("DELETE_OWN_POST"))
+        )
+        or currentUser.hasPermission(permission("DELETE_OTHER_POST"))
+    ) -%}
+
+{%- set canViewAttachments = currentUser is not null -%}
+
+{%- set your_are_the_author =
+    currentUser is not null
+    and postAuthor is not null
+    and currentUser.id == postAuthor.id
+-%}
+
+{%- set is_op =
+    topicAuthor is not null
+    and postAuthor is not null
+    and postAuthor.id == topicAuthor.id
+-%}
+
+{% if post.deleted %}
+    <div class="post" id="post-{{ post.id }}">
+        <div class="post-pfp">
+            <div class="media-object" style="width:64px"></div>
+        </div>
+        <div class="post-body">
+            <div class="post-status post-status-danger">
+                <svg viewBox="0 0 24 24" class="icon"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
+                <em>{{ __("This post has been deleted") }}</em>
+            </div>
+        </div>
+    </div>
+{% else %}
+    <div class="post" data-text="{{ post.content }}" style="overflow: visible;" data-post-id="{{ post.id }}">
+        <div id="post-{{ post.id }}" class="post-anchor"></div>
+        {% if not hide_pfp %}
+            <div class="post-pfp">
+                {% if postAuthor %}
+                    {% if hide_actions %}
+                        <img class="media-object" alt="{{ __("Profile picture") }}" src="?_action=profilepicture&amp;user={{ postAuthor.id|url_encode }}" width="64" height="64">
+                    {% else %}
+                        <a href="?_action=viewuser&amp;user={{ postAuthor.id|url_encode }}">
+                            <img class="media-object" alt="{{ __("Profile picture") }}" src="?_action=profilepicture&amp;user={{ postAuthor.id|url_encode }}" width="64" height="64">
+                        </a>
+                    {% endif %}
+                {% else %}
+                    <div class="media-object" style="width:64px;height:64px"></div>
+                {% endif %}
+            </div>
+        {% endif %}
+        <div class="post-body" style="overflow: visible;">
+            <div class="post-title">
+                {% if not hide_actions %}
+                    <div class="pull-right title-controls">
+                        <a href="#post-{{ post.id }}" class="btn btn-iconic" title="{{ __("Permalink") }}">
+                            <svg viewBox="0 0 24 24" class="icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+                        </a>
+                        {% if canReply %}
+                            <button data-post-id="{{ post.id }}" class="btn js-only _reply-post btn-iconic" title="{{ __("Reply to post") }}">
+                                <svg viewBox="0 0 24 24" class="icon"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
+                            </button>
+                        {% endif %}
+                        {% if canEdit %}
+                            <button data-post-id="{{ post.id }}" class="btn js-only _edit-post btn-iconic" title="{{ __("Edit post") }}">
+                                <svg viewBox="0 0 24 24" class="icon"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
+                            </button>
+                        {% endif %}
+                        {% if canDelete %}
+                            <form action="?_action=deletepost" method="post">
+                                <input type="hidden" name="post" value="{{ post.id }}">
+                                <button type="submit" class="btn btn-danger btn-iconic" title="{{ __("Delete post") }}">
+                                    <svg viewBox="0 0 24 24" class="icon"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
+                                </button>
+                            </form>
+                        {% endif %}
+                    </div>
+                {% endif %}
+                {% if postAuthor %}
+                    {% if hide_actions %}
+                        {{ postAuthor.displayName }}
+                    {% else %}
+                        <a href="?_action=viewuser&amp;user={{ postAuthor.id|url_encode }}">{{ postAuthor.displayName }}</a>
+                        {% if is_op %}
+                            <svg viewBox="0 0 24 24" class="icon is-op icon-in-text"><title>{{ __("Created this topic") }}</title><path d="m11 7.601-5.994 8.19a1 1 0 0 0 .1 1.298l.817.818a1 1 0 0 0 1.314.087L15.09 12"/><path d="M16.5 21.174C15.5 20.5 14.372 20 13 20c-2.058 0-3.928 2.356-6 2-2.072-.356-2.775-3.369-1.5-4.5"/><circle cx="16" cy="7" r="5"/></svg>
+                        {% endif %}
+                    {% endif %}
+                    {% if your_are_the_author %}
+                        <svg viewBox="0 0 24 24" class="icon is-you icon-in-text"><title>{{ __("You") }}</title><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                    {% endif %}
+                {% else %}
+                    <em class="text-muted">{{ __("(deleted)") }}</em>
+                {% endif %}
+                <div class="post-info">
+                    <span class="_time">{{ post.postDate.format("c") }}</span>
+                    {% if post.edited %}
+                        <em class="text-muted">{{ __("(edited)") }}</em>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="post-main">
+                <div class="post-content">{{ renderPost(post.content) }}</div>
+                {% if imageAttachments|length > 0 %}
+                    <div class="post-images">
+                        {% for attachment in imageAttachments %}
+                            {% if hide_actions %}
+                                <span class="image-attachment" title="{{ attachment.name }}">
+                                    <img class="image-attachment-image" src="?_action=thumb&amp;attachment={{ attachment.id|url_encode }}" alt="" width="100">
+                                </span>
+                            {% else %}
+                                <a class="
+                                    image-attachment
+                                    attachment
+                                    {{ attachment.mimeType starts with "video/" ? "video-attachment" }}
+                                " href="?_action=attachment&amp;attachment={{ attachment.id|url_encode }}" title="{{ attachment.name }}" data-attachment-id="{{ attachment.id }}">
+                                    <img class="image-attachment-image" src="?_action=thumb&amp;attachment={{ attachment.id|url_encode }}" alt="" width="100">
+                                    {% if not canViewAttachments %}
+                                        <svg viewBox="0 0 24 24" class="attachment-lock icon"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+                                    {% elseif attachment.mimeType starts with "video/" %}
+                                        <svg viewBox="0 0 24 24" class="video-player-icon icon"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
+                                    {% endif %}
+                                </a>
+                            {% endif %}
+                        {% endfor %}
+                    </div>
+                {% endif %}
+            </div>
+            {% if fileAttachments|length > 0 %}
+                <div class="post-attachments">
+                    <div class="btn-toolbar">
+                        <div class="btn-group">
+                            {% for attachment in fileAttachments %}
+                                {% if hide_actions %}
+                                    <button>{{ attachment.name }}</button>
+                                {% else %}
+                                    <a class="btn attachment" href="?_action=attachment&amp;attachment={{ attachment.id|url_encode }}">
+                                        {% if not canViewAttachments %}
+                                            <svg viewBox="0 0 24 24" class="icon"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
+                                        {% else %}
+                                            <svg viewBox="0 0 24 24" class="icon"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+                                        {% endif %}
+                                        <span>{{ attachment.name }}</span>
+                                    </a>
+                                {% endif %}
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+{% endif %}
diff --git a/src/application/templates/modern/components/richtext_editor.twig b/src/application/templates/modern/components/richtext_editor.twig
new file mode 100644
index 0000000..3a2874d
--- /dev/null
+++ b/src/application/templates/modern/components/richtext_editor.twig
@@ -0,0 +1,35 @@
+<div class="richtext-editor">
+    <div class="rt-toolbar" role="toolbar">
+        <div class="rt-group" role="group">
+            <button data-area="#{{ id }}" title="{{ __("Bold") }}" data-editor-command="bold" type="button" class="btn btn-iconic">
+                <svg viewBox="0 0 24 24" class="icon"><path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"/></svg>
+            </button>
+            <button data-area="#{{ id }}" title="{{ __("Italic") }}" data-editor-command="italic" type="button" class="btn btn-iconic">
+                <svg viewBox="0 0 24 24" class="icon"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
+            </button>
+            <button data-area="#{{ id }}" title="{{ __("Underlined") }}" data-editor-command="underline" type="button" class="btn btn-iconic">
+                <svg viewBox="0 0 24 24" class="icon"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
+            </button>
+            <button data-area="#{{ id }}" title="{{ __("Strikethrough") }}" data-editor-command="strikethrough" type="button" class="btn btn-iconic">
+                <svg viewBox="0 0 24 24" class="icon"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
+            </button>
+        </div>
+        <div class="rt-group" role="group">
+            <button data-area="#{{ id }}" title="{{ __("Superscript") }}" data-editor-command="sup" type="button" class="btn btn-iconic">
+                <svg viewBox="0 0 24 24" class="icon"><path d="m4 19 8-8"/><path d="m12 19-8-8"/><path d="M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06"/></svg>
+            </button>
+            <button data-area="#{{ id }}" title="{{ __("Subscript") }}" data-editor-command="sub" type="button" class="btn btn-iconic">
+                <svg viewBox="0 0 24 24" class="icon"><path d="m4 5 8 8"/><path d="m12 5-8 8"/><path d="M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07"/></svg>
+            </button>
+        </div>
+        <div class="rt-group" role="group">
+            <button data-area="#{{ id }}" title="{{ __("Quote") }}" data-editor-command="quote" type="button" class="btn btn-iconic">
+                <svg viewBox="0 0 24 24" class="icon"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
+            </button>
+            <button data-area="#{{ id }}" title="{{ __("Spoiler") }}" data-editor-command="spoiler" type="button" class="btn btn-iconic">
+                <svg viewBox="0 0 24 24" class="icon"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
+            </button>
+        </div>
+    </div>
+    <textarea class="form-control" id="{{ id }}" name="{{ name }}" required rows="12" cols="60"></textarea>
+</div>
diff --git a/src/application/templates/modern/components/topic_log.twig b/src/application/templates/modern/components/topic_log.twig
new file mode 100644
index 0000000..853dc20
--- /dev/null
+++ b/src/application/templates/modern/components/topic_log.twig
@@ -0,0 +1,68 @@
+{%- set user = "" -%}
+{%- if postAuthor is null -%}
+    {%- set user = __("(deleted)")|e("html") -%}
+{%- else -%}
+    {%- set user =
+        '<a href="?_action=viewuser&amp;user='
+        ~ postAuthor.id|url_encode|e("html")
+        ~ '">'
+        ~ postAuthor.displayName|e("html")
+        ~ '</a>'
+    -%}
+{%- endif -%}
+
+<div class="post log" id="post-{{ logMessage.id }}">
+    <div class="post-pfp">
+        {% if postAuthor %}
+            {% if hideActions %}
+                <img class="media-object" alt="{{ __("Profile picture") }}" src="?_action=profilepicture&amp;user={{ postAuthor.id|url_encode }}" width="64" height="64">
+            {% else %}
+                <a href="?_action=viewuser&amp;user={{ postAuthor.id|url_encode }}">
+                    <img class="media-object" alt="{{ __("Profile picture") }}" src="?_action=profilepicture&amp;user={{ postAuthor.id|url_encode }}" width="64" height="64">
+                </a>
+            {% endif %}
+        {% else %}
+            <div class="media-object" style="width:64px;height:64px"></div>
+        {% endif %}
+    </div>
+    <div class="post-body">
+        {% if logMessage.type == constant("mystic\\forum\\orm\\TopicLogMessage::LOCKED") %}
+            <div class="post-status post-status-warning">
+                <svg viewBox="0 0 24 24" class="icon"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+                <span>
+                    <em>{{ __("%user% locked this topic", {
+                        "user": user,
+                    }) }}</em>
+                    <br>
+                    <small class="_time">{{ logMessage.postDate.format("c") }}</small>
+                </span>
+            </div>
+        {% elseif logMessage.type == constant("mystic\\forum\\orm\\TopicLogMessage::UNLOCKED") %}
+            <div class="post-status post-status-success">
+                <svg viewBox="0 0 24 24" class="icon"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg>
+                <span>
+                    <em>{{ __("%user% unlocked this topic", {
+                        "user": user,
+                    }) }}</em>
+                    <br>
+                    <small class="_time">{{ logMessage.postDate.format("c") }}</small>
+                </span>
+            </div>
+        {% elseif logMessage.type == constant("mystic\\forum\\orm\\TopicLogMessage::TITLE_CHANGED") %}
+            <div class="post-status post-status-info">
+                <svg viewBox="0 0 24 24" class="icon"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
+                <span>
+                    <em>{{ __("%user% changed the title of this topic from %old_title% to %new_title%", {
+                        "user": user,
+                        "old_title": '<strong>' ~ logMessage.params.old_value|default(__("unknown"))|e("html") ~ '</strong>',
+                        "new_title": '<strong>' ~ logMessage.params.new_value|default(__("unknown"))|e("html") ~ '</strong>',
+                    }) }}</em>
+                    <br>
+                    <small class="_time">{{ logMessage.postDate.format("c") }}</small>
+                </span>
+            </div>
+        {% else %}
+            {{ __("unknown") }}
+        {% endif %}
+    </div>
+</div>