Merge pull request #2175 from strictdoc-project/mettta/_add_narrative_node_view

UI: add narrative node view

Author: stanislaw

docs/strictdoc_02_feature_map.sdoc

@@ -7,8 +7,7 @@ DATE: @GIT_COMMIT_DATETIME
 REQ_PREFIX: SDOC-FEAT-
 OPTIONS:
   ENABLE_MID: True
-  REQUIREMENT_STYLE: Inline
-  REQUIREMENT_IN_TOC: False
+  REQUIREMENT_STYLE: Narrative
 
 [GRAMMAR]
 ELEMENTS:

strictdoc/backend/sdoc/grammar/grammar.py

@@ -119,7 +119,7 @@
 ;
 
 RequirementStyleChoice[noskipws]:
-  'Inline' | 'Simple' | 'Table' | 'Zebra'
+  'Inline' | 'Simple' | 'Narrative' | 'Table' | 'Zebra'
 ;
 
 RequirementHasTitleChoice[noskipws]:

strictdoc/backend/sdoc/models/document_config.py

@@ -95,6 +95,8 @@ def get_requirement_style_mode(self) -> str:
             "Simple",
         ):
             return "simple"
+        if self.requirement_style == "Narrative":
+            return "narrative"
         if self.requirement_style == "Table":
             return "table"
         if self.requirement_style == "Zebra":

strictdoc/export/html/_static/base.css

