Merge pull request #2172 from strictdoc-project/#_document_node_validation_messages

Add UI for nodes/fields validation messages in document view

Author: mettta

strictdoc/export/html/_static/element.css

@@ -1225,6 +1225,7 @@ a.tree_item,
   padding-left: calc(var(--base-rhythm) * 2);
   font-size: var(--font-size-sm);
   line-height: 1.2;
+  padding-bottom: var(--base-gap);
 }
 
 .toc li {
@@ -1548,3 +1549,99 @@ sdoc-tabs.in_aside_panel sdoc-tab:hover {
 sdoc-tabs.in_aside_panel sdoc-tab[active] {
   background-color: var(--color-bg-main);
 }
+
+/* document_issues */
+
+.document_issues-banner {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin-bottom: var(--base-gap);
+  font-size: var(--font-size-sm);
+}
+
+.document_issues-toggler {
+  text-align: right;
+}
+
+.document_issues-banner_details {
+  display: block;
+  overflow: hidden;
+  color: var(--color-danger);
+  border: 1px solid;
+  border-radius: var(--requirement-border-radius);
+}
+
+.document_issues-banner_summary {
+  font-weight: 600;
+  position: relative;
+  color: var(--color-danger);
+  padding-inline: calc(2 * var(--base-rhythm));
+  padding-block: var(--base-rhythm);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+}
+
+.document_issues-banner_summary::before {
+  content: '▸';
+  margin-right: var(--base-rhythm);
+}
+
+[open] > .document_issues-banner_summary::before {
+  content: '▾';
+}
+
+.document_issues-banner_summary::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: currentColor;
+  opacity: 0.1;
+}
+
+.document_issues-banner_content {
+  position: relative;
+  color: var(--color-fg-contrast);
+  padding-inline: calc(2 * var(--base-rhythm));
+  padding-block: calc(1 * var(--base-rhythm));
+}
+
+.document_issues-banner ul {
+  margin: 0;
+  padding-inline-start: 20px;
+}
+
+.field_issue {
+  grid-column: 1 / -1;
+  position: relative;
+  color: var(--color-danger);
+  padding: var(--base-rhythm);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+}
+
+.field_issue-ribbon {
+  position: relative;
+  padding: calc(.5 * var(--base-rhythm)) var(--base-rhythm);
+  border-radius: calc(.5 * var(--base-rhythm));
+  border: 2px solid;
+}
+
+.field_issue-ribbon::before {
+  position: absolute;
+  content: '';
+  bottom: 100%;
+  left: var(--base-rhythm);
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid currentColor;
+}
+
+.field_issue-ribbon::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}

strictdoc/export/html/templates/components/issue/banner.jinja

@@ -0,0 +1,26 @@
+{% set issues_number = 2 %}
+
+<div class="document_issues-banner">
+  <details class="document_issues-banner_details">
+    <summary class="document_issues-banner_summary">
+      <div class="document_issues-banner_title">Document has
+        {% if issues_number is defined and issues_number != "0" and issues_number != 0 %}
+        {{ issues_number }}
+        {% endif %}
+      issues
+      </div>
+    </summary>
+    <div class="document_issues-banner_content">
+      <ul class="simple">
+        <li>
+          <a href="#field_issue_ID">Some issue</a>
+        </li>
+        <li>
+          <a href="#field_issue_ID">Other issue</a>
+        </li>
+      </ul>
+    </div>
+  </details>
+  {# todo JS: #}
+  <a href="#" class="document_issues-toggler"><b>Hide</b> issues in the document ▾</a>
+</div>

strictdoc/export/html/templates/components/issue/index.jinja

@@ -0,0 +1,12 @@
+{# For use: insert after field #}
+{#
+  {% with issue_field_name = 'field_name' %}
+    {% include "components/issue/index.jinja" %}
+  {% endwith %}
+#}
+
+<div id="field_issue_ID" class="field_issue">
+  <div class="field_issue-ribbon">
+    <b>Warning:</b> '{{ issue_field_name }}' field has issue: description in details
+  </div>
+</div>

strictdoc/export/html/templates/components/node_field/document_meta/index.jinja

@@ -17,6 +17,12 @@
         {%- include "components/field/index.jinja" -%}
       {%- endwith -%}
     </sdoc-meta-field>
+    {# FIXME: Task #1229 / Uncomment example when validation logic is implemented: #}
+    {#
+      {% with issue_field_name = 'meta' %}
+        {% include "components/issue/index.jinja" %}
+      {% endwith %}
+    #}
     {%- endif -%}
 
     {% set document_date_ = view_object.render_document_date() %}

strictdoc/export/html/templates/components/requirement/index.jinja

@@ -21,6 +21,12 @@
   {% set title_number = true %}
   {% set truncated_statement = false %}
   {% include "components/node_field/title/index.jinja" %}
+  {# FIXME: Task #1229 / Uncomment example when validation logic is implemented: #}
+  {#
+    {% with issue_field_name = 'title' %}
+      {% include "components/issue/index.jinja" %}
+    {% endwith %}
+  #}
   <sdoc-scope class="requirement_fields_group-secondary">
   {% include "components/node_field/meta/index.jinja" %}
   </sdoc-scope>

strictdoc/export/html/templates/screens/document/document/frame_document_content.jinja.html

@@ -3,6 +3,9 @@
         class="content"
         data-controller="anchor_controller"
       >
+        {# FIXME: Task #1229 / Uncomment when validation logic is implemented: #}
+        {# {% include "screens/document/document/frame_document_issues.jinja" %} #}
+
         {% include "screens/document/document/frame_document_config.jinja.html" %}
 
         {%- for node in view_object.document_content_iterator() %}

strictdoc/export/html/templates/screens/document/document/frame_document_issues.jinja

@@ -0,0 +1 @@
+{% include "components/issue/banner.jinja" %}