Skip to content

export/html: node_controls: Updating the layout and icons for the "Add node" menu #1663

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mettta merged 3 commits into from
Feb 24, 2024
Merged

export/html: node_controls: Updating the layout and icons for the "Add node" menu #1663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c1d6839
export/html: fix z-index for copy-to-clipboard so that it does not ov…
mettta Feb 24, 2024
51c0180
export/html: node_controls: Updating the layout of the "Add node" menu
mettta Feb 24, 2024
8aee668
export/html: node_controls: 'add node' icons
mettta Feb 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions strictdoc/export/html/_static/element.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ sdoc-field-content {

.copy_to_clipboard-cover {
position: absolute;
z-index: 100;
z-index: 98;
top: 0;
bottom: 0;
left: 0;
Expand Down Expand Up @@ -929,8 +929,14 @@ sdoc-menu menu {
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
border-radius: var(--base-rhythm);
font-weight: 500;
display: flex;
flex-direction: column;

/* display: flex;
flex-direction: column; */
display: grid;
grid-template-columns: minmax(min-content, max-content)
minmax(min-content, max-content)
minmax(min-content, max-content)
minmax(min-content, max-content);
row-gap: calc(var(--base-rhythm)/2);
}

Expand All @@ -939,7 +945,13 @@ sdoc-menu menu[aria-hidden="true"] {
}

sdoc-menu menu[aria-hidden="false"] {
display: flex;
display: grid;
}

sdoc-menu li:first-child {
/* "Add node" */
grid-column: 1 / -1;
border-bottom: var(--base-border);
}

sdoc-menu menu a {
Expand Down
6 changes: 6 additions & 0 deletions strictdoc/export/html/templates/_res/svg_ico16_add_above.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<svg class="svg_icon" width="16px" height="16px" viewBox="0 0 16 16">
<path d="M3,3.5 C2,3.5 1,4 1,5.5 L1,6.5 C1,7.5 2,8.5 3,8.5 L13,8.5 C14,8.5 15,7.5 15,6.5 L15,5.5 C15,4 14,3.5 13,3.5"/>
<line x1="5.5" y1="3.5" x2="10.5" y2="3.5"></line>
<line x1="8" y1="1" x2="8" y2="6"></line>
<path d="M3,15 L13,15 C14.5,15 15,14 15,13 C15,12 14.5,11 13,11 L3,11 C1.5,11 1,12 1,13 C1,14 1.5,15 3,15 Z"/>
</svg>
6 changes: 6 additions & 0 deletions strictdoc/export/html/templates/_res/svg_ico16_add_below.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<svg class="svg_icon" width="16px" height="16px" viewBox="0 0 16 16">
<path d="M3,12.5 C2,12.5 1,12 1,10.5 L1,9.5 C1,8.5 2,7.5 3,7.5 L13,7.5 C14,7.5 15,8.5 15,9.5 L15,10.5 C15,12 14,12.5 13,12.5"/>
<line x1="5.5" y1="12.5" x2="10.5" y2="12.5"></line>
<line x1="8" y1="15" x2="8" y2="10"></line>
<path d="M3,1 C3,1 6.5,1 13,1 C14.5,1 15,2 15,3 C15,4 14.5,5 13,5 L3,5 C1.5,5 1,4 1,3 C1,2 1.5,1 3,1 Z"/>
</svg>
7 changes: 7 additions & 0 deletions strictdoc/export/html/templates/_res/svg_ico16_add_child.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<svg class="svg_icon" width="16px" height="16px" viewBox="0 0 16 16">
<line x1="2" y1="11" x2="7" y2="11" ></line>
<line x1="4.5" y1="13.5" x2="4.5" y2="8.5" ></line>
<path d="M3,1 C3,1 6.5,1 13,1 C14.5,1 15,2 15,3 C15,4 14.5,5 13,5 L3,5 C1.5,5 1,4 1,3 C1,2 1.5,1 3,1 Z"/>
<path d="M12,11 C12,11 12.5,11 13,11 C14.5,11 15,12 15,13 C15,14 14.5,15 13,15 L12,15 C10.5,15 10,14 10,13 C10,12 10.5,11 12,11 Z"/>
<line x1="12.5" y1="10.5" x2="12.5" y2="5.5"></line>
</svg>
26 changes: 13 additions & 13 deletions strictdoc/export/html/templates/components/node/node_controls/index.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,8 @@
js-dropdown-menu-list
aria-hidden="true"
>

<li class="viewtype__menu_header">Add section</li>
<li class="viewtype__menu_header">Add node:</li>
<li class="viewtype__menu_header">Section:</li>

{# Add first document Section, on CONFIG#}
{%- if sdoc_entity.get_type_string() == 'document' -%}
Expand All @@ -108,9 +108,9 @@
href="/actions/document/new_section?reference_mid={{ sdoc_entity.reserved_mid }}&whereto=after"
data-turbo-action="replace"
data-turbo="true"
title="Add child Section"
title="Add first child Section"
data-testid="node-add-section-first-action"
>+S➘ Add first Section</a>
>{% include "_res/svg_ico16_add_child.jinja" %}</a>
</li>
{%- endif -%}

Expand All @@ -127,7 +127,7 @@
data-turbo="true"
title="Add Section above"
data-testid="node-add-section-above-action"
>+S⬆ Add Section above</a>
>{% include "_res/svg_ico16_add_above.jinja" %}</a>
</li>
{%- endif -%}

Expand All @@ -145,7 +145,7 @@
data-turbo="true"
title="Add child Section"
data-testid="node-add-section-child-action"
>+S➘ Add child Section</a>
>{% include "_res/svg_ico16_add_child.jinja" %}</a>
</li>
{%- endif -%}

Expand All @@ -162,11 +162,11 @@
data-turbo="true"
title="Add Section below"
data-testid="node-add-section-below-action"
>+S⬇ Add Section below</a>
>{% include "_res/svg_ico16_add_below.jinja" %}</a>
</li>
{%- endif -%}

<li class="viewtype__menu_header">Add requirement</li>
<li class="viewtype__menu_header">Requirement:</li>

{# Add first document Section, on CONFIG#}
{%- if sdoc_entity.get_type_string() == 'document' -%}
Expand All @@ -175,9 +175,9 @@
href="/actions/document/new_requirement?reference_mid={{ sdoc_entity.reserved_mid }}&whereto=after"
data-turbo-action="replace"
data-turbo="true"
title="Add child Requirement"
title="Add first child Requirement"
data-testid="node-add-requirement-first-action"
>+R➘ Add first Requirement</a>
>{% include "_res/svg_ico16_add_child.jinja" %}</a>
</li>
{%- endif -%}

Expand All @@ -194,7 +194,7 @@
data-turbo="true"
title="Add Requirement above"
data-testid="node-add-requirement-above-action"
>+R⬆ Add Requirement above</a>
>{% include "_res/svg_ico16_add_above.jinja" %}</a>
</li>
{%- endif -%}

Expand All @@ -212,7 +212,7 @@
data-turbo="true"
title="Add child Requirement"
data-testid="node-add-requirement-child-action"
>+R➘ Add child Requirement</a>
>{% include "_res/svg_ico16_add_child.jinja" %}</a>
</li>
{%- endif -%}

Expand All @@ -229,7 +229,7 @@
data-turbo="true"
title="Add Requirement below"
data-testid="node-add-requirement-below-action"
>+R⬇ Add Requirement below</a>
>{% include "_res/svg_ico16_add_below.jinja" %}</a>
</li>
{%- endif -%}

Expand Down