[TWIG][Settings] WIP Refactoring of user panel. Now using macros to diminish repeated code.
[CONTROLLER][UserPanel] Replaced form names. More readable.
This commit is contained in:
parent
d5fc2cac8a
commit
8edaabbabf
GPG Key ID:
18D2D35001FBFAB0
@ -82,8 +82,8 @@ class UserPanel extends Controller
|
|||||||
|
|
||||||
return [
|
return [
|
||||||
'_template' => 'settings/base.html.twig',
|
'_template' => 'settings/base.html.twig',
|
||||||
'prof' => $personal_form->createView(),
|
'profile' => $personal_form->createView(),
|
||||||
'acc' => $account_form->createView(),
|
'account' => $account_form->createView(),
|
||||||
'tabbed_forms_notify' => $notifications_form_array,
|
'tabbed_forms_notify' => $notifications_form_array,
|
||||||
'open_details_query' => $this->string('open'),
|
'open_details_query' => $this->string('open'),
|
||||||
];
|
];
|
||||||
|
|||||||
@ -1,5 +0,0 @@
|
|||||||
{% block form_account %}
|
|
||||||
<div class='form'>
|
|
||||||
{{ form(acc) }}
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{% extends '/stdgrid.html.twig' %}
|
{% extends '/stdgrid.html.twig' %}
|
||||||
|
|
||||||
{% block title %}{% endblock %}
|
{% block title %}{{ 'Settings' | trans }}{% endblock %}
|
||||||
|
|
||||||
{% block stylesheets %}
|
{% block stylesheets %}
|
||||||
{{ parent() }}
|
{{ parent() }}
|
||||||
@ -8,90 +8,108 @@
|
|||||||
<link rel="stylesheet" href="{{ asset('assets/default_theme/css/pages/settings.css') }}">
|
<link rel="stylesheet" href="{{ asset('assets/default_theme/css/pages/settings.css') }}">
|
||||||
{% endblock stylesheets %}
|
{% endblock stylesheets %}
|
||||||
|
|
||||||
{% block body %}
|
{% macro settings_details_element(title, summary, form_name, context) %}
|
||||||
<nav class='section-settings'>
|
<details class="section-title-settings" {{ open_details(context.open_details_query, [ form_name ]) }} id={{ form_name ~ '-details' }}>
|
||||||
<h2>Settings</h2>
|
<summary>
|
||||||
<ul>
|
<h3>
|
||||||
|
{{ title | trans }}
|
||||||
|
{{ icon('arrow-down', 'icon icon-details-open') | raw }}
|
||||||
|
</h3>
|
||||||
|
<em>
|
||||||
|
{{ summary | trans }}
|
||||||
|
</em>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
|
||||||
|
{{ form(attribute(context, form_name) | default) }}
|
||||||
|
</details>
|
||||||
|
{% endmacro settings_details_element %}
|
||||||
|
|
||||||
|
{% macro settings_details_container(title, summary, tabs, context) %}
|
||||||
|
<details class="section-title-settings" {{ open_details(context.open_details_query, tabs) }} id={{ tabs[0] ~ '-details' }}>
|
||||||
|
<summary>
|
||||||
|
<h3>
|
||||||
|
{{ title | trans }}
|
||||||
|
{{ icon('arrow-down', 'icon icon-details-open') | raw }}
|
||||||
|
</h3>
|
||||||
|
<em>
|
||||||
|
{{ summary | trans }}
|
||||||
|
</em>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
|
||||||
|
{% if title == 'Profile' %}
|
||||||
<li>
|
<li>
|
||||||
<details class="section-title-settings" {{ open_details(open_details_query, ['profile', 'personal_info']) }} id="profile-details">
|
<nav class='section-settings-nav'>
|
||||||
<summary>
|
<ul>
|
||||||
<h3>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
<li>
|
||||||
<em>Personal Information, Avatar and Profile</em>
|
{{ _self.settings_details_element('Personal Info', 'Nickname, Homepage, Bio, Self Tags and more.', 'profile', context) }}
|
||||||
</summary>
|
</li>
|
||||||
|
|
||||||
<section>
|
<hr>
|
||||||
<nav class='section-settings-nav'>
|
|
||||||
<ul>
|
{% for tab in context.profile_tabs %}
|
||||||
<li>
|
<li>
|
||||||
<details class="section-title-settings" {{ open_details(open_details_query, ['personal_info']) }} id="perosnal-info-details">
|
<details class="section-title-settings"> {# TODO: add ID and open_details and to parent #}
|
||||||
<summary>
|
|
||||||
<h3>Personal Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
|
||||||
<em>Nickname, Homepage, Bio, Self Tags and more.</em>
|
|
||||||
</summary>
|
|
||||||
|
|
||||||
{% block form_profile %}{% include '/settings/profile.html.twig' %}{% endblock %}
|
|
||||||
</details>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
{% set profile_tabs = handle_event('PopulateProfileSettingsTabs', app.request) %}
|
|
||||||
{% for tab in profile_tabs %}
|
|
||||||
<li>
|
|
||||||
<details class="section-title-settings"> {# TODO add ID and open_details and to parent #}
|
|
||||||
<summary>
|
<summary>
|
||||||
<h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
<h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||||
<em>{{ tab['desc'] }}</em>
|
<em>{{ tab['desc'] }}</em>
|
||||||
</summary>
|
</summary>
|
||||||
|
|
||||||
{% include tab['controller']['_template'] with tab['controller'] only %}
|
{% include tab['controller']['_template'] with tab['controller'] only %}
|
||||||
|
|
||||||
{# <a href="{{ path(tab['route']) }}"
|
|
||||||
class='hover-effect {{ active(tab['route']) }}'>{{ tab['title'] }}</a> #}
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</section>
|
|
||||||
</details>
|
|
||||||
</li>
|
</li>
|
||||||
|
{% elseif title == 'Account' %}
|
||||||
<hr>
|
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<details class="section-title-settings" {{ open_details(open_details_query, ['account']) }} id="account-details">
|
{{ form(context.account) }}
|
||||||
<summary>
|
|
||||||
<h3>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
|
||||||
<em>Email, Password and Language</em>
|
|
||||||
</summary>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
{% block form_account %}
|
|
||||||
{% include '/settings/account.html.twig' %}
|
|
||||||
{% endblock %}
|
|
||||||
</section>
|
|
||||||
</details>
|
|
||||||
</li>
|
</li>
|
||||||
|
{% elseif title == 'Notifications' %}
|
||||||
<hr>
|
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<details class="section-title-settings" {{ open_details(open_details_query, ['notifications']) }} id="notifications-details">
|
<nav class='section-settings-nav'>
|
||||||
<summary>
|
<ul>
|
||||||
<h3>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
{% for transport, form_transport in context.tabbed_forms_notify %}
|
||||||
<em>Enable/disable notifications (Email, XMPP, Replies...)</em>
|
<li>
|
||||||
</summary>
|
<details class="section-title-settings">
|
||||||
|
<summary>
|
||||||
|
<h3>{{ transport }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||||
|
<em>{{ transport }}'s notification options.</em>
|
||||||
|
</summary>
|
||||||
|
|
||||||
<section>
|
<div id="form_{{ transport }}" class='form'>
|
||||||
{% block form_notify %}
|
{{ form(form_transport) }}
|
||||||
{% include '/settings/notifications.html.twig' %}
|
</div>
|
||||||
{% endblock %}
|
</details>
|
||||||
</section>
|
</li>
|
||||||
</details>
|
<hr>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</details>
|
||||||
|
{% endmacro settings_details_container %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<nav class='section-settings'>
|
||||||
|
<h2>Settings</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
{% set profile_tabs = handle_event('PopulateProfileSettingsTabs', app.request) %}
|
||||||
|
{{ _self.settings_details_container('Profile', 'Personal Information, Avatar and Profile', ['profile', 'personal-info'], _context) }}
|
||||||
|
</li>
|
||||||
|
<hr>
|
||||||
|
<li>
|
||||||
|
{{ _self.settings_details_container('Account', 'Email, Password and Language', ['account'], _context) }}
|
||||||
|
</li>
|
||||||
|
<hr>
|
||||||
|
<li>
|
||||||
|
{{ _self.settings_details_container('Notifications', 'Enable/disable notifications (Email, XMPP, Replies...)', ['notifications'], _context) }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -1,25 +0,0 @@
|
|||||||
{% block form_notify %}
|
|
||||||
<section>
|
|
||||||
|
|
||||||
<nav class='set-nav'>
|
|
||||||
<ul>
|
|
||||||
{% for transport, form_transport in tabbed_forms_notify %}
|
|
||||||
<li>
|
|
||||||
<details class="section-title-settings">
|
|
||||||
<summary>
|
|
||||||
<h3>{{ transport }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
|
||||||
<em>{{ transport }}'s notification options.</em>
|
|
||||||
</summary>
|
|
||||||
|
|
||||||
<div id="form_{{ transport }}" class='form'>
|
|
||||||
{{ form(form_transport) }}
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
</li>
|
|
||||||
<hr>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
{% endblock %}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
{% block form_profile %}
|
|
||||||
<div class='form'>
|
|
||||||
{{ form(prof) }}
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
Loading…
Reference in New Issue
Block a user