Fix search forms + menu styles

assets/css/scss/atoms/_checkbox.scss

@@ -2,10 +2,10 @@
   @apply h-4 w-4;
 
   .p-checkbox-box {
-    @apply border border-solid border-gray-50 bg-white h-4 rounded-sm w-4 transition-none;
+    @apply border border-solid border-gray-50 bg-white h-4 rounded w-4 transition-none;
 
     .p-checkbox-icon {
-      @apply text-body-2 text-white;
+      @apply text-caption-bold text-white;
     }
 
     &.p-highlight {
@@ -22,7 +22,7 @@
       @apply outline-none outline-offset-0;
     }
     .p-checkbox-box.p-highlight {
-      @apply hover:border-primary hover:bg-support-4;
+      @apply bg-support-4 hover:border-primary;
     }
   }
 }

assets/css/scss/atoms/_dropdown.scss

@@ -1,5 +1,9 @@
+select.p-dropdown {
+  @apply px-4 py-3;
+}
+
 .p-dropdown {
-  @apply bg-white border border-solid border-gray-50 px-4 py-3 rounded-lg transition;
+  @apply bg-white border border-solid border-gray-50 rounded-lg transition;
 
   &:not(.p-disabled) {
     @apply hover:border-primary focus:border-primary;
@@ -10,7 +14,7 @@
   }
 
   .p-dropdown-label {
-    @apply border-none;
+    @apply border-none text-body-2;
 
     &:enabled {
       &:focus {

assets/css/scss/atoms/_form.scss

@@ -38,8 +38,21 @@
 
 @layer components {
   .form {
+    &--search,
     &--inline {
-      @apply flex-row gap-3;
+      @apply flex-row gap-3 mb-1;
+    }
+
+    &--search {
+      button {
+        @apply flex-none;
+      }
+    }
+
+    &__group {
+      &--inline {
+        @apply flex gap-3;
+      }
     }
 
     &__field {

assets/css/scss/atoms/_messages.scss

@@ -2,11 +2,11 @@
   @apply mb-4 shadow-sm rounded-md border-0;
 
   .p-message-wrapper {
-    @apply py-3 px-4;
+    @apply gap-3.5 py-3 px-4;
   }
 
   .p-message-close {
-    @apply rounded-full transition duration-200 w-6 h-6;
+    @apply rounded-full transition duration-200 min-w-[1rem] min-h-[1rem];
 
     &:hover {
     }
@@ -17,8 +17,6 @@
   }
 
   .p-message-text {
-    @apply ml-4;
-
     a {
       @apply font-semibold;
     }

assets/css/scss/index.scss

@@ -32,6 +32,7 @@
 @import "organisms/cards";
 @import "organisms/course_card";
 @import "organisms/modals";
+@import "organisms/menu";
 @import "organisms/sidebar";
 
 @import "components/badges";

assets/css/scss/organisms/_cards.scss

@@ -27,4 +27,8 @@
 
   .p-card-footer {
   }
+
+  .p-menu {
+    @apply border-none py-0 w-full;
+  }
 }

assets/css/scss/organisms/_sidebar.scss

@@ -37,7 +37,7 @@
   }
 
   &__button {
-    @apply hidden bg-white border border-solid border-gray-25 rounded-full absolute top-7 -right-4 text-tiny text-primary
+    @apply hidden bg-white border border-solid border-gray-25 rounded-full absolute top-7 -right-4 text-tiny text-primary p-3
       sm:inline-flex;
     z-index: 11;
 
@@ -49,6 +49,10 @@
     &.p-button.p-button-icon-only {
       @apply h-8 p-0 w-8;
     }
+
+    .p-button-label {
+      @apply hidden;
+    }
   }
 
   .p-panelmenu {

assets/vue/components/page/Layout.vue

@@ -1,9 +1,6 @@
 <template>
-  <router-view></router-view>
+  <router-view />
 </template>
 
-<script>
+<script setup>
-  export default {
-      name: 'PageLayout'
-  }
 </script>

assets/vue/main.js

@@ -173,11 +173,8 @@ store.registerModule(
 
 // Vuetify.
 import '@mdi/font/css/materialdesignicons.css';
-//import 'vuetify/lib/styles/main.sass';
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify';
-//import * as components from 'vuetify/lib/components';
-//import * as directives from 'vuetify/lib/directives';
 import { aliases, mdi } from 'vuetify/lib/iconsets/mdi'
 
 const options = {
@@ -233,7 +230,6 @@ import ColumnGroup from 'primevue/columngroup';
 import ToastService from 'primevue/toastservice';
 import ConfirmationService from 'primevue/confirmationservice';
 
-// import 'primevue/resources/themes/tailwind-light/theme.css';
 import 'primevue/resources/primevue.min.css';
 // import 'primeflex/primeflex.css';
 import "primeicons/primeicons.css";

assets/vue/views/page/Update.vue

@@ -1,6 +1,13 @@
 <template>
-  <Toolbar :handle-submit="onSendForm" :handle-reset="resetForm"></Toolbar>
+  <Toolbar
-  <PageForm ref="updateForm" :values="item" :errors="violations" />
+    :handle-submit="onSendForm"
+    :handle-reset="resetForm"
+  />
+  <PageForm
+    ref="updateForm"
+    :values="item"
+    :errors="violations"
+  />
   <Loading :visible="isLoading" />
 </template>
 
@@ -18,15 +25,15 @@ import useVuelidate from "@vuelidate/core";
 export default {
   name: 'PageUpdate',
   servicePrefix,
-  mixins: [UpdateMixin],
-  setup () {
-    return { v$: useVuelidate() }
-  },
   components: {
     Loading,
     Toolbar,
     PageForm
   },
+  mixins: [UpdateMixin],
+  setup () {
+    return { v$: useVuelidate() }
+  },
   computed: {
     ...mapFields('page', {
       deleteLoading: 'isLoading',

public/main/admin/course_list.php

@@ -449,7 +449,7 @@ if (isset($_GET['search']) && 'advanced' === $_GET['search']) {
         '',
         '',
         [],
-        FormValidator::LAYOUT_INLINE
+        FormValidator::LAYOUT_BOX_SEARCH
     );
     $form->addElement(
         'text',

public/main/admin/index.php

@@ -46,6 +46,7 @@ if (api_is_platform_admin()) {
 $blocks = [];
 
 /* Users */
+$blocks['users']['mdi_icon'] = 'account';
 $blocks['users']['icon'] = Display::return_icon(
     'members.png',
     get_lang('User management'),
@@ -62,7 +63,7 @@ $searchForm = new FormValidator(
     'GET',
     api_get_path(WEB_CODE_PATH).'admin/user_list.php',
     null,
-    null,
+    [],
     FormValidator::LAYOUT_BOX_SEARCH
 );
 $searchForm->addText('keyword', get_lang('Keyword'));
@@ -122,6 +123,7 @@ $blocks['users']['extra'] = null;
 
 if (api_is_platform_admin()) {
     /* Courses */
+    $blocks['courses']['mdi_icon'] = 'book-open-page-variant';
     $blocks['courses']['icon'] = Display::return_icon(
         'course.png',
         get_lang('Course management'),
@@ -181,6 +183,7 @@ if (api_is_platform_admin()) {
     $blocks['courses']['extra'] = null;
 
     /* Sessions */
+    $blocks['sessions']['mdi_icon'] = 'google-classroom';
     $blocks['sessions']['icon'] = Display::return_icon(
         'session.png',
         get_lang('Sessions management'),
@@ -254,6 +257,7 @@ if (api_is_platform_admin()) {
 
     // Skills
     if (SkillModel::isToolAvailable()) {
+        $blocks['skills']['mdi_icon'] = 'certificate';
         $blocks['skills']['icon'] = Display::return_icon(
             'skill-badges.png',
             get_lang('Skills'),
@@ -308,6 +312,7 @@ if (api_is_platform_admin()) {
     }
 
     /* Platform */
+    $blocks['platform']['mdi_icon'] = 'cogs';
     $blocks['platform']['icon'] = Display::return_icon(
         'platform.png',
         get_lang('Platform management'),
@@ -391,6 +396,7 @@ if (api_is_platform_admin()) {
 
 /* Settings */
 if (api_is_platform_admin()) {
+    $blocks['settings']['mdi_icon'] = 'tools';
     $blocks['settings']['icon'] = Display::return_icon(
         'settings.png',
         get_lang('System'),
@@ -470,6 +476,7 @@ if (api_is_platform_admin()) {
         $menuAdministratorItems = $_plugins['menu_administrator'];
 
         if ($menuAdministratorItems) {
+            $blocks['plugins']['mdi_icon'] = 'puzzle';
             $blocks['plugins']['icon'] = Display::return_icon(
                 'plugins.png',
                 get_lang('Plugins'),
@@ -506,6 +513,7 @@ if (api_is_platform_admin()) {
     }
 
     /* Chamilo.org */
+    $blocks['chamilo']['mdi_icon'] = 'cogs';
     $blocks['chamilo']['icon'] = Display::return_icon(
         'platform.png',
         'Chamilo.org',
@@ -537,6 +545,7 @@ if (api_is_platform_admin()) {
     $blocks['chamilo']['search_form'] = null;
 
     // Version check
+    $blocks['version_check']['mdi_icon'] = '';
     $blocks['version_check']['icon'] = Display::return_icon(
         'platform.png',
         'Chamilo.org',

public/main/admin/user_list.php

@@ -1015,7 +1015,7 @@ if (!empty($action)) {
 }
 
 // Create a search-box
-$form = new FormValidator('search_simple', 'get', null, null, null, FormValidator::LAYOUT_INLINE);
+$form = new FormValidator('search_simple', 'get', null, null, [], FormValidator::LAYOUT_BOX_SEARCH);
 $form->addText(
     'keyword',
     null,

public/main/inc/lib/formvalidator/FormValidator.class.php

@@ -49,13 +49,11 @@ class FormValidator extends HTML_QuickForm
         $formTemplate = $this->getFormTemplate();
 
         switch ($layout) {
-            case self::LAYOUT_HORIZONTAL:
-                break;
             case self::LAYOUT_BOX_SEARCH:
-                $attributes['class'] = 'w-full flex gap-2';
+                $attributes['class'] = 'form--search';
                 break;
             case self::LAYOUT_INLINE:
-                $attributes['class'] = 'ch flex gap-2 ';
+                $attributes['class'] = 'gap-3 ';
                 break;
             case self::LAYOUT_BOX:
                 $attributes['class'] = 'ch flex gap-1 ';
@@ -107,6 +105,7 @@ class FormValidator extends HTML_QuickForm
         // Set required field template
         $this->setRequiredNote($required);
 
+        if (self::LAYOUT_BOX_SEARCH !== $layout) {
             $noteTemplate = <<<EOT
 	<div class="form-group">
 		<div class="col-sm-offset-2 col-sm-10">{requiredNote}</div>
@@ -114,9 +113,19 @@ class FormValidator extends HTML_QuickForm
 EOT;
             $renderer->setRequiredNoteTemplate($noteTemplate);
         }
+    }
 
     public function getFormTemplate(): string
     {
+        if (self::LAYOUT_BOX_SEARCH == $this->layout) {
+            return '<form {attributes}>
+                    <div class="form__group--inline p-inputgroup">
+                        {content}
+                        {hidden}
+                    </div>
+                </form>';
+        }
+
         return '<form{attributes}>
                 {content}
                 {hidden}

public/main/inc/lib/pear/HTML/QuickForm/text.php

@@ -134,12 +134,10 @@ class HTML_QuickForm_text extends HTML_QuickForm_input
             return $this->getFrozenHtml();
         }
 
-        if (!isset($this->_attributes['class'])) {
+        $this->_attributes['class'] = ($attributes['class'] ?? '').' p-inputtext p-component ';
-            $this->_attributes['class'] = '';
-        }
 
         if (FormValidator::LAYOUT_HORIZONTAL === $this->getLayout()) {
-            $this->_attributes['class'] .= 'p-component p-inputtext p-filled';
+            $this->_attributes['class'] .= 'p-filled ';
         }
 
         return '<input '.$this->_getAttrString($this->_attributes).' />';

public/main/template/default/admin/index.html.twig

@@ -1,48 +1,60 @@
-{% import '@ChamiloCore/Macros/box.html.twig' as display %}
-
 {% set admin_chamilo_announcements_disable = 'admin_chamilo_announcements_disable'|api_get_configuration_value %}
 
 {% block content %}
     {% autoescape false %}
         {% if not admin_chamilo_announcements_disable %}
-            <div class="alert alert-info alert-dismissible fade d-none" role="alert" style="display: none">
+            <div class="p-message p-component p-message-info" role="alert" style="display: none;">
-                <button type="button" class="close" data-dismiss="alert" aria-label="{{ 'Close'|trans }}">
+                <div class="p-message-wrapper">
-                    <span aria-hidden="true">&times;</span>
+                    <span class="p-message-icon pi pi-info-circle"></span>
-                </button>
+                    <div class="p-message-text" id="chamilo-news-content"></div>
-                <div id="chamilo-news-content"></div>
+                </div>
             </div>
         {% endif %}
 
         <div id="settings" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 ">
             {% for block_item in blocks_admin %}
-                <div id="tabs-{{ loop.index }}" class="" >
+                <section id="tabs-{{ loop.index }}" class="{{ block_item.class }}">
-                    {% set list %}
+                    <div class="p-card p-component">
+                        <div class="p-card-body">
+                            <div class="p-card-title">
+                                <h5>
+                                    {% if block_item.mdi_icon %}
+                                        <span class="mdi mdi-{{ block_item.mdi_icon }}" aria-hidden="true"></span>
+                                    {% endif %}
+                                    {{ block_item.label }}
+                                </h5>
+                            </div>
+
                             {% if block_item.description is defined %}
-                            {{ block_item.description }}
+                                <div class="p-card-subtitle">{{ block_item.description }}</div>
                             {% endif %}
 
-                        {% if block_item.items is not empty %}
+                            <div class="p-card-content flex flex-col gap-5">
-                            <ul class="list-group">
+                                {{ block_item.search_form }}
+
+                                <div class="p-menu p-component p-ripple-disabled">
+                                    <ul class="p-menu-list p-reset" role="menu">
                                         {% for url in block_item.items %}
                                             {% if url.url is not empty %}
-                                        <li class="list-group-item">
+                                                <li class="p-menuitem">
-                                            <a href="{{ url.url }}">
+                                                    <a class="p-menuitem-link" href="{{ url.url }}" role="menuitem">
-                                                {{ url.label }}
+                                                        <span class="p-menuitem-text">{{ url.label }}</span>
                                                     </a>
                                                 </li>
                                             {% endif %}
                                         {% endfor %}
                                     </ul>
-                        {% endif %}
+                                </div>
+
                                 {% if block_item.extra is not null %}
                                     <div>
                                         {{ block_item.extra }}
                                     </div>
                                 {% endif %}
-                    {% endset %}
-
-                    {{ display.panel(block_item.icon ~ block_item.label, block_item.search_form ~  list) }}
                             </div>
+                        </div>
+                    </div>
+                </section>
             {% endfor %}
 
 {#            <div class="row">#}
@@ -72,8 +84,7 @@
                                 if (!response.length) {
                                     return;
                                 }
-                                $('#chamilo-news-content').parent().show();
+                                $('#chamilo-news-content').parents('.p-message').show();
-                                $(this).parent().removeClass('d-none');
                             }
                         );
 

tailwind.config.js

@@ -3,7 +3,7 @@ const colors = require('tailwindcss/colors')
 module.exports = {
   content: [
       './assets/**/*.{js,vue}',
-      './public/main/**/*.php',
+      './public/main/**/*.{php,twig}',
       './src/CoreBudnle/Resources/views/**/*.html.twig',
   ],
   theme: {