Browse Source

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

remotes/upstream/experimental
Eliseu Amaro 7 months ago
parent
commit
80d1be323d
23 changed files with 103 additions and 36 deletions
  1. +1
    -1
      components/Left/Left.php
  2. +1
    -1
      components/Right/Right.php
  3. +1
    -1
      components/Search/Controller/Search.php
  4. +27
    -3
      components/Search/Search.php
  5. +1
    -1
      components/Search/templates/search/show.html.twig
  6. +1
    -1
      plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig
  7. +1
    -0
      plugins/ProfileColor/ProfileColor.php
  8. +27
    -4
      public/assets/default_theme/css/base.css
  9. +0
    -0
      public/assets/default_theme/css/pages/feeds.css
  10. +0
    -0
      public/assets/default_theme/css/pages/settings.css
  11. +4
    -0
      public/assets/icons/checkmark.svg.twig
  12. +21
    -0
      public/assets/icons/kebab.svg.twig
  13. +0
    -0
      public/components/Left/assets/css/view.css
  14. +1
    -0
      public/components/Right/assets/css/view.css
  15. +0
    -0
      public/components/Search/assets/css/view.css
  16. +1
    -1
      src/Controller/Attachment.php
  17. +1
    -1
      src/Controller/Note.php
  18. +10
    -6
      templates/base.html.twig
  19. +1
    -1
      templates/cards/attachments/show.html.twig
  20. +0
    -0
      templates/cards/attachments/view.html.twig
  21. +1
    -1
      templates/cards/note/view.html.twig
  22. +1
    -1
      templates/network/feed.html.twig
  23. +2
    -13
      templates/note/reply.html.twig

+ 1
- 1
components/Left/Left.php View File

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

+ 1
- 1
components/Right/Right.php View File

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

+ 1
- 1
components/Search/Controller/Search.php View File

@@ -42,7 +42,7 @@ class Search extends Controller
$results = $query->execute();

return [
'_template' => 'search_results.html.twig',
'_template' => 'search/show.html.twig',
'results' => $results,
];
}


+ 27
- 3
components/Search/Search.php 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\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;
}
}

components/Search/templates/search_results.html.twig → components/Search/templates/search/show.html.twig View File

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

+ 1
- 1
plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig View File

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

+ 1
- 0
plugins/ProfileColor/ProfileColor.php View File

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


+ 27
- 4
public/assets/default_theme/css/base.css View File

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


public/assets/default_theme/css/widgets/feeds.css → public/assets/default_theme/css/pages/feeds.css View File


public/assets/default_theme/css/widgets/settings.css → public/assets/default_theme/css/pages/settings.css View File


+ 4
- 0
public/assets/icons/checkmark.svg.twig View File

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


+ 21
- 0
public/assets/icons/kebab.svg.twig 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>

public/components/Left/assets/css/left.css → public/components/Left/assets/css/view.css View File


public/components/Right/assets/css/right.css → public/components/Right/assets/css/view.css View File

@@ -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
- 0
public/components/Search/assets/css/view.css View File


+ 1
- 1
src/Controller/Attachment.php View 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],


+ 1
- 1
src/Controller/Note.php View File

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

+ 10
- 6
templates/base.html.twig View File

@@ -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") }}


templates/attachments/show.html.twig → templates/cards/attachments/show.html.twig View File

@@ -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/attachments/view.html.twig → templates/cards/attachments/view.html.twig View File


templates/note/view.html.twig → templates/cards/note/view.html.twig View File

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

+ 1
- 1
templates/network/feed.html.twig View File

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


+ 2
- 13
templates/note/reply.html.twig View File

@@ -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…
Cancel
Save