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

This commit is contained in:
Eliseu Amaro 2021-10-04 12:17:14 +01:00
parent d38ad60c76
commit 80d1be323d
23 changed files with 103 additions and 36 deletions

View File

@ -33,7 +33,7 @@ class Left extends Component
*/ */
public function onEndShowStyles(array &$styles): bool public function onEndShowStyles(array &$styles): bool
{ {
$styles[] = 'components/Left/assets/css/left.css'; $styles[] = 'components/Left/assets/css/view.css';
return Event::next; return Event::next;
} }
} }

View File

@ -33,7 +33,7 @@ class Right extends Component
*/ */
public function onEndShowStyles(array &$styles): bool public function onEndShowStyles(array &$styles): bool
{ {
$styles[] = 'components/Right/assets/css/right.css'; $styles[] = 'components/Right/assets/css/view.css';
return Event::next; return Event::next;
} }
} }

View File

@ -42,7 +42,7 @@ class Search extends Controller
$results = $query->execute(); $results = $query->execute();
return [ return [
'_template' => 'search_results.html.twig', '_template' => 'search/show.html.twig',
'results' => $results, 'results' => $results,
]; ];
} }

View File

@ -28,6 +28,7 @@ use App\Util\Exception\RedirectException;
use Symfony\Component\Form\Extension\Core\Type\SubmitType; use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType; use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Request;
use function App\Core\I18n\_m;
class Search extends Component class Search extends Component
{ {
@ -39,11 +40,21 @@ class Search extends Component
/** /**
* Add the search form to the site header * 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([ $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)) { if ('POST' === $request->getMethod() && $request->request->has($form_name)) {
@ -57,4 +68,17 @@ class Search extends Component
$elements[] = $form->createView(); $elements[] = $form->createView();
return Event::next; 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;
}
} }

View File

@ -1,6 +1,6 @@
{% for res in results %} {% for res in results %}
{% if res is instanceof('App\\Entity\\Note') %} {% 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 %} {% else %}
{{ dump(res) }} {{ dump(res) }}
{% endif %} {% endif %}

View File

@ -4,6 +4,6 @@
</div> </div>
{% for note in related_notes %} {% 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 %} {% endfor %}
</section> </section>

View File

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

View File

@ -1,7 +1,7 @@
@import url("widgets/buttons.css"); @import url("widgets/buttons.css");
@import url("widgets/sections.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/poppins/poppins.css");
@import url("../fonts/opensans/opensans.css"); @import url("../fonts/opensans/opensans.css");
@ -155,6 +155,7 @@ header {
height: 3rem; height: 3rem;
display: flex; display: flex;
justify-content: center;
position: fixed; position: fixed;
top: 0; top: 0;
background-color: var(--bg1); background-color: var(--bg1);
@ -169,15 +170,33 @@ header {
.header-instance { .header-instance {
display: flex; display: flex;
align-items: center; align-items: center;
align-self: center;
margin-left: auto; margin-left: auto;
margin-right: auto;
} }
.header-instance > * { .header-instance > * {
margin: unset; 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 */ /* CONTAINS ALL ELEMENTS BESIDES HEADER */
.content-wrapper { .content-wrapper {
position: relative; position: relative;
@ -303,6 +322,10 @@ and (max-width: 1280px) {
max-width: 100%; max-width: 100%;
} }
.header-extra-forms[open] > *:not(summary) {
width: 100%;
}
#panel-left-toggle:not(:checked) ~ .panel-content, #panel-left-toggle:not(:checked) ~ .panel-content,
#panel-right-toggle:not(:checked) ~ .panel-content { #panel-right-toggle:not(:checked) ~ .panel-content {
display: none; display: none;

View File

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

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 800 B

View File

@ -12,6 +12,7 @@
border: 2px solid var(--white); border: 2px solid var(--white);
} }
#panel-right-icon { #panel-right-icon {
margin-left: var(--unit-size);
cursor: pointer !important; cursor: pointer !important;
border: 2px solid transparent; border: 2px solid transparent;
} }

View File

@ -85,7 +85,7 @@ class Attachment extends Controller
$attachment = DB::findOneBy('attachment', ['id' => $id]); $attachment = DB::findOneBy('attachment', ['id' => $id]);
return $this->attachment($id, function ($res) use ($id, $attachment) { return $this->attachment($id, function ($res) use ($id, $attachment) {
return [ return [
'_template' => 'attachments/show.html.twig', '_template' => '/cards/attachments/show.html.twig',
'download' => Router::url('attachment_download', ['id' => $id]), 'download' => Router::url('attachment_download', ['id' => $id]),
'attachment' => $attachment, 'attachment' => $attachment,
'right_panel_vars' => ['attachment_id' => $id], 'right_panel_vars' => ['attachment_id' => $id],

View File

@ -47,6 +47,6 @@ class Note extends Controller
*/ */
public function NoteShow(Request $request, int $id) 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]);
} }
} }

View File

@ -67,6 +67,8 @@
</aside> </aside>
{% block header %} {% block header %}
{% set extra_header_forms = handle_event('AddExtraHeaderForms', request) %}
<header> <header>
{{ block("leftpanel", "stdgrid.html.twig") }} {{ block("leftpanel", "stdgrid.html.twig") }}
@ -75,12 +77,14 @@
<h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1> <h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
</a> </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 %} {% if app.user %}
{{ block("rightpanel", "stdgrid.html.twig") }} {{ block("rightpanel", "stdgrid.html.twig") }}

View File

@ -4,7 +4,7 @@
<div class="content"> <div class="content">
<section class="section-widget section-widget-padded"> <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> <a class="section-widget-button-like" href="{{ download }}"> {{ 'Download link' | trans }}</a>
</section> </section>

View File

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

View File

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

View File

@ -4,18 +4,7 @@
{{ parent() }} {{ parent() }}
{% endblock %} {% 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 %} {% block header %}
{{ parent() }} {{ parent() }}
@ -29,7 +18,7 @@
{{ parent() }} {{ parent() }}
<div class="content"> <div class="content">
<div class="main"> <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) }} {{ form(reply) }}
</div> </div>
</div> </div>