[TWIG] Replaced getRightPanelBlocks with addRightPanelBlock, provides more control on block placement

[COMPONENTS][RightPanel] Refactored template, improved clarity, and added Posting form related macros

[PLUGINS][NoteTypeFeedFilter] Removed icons from template, added them through CSS to further improve performance
This commit is contained in:
Eliseu Amaro 2022-02-07 20:25:37 +00:00
parent d6666cf209
commit 9a53f94b77
No known key found for this signature in database
GPG Key ID: 96DA09D4B97BC2D5
11 changed files with 155 additions and 100 deletions

View File

@ -70,7 +70,7 @@ class Posting extends Component
* @throws RedirectException
* @throws ServerException
*/
public function onAppendRightPostingBlock(Request $request, array &$res): bool
public function onAddMainRightPanelBlock(Request $request, array &$res): bool
{
if (\is_null($user = Common::user())) {
return Event::next;
@ -182,7 +182,6 @@ class Posting extends Component
throw new ClientException(_m('Invalid file size given'), previous: $e);
}
}
$res['post_form'] = $form->createView();
return Event::next;

View File

@ -1,71 +1,97 @@
{% block rightpanel %}
<label class="panel-right-icon" for="toggle-panel-right" tabindex="-1">{{ icon('chevron-left', 'icon icon-right') | raw }}</label>
<a id="anchor-right-panel" class="anchor-hidden" tabindex="0" title="{{ 'Press tab followed by a space to access right panel' | trans }}"></a>
<input type="checkbox" id="toggle-panel-right" tabindex="0" title="{{ 'Open right panel' | trans }}" {% if app.request.get('_route') == 'conversation_reply_to' %}checked{% endif %}>
<aside class="section-panel section-panel-right">
<section class="panel-content accessibility-target">
{% set prepend_right_panel = handle_event('PrependRightPanel', request) %}
{% for widget in prepend_right_panel %}
{{ widget | raw }}
{% endfor %}
{% set blocks = handle_event('AppendRightPostingBlock', request) %}
{% if blocks['post_form'] is defined %}
<section class="frame-section" title="{{ 'Create a new note.' | trans }}">
<details class="section-details-title" open="open" title="{{ 'Expand if you want to access more options.' | trans }}">
<summary class="details-summary-title">
<span>
{% if app.request.get('_route') == 'conversation_reply_to' %}
{{ "Reply to note" | trans }}
{% else %}
{{ "Create a note" | trans }}
{% endif %}
</span>
</summary>
{% if app.request.get('_route') == 'conversation_reply_to' %}
<section class="frame-section-padding">
{% set prepend_posting_form = handle_event('PrependPostingForm', request) %}
{% for widget in prepend_posting_form %}
{{ widget | raw }}
{% endfor %}
</section>
{% endif %}
<section class="section-form">
{{ form_start(blocks['post_form']) }}
{{ form_errors(blocks['post_form']) }}
{% if blocks['post_form'].in is defined %}
{{ form_row(blocks['post_form'].in) }}
{% endif %}
{{ form_row(blocks['post_form'].visibility) }}
{{ form_row(blocks['post_form'].content_type) }}
{{ form_row(blocks['post_form'].content) }}
{{ form_row(blocks['post_form'].attachments) }}
<details class="section-details-subtitle">
<summary class="details-summary-subtitle">
<strong>
{{ "Additional options" | trans }}
</strong>
</summary>
<section class="section-form">
{{ form_row(blocks['post_form'].language) }}
{{ form_row(blocks['post_form'].tag_use_canonical) }}
</section>
</details>
{{ form_rest(blocks['post_form']) }}
{{ form_end(blocks['post_form']) }}
</section>
</details>
</section>
{% macro posting(form) %}
<section class="section-form">
{{ form_start(form) }}
{{ form_errors(form) }}
{% if form.in is defined %}
{{ form_row(form.in) }}
{% endif %}
{{ form_row(form.visibility) }}
{{ form_row(form.content_type) }}
{{ form_row(form.content) }}
{{ form_row(form.attachments) }}
{% set extra_blocks = get_right_panel_blocks({'path': app.request.get('_route'), 'request': app.request, 'vars': right_panel_vars | default }) %}
{% for block in extra_blocks %}
{{ block | raw }}
{% endfor %}
<details class="section-details-subtitle">
<summary class="details-summary-subtitle">
<strong>
{{ "Additional options" | trans }}
</strong>
</summary>
<section class="section-form">
{{ form_row(form.language) }}
{{ form_row(form.tag_use_canonical) }}
</section>
</details>
{{ form_rest(form) }}
{{ form_end(form) }}
</section>
</aside>
{% endmacro %}
{% macro posting_section_vanilla(widget) %}
<section class="frame-section" title="{{ 'Create a new note.' | trans }}">
<details class="section-details-title" open="open"
title="{{ 'Expand if you want to access more options.' | trans }}">
<summary class="details-summary-title">
<span>
{{ "Create a note" | trans }}
</span>
</summary>
{% import _self as forms %}
{{ forms.posting(widget) }}
</details>
</section>
{% endmacro %}
{% macro posting_section_reply(widget, extra) %}
<section class="frame-section" title="{{ 'Create a new note.' | trans }}">
<details class="section-details-title" open="open"
title="{{ 'Expand if you want to access more options.' | trans }}">
<summary class="details-summary-title">
<span>
{{ "Reply to note" | trans }}
</span>
</summary>
{% for block in extra %}
<section class="frame-section-padding">
{{ block | raw }}
</section>
{% endfor %}
{% import _self as forms %}
{{ forms.posting(widget) }}
</details>
</section>
{% endmacro %}
{% block rightpanel %}
{% import _self as this %}
<label class="panel-right-icon" for="toggle-panel-right"
tabindex="-1">{{ icon('chevron-left', 'icon icon-right') | raw }}</label>
<a id="anchor-right-panel" class="anchor-hidden" tabindex="0"
title="{{ 'Press tab followed by a space to access right panel' | trans }}"></a>
<input type="checkbox" id="toggle-panel-right" tabindex="0" title="{{ 'Open right panel' | trans }}"
{% if app.request.get('_route') == 'conversation_reply_to' %}checked{% endif %}>
<aside class="section-panel section-panel-right">
{% set var_list = {'path': app.request.get('_route'), 'request': app.request, 'vars': right_panel_vars | default } %}
{% set blocks = add_right_panel_block('prepend', var_list) %}
{% set blocks = blocks|merge(add_right_panel_block('main', var_list)) %}
{% set blocks = blocks|merge(add_right_panel_block('append', var_list)) %}
<section class="panel-content accessibility-target">
{% for widget in blocks %}
{% if widget is iterable and widget.vars.id == 'post_note' %}
{% if app.request.get('_route') == 'conversation_reply_to' %}
{% set extra = handle_event('PrependPostingForm', request) %}
{{ this.posting_section_reply(widget, extra) }}
{% else %}
{{ this.posting_section_vanilla(widget) }}
{% endif %}
{% else %}
{{ widget | raw }}
{% endif %}
{% endfor %}
</section>
</aside>
{% endblock rightpanel %}

