chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix search forms + menu styles

Browse Source
pull/4372/head
Angel Fernando Quiroz Campos 3 years ago
parent f3391e3c67
commit 22feec0cae
17 changed files with 125 additions and 74 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      assets/css/scss/atoms/_checkbox.scss
  2. 8
      assets/css/scss/atoms/_dropdown.scss
  3. 15
      assets/css/scss/atoms/_form.scss
  4. 6
      assets/css/scss/atoms/_messages.scss
  5. 1
      assets/css/scss/index.scss
  6. 4
      assets/css/scss/organisms/_cards.scss
  7. 6
      assets/css/scss/organisms/_sidebar.scss
  8. 7
      assets/vue/components/page/Layout.vue
  9. 4
      assets/vue/main.js
  10. 19
      assets/vue/views/page/Update.vue
  11. 2
      public/main/admin/course_list.php
  12. 11
      public/main/admin/index.php
  13. 2
      public/main/admin/user_list.php
  14. 21
      public/main/inc/lib/formvalidator/FormValidator.class.php
  15. 6
      public/main/inc/lib/pear/HTML/QuickForm/text.php
  16. 79
      public/main/template/default/admin/index.html.twig
  17. 2
      tailwind.config.js

6
assets/css/scss/atoms/_checkbox.scss
Unescape View File

@ -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;
}
}
}

8
assets/css/scss/atoms/_dropdown.scss
Unescape View File

@ -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 {

15
assets/css/scss/atoms/_form.scss
Unescape View File

@ -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 {

6
assets/css/scss/atoms/_messages.scss
Unescape View File

@ -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;
}

1
assets/css/scss/index.scss
Unescape View File

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

4
assets/css/scss/organisms/_cards.scss
Unescape View File

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

6
assets/css/scss/organisms/_sidebar.scss
Unescape View File

@ -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 {

7
assets/vue/components/page/Layout.vue
Unescape View File

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

4
assets/vue/main.js
Unescape View File

@ -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";

19
assets/vue/views/page/Update.vue
Unescape View File

@ -1,6 +1,13 @@
<template>
<Toolbar :handle-submit="onSendForm" :handle-reset="resetForm"></Toolbar>
<PageForm ref="updateForm" :values="item" :errors="violations" />
<Toolbar
: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',

2
public/main/admin/course_list.php
Unescape View File

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

11
public/main/admin/index.php
Unescape View File

@ -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',

2
public/main/admin/user_list.php
Unescape View File

@ -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,

21
public/main/inc/lib/formvalidator/FormValidator.class.php
Unescape View File

@ -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 = <<<EOT
if (self::LAYOUT_BOX_SEARCH !== $layout) {
$noteTemplate = <<<EOT
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">{requiredNote}</div>
</div>
EOT;
$renderer->setRequiredNoteTemplate($noteTemplate);
$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}

6
public/main/inc/lib/pear/HTML/QuickForm/text.php
Unescape View File

@ -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 '<input '.$this->_getAttrString($this->_attributes).' />';

79
public/main/template/default/admin/index.html.twig
Unescape View File

@ -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">
<button type="button" class="close" data-dismiss="alert" aria-label="{{ 'Close'|trans }}">
<span aria-hidden="true">&times;</span>
</button>
<div id="chamilo-news-content"></div>
<div class="p-message p-component p-message-info" role="alert" style="display: none;">
<div class="p-message-wrapper">
<span class="p-message-icon pi pi-info-circle"></span>
<div class="p-message-text" 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="" >
{% set list %}
{% if block_item.description is defined %}
{{ block_item.description }}
{% endif %}
{% if block_item.items is not empty %}
<ul class="list-group">
{% for url in block_item.items %}
{% if url.url is not empty %}
<li class="list-group-item">
<a href="{{ url.url }}">
{{ url.label }}
</a>
</li>
<section id="tabs-{{ loop.index }}" class="{{ block_item.class }}">
<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 %}
{% endfor %}
</ul>
{% endif %}
{% if block_item.extra is not null %}
<div>
{{ block_item.extra }}
{{ block_item.label }}
</h5>
</div>
{% endif %}
{% endset %}
{{ display.panel(block_item.icon ~ block_item.label, block_item.search_form ~ list) }}
</div>
{% if block_item.description is defined %}
<div class="p-card-subtitle">{{ block_item.description }}</div>
{% endif %}
<div class="p-card-content flex flex-col gap-5">
{{ 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="p-menuitem">
<a class="p-menuitem-link" href="{{ url.url }}" role="menuitem">
<span class="p-menuitem-text">{{ url.label }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% if block_item.extra is not null %}
<div>
{{ block_item.extra }}
</div>
{% endif %}
</div>
</div>
</div>
</section>
{% endfor %}
{# <div class="row">#}
@ -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();
}
);

2
tailwind.config.js
Unescape View File

@ -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: {

Write Preview
Loading…
Cancel
Save