Problem/Motivation

Give a look at https://www.drupal.org/project/bootstrap and/or https://www.drupal.org/project/bootstrap4_modal for a way to override Core's modal theming to use Bootstrap's modal.

form_api_example module can be used to test that with the path /examples/form-api-example/modal-form/nojs

TODO:

  • Finish implementation
  • Test with Media library: Ensure submit buttons "Insert selected" for example are properly put into modal footer
  • Media library: handle media selected status (X of Y items selected)
CommentFileSizeAuthor
#28 Capture d’écran du 2024-09-24 12-03-22.png29.96 KBgrimreaper
#27 off-canvas.png53.73 KBmaboy
#10 Screenshot 2023-07-04 at 16-20-12 page Modal Démo UI Suite.png59.74 KBmademo

Issue fork ui_suite_bootstrap-3368697

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

Grimreaper created an issue. See original summary.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Issue summary: View changes

mademo made their first commit to this issue’s fork.

mademo opened merge request !115

mademo’s picture

mademo commented
Assigned: Unassigned » mademo
mademo’s picture

mademo commented
Assigned: mademo » Unassigned
Status: Active » Needs review
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Needs review » Needs work
mademo’s picture

mademo commented
Assigned: Unassigned » mademo
mademo’s picture

mademo commented


Usage :

href="[some-links]"
class="use-ajax"
data-dialog-type="modal"
data-dialog-options="{"dialogClasses":"modal-dialog-centered","dialogShowHeader":false}"
>
Open modal


Dialog options :

dialogClass => string
dialogShowHeader => boolean
dialogShowHeaderTitle => boolean
dialogStatic => boolean
dialogHeadingLevel => number

mademo’s picture

mademo commented
StatusFileSize
new Screenshot 2023-07-04 at 16-20-12 page Modal Démo UI Suite.png59.74 KB
mademo’s picture

mademo commented
Assigned: mademo » Unassigned
Status: Needs work » Needs review
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: Unassigned » grimreaper
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned
Status: Needs review » Needs work
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: Unassigned » grimreaper

  • Grimreaper committed a910ce3b on 5.0.x authored by mademo 
    Issue #3368697 by Grimreaper, mademo: Replace Core modal by Bootstrap...
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned
Status: Needs work » Fixed
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: Unassigned » grimreaper
Status: Fixed » Needs work

The change introduced here prevents Layout Builder to work.

 error occurred during the execution of the Ajax response: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Window'
    --- property 'window' closes the circle
(

I will rollback.

  • Grimreaper committed fa5b80ee on 5.0.x 
    Issue #3368697 by Grimreaper: Rollback change until compatibility with...
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned

Grimreaper opened merge request !188

Grimreaper credited nod_.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Thanks to @nod_, MR 188 created that fixes one JS error. Now it works but, in Layout Builder, the offcanvas is replaced by the modal and also some other JS is not applied due to wrong execution order.

Needs deeper investigation.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Issue summary: View changes

tocab made their first commit to this issue’s fork.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: Replace Core modal by Bootstrap's one » Replace Core modal and offcanvas by Bootstrap's one
Assigned: Unassigned » grimreaper
Status: Needs work » Needs review
maboy’s picture

maboy commented

Hello,

I've tested tocab fix on my side and off canvas modal is now working as expected (cf off-canvas.png)

Regards,

maboy’s picture

maboy commented
StatusFileSize
new off-canvas.png53.73 KB
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
StatusFileSize
new Capture d’écran du 2024-09-24 12-03-22.png29.96 KB

I will split the offcanvas into a dedicated issue because I need to remove/adjust development to override properly form in Layout Builder or not and still ensure it works with Gin LB.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: Replace Core modal and offcanvas by Bootstrap's one » Replace Core modal by Bootstrap's one
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned
Status: Needs review » Fixed

  • grimreaper committed 3ed99bfc on 5.0.x 
    Issue #3368697 by grimreaper, mademo, tocab, maboy, nod_: Replace Core...
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Issue tags: +Barcelona2024

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.