From 9a53f94b773c2e15bff8e272f41e7459b7d4e4e3 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Mon, 7 Feb 2022 20:25:37 +0000 Subject: [PATCH] [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 --- components/Posting/Posting.php | 3 +- .../templates/right_panel/view.html.twig | 160 ++++++++++-------- components/Search/Search.php | 2 +- .../NoteTypeFeedFilter/tabs.html.twig | 2 +- .../assets/default_theme/css/pages/feeds.css | 27 ++- .../assets/default_theme/icons/eye-closed.svg | 7 + .../assets/default_theme/icons/eye-opened.svg | 8 + public/assets/icons/eye-closed.svg.twig | 10 -- public/assets/icons/eye-opened.svg.twig | 11 -- src/Twig/Extension.php | 2 +- src/Twig/Runtime.php | 23 ++- 11 files changed, 155 insertions(+), 100 deletions(-) create mode 100644 public/assets/default_theme/icons/eye-closed.svg create mode 100644 public/assets/default_theme/icons/eye-opened.svg delete mode 100644 public/assets/icons/eye-closed.svg.twig delete mode 100644 public/assets/icons/eye-opened.svg.twig diff --git a/components/Posting/Posting.php b/components/Posting/Posting.php index d0fff9ec59..1b511db35c 100644 --- a/components/Posting/Posting.php +++ b/components/Posting/Posting.php @@ -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; diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig index 3660c783fa..e125fb72cd 100644 --- a/components/RightPanel/templates/right_panel/view.html.twig +++ b/components/RightPanel/templates/right_panel/view.html.twig @@ -1,71 +1,97 @@ -{% block rightpanel %} - - - - - +{% endmacro %} + +{% macro posting_section_vanilla(widget) %} +
+
+ + + {{ "Create a note" | trans }} + + + + {% import _self as forms %} + {{ forms.posting(widget) }} +
+
+{% endmacro %} + +{% macro posting_section_reply(widget, extra) %} +
+
+ + + {{ "Reply to note" | trans }} + + + + {% for block in extra %} +
+ {{ block | raw }} +
+ {% endfor %} + + {% import _self as forms %} + {{ forms.posting(widget) }} +
+
+{% endmacro %} + +{% block rightpanel %} + {% import _self as this %} + + + + + {% endblock rightpanel %} diff --git a/components/Search/Search.php b/components/Search/Search.php index 872bcb45da..9eeb5da342 100644 --- a/components/Search/Search.php +++ b/components/Search/Search.php @@ -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; diff --git a/plugins/NoteTypeFeedFilter/templates/NoteTypeFeedFilter/tabs.html.twig b/plugins/NoteTypeFeedFilter/templates/NoteTypeFeedFilter/tabs.html.twig index 03eb4f26b1..c4035b6a30 100644 --- a/plugins/NoteTypeFeedFilter/templates/NoteTypeFeedFilter/tabs.html.twig +++ b/plugins/NoteTypeFeedFilter/templates/NoteTypeFeedFilter/tabs.html.twig @@ -2,7 +2,7 @@
  • {{ tab['icon'] }} - {{ icon(tab.active ? 'eye-opened' : 'eye-closed', 'icon') | raw }} +
    • {% endfor %} diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css index 9120a8f66a..919481bb0a 100644 --- a/public/assets/default_theme/css/pages/feeds.css +++ b/public/assets/default_theme/css/pages/feeds.css @@ -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); diff --git a/public/assets/default_theme/icons/eye-closed.svg b/public/assets/default_theme/icons/eye-closed.svg new file mode 100644 index 0000000000..e236270fc2 --- /dev/null +++ b/public/assets/default_theme/icons/eye-closed.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/public/assets/default_theme/icons/eye-opened.svg b/public/assets/default_theme/icons/eye-opened.svg new file mode 100644 index 0000000000..cba795047a --- /dev/null +++ b/public/assets/default_theme/icons/eye-opened.svg @@ -0,0 +1,8 @@ + + + + + + + diff --git a/public/assets/icons/eye-closed.svg.twig b/public/assets/icons/eye-closed.svg.twig deleted file mode 100644 index fdcb824107..0000000000 --- a/public/assets/icons/eye-closed.svg.twig +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/public/assets/icons/eye-opened.svg.twig b/public/assets/icons/eye-opened.svg.twig deleted file mode 100644 index 80178750b5..0000000000 --- a/public/assets/icons/eye-opened.svg.twig +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - diff --git a/src/Twig/Extension.php b/src/Twig/Extension.php index ec031f4787..a00fb0ffda 100644 --- a/src/Twig/Extension.php +++ b/src/Twig/Extension.php @@ -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']), ]; } } diff --git a/src/Twig/Runtime.php b/src/Twig/Runtime.php index 53710538bb..63c0ef3ae2 100644 --- a/src/Twig/Runtime.php +++ b/src/Twig/Runtime.php @@ -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; }