[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
parent
d6666cf209
commit
9a53f94b77
|
|
@ -70,7 +70,7 @@ class Posting extends Component
|
||||||
* @throws RedirectException
|
* @throws RedirectException
|
||||||
* @throws ServerException
|
* @throws ServerException
|
||||||
*/
|
*/
|
||||||
public function onAppendRightPostingBlock(Request $request, array &$res): bool
|
public function onAddMainRightPanelBlock(Request $request, array &$res): bool
|
||||||
{
|
{
|
||||||
if (\is_null($user = Common::user())) {
|
if (\is_null($user = Common::user())) {
|
||||||
return Event::next;
|
return Event::next;
|
||||||
|
|
@ -182,7 +182,6 @@ class Posting extends Component
|
||||||
throw new ClientException(_m('Invalid file size given'), previous: $e);
|
throw new ClientException(_m('Invalid file size given'), previous: $e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$res['post_form'] = $form->createView();
|
$res['post_form'] = $form->createView();
|
||||||
|
|
||||||
return Event::next;
|
return Event::next;
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,14 @@
|
||||||
{% block rightpanel %}
|
{% macro posting(form) %}
|
||||||
<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">
|
<section class="section-form">
|
||||||
{{ form_start(blocks['post_form']) }}
|
{{ form_start(form) }}
|
||||||
{{ form_errors(blocks['post_form']) }}
|
{{ form_errors(form) }}
|
||||||
{% if blocks['post_form'].in is defined %}
|
{% if form.in is defined %}
|
||||||
{{ form_row(blocks['post_form'].in) }}
|
{{ form_row(form.in) }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{{ form_row(blocks['post_form'].visibility) }}
|
{{ form_row(form.visibility) }}
|
||||||
{{ form_row(blocks['post_form'].content_type) }}
|
{{ form_row(form.content_type) }}
|
||||||
{{ form_row(blocks['post_form'].content) }}
|
{{ form_row(form.content) }}
|
||||||
{{ form_row(blocks['post_form'].attachments) }}
|
{{ form_row(form.attachments) }}
|
||||||
|
|
||||||
<details class="section-details-subtitle">
|
<details class="section-details-subtitle">
|
||||||
<summary class="details-summary-subtitle">
|
<summary class="details-summary-subtitle">
|
||||||
|
|
@ -51,21 +17,81 @@
|
||||||
</strong>
|
</strong>
|
||||||
</summary>
|
</summary>
|
||||||
<section class="section-form">
|
<section class="section-form">
|
||||||
{{ form_row(blocks['post_form'].language) }}
|
{{ form_row(form.language) }}
|
||||||
{{ form_row(blocks['post_form'].tag_use_canonical) }}
|
{{ form_row(form.tag_use_canonical) }}
|
||||||
</section>
|
</section>
|
||||||
</details>
|
</details>
|
||||||
{{ form_rest(blocks['post_form']) }}
|
{{ form_rest(form) }}
|
||||||
{{ form_end(blocks['post_form']) }}
|
{{ form_end(form) }}
|
||||||
</section>
|
</section>
|
||||||
</details>
|
{% endmacro %}
|
||||||
</section>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% set extra_blocks = get_right_panel_blocks({'path': app.request.get('_route'), 'request': app.request, 'vars': right_panel_vars | default }) %}
|
{% macro posting_section_vanilla(widget) %}
|
||||||
{% for block in extra_blocks %}
|
<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 }}
|
{{ 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 %}
|
{% endfor %}
|
||||||
</section>
|
</section>
|
||||||
</aside>
|
</aside>
|
||||||
{% endblock rightpanel %}
|
{% endblock rightpanel %}
|
||||||
|
|
|
||||||
|
|
@ -120,7 +120,7 @@ class Search extends Component
|
||||||
*
|
*
|
||||||
* @throws RedirectException
|
* @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)]);
|
$elements[] = Formatting::twigRenderFile('cards/search/view.html.twig', ['search' => self::searchForm($request)]);
|
||||||
return Event::next;
|
return Event::next;
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ tab.url }}" title="{{ tab.active ? ('Hide ' ~ tab['icon']) : ('Show ' ~ tab['icon']) | trans }}">
|
<a href="{{ tab.url }}" title="{{ tab.active ? ('Hide ' ~ tab['icon']) : ('Show ' ~ tab['icon']) | trans }}">
|
||||||
{{ tab['icon'] }}
|
{{ 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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,28 @@
|
||||||
mask-image: url(../../icons/delete.svg);
|
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 {
|
.embed {
|
||||||
border: unset;
|
border: unset;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -70,11 +92,6 @@
|
||||||
font-size: .937rem;
|
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 + * {
|
.feed-actions-details[open] > .feed-actions-details-dropdown, .note-actions-extra-details[open] > summary + * {
|
||||||
background: var(--background-card);
|
background: var(--background-card);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
|
|
|
||||||
7
public/assets/default_theme/icons/eye-closed.svg
Normal file
7
public/assets/default_theme/icons/eye-closed.svg
Normal 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 |
8
public/assets/default_theme/icons/eye-opened.svg
Normal file
8
public/assets/default_theme/icons/eye-opened.svg
Normal 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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -78,7 +78,7 @@ class Extension extends AbstractExtension
|
||||||
new TwigFunction('mention', [Runtime::class, 'mention']),
|
new TwigFunction('mention', [Runtime::class, 'mention']),
|
||||||
new TwigFunction('open_details', [Runtime::class, 'openDetails']),
|
new TwigFunction('open_details', [Runtime::class, 'openDetails']),
|
||||||
new TwigFunction('show_stylesheets', [Runtime::class, 'getShowStylesheets']),
|
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']),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -88,10 +88,29 @@ class Runtime implements RuntimeExtensionInterface, EventSubscriberInterface
|
||||||
return $extra_actions;
|
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 = [];
|
$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]);
|
Event::handle('AppendRightPanelBlock', [$this->request, $vars, &$blocks]);
|
||||||
|
break;
|
||||||
|
}
|
||||||
return $blocks;
|
return $blocks;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user