Skip to content

Commit bc0c4d0

Browse files
author
LeoBruant
committed
Feat : Flowbite WIP
1 parent 4a1d9da commit bc0c4d0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+678
-304
lines changed

‎src/Components/IconComponent.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?php
2+
3+
namespace App\Components;
4+
5+
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
6+
7+
#[AsTwigComponent('icon')]
8+
class IconComponent
9+
{
10+
public string $class = '';
11+
public ?string $icon = null;
12+
}

‎tailwind.config.js‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,58 @@ module.exports = {
1414
],
1515
darkMode: 'class',
1616
theme: {
17-
extend: {},
17+
extend: {
18+
colors: {
19+
primary: {
20+
50: '#eff6ff',
21+
100: '#dbeafe',
22+
200: '#bfdbfe',
23+
300: '#93c5fd',
24+
400: '#60a5fa',
25+
500: '#3b82f6',
26+
600: '#2563eb',
27+
700: '#1d4ed8',
28+
800: '#1e40af',
29+
900: '#1e3a8a',
30+
},
31+
},
32+
},
33+
fontFamily: {
34+
body: [
35+
'Inter',
36+
'ui-sans-serif',
37+
'system-ui',
38+
'-apple-system',
39+
'system-ui',
40+
'Segoe UI',
41+
'Roboto',
42+
'Helvetica Neue',
43+
'Arial',
44+
'Noto Sans',
45+
'sans-serif',
46+
'Apple Color Emoji',
47+
'Segoe UI Emoji',
48+
'Segoe UI Symbol',
49+
'Noto Color Emoji',
50+
],
51+
sans: [
52+
'Inter',
53+
'ui-sans-serif',
54+
'system-ui',
55+
'-apple-system',
56+
'system-ui',
57+
'Segoe UI',
58+
'Roboto',
59+
'Helvetica Neue',
60+
'Arial',
61+
'Noto Sans',
62+
'sans-serif',
63+
'Apple Color Emoji',
64+
'Segoe UI Emoji',
65+
'Segoe UI Symbol',
66+
'Noto Color Emoji',
67+
],
68+
},
1869
},
1970
safelist: [],
2071
plugins: [require('flowbite/plugin')],

‎templates/base.html.twig‎

Lines changed: 409 additions & 182 deletions
Large diffs are not rendered by default.

‎templates/common/_user_dropdown.html.twig‎

Lines changed: 53 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,62 @@
11
{% trans_default_domain "messages" %}
22

33
{% if app.user %}
4-
{% component dropdown with { permanent: permanent ?? true } %}
5-
{% block button %}
6-
{% component button with { circle: true, ariaLabel: "common.account_menu"|trans } %}
7-
{% block content %}
8-
{{ component("avatar", { user: app.user, permanent, id: "user-picture" }) }}
9-
{% endblock %}
10-
{% endcomponent %}
11-
{% endblock %}
4+
<button type="button" class="flex mx-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="dropdown">
5+
<span class="sr-only">Open user menu</span>
6+
{{ component("avatar", { user: app.user, permanent, id: "user-picture", small: true }) }}
7+
</button>
8+
<div class="hidden z-50 my-4 w-56 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600" id="dropdown">
9+
<div class="py-3 px-4">
10+
<span class="block text-sm font-semibold text-gray-900 dark:text-white">{{ app.user.profile.username }}</span>
11+
<span class="block text-sm font-light text-gray-500 truncate dark:text-gray-400">{{ app.user.email }}</span>
12+
</div>
13+
<ul class="py-1 font-light text-gray-500 dark:text-gray-400" aria-labelledby="dropdown">
14+
<li>
15+
<a
16+
class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
17+
href="{{ path("app_profile_show", { slug: app.user.profile.slug }) }}"
18+
>
19+
{{ component('icon', { class: 'h-5 w-5 mr-2 text-gray-400', icon: 'user-circle' }) }}
20+
{{ "common.my_profile"|trans }}
21+
</a>
22+
</li>
23+
<li>
24+
<a
25+
class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
26+
href="{{ path("app_edit_profile") }}"
27+
>
28+
{{ component('icon', { class: 'h-5 w-5 mr-2 text-gray-400', icon: 'cog' }) }}
29+
{{ "common.account_settings"|trans }}
30+
</a>
31+
</li>
32+
</ul>
1233

13-
{% block items %}
14-
<li class="menu-title select-none">
15-
<span>{{ "common.my_account"|trans }}</span>
16-
</li>
17-
<li><a href="{{ path("app_profile_show", { slug: app.user.profile.slug }) }}">{{ "common.my_profile"|trans }}</a></li>
18-
<li><a href="{{ path("app_edit_profile") }}">{{ "common.account_settings"|trans }}</a></li>
1934
{% if is_granted(constant("App\\Enum\\UserRoleEnum::Admin").value) %}
20-
<li class="menu-title select-none">
21-
<span>{{ "common.admin"|trans }}</span>
22-
</li>
23-
<li><a href="{{ path("admin_homepage") }}">{{ "common.admin"|trans }}</a></li>
35+
<ul class="py-1 font-light text-gray-500 dark:text-gray-400" aria-labelledby="dropdown">
36+
<li>
37+
<a
38+
class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
39+
href="{{ path("admin_homepage") }}"
40+
>
41+
{{ component('icon', { class: 'h-5 w-5 mr-2 text-gray-400', icon: 'wrench' }) }}
42+
{{ "common.admin"|trans }}
43+
</a>
44+
</li>
45+
</ul>
2446
{% endif %}
25-
<li class="menu-title select-none">
26-
<span>{{ "common.logout"|trans }}</span>
27-
</li>
28-
<li><a href="{{ path("security_logout") }}">{{ "common.logout"|trans }}</a></li>
29-
{% endblock %}
30-
{% endcomponent %}
47+
48+
<ul class="py-1 font-light text-gray-500 dark:text-gray-400" aria-labelledby="dropdown">
49+
<li>
50+
<a
51+
class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
52+
href="{{ path("security_logout") }}"
53+
>
54+
{{ component('icon', { class: 'h-5 w-5 mr-2 text-gray-400', icon: 'log-out' }) }}
55+
{{ "common.logout"|trans }}
56+
</a>
57+
</li>
58+
</ul>
59+
</div>
3160
{% else %}
3261
{% component dropdown %}
3362
{% block button %}

