Fix #137 Migrate the icons from Material Icons to Material Symbols

This commit is contained in:
Timothée Jaussoin 2023-12-19 11:15:30 +01:00
parent c2ebe29d77
commit 76430cc5af
37 changed files with 101 additions and 91 deletions

View file

@ -2,6 +2,7 @@
v1.5
----
- Fix #137 Migrate the icons from Material Icons to Material Symbols
- Fix #135 Refactor the password algorithms code
- Fix #134 Create an Activity view in the Admin > Accounts panel
- Fix #133 Make the MySQL connection unstrict

View file

@ -1,16 +1,15 @@
@import url('./fonts.css');
@import url('./form.css');
/* fallback */
@font-face {
font-family: 'Material Icons Outlined';
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url(../fonts/MaterialIcons-Outlined.woff2) format('woff2');
}
src: url(../fonts/MaterialSymbols-Outlined.woff2) format('woff2');
}
.material-icons-outlined {
font-family: 'Material Icons Outlined';
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
line-height: 1;
@ -291,7 +290,9 @@ header nav a#menu:after {
font-size: 3rem;
}
body.show_menu header nav a#menu:after {font-family: 'Material Icons'
body.show_menu header nav a#menu:after {
font-family: 'Material Icons'
header nav a#logo {
position: absolute;
left: calc(50% - 1.5rem);
@ -320,7 +321,7 @@ header nav a.oppose {
margin-left: auto;
}
header nav a.oppose ~ a.oppose {
header nav a.oppose~a.oppose {
margin-left: 0;
}
@ -384,18 +385,18 @@ content section header form {
display: inline-block;
}
content section header > *.oppose {
content section header>*.oppose {
margin-left: auto;
}
content nav + section {
content nav+section {
min-width: calc(80% - 20rem);
margin-bottom: 4rem;
}
/** Sidenav **/
content > nav {
content>nav {
background-color: var(--main-5);
width: 20rem;
margin-left: 0;
@ -412,7 +413,7 @@ content > nav {
z-index: 1;
}
content > nav a {
content>nav a {
color: white;
font-weight: 600;
font-size: 1.75rem;
@ -424,21 +425,21 @@ content > nav a {
white-space: nowrap;
}
content > nav a.current {
content>nav a.current {
background-color: white;
border-radius: 4rem;
color: var(--main-5);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
content > nav a i {
content>nav a i {
margin: 0 1rem;
margin-left: 2rem;
font-size: 2rem;
}
@media screen and (max-width: 800px) {
content > nav {
content>nav {
width: 100%;
position: absolute;
min-height: 100vh;
@ -452,15 +453,15 @@ content > nav a i {
transform: translateX(-100%);
}
content > nav a {
content>nav a {
margin-left: 0;
}
content > nav a.current:after {
content>nav a.current:after {
display: none;
}
body.show_menu content > nav {
body.show_menu content>nav {
transform: translateX(0);
}
}
@ -493,7 +494,7 @@ h1 {
margin-bottom: 1rem;
}
header > h1 {
header>h1 {
margin-bottom: 0;
}
@ -533,8 +534,15 @@ h4 {
padding: 0.5rem 0;
}
p + h1, p + h2, p + h3, p + h4,
ul + h1, ul + h2, ul + h3, ul + h4, h3 + p {
p+h1,
p+h2,
p+h3,
p+h4,
ul+h1,
ul+h2,
ul+h3,
ul+h4,
h3+p {
margin-top: 1rem;
}
@ -723,6 +731,7 @@ ul.pagination li:not(.disabled).active .page-link {
ul.pagination li:not(.disabled) .page-link {
color: var(--main-5);
}
ul.pagination li:not(.disabled):not(.active) .page-link:hover {
background-color: var(--main-1);
}
@ -786,7 +795,7 @@ select.list_toggle {
color: var(--grey-5);
}
.breadcrumb li + li:before {
.breadcrumb li+li:before {
content: ">";
margin: 0 1rem;
font-size: 1rem;
@ -809,11 +818,11 @@ ol.steps li {
color: var(--grey-5);
}
ol.steps li + li {
ol.steps li+li {
margin-left: 9rem;
}
ol.steps li + li:after {
ol.steps li+li:after {
display: block;
border-top: 1px solid var(--grey-3);
content: "";

Binary file not shown.

View file

@ -9,7 +9,7 @@
@section('content')
<div class="large">
<h2><i class="material-icons-outlined">key</i>API Key</h2>
<h2><i class="material-symbols-outlined">key</i>API Key</h2>
<p>You can generate an API key and use it to request the different API endpoints, <a href="{{ route('api') }}">check
the related API documentation</a> to know how to use that key.</p>

View file

@ -2,13 +2,13 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">dashboard</i> Dashboard</h1>
<h1><i class="material-symbols-outlined">dashboard</i> Dashboard</h1>
</header>
<div class="card">
<h3><i class="material-icons-outlined">waving_hand</i> Welcome back</h3>
<h3><i class="material-symbols-outlined">waving_hand</i> Welcome back</h3>
<p>
<i class="material-icons-outlined">email</i>
<i class="material-symbols-outlined">email</i>
@if (!empty($account->email))
{{ $account->email }}
@else
@ -18,7 +18,7 @@
</p>
<p>
<i class="material-icons-outlined">call</i>
<i class="material-symbols-outlined">call</i>
@if (!empty($account->phone))
{{ $account->phone }}
@else
@ -27,7 +27,7 @@
<a href="{{ route('account.phone.change') }}">Change my current account phone</a>
</p>
<p>
<i class="material-icons-outlined">lock</i>
<i class="material-symbols-outlined">lock</i>
<a href="{{ route('account.password.show') }}">
@if ($account->passwords()->count() > 0)
Change my password
@ -38,31 +38,31 @@
</p>
<p>
<i class="material-icons-outlined">key</i>
<i class="material-symbols-outlined">key</i>
<a href="{{ route('account.api_key.show') }}">
API Key Management
</a>
</p>
<p>
<i class="material-icons-outlined">delete</i>
<i class="material-symbols-outlined">delete</i>
<a href="{{ route('account.delete') }}">Delete my account</a>
</p>
</div>
<div class="card">
<h3><i class="material-icons-outlined">person</i> Account information</h3>
<h3><i class="material-symbols-outlined">person</i> Account information</h3>
<p><i class="material-icons-outlined">alternate_email</i> SIP address: sip:{{ $account->identifier }}</p>
<p><i class="material-icons-outlined">person</i> Username: {{ $account->username }}</p>
<p><i class="material-icons-outlined">dns</i> Domain: {{ $account->domain }}</p>
<p><i class="material-symbols-outlined">alternate_email</i> SIP address: sip:{{ $account->identifier }}</p>
<p><i class="material-symbols-outlined">person</i> Username: {{ $account->username }}</p>
<p><i class="material-symbols-outlined">dns</i> Domain: {{ $account->domain }}</p>
@if (!empty(config('app.proxy_registrar_address')))
<p><i class="material-icons-outlined">lan</i> Proxy/registrar address: sip:{{ config('app.proxy_registrar_address') }}
<p><i class="material-symbols-outlined">lan</i> Proxy/registrar address: sip:{{ config('app.proxy_registrar_address') }}
</p>
@endif
@if (!empty(config('app.transport_protocol_text')))
<p><i class="material-icons-outlined">settings_ethernet</i> Transport: {{ config('app.transport_protocol_text') }} </p>
<p><i class="material-symbols-outlined">settings_ethernet</i> Transport: {{ config('app.transport_protocol_text') }} </p>
@endif
<!--<h3 class="mt-3">Automatic authentication</h3>

View file

@ -6,7 +6,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">delete</i> Delete my account</h1>
<h1><i class="material-symbols-outlined">delete</i> Delete my account</h1>
<a href="{{ route('account.dashboard') }}" class="btn btn-secondary oppose">Cancel</a>
<input form="delete" class="btn" type="submit" value="Delete">

View file

@ -3,7 +3,7 @@
@section('content')
<section>
<h1>
<i class="material-icons-outlined">mail</i>
<i class="material-symbols-outlined">mail</i>
@if ($account->email)
Change your email
@else

View file

@ -2,7 +2,7 @@
@section('content')
<section>
<h1 style="margin-bottom: 4rem;"><i class="material-icons-outlined">account_circle</i> Validate your email</h1>
<h1 style="margin-bottom: 4rem;"><i class="material-symbols-outlined">account_circle</i> Validate your email</h1>
<form method="POST" action="{{ route('account.email.update') }}" accept-charset="UTF-8">
@csrf

View file

@ -2,7 +2,7 @@
@section('content')
<section>
<h1 style="margin-bottom: 3rem;"><i class="material-icons-outlined">waving_hand</i> Welcome on {{ config('app.name') }}</h1>
<h1 style="margin-bottom: 3rem;"><i class="material-symbols-outlined">waving_hand</i> Welcome on {{ config('app.name') }}</h1>
@if (config('instance.intro_registration'))
@parsedown(config('instance.intro_registration'))

View file

@ -7,9 +7,9 @@
@section('content')
<header>
@if ($account->passwords()->count() > 0)
<h1><i class="material-icons-outlined">lock</i> Change password</h1>
<h1><i class="material-symbols-outlined">lock</i> Change password</h1>
@else
<h1><i class="material-icons-outlined">lock</i> Set password</h1>
<h1><i class="material-symbols-outlined">lock</i> Set password</h1>
@endif
<a href="{{ route('account.dashboard') }}" class="btn btn-secondary oppose">Cancel</a>

View file

@ -3,7 +3,7 @@
@section('content')
<section>
<h1>
<i class="material-icons-outlined">call</i>
<i class="material-symbols-outlined">call</i>
@if ($account->phone)
Change your phone number
@else

View file

@ -2,7 +2,7 @@
@section('content')
<section>
<h1><i class="material-icons-outlined">account_circle</i> Validate your phone number</h1>
<h1><i class="material-symbols-outlined">account_circle</i> Validate your phone number</h1>
<form method="POST" action="{{ route('account.phone.update') }}" accept-charset="UTF-8">
@csrf

View file

@ -3,7 +3,7 @@
@section('content')
<section>
<h1><i class="material-icons-outlined">account_circle</i> Account recovery</h1>
<h1><i class="material-symbols-outlined">account_circle</i> Account recovery</h1>
<form method="POST" action="{{ route('account.recovery.confirm') }}" accept-charset="UTF-8">
@csrf

View file

@ -2,7 +2,7 @@
@section('content')
<section>
<h1><i class="material-icons-outlined">account_circle</i> Account recovery</h1>
<h1><i class="material-symbols-outlined">account_circle</i> Account recovery</h1>
<div>
<form method="POST" action="{{ route('account.recovery.send') }}" accept-charset="UTF-8">
@csrf

View file

@ -2,7 +2,7 @@
@section('content')
<section>
<h1><i class="material-icons-outlined">account_circle</i> Register</h1>
<h1><i class="material-symbols-outlined">account_circle</i> Register</h1>
<p style="margin-bottom: 2rem;">
You already have an account?
<a class="btn btn-secondary" href="{{ route('account.login') }}">Login</a>

View file

@ -2,7 +2,7 @@
@section('content')
<section>
<h1><i class="material-icons-outlined">account_circle</i> Register</h1>
<h1><i class="material-symbols-outlined">account_circle</i> Register</h1>
<p style="margin-bottom: 2rem;">
You already have an account?
<a class="btn btn-secondary" href="{{ route('account.login') }}">Login</a>

View file

@ -11,7 +11,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">view_list</i> {{ $account->identifier }}</h1>
<h1><i class="material-symbols-outlined">view_list</i> {{ $account->identifier }}</h1>
</header>
@include('admin.account.parts.tabs')

View file

@ -7,7 +7,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">person_add</i> Add a Contact</h1>
<h1><i class="material-symbols-outlined">person_add</i> Add a Contact</h1>
<a href="{{ route('admin.account.edit', $account->id) }}" class="btn btn-secondary oppose">Cancel</a>
<input form="add_contact" class="btn" type="submit" value="Add">
</header>

View file

@ -8,10 +8,10 @@
@section('content')
@if ($account->id)
<header>
<h1><i class="material-icons-outlined">people</i> {{ $account->identifier }}</h1>
<h1><i class="material-symbols-outlined">people</i> {{ $account->identifier }}</h1>
<a href="{{ route('admin.account.index') }}" class="btn btn-secondary oppose">Cancel</a>
<a class="btn btn-secondary" href="{{ route('admin.account.delete', $account->id) }}">
<i class="material-icons-outlined">delete</i>
<i class="material-symbols-outlined">delete</i>
Delete
</a>
<input form="create_edit" class="btn" type="submit" value="Update">
@ -20,7 +20,7 @@
@include('admin.account.parts.tabs')
@else
<header>
<h1><i class="material-icons-outlined">people</i> Create an account</h1>
<h1><i class="material-symbols-outlined">people</i> Create an account</h1>
<a href="{{ route('admin.account.index') }}" class="btn btn-secondary oppose">Cancel</a>
<input form="create_edit" class="btn" type="submit" value="Create">
</header>
@ -148,7 +148,7 @@
href="{{ route('admin.contacts_lists.edit', ['contacts_list_id' => $contactsList->id]) }}">{{ $contactsList->title }}</a>
<a
href="{{ route('admin.account.contacts_lists.detach', ['account_id' => $account->id, 'contacts_list_id' => $contactsList->id]) }}">
<i class="material-icons-outlined">close</i>
<i class="material-symbols-outlined">close</i>
</a>
</p>
@endforeach
@ -159,7 +159,7 @@
<p class="chip">
<a href="{{ route('admin.account.edit', $account) }}">{{ $contact->identifier }}</a>
<a href="{{ route('admin.account.contact.delete', [$account, $contact->id]) }}">
<i class="material-icons-outlined">close</i>
<i class="material-symbols-outlined">close</i>
</a>
</p>
@endforeach

View file

@ -7,7 +7,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">delete</i> Delete an account</h1>
<h1><i class="material-symbols-outlined">delete</i> Delete an account</h1>
<a href="{{ route('admin.account.edit', $account->id) }}" class="btn btn-secondary oppose">Cancel</a>
<input form="delete" class="btn" type="submit" value="Delete">

View file

@ -11,7 +11,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">people</i> {{ $account->identifier }}</h1>
<h1><i class="material-symbols-outlined">people</i> {{ $account->identifier }}</h1>
<a href="{{ route('admin.account.edit', $account->id) }}" class="btn btn-secondary oppose">Cancel</a>
</header>

View file

@ -7,7 +7,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">people</i> Import accounts</h1>
<h1><i class="material-symbols-outlined">people</i> Import accounts</h1>
<a href="{{ route('admin.account.index') }}" class="btn btn-secondary oppose">Cancel</a>
<a href="#" onclick="history.back()" class="btn btn-secondary">Previous</a>
@ -18,7 +18,7 @@
<input name="domain" type="hidden" value="{{ $domain }}">
<a type="submit"
class="btn @if ($errors->isNotEmpty()) disabled @endif" onclick="document.querySelector('form[name=handle]').submit()">
<i class="material-icons-outlined">publish</i>
<i class="material-symbols-outlined">publish</i>
Import
</a>
</form>

View file

@ -7,7 +7,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">people</i> Import accounts</h1>
<h1><i class="material-symbols-outlined">people</i> Import accounts</h1>
<a href="{{ route('admin.account.index') }}" class="btn btn-secondary oppose">Cancel</a>
<input form="import" class="btn" type="submit" value="Next">
</header>

View file

@ -8,19 +8,19 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">people</i> Accounts</h1>
<h1><i class="material-symbols-outlined">people</i> Accounts</h1>
<a class="btn btn-secondary oppose" href="{{ route('admin.account.import.create') }}">
<i class="material-icons-outlined">publish</i>
<i class="material-symbols-outlined">publish</i>
Import Accounts
</a>
@if(config('app.intercom_features'))
<a class="btn btn-secondary" href="{{ route('admin.account.type.index') }}">
<i class="material-icons-outlined">category</i>
<i class="material-symbols-outlined">category</i>
Types
</a>
@endif
<a class="btn" href="{{ route('admin.account.create') }}">
<i class="material-icons-outlined">add_circle</i>
<i class="material-symbols-outlined">add_circle</i>
New Account
</a>
</header>

View file

@ -11,7 +11,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">people</i> {{ $account->identifier }}</h1>
<h1><i class="material-symbols-outlined">people</i> {{ $account->identifier }}</h1>
</header>
@include('admin.account.parts.tabs')
@ -45,19 +45,19 @@
</form>
</div>
<h2><i class="material-icons-outlined">message</i> Messages from the account</h2>
<h2><i class="material-symbols-outlined">message</i> Messages from the account</h2>
{!! $messagesFromGraph !!}
<h2><i class="material-icons-outlined">message</i> Messages to the account</h2>
<h2><i class="material-symbols-outlined">message</i> Messages to the account</h2>
{!! $messagesToGraph !!}
<h2><i class="material-icons-outlined">call</i> Calls from the account</h2>
<h2><i class="material-symbols-outlined">call</i> Calls from the account</h2>
{!! $callsFromGraph !!}
<h2><i class="material-icons-outlined">call</i> Calls to the account</h2>
<h2><i class="material-symbols-outlined">call</i> Calls to the account</h2>
{!! $callsToGraph !!}

View file

@ -7,7 +7,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">list</i> Call Logs</h1>
<h1><i class="material-symbols-outlined">list</i> Call Logs</h1>
</header>
@include('admin.account.parts.tabs')

View file

@ -9,9 +9,9 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">category</i> Types</h1>
<h1><i class="material-symbols-outlined">category</i> Types</h1>
<a class="btn oppose" href="{{ route('admin.account.type.create') }}">
<i class="material-icons-outlined">add</i>
<i class="material-symbols-outlined">add</i>
New Type
</a>
</header>

View file

@ -12,7 +12,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">account_box</i> {{ $contacts_list->title }}</h1>
<h1><i class="material-symbols-outlined">account_box</i> {{ $contacts_list->title }}</h1>
<a href="{{ route('admin.contacts_lists.edit', $contacts_list->id) }}" class="btn btn-secondary oppose">Cancel</a>
@ -56,7 +56,7 @@
<div class="oppose">
<a class="btn"
onclick="Utils.clearStorageList('a{{ $contacts_list->id }}'); document.querySelector('form[name=contacts_lists_contacts_store]').submit()">
<i class="material-icons-outlined">add_circle</i>
<i class="material-symbols-outlined">add_circle</i>
Add <span class="list_toggle" data-list-id="a{{ $contacts_list->id }}"></span> contacts
</a>
</div>

View file

@ -10,15 +10,15 @@
@section('content')
<header>
@if ($contacts_list->id)
<h1><i class="material-icons-outlined">account_box</i> {{ $contacts_list->title }}</h1>
<h1><i class="material-symbols-outlined">account_box</i> {{ $contacts_list->title }}</h1>
<a href="{{ route('admin.contacts_lists.index') }}" class="btn btn-secondary oppose">Cancel</a>
<a class="btn btn-secondary" href="{{ route('admin.contacts_lists.delete', $contacts_list->id) }}">
<i class="material-icons-outlined">delete</i>
<i class="material-symbols-outlined">delete</i>
Delete
</a>
<input form="create_edit_contacts_list" class="btn" type="submit" value="Update">
@else
<h1><i class="material-icons-outlined">account_box</i> Create a Contacts List</h1>
<h1><i class="material-symbols-outlined">account_box</i> Create a Contacts List</h1>
<a href="{{ route('admin.contacts_lists.index') }}" class="btn btn-secondary oppose">Cancel</a>
<input form="create_edit_contacts_list" class="btn" type="submit" value="Create">
@endif
@ -51,7 +51,7 @@
<hr>
<a class="btn btn-secondary oppose" href="{{ route('admin.contacts_lists.contacts.add', $contacts_list->id) }}">
<i class="material-icons-outlined">add</i> Add contacts
<i class="material-symbols-outlined">add</i> Add contacts
</a>
<form method="POST"
@ -95,7 +95,7 @@
<div>
<a class="btn btn-tertiary oppose"
onclick="Utils.clearStorageList('d{{ $contacts_list->id }}'); document.querySelector('form[name=contacts_lists_contacts_destroy]').submit()">
<i class="material-icons-outlined">delete</i>
<i class="material-symbols-outlined">delete</i>
Remove <span class="list_toggle" data-list-id="d{{ $contacts_list->id }}"></span> contacts
</a>
</div>

View file

@ -9,9 +9,9 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">account_box</i> Contacts Lists</h1>
<h1><i class="material-symbols-outlined">account_box</i> Contacts Lists</h1>
<a class="btn oppose" href="{{ route('admin.contacts_lists.create') }}">
<i class="material-icons-outlined">add_circle</i>
<i class="material-symbols-outlined">add_circle</i>
New Contacts List
</a>
</header>

View file

@ -62,7 +62,7 @@
<a class="btn btn-secondary" href="{{ route('admin.statistics.show') }}">Reset</a>
<a class="btn btn-tertiary"
href="{{ route('admin.statistics.show', ['by' => $request->get('by', 'day'), 'type' => $type, 'export' => true] + $request->only(['from', 'to', 'domain'])) }}">
<i class="material-icons-outlined">download</i> Export
<i class="material-symbols-outlined">download</i> Export
</a>
</div>
</form>

View file

@ -6,7 +6,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">analytics</i> Statistics</h1>
<h1><i class="material-symbols-outlined">analytics</i> Statistics</h1>
</header>
@include('admin.statistics.parts.tabs')

View file

@ -6,7 +6,7 @@
@section('content')
<header>
<h1><i class="material-icons-outlined">analytics</i> Statistics</h1>
<h1><i class="material-symbols-outlined">analytics</i> Statistics</h1>
</header>
@include('admin.statistics.parts.tabs')

View file

@ -31,15 +31,15 @@
@endif
<a class="oppose" href="{{ route('about') }}">
<i class="material-icons-outlined">info</i><span class="on_desktop">About</span>
<i class="material-symbols-outlined">info</i><span class="on_desktop">About</span>
</a>
@if (auth()->user())
<a class="oppose" href="{{ route('account.dashboard') }}">
<i class="material-icons-outlined">account_circle</i><span
<i class="material-symbols-outlined">account_circle</i><span
class="on_desktop">{{ auth()->user()->identifier }}</span>
</a>
<a class="oppose" href="{{ route('account.logout') }}">
<i class="material-icons-outlined">logout</i>
<i class="material-symbols-outlined">logout</i>
</a>
@endif
</nav>

View file

@ -9,7 +9,7 @@
'order_sort' => request()->get('order_sort', 'desc') == 'desc' ? 'asc' : 'desc'
] + request()->except('_token', 'query')) }}">
{{ $title }}
<i class="material-icons-outlined">
<i class="material-symbols-outlined">
@if (request()->get('order_by') == $key && request()->has('order_sort'))
@if (request()->get('order_sort') == 'asc')
expand_more

View file

@ -13,7 +13,7 @@
@foreach ($items as $route => $value)
<a @if (str_starts_with(url()->current(), route($route)))class="current"@endif href="{{ route($route) }}">
<i class="material-icons-outlined">{{ $value['icon'] }}</i>
<i class="material-symbols-outlined">{{ $value['icon'] }}</i>
{{ $value['title'] }}
</a>
@endforeach