View File

@ -120,7 +120,7 @@ class Search extends Component
*
* @throws RedirectException
*/
public function onPrependRightPanel(Request $request, array &$elements)
public function onPrependRightPanelBlock(Request $request, array &$elements): bool
{
$elements[] = Formatting::twigRenderFile('cards/search/view.html.twig', ['search' => self::searchForm($request)]);
return Event::next;

View File

@ -2,7 +2,7 @@
<li>
<a href="{{ tab.url }}" title="{{ tab.active ? ('Hide ' ~ tab['icon']) : ('Show ' ~ tab['icon']) | trans }}">
{{ tab['icon'] }}
<span>{{ icon(tab.active ? 'eye-opened' : 'eye-closed', 'icon') | raw }}</span>
<span class="icon {{ tab.active ? 'icon-eye-opened' : 'icon-eye-closed' }}"></span>
</a>
</li>
{% endfor %}

View File

@ -26,6 +26,28 @@
mask-image: url(../../icons/delete.svg);
}
.icon-eye-opened {
background-color: var(--foreground);
-moz-mask-image: url(../../icons/eye-opened.svg);
-o-mask-image: url(../../icons/eye-opened.svg);
-webkit-mask-image: url(../../icons/eye-opened.svg);
mask-image: url(../../icons/eye-opened.svg);
display: inline-flex;
height: 1em;
width: 1em;
}
.icon-eye-closed {
background-color: var(--foreground);
-moz-mask-image: url(../../icons/eye-closed.svg);
-o-mask-image: url(../../icons/eye-closed.svg);
-webkit-mask-image: url(../../icons/eye-closed.svg);
mask-image: url(../../icons/eye-closed.svg);
display: inline-flex;
height: 1em;
width: 1em;
}
.embed {
border: unset;
display: flex;
@ -70,11 +92,6 @@
font-size: .937rem;
}
.feed-actions-details[open] > .feed-actions-details-dropdown a span {
float: right;
margin-left: 4px;
}
.feed-actions-details[open] > .feed-actions-details-dropdown, .note-actions-extra-details[open] > summary + * {
background: var(--background-card);
border: 1px solid var(--border);

View File

@ -0,0 +1,7 @@
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32" width="100%" height="100%">
<path fill="currentColor" d="M8.052 5.837A9.715 9.715 0 0112 5c2.955 0 5.309 1.315 7.06 2.864 1.756 1.553 2.866 3.307 3.307 4.08a.11.11 0 01.016.055.122.122 0 01-.017.06 16.766 16.766 0 01-1.53 2.218.75.75 0 101.163.946 18.253 18.253 0 001.67-2.42 1.607 1.607 0 00.001-1.602c-.485-.85-1.69-2.757-3.616-4.46C18.124 5.034 15.432 3.5 12 3.5c-1.695 0-3.215.374-4.552.963a.75.75 0 00.604 1.373z"></path><path fill-rule="evenodd" d="M19.166 17.987C17.328 19.38 14.933 20.5 12 20.5c-3.432 0-6.125-1.534-8.054-3.24C2.02 15.556.814 13.648.33 12.798a1.606 1.606 0 01.001-1.6A18.305 18.305 0 013.648 7.01L1.317 5.362a.75.75 0 11.866-1.224l20.5 14.5a.75.75 0 11-.866 1.224l-2.651-1.875zM4.902 7.898c-1.73 1.541-2.828 3.273-3.268 4.044a.118.118 0 00-.017.059c0 .015.003.034.016.055.441.774 1.551 2.527 3.307 4.08C6.69 17.685 9.045 19 12 19c2.334 0 4.29-.82 5.874-1.927l-3.516-2.487a3.5 3.5 0 01-5.583-3.949L4.902 7.899z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,8 @@
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="100%" height="100%">
<path fill="currentColor" d="M15.5 12a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0z"></path>
<path fill="currentColor" fill-rule="evenodd" d="M12 3.5c-3.432 0-6.125 1.534-8.054 3.24C2.02 8.445.814 10.352.33 11.202a1.6 1.6 0 000 1.598c.484.85 1.69 2.758 3.616 4.46C5.876 18.966 8.568 20.5 12 20.5c3.432 0 6.125-1.534 8.054-3.24 1.926-1.704 3.132-3.611 3.616-4.461a1.6 1.6 0 000-1.598c-.484-.85-1.69-2.757-3.616-4.46C18.124 5.034 15.432 3.5 12 3.5zM1.633 11.945c.441-.774 1.551-2.528 3.307-4.08C6.69 6.314 9.045 5 12 5c2.955 0 5.309 1.315 7.06 2.864 1.756 1.553 2.866 3.307 3.307 4.08a.111.111 0 01.017.056.111.111 0 01-.017.056c-.441.774-1.551 2.527-3.307 4.08C17.31 17.685 14.955 19 12 19c-2.955 0-5.309-1.315-7.06-2.864-1.756-1.553-2.866-3.306-3.307-4.08A.11.11 0 011.616 12a.11.11 0 01.017-.055z"></path>
</svg>

After

Width:  |  Height:  |  Size: 969 B

View File

@ -1,10 +0,0 @@
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}"
viewBox="0 0 24 24"
width="24"
height="24">
<path d="M8.052 5.837A9.715 9.715 0 0112 5c2.955 0 5.309 1.315 7.06 2.864 1.756 1.553 2.866 3.307 3.307 4.08a.11.11 0 01.016.055.122.122 0 01-.017.06 16.766 16.766 0 01-1.53 2.218.75.75 0 101.163.946 18.253 18.253 0 001.67-2.42 1.607 1.607 0 00.001-1.602c-.485-.85-1.69-2.757-3.616-4.46C18.124 5.034 15.432 3.5 12 3.5c-1.695 0-3.215.374-4.552.963a.75.75 0 00.604 1.373z"></path><path fill-rule="evenodd" d="M19.166 17.987C17.328 19.38 14.933 20.5 12 20.5c-3.432 0-6.125-1.534-8.054-3.24C2.02 15.556.814 13.648.33 12.798a1.606 1.606 0 01.001-1.6A18.305 18.305 0 013.648 7.01L1.317 5.362a.75.75 0 11.866-1.224l20.5 14.5a.75.75 0 11-.866 1.224l-2.651-1.875zM4.902 7.898c-1.73 1.541-2.828 3.273-3.268 4.044a.118.118 0 00-.017.059c0 .015.003.034.016.055.441.774 1.551 2.527 3.307 4.08C6.69 17.685 9.045 19 12 19c2.334 0 4.29-.82 5.874-1.927l-3.516-2.487a3.5 3.5 0 01-5.583-3.949L4.902 7.899z"></path>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,11 +0,0 @@
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}"
viewBox="0 0 24 24"
width="24"
height="24">
<path d="M15.5 12a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0z"></path>
<path fill-rule="evenodd" d="M12 3.5c-3.432 0-6.125 1.534-8.054 3.24C2.02 8.445.814 10.352.33 11.202a1.6 1.6 0 000 1.598c.484.85 1.69 2.758 3.616 4.46C5.876 18.966 8.568 20.5 12 20.5c3.432 0 6.125-1.534 8.054-3.24 1.926-1.704 3.132-3.611 3.616-4.461a1.6 1.6 0 000-1.598c-.484-.85-1.69-2.757-3.616-4.46C18.124 5.034 15.432 3.5 12 3.5zM1.633 11.945c.441-.774 1.551-2.528 3.307-4.08C6.69 6.314 9.045 5 12 5c2.955 0 5.309 1.315 7.06 2.864 1.756 1.553 2.866 3.307 3.307 4.08a.111.111 0 01.017.056.111.111 0 01-.017.056c-.441.774-1.551 2.527-3.307 4.08C17.31 17.685 14.955 19 12 19c-2.955 0-5.309-1.315-7.06-2.864-1.756-1.553-2.866-3.306-3.307-4.08A.11.11 0 011.616 12a.11.11 0 01.017-.055z"></path>
</svg>