‎templates/components/alert.html.twig‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
data-transition-leave-to="opacity-0 translate-x-0"
77
class="alert-{{ type }} alert hidden transform flex-row items-center shadow-lg transition duration-1000"
88
role="alert">
9-
<span>{% include "icon/#{type}.html.twig" %}</span>
9+
<span>
10+
{{ component('icon', { icon: '#{type}' }) }}
11+
</span>
1012

1113
<span>{{ message }}</span>
1214
<button class="ml-auto" data-action="notification#hide" aria-label="{{ "common.close"|trans }}">

‎templates/components/arrow_sortable.html.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% if sortable == 'sortable' %}
2-
{% include 'icon/arrow_up_down.html.twig' %}
2+
{{ component('icon', { icon: 'arrow_up_down' }) }}
33
{% elseif sortable == 'asc' %}
4-
{% include 'icon/arrow_down.html.twig' %}
4+
{{ component('icon', { icon: 'arrow_down' }) }}
55
{% elseif sortable == 'desc' %}
6-
{% include 'icon/arrow_up.html.twig' %}
6+
{{ component('icon', { icon: 'arrow_up' }) }}
77
{% endif %}

‎templates/components/avatar.html.twig‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
{% set hasPicture = user.profile.picture.fileName|default(null) %}
22

3-
<div class="avatar {{ user and not hasPicture ? "placeholder" }} {{ class }}">
3+
<div class="flex overflow-hidden rounded-full {{ small ? 'h-8 w-8' : 'h-52 w-52' }} {{ user and not hasPicture ? "placeholder" }} {{ class }}">
44
{% if user %}
55
<div
66
{% if id %}id="{{ id }}"{% endif %}
7-
class="{{ small ? "w-10 rounded-full" : "h-48 w-48" }} {{ hasPicture ? "bg-neutral-focus text-neutral-content" }}"
87
{% if id and permanent %}data-turbo-permanent{% endif %}
98
>
109
{% if hasPicture %}
@@ -15,8 +14,8 @@
1514
src: vich_uploader_asset(user.profile.picture, "file"),
1615
filter: small ? "avatar_small" : "avatar",
1716
alt: "user.profile.picture"|trans({ username: user.profile.username }),
18-
width: small ? 48 : 200,
19-
height: small ? 48 : 200
17+
width: small ? 32 : 208,
18+
height: small ? 32 : 208
2019
}
2120
)
2221
}}

‎templates/components/button.html.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@
2222
>
2323
{% if icon or content %}
2424
{% if icon and iconPosition == "left" %}
25-
{% include "icon/#{icon}.html.twig" %}
25+
{{ component('icon', { icon: '#{icon}' }) }}
2626
{% endif %}
2727
{{ content }}
2828
{% if icon and iconPosition == "right" %}
29-
{% include "icon/#{icon}.html.twig" %}
29+
{{ component('icon', { icon: '#{icon}' }) }}
3030
{% endif %}
3131
{% else %}
3232
{% block content %}

‎templates/components/icon.html.twig‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{% if icon %}
2+
{% include "icon/#{icon}.html.twig" with { class } %}
3+
{% endif %}

‎templates/components/pagination.html.twig‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<div class="btn-group mx-auto">
55
{% if page != 1 %}
66
<a class="btn" href="{{ path(path.route, path.params|merge({ (path.pageParam): 1 })) }}" aria-label="{{ "common.first_page"|trans({ number: 1 }) }}">
7-
{% include "icon/chevron_double_left.html.twig" %}
7+
{{ component('icon', { icon: 'chevron_double_left' }) }}
88
</a>
99
<a class="btn" href="{{ path(path.route, path.params|merge({ (path.pageParam): page - 1 })) }}" aria-label="{{ "common.previous_page"|trans({ number: page - 1 }) }}">
10-
{% include "icon/chevron_left.html.twig" %}
10+
{{ component('icon', { icon: 'chevron_left' }) }}
1111
</a>
1212
{% endif %}
1313

@@ -39,10 +39,10 @@
3939

4040
{% if page < pages %}
4141
<a class="btn rounded-none" href="{{ path(path.route, path.params|merge({ (path.pageParam): page + 1 })) }}" aria-label="{{ "common.next_page"|trans({ number: page + 1 }) }}">
42-
{% include "icon/chevron_right.html.twig" %}
42+
{{ component('icon', { icon: 'chevron_right' }) }}
4343
</a>
4444
<a class="btn rounded-none" href="{{ path(path.route, path.params|merge({ (path.pageParam): pages })) }}" aria-label="{{ "common.last_page"|trans({ number: pages }) }}">
45-
{% include "icon/chevron_double_right.html.twig" %}
45+
{{ component('icon', { icon: 'chevron_double_right' }) }}
4646
</a>
4747
{% endif %}
4848
</div>

0 commit comments

Comments
 (0)