From 80d1be323d9540a055b65041f5a0bb5ac193cd04 Mon Sep 17 00:00:00 2001 From: eli Date: Mon, 4 Oct 2021 12:17:14 +0100 Subject: [PATCH] [COMPONENTS][Search][CSS] Extra header forms now accessible through a details element. Re-organizing templates structure. --- components/Left/Left.php | 2 +- components/Right/Right.php | 2 +- components/Search/Controller/Search.php | 2 +- components/Search/Search.php | 30 ++++++++++++++++-- .../show.html.twig} | 2 +- .../attachmentRelatedNotes.html.twig | 2 +- plugins/ProfileColor/ProfileColor.php | 1 + public/assets/default_theme/css/base.css | 31 ++++++++++++++++--- .../css/{widgets => pages}/feeds.css | 0 .../css/{widgets => pages}/settings.css | 0 public/assets/icons/checkmark.svg.twig | 4 +++ public/assets/icons/kebab.svg.twig | 21 +++++++++++++ .../Left/assets/css/{left.css => view.css} | 0 .../Right/assets/css/{right.css => view.css} | 1 + public/components/Search/assets/css/view.css | 0 src/Controller/Attachment.php | 2 +- src/Controller/Note.php | 2 +- templates/base.html.twig | 16 ++++++---- .../{ => cards}/attachments/show.html.twig | 2 +- .../{ => cards}/attachments/view.html.twig | 0 templates/{ => cards}/note/view.html.twig | 2 +- templates/network/feed.html.twig | 2 +- templates/note/reply.html.twig | 15 ++------- 23 files changed, 103 insertions(+), 36 deletions(-) rename components/Search/templates/{search_results.html.twig => search/show.html.twig} (67%) rename public/assets/default_theme/css/{widgets => pages}/feeds.css (100%) rename public/assets/default_theme/css/{widgets => pages}/settings.css (100%) create mode 100644 public/assets/icons/kebab.svg.twig rename public/components/Left/assets/css/{left.css => view.css} (100%) rename public/components/Right/assets/css/{right.css => view.css} (92%) create mode 100644 public/components/Search/assets/css/view.css rename templates/{ => cards}/attachments/show.html.twig (68%) rename templates/{ => cards}/attachments/view.html.twig (100%) rename templates/{ => cards}/note/view.html.twig (95%) diff --git a/components/Left/Left.php b/components/Left/Left.php index 4713d1e418..67816aeebe 100644 --- a/components/Left/Left.php +++ b/components/Left/Left.php @@ -33,7 +33,7 @@ class Left extends Component */ public function onEndShowStyles(array &$styles): bool { - $styles[] = 'components/Left/assets/css/left.css'; + $styles[] = 'components/Left/assets/css/view.css'; return Event::next; } } diff --git a/components/Right/Right.php b/components/Right/Right.php index 284e8c5823..063aedf5a5 100644 --- a/components/Right/Right.php +++ b/components/Right/Right.php @@ -33,7 +33,7 @@ class Right extends Component */ public function onEndShowStyles(array &$styles): bool { - $styles[] = 'components/Right/assets/css/right.css'; + $styles[] = 'components/Right/assets/css/view.css'; return Event::next; } } diff --git a/components/Search/Controller/Search.php b/components/Search/Controller/Search.php index 92797aa3ab..3ef8574736 100644 --- a/components/Search/Controller/Search.php +++ b/components/Search/Controller/Search.php @@ -42,7 +42,7 @@ class Search extends Controller $results = $query->execute(); return [ - '_template' => 'search_results.html.twig', + '_template' => 'search/show.html.twig', 'results' => $results, ]; } diff --git a/components/Search/Search.php b/components/Search/Search.php index 9fbe81f0ed..f0020b49f6 100644 --- a/components/Search/Search.php +++ b/components/Search/Search.php @@ -28,6 +28,7 @@ use App\Util\Exception\RedirectException; use Symfony\Component\Form\Extension\Core\Type\SubmitType; use Symfony\Component\Form\Extension\Core\Type\TextType; use Symfony\Component\HttpFoundation\Request; +use function App\Core\I18n\_m; class Search extends Component { @@ -39,11 +40,21 @@ class Search extends Component /** * Add the search form to the site header */ - public function onAddHeaderElements(Request $request, array &$elements) + public function onAddExtraHeaderForms(Request $request, array &$elements) { $form = Form::create([ - ['query', TextType::class, []], - [$form_name = 'submit_search', SubmitType::class, []], + ['query', TextType::class, [ + 'attr' => ['placeholder' => _m('Search tags...')] + ]], + [$form_name = 'submit_search', SubmitType::class, + [ + 'label' => _m('Submit'), + 'attr' => [ + //'class' => 'button-container search-button-container', + 'title' => _m('Query notes for specific tags.'), + ], + ], + ], ]); if ('POST' === $request->getMethod() && $request->request->has($form_name)) { @@ -57,4 +68,17 @@ class Search extends Component $elements[] = $form->createView(); return Event::next; } + + /** + * Output our dedicated stylesheet + * + * @param array $styles stylesheets path + * + * @return bool hook value; true means continue processing, false means stop. + */ + public function onEndShowStyles(array &$styles): bool + { + $styles[] = 'components/Search/assets/css/view.css'; + return Event::next; + } } diff --git a/components/Search/templates/search_results.html.twig b/components/Search/templates/search/show.html.twig similarity index 67% rename from components/Search/templates/search_results.html.twig rename to components/Search/templates/search/show.html.twig index e888104b13..a62a260fa5 100644 --- a/components/Search/templates/search_results.html.twig +++ b/components/Search/templates/search/show.html.twig @@ -1,6 +1,6 @@ {% for res in results %} {% if res is instanceof('App\\Entity\\Note') %} - {% include 'note/view.html.twig' with {'note': res} %} + {% include '/cards/note/view.html.twig' with {'note': res} %} {% else %} {{ dump(res) }} {% endif %} diff --git a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig index 5eda018f2b..0789bddb01 100644 --- a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig +++ b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig @@ -4,6 +4,6 @@ {% for note in related_notes %} - {% include '/note/view.html.twig' with {'note' : note, 'hide_attachments': true, 'have_user': have_user} only %} + {% include '/cards/note/view.html.twig' with {'note' : note, 'hide_attachments': true, 'have_user': have_user} only %} {% endfor %} \ No newline at end of file diff --git a/plugins/ProfileColor/ProfileColor.php b/plugins/ProfileColor/ProfileColor.php index 54e4ba4cb8..ab1375c3ea 100644 --- a/plugins/ProfileColor/ProfileColor.php +++ b/plugins/ProfileColor/ProfileColor.php @@ -38,6 +38,7 @@ use Symfony\Component\HttpFoundation\Request; * @category ProfileColor * * @author Daniel Brandao + * @author Eliseu Amaro * @copyright 2020 Free Software Foundation, Inc http://www.fsf.org * @license https://www.gnu.org/licenses/agpl.html GNU AGPL v3 or later */ diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css index ea08d94a03..67eb62f1f9 100644 --- a/public/assets/default_theme/css/base.css +++ b/public/assets/default_theme/css/base.css @@ -1,7 +1,7 @@ @import url("widgets/buttons.css"); @import url("widgets/sections.css"); -@import url("widgets/feeds.css"); -@import url("widgets/settings.css"); +@import url("pages/feeds.css"); +@import url("pages/settings.css"); @import url("../fonts/poppins/poppins.css"); @import url("../fonts/opensans/opensans.css"); @@ -155,6 +155,7 @@ header { height: 3rem; display: flex; + justify-content: center; position: fixed; top: 0; background-color: var(--bg1); @@ -169,15 +170,33 @@ header { .header-instance { display: flex; align-items: center; - + align-self: center; margin-left: auto; - margin-right: auto; } .header-instance > * { margin: unset; } +.header-extra-forms { + justify-self: flex-end; + margin-left: auto; +} + +.header-extra-forms[open] > *:not(summary) { + z-index: 2; + width: 19vw; + background-color: var(--bg1); + padding: var(--unit-size); + border-radius: 0 0 var(--unit-size) var(--unit-size); + box-shadow: var(--shadow); + + font-size: var(--small-size); + position: absolute; + top: 100%; + right: 0; +} + /* CONTAINS ALL ELEMENTS BESIDES HEADER */ .content-wrapper { position: relative; @@ -303,6 +322,10 @@ and (max-width: 1280px) { max-width: 100%; } + .header-extra-forms[open] > *:not(summary) { + width: 100%; + } + #panel-left-toggle:not(:checked) ~ .panel-content, #panel-right-toggle:not(:checked) ~ .panel-content { display: none; diff --git a/public/assets/default_theme/css/widgets/feeds.css b/public/assets/default_theme/css/pages/feeds.css similarity index 100% rename from public/assets/default_theme/css/widgets/feeds.css rename to public/assets/default_theme/css/pages/feeds.css diff --git a/public/assets/default_theme/css/widgets/settings.css b/public/assets/default_theme/css/pages/settings.css similarity index 100% rename from public/assets/default_theme/css/widgets/settings.css rename to public/assets/default_theme/css/pages/settings.css diff --git a/public/assets/icons/checkmark.svg.twig b/public/assets/icons/checkmark.svg.twig index 75cf0a4b65..00321c1eba 100644 --- a/public/assets/icons/checkmark.svg.twig +++ b/public/assets/icons/checkmark.svg.twig @@ -1,4 +1,8 @@ + + + + + + + + + + Expand for more options + + \ No newline at end of file diff --git a/public/components/Left/assets/css/left.css b/public/components/Left/assets/css/view.css similarity index 100% rename from public/components/Left/assets/css/left.css rename to public/components/Left/assets/css/view.css diff --git a/public/components/Right/assets/css/right.css b/public/components/Right/assets/css/view.css similarity index 92% rename from public/components/Right/assets/css/right.css rename to public/components/Right/assets/css/view.css index a47bf25965..a459f5fac2 100644 --- a/public/components/Right/assets/css/right.css +++ b/public/components/Right/assets/css/view.css @@ -12,6 +12,7 @@ border: 2px solid var(--white); } #panel-right-icon { + margin-left: var(--unit-size); cursor: pointer !important; border: 2px solid transparent; } diff --git a/public/components/Search/assets/css/view.css b/public/components/Search/assets/css/view.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Controller/Attachment.php b/src/Controller/Attachment.php index fd43ff3255..253d3c4ff0 100644 --- a/src/Controller/Attachment.php +++ b/src/Controller/Attachment.php @@ -85,7 +85,7 @@ class Attachment extends Controller $attachment = DB::findOneBy('attachment', ['id' => $id]); return $this->attachment($id, function ($res) use ($id, $attachment) { return [ - '_template' => 'attachments/show.html.twig', + '_template' => '/cards/attachments/show.html.twig', 'download' => Router::url('attachment_download', ['id' => $id]), 'attachment' => $attachment, 'right_panel_vars' => ['attachment_id' => $id], diff --git a/src/Controller/Note.php b/src/Controller/Note.php index a6be37bf21..2bc92574c7 100644 --- a/src/Controller/Note.php +++ b/src/Controller/Note.php @@ -47,6 +47,6 @@ class Note extends Controller */ public function NoteShow(Request $request, int $id) { - return $this->note($id, fn ($note) => ['_template' => 'note/view.html.twig', 'note' => $note]); + return $this->note($id, fn ($note) => ['_template' => '/cards/note/view.html.twig', 'note' => $note]); } } diff --git a/templates/base.html.twig b/templates/base.html.twig index dfc30e45ba..fa1b8056fe 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -67,6 +67,8 @@ {% block header %} + {% set extra_header_forms = handle_event('AddExtraHeaderForms', request) %} +
{{ block("leftpanel", "stdgrid.html.twig") }} @@ -75,12 +77,14 @@

{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }}

- - {% set extra = handle_event('AddHeaderElements', request) %} - {% for el in extra %} - {{ form(el) }} - {% endfor %} - +
+ + {{ icon('kebab', 'icon icon-details-open') | raw }} + + {% for extra_form in extra_header_forms %} + {{ form(extra_form) }} + {% endfor %} +
{% if app.user %} {{ block("rightpanel", "stdgrid.html.twig") }} diff --git a/templates/attachments/show.html.twig b/templates/cards/attachments/show.html.twig similarity index 68% rename from templates/attachments/show.html.twig rename to templates/cards/attachments/show.html.twig index 29f285fab9..a802f0bc34 100644 --- a/templates/attachments/show.html.twig +++ b/templates/cards/attachments/show.html.twig @@ -4,7 +4,7 @@
- {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %} + {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %} {{ 'Download link' | trans }}
diff --git a/templates/attachments/view.html.twig b/templates/cards/attachments/view.html.twig similarity index 100% rename from templates/attachments/view.html.twig rename to templates/cards/attachments/view.html.twig diff --git a/templates/note/view.html.twig b/templates/cards/note/view.html.twig similarity index 95% rename from templates/note/view.html.twig rename to templates/cards/note/view.html.twig index f34d6b8e13..4348b21ecc 100644 --- a/templates/note/view.html.twig +++ b/templates/cards/note/view.html.twig @@ -38,7 +38,7 @@ {% if note.getAttachments() is not empty %}
{% for attachment in note.getAttachments() %} - {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%} + {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%} {% endfor %}
{% endif %} diff --git a/templates/network/feed.html.twig b/templates/network/feed.html.twig index 793a76fe71..2b61e16c82 100644 --- a/templates/network/feed.html.twig +++ b/templates/network/feed.html.twig @@ -8,7 +8,7 @@
{% if notes is defined and notes is not empty %} {% for conversation in notes %} - {% include '/note/view.html.twig' with {'note': conversation['note'], 'replies': conversation['replies']} only %} + {% include '/cards/note/view.html.twig' with {'note': conversation['note'], 'replies': conversation['replies']} only %}
{% endfor %} {% else %} diff --git a/templates/note/reply.html.twig b/templates/note/reply.html.twig index f101d2d4e4..6e6474d960 100644 --- a/templates/note/reply.html.twig +++ b/templates/note/reply.html.twig @@ -4,18 +4,7 @@ {{ parent() }} {% endblock %} -{% block title %}Welcome!{% endblock %} - -{% block stylesheets %} - {{ parent() }} - - - - -{% endblock %} +{% block title %}{{ 'Reply to ' | trans }}{{ note.getActorNickname() }}{{ '\'s note.' | trans }}{% endblock %} {% block header %} {{ parent() }} @@ -29,7 +18,7 @@ {{ parent() }}
- {% include '/note/view.html.twig' with {'note': note, 'have_user': have_user} only %} + {% include '/cards/note/view.html.twig' with {'note': note} only %} {{ form(reply) }}