Added bootstrap modals

resources/assets/js/forms.js

@@ -152,7 +152,7 @@ const DISABLE_ELEMENTS = [
 ready(() => {
   // get all input-radio's and add for each an onChange event listener
   document.querySelectorAll('input[type="radio"]').forEach((radioElement) => {
-    // build selector and get all corrsponding elements for this input-radio
+    // build selector and get all corresponding elements for this input-radio
     const selector = DISABLE_ELEMENTS.map(
       (tagName) => `${tagName}[data-radio-name="${radioElement.name}"][data-radio-value]`
     ).join(',');
@@ -231,6 +231,9 @@ ready(() => {
   });
 });
 
+/**
+ * Init select dropdown choices
+ */
 ready(() => {
   document.querySelectorAll('select').forEach((element) => {
     element.choices = new Choices(element, {
@@ -265,6 +268,13 @@ ready(() => {
   document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((element) => new bootstrap.Tooltip(element));
 });
 
+/**
+ * Init Bootstrap Modals
+ */
+ready(() => {
+  document.querySelectorAll('.modal').forEach((element) => new bootstrap.Modal(element));
+});
+
 /**
  * Show oauth buttons on welcome title click
  */

resources/assets/themes/base.scss

@@ -47,6 +47,7 @@ $form-label-font-weight: $font-weight-bold;
 @import '~bootstrap/scss/close';
 @import '~bootstrap/scss/popover';
 @import '~bootstrap/scss/tooltip';
+@import '~bootstrap/scss/modal';
 
 @import '~bootstrap/scss/helpers';
 

resources/assets/themes/cyborg_variables.scss

@@ -591,4 +591,13 @@ $dl-horizontal-offset: $component-offset-horizontal !default;
 //** Horizontal line color.
 $hr-border: $gray-dark !default;
 
+//== Modal
+//
+//##
+$modal-header-border-color: $hr-border !default;
+$modal-footer-border-color: $hr-border !default;
+
+//== Base
+//
+//##
 @import 'base.scss';

resources/assets/themes/dark.scss

@@ -14,3 +14,7 @@ $invert-color-value: 1 !default;
 input[type='time']::-webkit-calendar-picker-indicator {
   filter: invert($invert-color-value);
 }
+
+.modal .bg-dark .modal-header .btn-close {
+  background-color: $list-group-form-check-input-border-color;
+}

resources/views/pages/design.twig

@@ -200,6 +200,30 @@
             </div>
         </div>
 
+        <div class="row">
+            <div class="col-3 col-md-6 mb-2">
+                <span id="modal" class="ref-id"></span>
+                <h3>Modal <a href="#modal" class="ref-link">{{ m.icon('link') }}</a></h3>
+                <div class="modal position-static d-block" tabindex="-1">
+                    <div class="modal-dialog">
+                        <div class="modal-content {{ m.type_bg_class() }}">
+                            <div class="modal-header">
+                                <h5 class="modal-title">Title</h5>
+                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                            </div>
+                            <div class="modal-body">
+                                <p>{{ lipsum }}</p>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                                <button type="button" class="btn btn-primary">Save</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="row mb-4">
             <div class="col-md-12">
                 <span id="forms" class="ref-id"></span>