Before

Width:  |  Height:  |  Size: 976 B

View File

@ -78,7 +78,7 @@ class Extension extends AbstractExtension
new TwigFunction('mention', [Runtime::class, 'mention']),
new TwigFunction('open_details', [Runtime::class, 'openDetails']),
new TwigFunction('show_stylesheets', [Runtime::class, 'getShowStylesheets']),
new TwigFunction('get_right_panel_blocks', [Runtime::class, 'getRightPanelBlocks']),
new TwigFunction('add_right_panel_block', [Runtime::class, 'addRightPanelBlock']),
];
}
}

View File

@ -88,10 +88,29 @@ class Runtime implements RuntimeExtensionInterface, EventSubscriberInterface
return $extra_actions;
}
public function getRightPanelBlocks($vars)
/**
* Provides an easy way to add template blocks to the right panel, features more granular control over
* appendage positioning, through the $location parameter.
*
* @param string $location where it should be added, available locations: 'prepend', 'main', 'append'
* @param array $vars contains additional context information to be used by plugins (ex. WebMonetization)
*
* @return array contains all blocks to be added to the right panel
*/
public function addRightPanelBlock(string $location, array $vars): array
{
$blocks = [];
Event::handle('AppendRightPanelBlock', [$this->request, $vars, &$blocks]);
switch ($location) {
case 'prepend':
Event::handle('PrependRightPanelBlock', [$this->request, &$blocks]);
break;
case 'main':
Event::handle('AddMainRightPanelBlock', [$this->request, &$blocks]);
break;
case 'append':
Event::handle('AppendRightPanelBlock', [$this->request, $vars, &$blocks]);
break;
}
return $blocks;
}