From 08a3b93102f21ae5b5a767e695490e32e04f335b Mon Sep 17 00:00:00 2001
From: hatuhay <alberto@siles.pe>
Date: Mon, 11 Feb 2019 18:15:02 -0500
Subject: [PATCH] Custom form controls added
---
bootstrap_barrio.libraries.yml | 1 +
bootstrap_barrio.theme | 73 +++++++++++++++-----
config/install/bootstrap_barrio.settings.yml | 7 ++
css/components/alerts.css | 2 +-
templates/field/field.html.twig | 2 +-
templates/form/file-managed-file.html.twig | 24 +++++++
templates/form/form-element.html.twig | 52 +++++++++++---
templates/form/select.html.twig | 9 ++-
templates/layout/region--nowrap.html.twig | 2 +-
theme-settings.php | 62 +++++++++++++++++
10 files changed, 203 insertions(+), 31 deletions(-)
create mode 100644 templates/form/file-managed-file.html.twig
diff --git a/bootstrap_barrio.libraries.yml b/bootstrap_barrio.libraries.yml
index fd87ff5..d6314a2 100644
--- a/bootstrap_barrio.libraries.yml
+++ b/bootstrap_barrio.libraries.yml
@@ -6,6 +6,7 @@ global-styling:
css:
component:
css/components/affix.css: {}
+ css/components/alerts.css: {}
css/components/book.css: {}
css/components/comments.css: {}
css/components/contextual.css: {}
diff --git a/bootstrap_barrio.theme b/bootstrap_barrio.theme
index 7c15355..63b7989 100644
--- a/bootstrap_barrio.theme
+++ b/bootstrap_barrio.theme
@@ -206,23 +206,23 @@ function bootstrap_barrio_preprocess_page(&$variables) {
$variables['navbar_top_attributes']['class'][] = theme_get_setting('bootstrap_barrio_navbar_top_background');
$variables['navbar_attributes']['class'][] = theme_get_setting('bootstrap_barrio_navbar_background');
- // Define navigation toggle size
+ // Define navigation toggle size
switch (theme_get_setting('bootstrap_barrio_navbar_toggle')) {
- case 'navbar-toggleable-lg':
- $variables['navbar_attributes']['class'][] = 'navbar-expand-lg';
- break;
- case 'navbar-toggleable-md':
- $variables['navbar_attributes']['class'][] = 'navbar-expand-md';
- break;
- case 'navbar-toggleable-sm':
- $variables['navbar_attributes']['class'][] = 'navbar-expand-sm';
- break;
- case 'navbar-toggleable-xs':
- $variables['navbar_attributes']['class'][] = 'navbar-expand-xs';
- break;
- default:
- $variables['navbar_attributes']['class'][] = 'navbar-expand-md';
- break;
+ case 'navbar-toggleable-lg':
+ $variables['navbar_attributes']['class'][] = 'navbar-expand-lg';
+ break;
+ case 'navbar-toggleable-md':
+ $variables['navbar_attributes']['class'][] = 'navbar-expand-md';
+ break;
+ case 'navbar-toggleable-sm':
+ $variables['navbar_attributes']['class'][] = 'navbar-expand-sm';
+ break;
+ case 'navbar-toggleable-xs':
+ $variables['navbar_attributes']['class'][] = 'navbar-expand-xs';
+ break;
+ default:
+ $variables['navbar_attributes']['class'][] = 'navbar-expand-md';
+ break;
}
if (theme_get_setting('bootstrap_barrio_sidebar_collapse')) {
@@ -340,6 +340,38 @@ function bootstrap_barrio_preprocess_form_element(&$variables) {
if (isset($variables['element']['#attributes'])) {
$variables['input_attributes'] = new Attribute($variables['element']['#attributes']);
}
+ switch ($variables['type']) {
+ case 'checkbox':
+ $variables['customtype'] = theme_get_setting('bootstrap_barrio_checkbox');
+ break;
+ case 'radio':
+ $variables['customtype'] = theme_get_setting('bootstrap_barrio_radio');
+ break;
+ default:
+ break;
+ }
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for form-element-label.html.twig.
+ */
+function bootstrap_barrio_preprocess_form_element_label(&$variables) {
+ $element = $variables['element'];
+ print_r($element['#type']);
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for select.html.twig.
+ */
+function bootstrap_barrio_preprocess_select(&$variables) {
+ $variables['customtype'] = theme_get_setting('bootstrap_barrio_select');
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for file-managed-file.html.twig.
+ */
+function bootstrap_barrio_preprocess_file_managed_file(&$variables) {
+ $variables['customtype'] = theme_get_setting('bootstrap_barrio_file');
}
/**
@@ -436,6 +468,15 @@ function bootstrap_barrio_theme_suggestions_links_alter(array &$suggestions, arr
}
}
+/**
+ * Implements hook_theme_suggestions_HOOK_alter() for status messages templates.
+ */
+function bootstrap_barrio_theme_suggestions_status_messages_alter(array &$suggestions, array $variables) {
+ if ( theme_get_setting('bootstrap_barrio_messages_widget') == 'toasts' ) {
+ $suggestions[] = 'status_messages__toasts';
+ }
+}
+
/**
* Implements hook_theme_suggestions_HOOK_alter() for form templates.
*/
diff --git a/config/install/bootstrap_barrio.settings.yml b/config/install/bootstrap_barrio.settings.yml
index d76d099..b283e9e 100644
--- a/config/install/bootstrap_barrio.settings.yml
+++ b/config/install/bootstrap_barrio.settings.yml
@@ -35,6 +35,13 @@ bootstrap_barrio_navbar_background: 'bg-primary'
#---------
bootstrap_barrio_messages_widget: 'toasts'
+# Form
+#-----
+bootstrap_barrio_radio: 'custom'
+bootstrap_barrio_checkbox: 'switch'
+bootstrap_barrio_select: 'custom'
+bootstrap_barrio_file: 'custom'
+
# Colors
# --------------
bootstrap_barrio_table_hover: 1
diff --git a/css/components/alerts.css b/css/components/alerts.css
index 970effc..0f7a840 100644
--- a/css/components/alerts.css
+++ b/css/components/alerts.css
@@ -11,7 +11,7 @@
z-index: 9999;
}
.toast-wrapper {
- position: absolute;
+ position: fixed;
top: 0;
right: 0;
z-index: 9999;
diff --git a/templates/field/field.html.twig b/templates/field/field.html.twig
index 11751a9..b735feb 100644
--- a/templates/field/field.html.twig
+++ b/templates/field/field.html.twig
@@ -66,7 +66,7 @@
{% endif %}
{% else %}
<div{{ attributes.addClass(classes) }}>
- <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+ <div{{ title_attributes.addClass(title_classes) }}>{{ label | t}}</div>
{% if multiple %}
<div class='field__items'>
{% endif %}
diff --git a/templates/form/file-managed-file.html.twig b/templates/form/file-managed-file.html.twig
new file mode 100644
index 0000000..b0b4162
--- /dev/null
+++ b/templates/form/file-managed-file.html.twig
@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a file form widget.
+ *
+ * Available variables:
+ * - element: Form element for the file upload.
+ * - attributes: HTML attributes for the containing element.
+ *
+ * @see template_preprocess_file_managed_file()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+ set classes = [
+ 'js-form-managed-file',
+ 'form-managed-file',
+ customtype == 'custom' ? 'custom-file',
+ ]
+%}
+<div{{ attributes.addClass(classes) }}>
+ {{ element }}
+</div>
diff --git a/templates/form/form-element.html.twig b/templates/form/form-element.html.twig
index acf7907..c0e75db 100644
--- a/templates/form/form-element.html.twig
+++ b/templates/form/form-element.html.twig
@@ -45,12 +45,40 @@
*/
#}
+{% if type == 'checkbox' %}
+ {% if customtype == 'custom' %}
+ {% set wrapperclass = "custom-control custom-checkbox" %}
+ {% set labelclass = "custom-control-label" %}
+ {% set inputclass = "custom-control-input" %}
+ {% elseif customtype == 'switch' %}
+ {% set wrapperclass = "custom-control custom-switch" %}
+ {% set labelclass = "custom-control-label" %}
+ {% set inputclass = "custom-control-input" %}
+ {% else %}
+ {% set wrapperclass = "form-check" %}
+ {% set labelclass = "form-check-label" %}
+ {% set inputclass = "form-check-input" %}
+ {% endif %}
+{% endif %}
+
+{% if type == 'radio' %}
+ {% if customtype == 'custom' %}
+ {% set wrapperclass = "custom-control custom-radio" %}
+ {% set labelclass = "custom-control-label" %}
+ {% set inputclass = "custom-control-input" %}
+ {% else %}
+ {% set wrapperclass = "form-check" %}
+ {% set labelclass = "form-check-label" %}
+ {% set inputclass = "form-check-input" %}
+ {% endif %}
+{% endif %}
+
{%
set classes = [
'js-form-item',
'js-form-type-' ~ type|clean_class,
type in ['checkbox', 'radio'] ? type|clean_class : 'form-type-' ~ type|clean_class,
- type in ['checkbox', 'radio'] ? 'form-check',
+ type in ['checkbox', 'radio'] ? wrapperclass,
'js-form-item-' ~ name|clean_class,
'form-item-' ~ name|clean_class,
title_display not in ['after', 'before'] ? 'form-no-label',
@@ -61,7 +89,7 @@
{%
set description_classes = [
'description',
- 'text-muted',
+ 'text-muted',
description_display == 'invisible' ? 'sr-only',
]
%}
@@ -75,15 +103,17 @@
{{ description.content }}
</div>
{% endif %}
- <label class="form-check-label">
- {% if label_display == 'before' %}
- {{ label }}
- {% endif %}
- <input{{ input_attributes.addClass('form-check-input') }}>
- {% if label_display == 'after' %}
- {{ label }}
- {% endif %}
- </label>
+ {% if label_display == 'before' %}
+ <label {{ attributes.addClass(labelclass).setAttribute('for', input_attributes.id) }}>
+ {{ input_title }}
+ </label>
+ {% endif %}
+ <input{{ input_attributes.addClass(inputclass) }}>
+ {% if label_display == 'after' %}
+ <label {{ attributes.addClass(labelclass).setAttribute('for', input_attributes.id) }}>
+ {{ input_title }}
+ </label>
+ {% endif %}
{% if suffix is not empty %}
<span class="field-suffix">{{ suffix }}</span>
{% endif %}
diff --git a/templates/form/select.html.twig b/templates/form/select.html.twig
index d0616c7..1a09c95 100644
--- a/templates/form/select.html.twig
+++ b/templates/form/select.html.twig
@@ -10,8 +10,15 @@
* @see template_preprocess_select()
*/
#}
+{%
+ set classes = [
+ customtype == 'standard' ? 'form-control',
+ customtype == 'custom' ? 'custom-select',
+ ]
+%}
+
{% spaceless %}
- <select{{ attributes.addClass("form-control") }}>
+ <select{{ attributes.addClass(classes) }}>
{% for option in options %}
{% if option.type == 'optgroup' %}
<optgroup label="{{ option.label }}">
diff --git a/templates/layout/region--nowrap.html.twig b/templates/layout/region--nowrap.html.twig
index 0d233fb..c6554b9 100644
--- a/templates/layout/region--nowrap.html.twig
+++ b/templates/layout/region--nowrap.html.twig
@@ -13,5 +13,5 @@
*/
#}
{% if content %}
- {{ content }}
+ {{ content }}
{% endif %}
diff --git a/theme-settings.php b/theme-settings.php
index 12548ac..e7bb991 100644
--- a/theme-settings.php
+++ b/theme-settings.php
@@ -361,6 +361,68 @@ function bootstrap_barrio_form_system_theme_settings_alter(&$form, FormStateInte
'#empty_option' => t('Default'),
];
+ // Buttons.
+ $form['components']['alerts'] = [
+ '#type' => 'details',
+ '#title' => t('Messages'),
+ '#collapsible' => TRUE,
+ '#collapsed' => TRUE,
+ ];
+ $form['components']['alerts']['bootstrap_barrio_messages_widget'] = [
+ '#type' => 'select',
+ '#title' => t('Messages Widget'),
+ '#default_value' => theme_get_setting('bootstrap_barrio_messages_widget'),
+ '#options' => [
+ 'alerts' => t('Alerts'),
+ 'toasts' => t('Toasts'),
+ ]
+ ];
+
+ // Form
+ $form['components']['form'] = [
+ '#type' => 'details',
+ '#title' => t('Form'),
+ '#collapsible' => TRUE,
+ '#collapsed' => TRUE,
+ ];
+ $form['components']['form']['bootstrap_barrio_radio'] = [
+ '#type' => 'select',
+ '#title' => t('Radio Widget'),
+ '#default_value' => theme_get_setting('bootstrap_barrio_radio'),
+ '#options' => [
+ 'standard' => t('Standard'),
+ 'custom' => t('Custom'),
+ ]
+ ];
+ $form['components']['form']['bootstrap_barrio_checkbox'] = [
+ '#type' => 'select',
+ '#title' => t('Checkbox Widget'),
+ '#default_value' => theme_get_setting('bootstrap_barrio_checkbox'),
+ '#options' => [
+ 'standard' => t('Standard'),
+ 'custom' => t('Custom'),
+ 'switch' => t('Switch'),
+ ]
+ ];
+ $form['components']['form']['bootstrap_barrio_select'] = [
+ '#type' => 'select',
+ '#title' => t('Select Widget'),
+ '#default_value' => theme_get_setting('bootstrap_barrio_select'),
+ '#options' => [
+ 'standard' => t('Standard'),
+ 'custom' => t('Custom'),
+ ]
+ ];
+ $form['components']['form']['bootstrap_barrio_file'] = [
+ '#type' => 'select',
+ '#title' => t('File Widget'),
+ '#default_value' => theme_get_setting('bootstrap_barrio_file'),
+ '#options' => [
+ 'standard' => t('Standard'),
+ 'custom' => t('Custom'),
+ ]
+ ];
+
// Affix
$form['affix'] = [
'#type' => 'details',
--
GitLab