Custom form controls added

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

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.
  */

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

css/components/alerts.css

@@ -11,7 +11,7 @@
   z-index: 9999;
 }
 .toast-wrapper {
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
   z-index: 9999;

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 %}

templates/form/file-managed-file.html.twig

+{#
+/**
+  * @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>

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 }}&nbsp;
-      {% endif %}
-      <input{{ input_attributes.addClass('form-check-input') }}>
-      {% if label_display == 'after' %}
-        &nbsp;{{ 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 %}

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 }}">

templates/layout/region--nowrap.html.twig

@@ -13,5 +13,5 @@
  */
 #}
 {% if content %}
-   {{ content }}
+  {{ content }}
 {% endif %}

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