@@ -120,6 +120,10 @@ body {
 
 * { box-sizing: border-box; }
 
+sdoc-scope {
+  display: contents;
+}
+
 /* scrollbar */
 
 * {

strictdoc/export/html/_static/node.css

@@ -12,14 +12,11 @@ sdoc-node[show-node-type-name] sdoc-requirement {
 }
 
 sdoc-node[show-node-type-name]::before {
-  /* content: '[' attr(show-node-type-name) ']'; */
   content: attr(show-node-type-name);
   position: absolute;
   top: calc(2 * var(--base-rhythm));
   right: calc(4 * var(--base-rhythm));
-  z-index: -1;
 
-  /* font-size: var(--font-size-xxsm); */
   font-size: 10px;
   font-family: var(--code-font-family);
   font-weight: 600;
@@ -31,11 +28,14 @@ sdoc-node[show-node-type-name]::before {
   border: var(--requirement-border-width, 1px) solid var(--requirement-border-color, #bfbfbf);
 
   color: var(--requirement-label-color);
-  /* background-color: var(--requirement-bg-dark-color); */
   background-color: var(--color-bg-contrast);
+}
 
-  /* color: var(--color-bg-contrast);
-  background-color: var(--requirement-border-color); */
+sdoc-node[node-view="narrative"][show-node-type-name]::before {
+  top: calc(1 * var(--base-rhythm));
+  right: calc(1 * var(--base-rhythm));
+  padding: calc(0.5 * var(--base-rhythm));
+  border: var(--base-border);
 }
 
 /* sdoc-node */

strictdoc/export/html/_static/requirement.css

@@ -241,6 +241,92 @@ sdoc-requirement-field-label {
   padding-bottom: 0;
 }
 
+/* requirement-view="narrative" */
+
+sdoc-requirement[requirement-view="narrative"] {
+  display: flex;
+  flex-direction: column;
+  background: none;
+  background-color: transparent;
+  border: none;
+}
+
+[requirement-view="narrative"] sdoc-requirement-title {
+  border: none;
+  outline: none;
+  background: none;
+  background-color: transparent;
+  padding: 0;
+  margin-bottom: var(--base-padding);
+  grid-column: 1 / -1;
+}
+
+[requirement-view="narrative"] sdoc-requirement-field {
+  padding: 0;
+}
+
+[requirement-view="narrative"] sdoc-requirement-field[data-field-type="singleline"] {
+  /* to make it a single FLEX line */
+  display: flex;
+  font-size: var(--font-size-sm);
+  line-height: calc(var(--font-size-sm) * 1.5);
+}
+
+[requirement-view="narrative"] sdoc-requirement-field-label {
+  /* show them as pseudo-elements: sdoc-requirement-field::before */
+  display: none;
+}
+
+[requirement-view="narrative"] sdoc-requirement-field::before {
+  flex-grow: 1;
+  content: attr(data-field-label) ':';
+  font-family: var(--code-font-family);
+  font-weight: 500;
+  font-size: var(--font-size-xsm);
+  line-height: inherit;
+  text-transform: uppercase;
+  font-variant: small-caps;
+  color: var(--requirement-label-color);
+  word-break: normal;
+  display: flex;
+  padding-right: var(--base-rhythm);
+  /*
+    affects field 'pseudo' labels in all fields;
+    make them lighter:
+  */
+  opacity: 0.8;
+}
+
+[requirement-view="narrative"] .requirement_fields_group-secondary sdoc-requirement-field > * {
+  /*
+    affects field content in the secondary scope only;
+    make them lighter:
+  */
+  opacity: 0.6;
+}
+
+[requirement-view="narrative"] .requirement__parent-uid,
+[requirement-view="narrative"] .requirement__child-uid {
+  /*
+    affects UID in links;
+    make them lighter:
+  */
+  font-weight: normal;
+}
+
+[requirement-view="narrative"] .requirement_fields_group-primary {
+  display: block;
+  order: 99; /* to push to the end */
+  margin-top: var(--base-rhythm);
+  border-top: var(--base-border);
+  padding-top: var(--base-padding);
+}
+
+[requirement-view="narrative"] .requirement_fields_group-primary sdoc-requirement-field {
+  margin-bottom: var(--base-padding);
+  color: var(--color-fg-contrast);
+}
+
 /* section */
 
 sdoc-section,

strictdoc/export/html/_static/requirement__temporary.css

@@ -11,7 +11,7 @@
 /* requirement: parent / child / file */
 
 ul.requirement__link {
-  font-size: .85em;
+  font-size: .85rem;
   line-height: 1.4;
   list-style: none;
   padding: 0;

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

@@ -31,6 +31,9 @@
       {%- endif %}
     {%- endif %}
     node-role="{{ node_type }}"
+    {% if sdoc_entity.is_requirement %}
+      node-view="{{ sdoc_entity.get_requirement_style_mode() }}"
+    {%- endif -%}
     {%- if node_type_string is not none and node_type_string != 'TEXT' %}
       show-node-type-name="{{ node_type_string }}"
     {%- endif %}

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

@@ -3,7 +3,7 @@
     {%- set requirement_file_links = view_object.traceability_index.get_requirement_file_links(sdoc_entity) %}
     {%- if requirement_file_links %}
       <sdoc-requirement-field-label>file relations:</sdoc-requirement-field-label>
-      <sdoc-requirement-field data-field-label="files">
+      <sdoc-requirement-field data-field-label="file relations">
         <ul class="requirement__link">
           {%- for link, markers in requirement_file_links %}
             {%- for marker in markers %}

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

@@ -21,12 +21,18 @@
   {% set title_number = true %}
   {% set truncated_statement = false %}
   {% include "components/node_field/title/index.jinja" %}
+  <sdoc-scope class="requirement_fields_group-secondary">
   {% include "components/node_field/meta/index.jinja" %}
+  </sdoc-scope>
+  <sdoc-scope class="requirement_fields_group-primary">
   {% include "components/node_field/statement/index.jinja" %}
   {% include "components/node_field/rationale/index.jinja" %}
   {% include "components/node_field/comments/index.jinja" %}
   {% include "components/node_field/multiline/index.jinja" %}
+  </sdoc-scope>
+  <sdoc-scope class="requirement_fields_group-secondary">
   {% include "components/node_field/links/index.jinja" %}
   {% include "components/node_field/files/index.jinja" %}
+  </sdoc-scope>
 
 </sdoc-requirement>