[COMPONENTS][Search][CSS] Extra header forms now accessible through a details element. Re-organizing templates structure.

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;
     }
 }

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;
     }
 }

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,
         ];
     }

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, []],
+            ['query', TextType::class, [
-            [$form_name = 'submit_search', SubmitType::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;
+    }
 }

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 %}

plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig

@@ -4,6 +4,6 @@
     </div>
 
     {% 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 %}
 </section>

plugins/ProfileColor/ProfileColor.php

@@ -38,6 +38,7 @@ use Symfony\Component\HttpFoundation\Request;
  * @category ProfileColor
  *
  * @author    Daniel Brandao <up201705812@fe.up.pt>
+ * @author    Eliseu Amaro  <mail@eliseuama.ro>
  * @copyright 2020 Free Software Foundation, Inc http://www.fsf.org
  * @license   https://www.gnu.org/licenses/agpl.html GNU AGPL v3 or later
  */

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("pages/feeds.css");
-@import url("widgets/settings.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;

public/assets/icons/checkmark.svg.twig

@@ -1,4 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- https://github.com/primer/octicons -->
+
+<!-- MIT License -->
+
 <svg
    class="{{ iconClass|default('') }}"
    xmlns:dc="http://purl.org/dc/elements/1.1/"

public/assets/icons/kebab.svg.twig

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- https://github.com/primer/octicons -->
+
+<!-- MIT License -->
+
+<svg
+    class="{{ iconClass|default('') }}"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+    xmlns:cc="http://creativecommons.org/ns#"
+    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    xmlns:svg="http://www.w3.org/2000/svg"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+    version="1.1"
+    viewBox="0 0 16 16"
+    width="16"
+    height="16">
+    <title>Expand for more options</title>
+    <path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
+</svg>

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;
 }

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],

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]);
     }
 }

templates/base.html.twig

@@ -67,6 +67,8 @@
 </aside>
 
 {% block header %}
+    {% set extra_header_forms = handle_event('AddExtraHeaderForms', request) %}
+
     <header>
         {{ block("leftpanel", "stdgrid.html.twig") }}
 
@@ -75,12 +77,14 @@
             <h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
         </a>
 
-        <span>
+        <details class="header-extra-forms">
-          {% set extra = handle_event('AddHeaderElements', request) %}
+            <summary>
-          {% for el in extra %}
+              {{ icon('kebab', 'icon icon-details-open') | raw }}
-            {{ form(el) }}
+            </summary>
-          {% endfor %}
+            {% for extra_form in extra_header_forms %}
-        </span>
+                {{ form(extra_form) }}
+            {% endfor %}
+        </details>
 
         {% if app.user %}
             {{ block("rightpanel", "stdgrid.html.twig") }}

templates/cards/attachments/show.html.twig

@@ -4,7 +4,7 @@
     <div class="content">
         <section class="section-widget section-widget-padded">
 
-            {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}
+            {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}
 
             <a class="section-widget-button-like" href="{{ download }}"> {{ 'Download link' | trans }}</a>
         </section>

templates/cards/note/view.html.twig

@@ -38,7 +38,7 @@
                 {% if note.getAttachments() is not empty %}
                     <section class="section-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
                         {% 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 %}
                     </section>
                 {% endif %}

templates/network/feed.html.twig

@@ -8,7 +8,7 @@
         <div class="h-feed hfeed notes">
             {% 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 %}
                     <hr tabindex="0" title="{{ 'End of note and replies.' | trans }}">
                 {% endfor %}
             {% else %}

templates/note/reply.html.twig

@@ -4,18 +4,7 @@
     {{ parent() }}
 {% endblock %}
 
-{% block title %}Welcome!{% endblock %}
+{% block title %}{{ 'Reply to ' | trans }}{{ note.getActorNickname() }}{{ '\'s note.' | trans }}{% endblock %}
-
-{% block stylesheets %}
-    {{ parent() }}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/replies/replies.css') }}">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}"
-          media="screen and (min-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_mid.css') }}"
-          media="screen and (max-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}"
-          media="screen and (max-width: 750px)">
-{% endblock %}
 
 {% block header %}
     {{ parent() }}
@@ -29,7 +18,7 @@
     {{ parent() }}
     <div class="content">
         <div class="main">
-            {% 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) }}
         </div>
     </div>