make icons macros instead of svg files

2025-11-21 05:38:51 +03:00
parent 95decd9a56
commit f8101e57c1
15 changed files with 71 additions and 55 deletions
--- a/app/init.py
+++ b/app/init.py
@@ -152,7 +152,6 @@ def create_app():
    @app.context_processor
    def inject_constants():
        return {
-            "InfoboxIcons": InfoboxIcons,
            "InfoboxHTMLClass": InfoboxHTMLClass,
            "InfoboxKind": InfoboxKind,
            "PermissionLevel": PermissionLevel,
--- a/app/constants.py
+++ b/app/constants.py
@@ -56,13 +56,6 @@ class InfoboxKind(IntEnum):
    WARN = 2
    ERROR = 3

-InfoboxIcons = {
-    InfoboxKind.INFO: "/static/misc/info.svg",
-    InfoboxKind.LOCK: "/static/misc/lock.svg",
-    InfoboxKind.WARN: "/static/misc/warn.svg",
-    InfoboxKind.ERROR: "/static/misc/error.svg",
-}
-
 InfoboxHTMLClass = {
    InfoboxKind.INFO: "",
    InfoboxKind.LOCK: "warn",
--- a/app/templates/common/icons.html
+++ b/app/templates/common/icons.html
@@ -0,0 +1,49 @@
+{# https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license #}
+
+{% macro icn_bookmark(width=24) -%}
+<svg width="{{width}}px" height="{{width}}px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 6C6 4.89543 6.89543 4 8 4H16C17.1046 4 18 4.89543 18 6V18.7268C18 19.5969 16.9657 20.0519 16.3243 19.4639L12 15.5L7.67573 19.4639C7.03432 20.0519 6 19.5969 6 18.7268V6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+{%- endmacro %}
+
+{% macro icn_error(width=60) -%}
+<svg width="{{width}}px" height="{{width}}px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.364 5.63604C19.9926 7.26472 21 9.51472 21 12C21 16.9706 16.9706 21 12 21C9.51472 21 7.26472 19.9926 5.63604 18.364M18.364 5.63604C16.7353 4.00736 14.4853 3 12 3C7.02944 3 3 7.02944 3 12C3 14.4853 4.00736 16.7353 5.63604 18.364M18.364 5.63604L5.63604 18.364" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+{%- endmacro %}
+
+{% macro icn_info(width=60) -%}
+<svg width="{{width}}px" height="{{width}}px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8V8.5M12 12V16M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+{%- endmacro %}
+
+{% macro icn_lock(width=60) -%}
+<svg width="{{width}}px" height="{{width}}px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 14V16M8 9V6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V9M7 21H17C18.1046 21 19 20.1046 19 19V11C19 9.89543 18.1046 9 17 9H7C5.89543 9 5 9.89543 5 11V19C5 20.1046 5.89543 21 7 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+{%- endmacro %}
+
+{% macro icn_warn(width=60) -%}
+<svg width="{{width}}px" height="{{width}}px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 15H12.01M12 12V9M4.98207 19H19.0179C20.5615 19 21.5233 17.3256 20.7455 15.9923L13.7276 3.96153C12.9558 2.63852 11.0442 2.63852 10.2724 3.96153L3.25452 15.9923C2.47675 17.3256 3.43849 19 4.98207 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+{%- endmacro %}
+
+{% macro icn_image(width=24) -%}
+<svg width="{{width}}px" height="{{width}}px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 17L7.58959 13.7694C8.38025 13.0578 9.58958 13.0896 10.3417 13.8417L11.5 15L15.0858 11.4142C15.8668 10.6332 17.1332 10.6332 17.9142 11.4142L20 13.5M11 9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9C9 8.44772 9.44772 8 10 8C10.5523 8 11 8.44772 11 9ZM6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+{%- endmacro %}
+
+{% macro icn_spoiler(width=24) -%}
+<svg width="{{width}}px" height="{{width}}px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L9.87868 9.87868M20 20L14.1213 14.1213M9.87868 9.87868C9.33579 10.4216 9 11.1716 9 12C9 13.6569 10.3431 15 12 15C12.8284 15 13.5784 14.6642 14.1213 14.1213M9.87868 9.87868L14.1213 14.1213M6.76821 6.76821C4.72843 8.09899 2.96378 10.026 2 11.9998C3.74646 15.5764 8.12201 19 11.9998 19C13.7376 19 15.5753 18.3124 17.2317 17.2317M9.76138 5.34717C10.5114 5.12316 11.2649 5 12.0005 5C15.8782 5 20.2531 8.42398 22 12.0002C21.448 13.1302 20.6336 14.2449 19.6554 15.2412" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+{%- endmacro %}
+
+{% macro icn_sticky(width=24) -%}
+<svg width="{{width}}px" height="{{width}}px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V13M13 20L20 13M13 20V14C13 13.4477 13.4477 13 14 13H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+{%- endmacro %}
--- a/app/templates/common/macros.html
+++ b/app/templates/common/macros.html
@@ -1,3 +1,4 @@
+{% from 'common/icons.html' import icn_image, icn_spoiler, icn_info, icn_lock, icn_warn, icn_error %}
 {% macro pager(current_page, page_count) %}
 {% set left_start = [1, current_page - 5] | max %}
 {% set right_end = [page_count, current_page + 5] | min %}
@@ -31,16 +32,24 @@
 <div class="{{ "infobox " + InfoboxHTMLClass[kind] }}">
  <span>
  <div class="infobox-icon-container">
-    <img src="{{ InfoboxIcons[kind] }}">
+    {%- if kind == InfoboxKind.INFO -%}
+    {{- icn_info() -}}
+    {%- elif kind == InfoboxKind.LOCK -%}
+    {{- icn_lock() -}}
+    {%- elif kind == InfoboxKind.WARN -%}
+    {{- icn_warn() -}}
+    {%- elif kind == InfoboxKind.ERROR -%}
+    {{- icn_error() -}}
+    {%- endif -%}
  </div>
  {{ message }}
  </span>
 </div>
 {% endmacro %}

-{% macro timestamp(unix_ts) %}
+{% macro timestamp(unix_ts) -%}
 <span class="timestamp" data-utc="{{ unix_ts }}">{{ unix_ts | ts_datetime('%Y-%m-%d %H:%M')}} <abbr title="Server Time">ST</abbr></span>
-{% endmacro %}
+{%- endmacro %}

 {% macro babycode_editor_component(ta_name, ta_placeholder="Post body", optional=False, prefill="") %}
 <div class="babycode-editor-container">
@@ -56,10 +65,10 @@
      <button class="babycode-button" type=button id="post-editor-underline" title="Insert Underline"><u>U</u></button>
      <button class="babycode-button" type=button id="post-editor-url" title="Insert Link"><code>://</code></button>
      <button class="babycode-button" type=button id="post-editor-code" title="Insert Code block"><code>&lt;/&gt;</code></button>
-      <button class="babycode-button contain-svg full" type=button id="post-editor-img" title="Insert Image"><img src="/static/misc/image.svg"></button>
+      <button class="babycode-button contain-svg full" type=button id="post-editor-img" title="Insert Image">{{ icn_image() }}</button>
      <button class="babycode-button" type=button id="post-editor-ol" title="Insert Ordered list">1.</button>
      <button class="babycode-button" type=button id="post-editor-ul" title="Insert Unordered list">&bullet;</button>
-      <button class="babycode-button contain-svg full" type=button id="post-editor-spoiler" title="Insert spoiler"><img src="/static/misc/spoiler.svg"></button>
+      <button class="babycode-button contain-svg full" type=button id="post-editor-spoiler" title="Insert spoiler">{{ icn_spoiler() }}</button>
    </span>
    <textarea class="babycode-editor" name="{{ ta_name }}" id="babycode-content" placeholder="{{ ta_placeholder }}" {{ "required" if not optional else "" }}>{{ prefill }}</textarea>
    <a href="{{ url_for("app.babycode_guide") }}" target="_blank">babycode guide</a>
--- a/app/templates/topics/topic.html
+++ b/app/templates/topics/topic.html
@@ -1,4 +1,5 @@
 {% from 'common/macros.html' import pager, timestamp %}
+{% from 'common/icons.html' import icn_bookmark, icn_lock, icn_sticky %}
 {% extends "base.html" %}
 {% block title %}browsing topic {{ topic['name'] }}{% endblock %}
 {% block content %}
@@ -33,7 +34,7 @@
    <div class="thread">
      <div class="thread-sticky-container contain-svg">
        {% if thread['is_stickied'] %}
-          <img src="/static/misc/sticky.svg">
+          {{ icn_sticky() }}
          <i>Stickied</i>
        {% endif %}
      </div>
@@ -56,7 +57,7 @@
      </div>
      <div class="thread-locked-container contain-svg">
        {% if thread['is_locked'] %}
-          <img src="/static/misc/lock.svg">
+          {{ icn_lock() }}
          <i>Locked</i>
        {% endif %}
      </div>
--- a/app/templates/topics/topics.html
+++ b/app/templates/topics/topics.html
@@ -1,3 +1,4 @@
+{% from 'common/icons.html' import icn_lock %}
 {% from 'common/macros.html' import timestamp %}
 {% extends "base.html" %}
 {% block content %}
@@ -33,7 +34,7 @@
        </div>
        <div class="topic-locked-container contain-svg">
          {% if topic['is_locked'] %}
-            <img src="/static/misc/lock.svg"></img>
+            {{ icn_lock() }}
            <i>Locked</i>
          {% endif %}
        </div>