forked from GNUsocial/gnu-social
[COMPONENTS][Search][CSS] Extra header forms now accessible through a details element. Re-organizing templates structure.
This commit is contained in:
parent
d38ad60c76
commit
80d1be323d
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ class Search extends Controller
|
||||
$results = $query->execute();
|
||||
|
||||
return [
|
||||
'_template' => 'search_results.html.twig',
|
||||
'_template' => 'search/show.html.twig',
|
||||
'results' => $results,
|
||||
];
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -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
|
||||
*/
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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/"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.7 KiB |
21
public/assets/icons/kebab.svg.twig
Normal file
21
public/assets/icons/kebab.svg.twig
Normal 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 |
@ -12,6 +12,7 @@
|
||||
border: 2px solid var(--white);
|
||||
}
|
||||
#panel-right-icon {
|
||||
margin-left: var(--unit-size);
|
||||
cursor: pointer !important;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
0
public/components/Search/assets/css/view.css
Normal file
0
public/components/Search/assets/css/view.css
Normal file
@ -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],
|
||||
|
||||
@ -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]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
{% set extra = handle_event('AddHeaderElements', request) %}
|
||||
{% for el in extra %}
|
||||
{{ form(el) }}
|
||||
{% endfor %}
|
||||
</span>
|
||||
<details class="header-extra-forms">
|
||||
<summary>
|
||||
{{ icon('kebab', 'icon icon-details-open') | raw }}
|
||||
</summary>
|
||||
{% for extra_form in extra_header_forms %}
|
||||
{{ form(extra_form) }}
|
||||
{% endfor %}
|
||||
</details>
|
||||
|
||||
{% if app.user %}
|
||||
{{ block("rightpanel", "stdgrid.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>
|
||||
@ -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 %}
|
||||
@ -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 %}
|
||||
|
||||
@ -4,18 +4,7 @@
|
||||
{{ parent() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}Welcome!{% 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 title %}{{ 'Reply to ' | trans }}{{ note.getActorNickname() }}{{ '\'s note.' | trans }}{% 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user