diff --git a/assets/css/scss/atoms/_checkbox.scss b/assets/css/scss/atoms/_checkbox.scss index b62a5e8550..66d99706e3 100644 --- a/assets/css/scss/atoms/_checkbox.scss +++ b/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; } } } diff --git a/assets/css/scss/atoms/_dropdown.scss b/assets/css/scss/atoms/_dropdown.scss index 2b355e963a..69d97b9c7e 100644 --- a/assets/css/scss/atoms/_dropdown.scss +++ b/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 { diff --git a/assets/css/scss/atoms/_form.scss b/assets/css/scss/atoms/_form.scss index ecfaeff386..b30be0a805 100644 --- a/assets/css/scss/atoms/_form.scss +++ b/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 { diff --git a/assets/css/scss/atoms/_messages.scss b/assets/css/scss/atoms/_messages.scss index c14b2a69a8..df2f952810 100644 --- a/assets/css/scss/atoms/_messages.scss +++ b/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; } diff --git a/assets/css/scss/index.scss b/assets/css/scss/index.scss index d40c65be1d..1e2afef64c 100755 --- a/assets/css/scss/index.scss +++ b/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"; diff --git a/assets/css/scss/organisms/_cards.scss b/assets/css/scss/organisms/_cards.scss index 78fd632b87..1106feceb2 100644 --- a/assets/css/scss/organisms/_cards.scss +++ b/assets/css/scss/organisms/_cards.scss @@ -27,4 +27,8 @@ .p-card-footer { } + + .p-menu { + @apply border-none py-0 w-full; + } } diff --git a/assets/css/scss/organisms/_sidebar.scss b/assets/css/scss/organisms/_sidebar.scss index 011b740ff0..89d351f5c3 100644 --- a/assets/css/scss/organisms/_sidebar.scss +++ b/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 { diff --git a/assets/vue/components/page/Layout.vue b/assets/vue/components/page/Layout.vue index d966b180fd..d372e964fe 100644 --- a/assets/vue/components/page/Layout.vue +++ b/assets/vue/components/page/Layout.vue @@ -1,9 +1,6 @@ - diff --git a/assets/vue/main.js b/assets/vue/main.js index b45d29dc45..6b32b2a0e6 100644 --- a/assets/vue/main.js +++ b/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"; diff --git a/assets/vue/views/page/Update.vue b/assets/vue/views/page/Update.vue index de8f63c154..1b746bf1fe 100644 --- a/assets/vue/views/page/Update.vue +++ b/assets/vue/views/page/Update.vue @@ -1,6 +1,13 @@ @@ -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', diff --git a/public/main/admin/course_list.php b/public/main/admin/course_list.php index 013544368b..5f320ad979 100644 --- a/public/main/admin/course_list.php +++ b/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', diff --git a/public/main/admin/index.php b/public/main/admin/index.php index db38c52ded..c02823e372 100644 --- a/public/main/admin/index.php +++ b/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', diff --git a/public/main/admin/user_list.php b/public/main/admin/user_list.php index 744843ecf3..1370639467 100644 --- a/public/main/admin/user_list.php +++ b/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, diff --git a/public/main/inc/lib/formvalidator/FormValidator.class.php b/public/main/inc/lib/formvalidator/FormValidator.class.php index fb55ba1fc2..43aab02692 100644 --- a/public/main/inc/lib/formvalidator/FormValidator.class.php +++ b/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,16 +105,27 @@ class FormValidator extends HTML_QuickForm // Set required field template $this->setRequiredNote($required); - $noteTemplate = <<
{requiredNote}
EOT; - $renderer->setRequiredNoteTemplate($noteTemplate); + $renderer->setRequiredNoteTemplate($noteTemplate); + } } public function getFormTemplate(): string { + if (self::LAYOUT_BOX_SEARCH == $this->layout) { + return '
+
+ {content} + {hidden} +
+
'; + } + return ' {content} {hidden} diff --git a/public/main/inc/lib/pear/HTML/QuickForm/text.php b/public/main/inc/lib/pear/HTML/QuickForm/text.php index 8f5389e18d..3e6c9242f8 100644 --- a/public/main/inc/lib/pear/HTML/QuickForm/text.php +++ b/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'] = ''; - } + $this->_attributes['class'] = ($attributes['class'] ?? '').' p-inputtext p-component '; if (FormValidator::LAYOUT_HORIZONTAL === $this->getLayout()) { - $this->_attributes['class'] .= 'p-component p-inputtext p-filled'; + $this->_attributes['class'] .= 'p-filled '; } return '_getAttrString($this->_attributes).' />'; diff --git a/public/main/template/default/admin/index.html.twig b/public/main/template/default/admin/index.html.twig index f11ae2149b..50ade33b9a 100644 --- a/public/main/template/default/admin/index.html.twig +++ b/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 %} - + {% endfor %} {#
#} @@ -72,8 +84,7 @@ if (!response.length) { return; } - $('#chamilo-news-content').parent().show(); - $(this).parent().removeClass('d-none'); + $('#chamilo-news-content').parents('.p-message').show(); } ); diff --git a/tailwind.config.js b/tailwind.config.js index 030e3c5e83..3ebfc03945 100644 --- a/tailwind.config.js +++ b/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: {